Next.jsとRailsをつかってToDoアプリを作ってみる

FROM node:14-alpine
WORKDIR /usr/src/app

FROM node:16
WORKDIR /usr/src/app

docker-compose run --rm api bundle exec rails g model Todo title:string description:text is_completed:boolean user_id:integer deleted_at:datatime

docker-compose run --rm api bundle exec rails db:environment:set RAILS_ENV=development

gem 'faker'

docker-compose run --rm api bundle exec bundle install

Could not find gem 'faker' in any of the gem sources listed in your Gemfile.

docker-compose build
↑これを実行後
docker-compose run --rm api bundle exec bundle install

8.times {
  User.create!(
    name: Faker::JapaneseMedia::StudioGhibli.unique.character,
    email: Faker::Internet.unique.email,
    password: Faker::Number.hexadecimal(digits: 15)
  )
}

8.times {
  Todo.create!(
    title: Faker::Lorem.sentence,
    deadline: Faker::Date.in_date_period,
    description: Faker::Lorem.sentence
  )
}

docker-compose run --rm api bundle exec rails g scaffold post title:string

docker-compose run --rm api bundle exec rails g model Todo title:string description:text …

docker-compose run --rm api bundle exec rails g controller todos
と
docker-compose run --rm api bundle exec rails g controller users

class TodosController < ApplicationController
  # GET /todos
  def index
    @todos = Todo.all

    render json: @todos
  end
end

Rails.application.routes.draw do
  resources :todos
end

Rails.application.routes.draw do
  scope 'api' do
    resources :todos
    resources :users
  end
end

gem 'bcrypt', '~> 3.1.7'
gem 'paranoia'

const MyComponent: React.FC = () => {
  const items = [1, 2, 3, 4, 5];

  return (
    <div>
      {items.map((item) => {
        const doubledItem = item * 2;
        return <p key={item}>{doubledItem}</p>;
      })}
    </div>
  );
};

export const getStaticPaths: GetStaticPaths = async () => {
    const response = await axios
        .get("http://api:3000/api/todos")
        .then((res) => {
            return res.data;
        })
        .catch((error) => {
            console.error(error);
        });
    const paths = await response.map((todo: Todo) => ({
        params: { id: todo.id.toString() },
    }));
    return { paths, fallback: false };
};

export const getStaticProps: GetStaticProps = async (context) => {
    const id = context.params?.id;
    const data = await axios
        .get(`http://api:3000/api/todos/${id}`)
        .then((res: AxiosResponse): object => {
            return res.data;
        })
        .catch((error) => {
            console.error(error);
        });

    return {
        props: { id, data },
    };
};

  # GET/todos complete_only
  def completeTodos
    @todos = Todo.where(is_completed: true)

    render json: @todos
  end

  # GET/todos delete_only
  def deleteTodos
    @todos = Todo.only_deleted

    render json: @todos
  end

    const onClickCompleteTodo = async (id?: number) => {
        const isComplete = {
            todo: {
                is_completed: true,
            },
        };

        await axios
            .put(`http://api:3000/api/todos/${id}`,isComplete)
            .then((res: AxiosResponse) => {
                console.log(res.data);
            })
            .catch((error) => {
                console.error(error);
            });
    };

gem 'rack-cors'
↑もともとコメントアウトの状態で記載されていたのでコメントアウトを解除した

docker-compose build
docker-compose run --rm api bundle exec bundle install
からのサーバー再起動

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:8000'

    resource '*',
             headers: :any,
             methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end
↑これもコメントアウトですでに記載されていたものをコメントアウト解除した

  # DELETE REVERSE /todos/1
  def destroyReverse
    @todo = Todo.restore(params[:id])
  end

get 'delete-reverse/', to: 'todos#destroyReverse'

get 'delete-reverse/:id', to: 'todos#destroyReverse'

 before_action :set_todo, only: [:destroyReverse]

  # DELETE REVERSE /todos/1
  def destroyReverse
    @todo.restore
  end

private

  def set_todo
    @todo = Todo.find(params[:id])
  end

  def set_todo
    @todo = Todo.find(params[:id])
  end

  def destroyReverse
    @todo = Todo.restore(params[:id])
    @todo = Todo.find(params[:id])
    @todo.update(todo_params)
    render json: @todo
  end

@todo = Todo.restore(params[:id])
@todo = Todo.find(params[:id])

put 'delete-reverse/:id', to: 'todos#destroyReverse'

    const onClickDestroyReverse = async (id?: number) => {
        const isComplete = {
            todo: {
                is_completed: false,
            },
        };
        await axios
            .put(`http://localhost:3000/api/delete-reverse/${id}`, isComplete)
            .then((res: AxiosResponse) => {
                console.log(res.data);
            })
            .catch((error) => {
                console.error(error);
            })
            .finally(() => {
                router.reload();
            });
    };

    const onClickDestroyReverseToComplete = async (id?: number) => {
        const isComplete = {
            todo: {
                is_completed: true,
            },
        };
        await axios
            .put(`http://localhost:3000/api/delete-reverse/${id}`, isComplete)
            .then((res: AxiosResponse) => {
                console.log(res.data);
            })
            .catch((error) => {
                console.error(error);
            })
            .finally(() => {
                router.reload();
            });
    };

    const onClickDestroyReverse = async (id?: number) => {
        const isComplete = {
            todo: {
                is_completed: false,
            },
        };

        deleteReverseSend(isComplete, id);
    };

    const onClickDestroyReverseToComplete = async (id?: number) => {
        const isComplete = {
            todo: {
                is_completed: true,
            },
        };
        deleteReverseSend(isComplete, id);
    };

    const deleteReverseSend = async (sendData: object, id?: number) => {
        await axios
            .put(`http://localhost:3000/api/delete-reverse/${id}`, sendData)
            .then((res: AxiosResponse) => {
                console.log(res.data);
            })
            .catch((error) => {
                console.error(error);
            })
            .finally(() => {
                router.reload();
            });
    };

    const deleteReverseSend = async (sendData: object, id?: number) => {
        await axios
            .put(`http://localhost:3000/api/delete-reverse/${id}`, sendData)
            .then((res: AxiosResponse) => {
                console.log(res.data);
            })
            .catch((error) => {
                console.error(error);
            })
            .finally(() => {
                router.reload();
            });
    };

    const deleteReverseSend = async (sendData: object, id?: number) => {
      try{
        await axios.put(`http://localhost:3000/api/delete-reverse/${id}`, sendData)
      } catch (error) {
        console.error(error);
      } finally {
        router.reload();
      }
  };

    const {
        handleSubmit,
        control,
        formState: { errors },
    } = useForm<Todo>();

<InputWithLabel
　labelText="ToDoタイトル"
　htmlfor="title"
　type="text"
　size="large"
　control={control}
　name={"title"}
/>

    const { field } = useController({
        name,
        control,
    });

<Input
　size={size}
　disabled={disabled}
　id={htmlfor}
　type={type}
　defaultValue={defaultValue}
　inputRef={field.ref}
　onChange={field.onChange}
/>

<input
	type={type}
	id={id}
	className={classNames(styles.default, styles[size])}
	disabled={disabled}
	defaultValue={defaultValue}
	onChange={(e) => onChange(e.target.value)}
	ref={inputRef}
/>

 const inputRef = useRef(null)

return 
 <input ref={inputRef} className='thisInput' />

export type Control<TFieldValues extends FieldValues = FieldValues, TContext = any> = {
    _subjects: Subjects<TFieldValues>;
    _removeUnmounted: Noop;
    _names: Names;
    _state: {
        mount: boolean;
        action: boolean;
        watch: boolean;
    };
    _reset: UseFormReset<TFieldValues>;
    _options: UseFormProps<TFieldValues, TContext>;
    _getDirty: GetIsDirty;
    _resetDefaultValues: Noop;
    _formState: FormState<TFieldValues>;
    _updateValid: (shouldUpdateValid?: boolean) => void;
    _updateFormState: (formState: Partial<FormState<TFieldValues>>) => void;
    _fields: FieldRefs;
    _formValues: FieldValues;
    _proxyFormState: ReadFormState;
    _defaultValues: Partial<DefaultValues<TFieldValues>>;
    _getWatch: WatchInternal<TFieldValues>;
    _updateFieldArray: BatchFieldArrayUpdate;
    _getFieldArray: <TFieldArrayValues>(name: InternalFieldName) => Partial<TFieldArrayValues>[];
    _executeSchema: (names: InternalFieldName[]) => Promise<{
        errors: FieldErrors;
    }>;
    register: UseFormRegister<TFieldValues>;
    unregister: UseFormUnregister<TFieldValues>;
    getFieldState: UseFormGetFieldState<TFieldValues>;
};