【1.カテゴリ新規登録編】Ruby on Rails + ReactでSNSアプリを作る

rails g model category

1class CreateCategories < ActiveRecord::Migration[6.1]
2  def change
3    create_table :categories do |t|
4      t.string :name, null: false
5      t.timestamps
6    end
7  end
8end

rails db:migrate

1class Category < ApplicationRecord
2  validates :name, presence: :true
3end

rails c

Category.create(name: "test1")

Category.find_by(name: "test1")

Category.find_by(name: "test1").delete

rails g controller categories

1class Api::V1::CategoriesController < ApplicationController
2  def create
3    category = Category.new(category_params)
4    if category.save
5      render json: category, status: :created
6    else
7      render json: category.errors, status: :unprocessable_entity
8    end
9  end
10
11  private
12
13  def category_params
14    params.require(:category).permit(:name)
15  end
16end
17

1Rails.application.routes.draw do
2  namespace :api do
3    namespace :v1 do
4      resources :categories, only: [:create]
5    end
6  end  
7end
8

rails s

curl -X POST -H "Content-Type: application/json" -d '{"category": {"name": "test2"}}' http://localhost:3010/api/v1/catogires

bundle install

1Rails.application.config.middleware.insert_before 0, Rack::Cors do
2  allow do
3    origins 'http://localhost:3000'
4
5    resource '*',
6        headers: :any,
7        expose: ["access-token", "uid", "client"],
8        methods: [:get, :post, :put, :patch, :delete, :options, :head],
9        credentials: true
10  end
11end

yarn add axios

yarn add react-router-dom

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import './index.css';
4import App from './App';
5import reportWebVitals from './reportWebVitals';
6import { ChakraProvider } from "@chakra-ui/react";
7
8const root = ReactDOM.createRoot(document.getElementById('root'));
9root.render(
10  <React.StrictMode>
11    <ChakraProvider>
12      <App />
13    </ChakraProvider>
14  </React.StrictMode>
15);
16
17// If you want to start measuring performance in your app, pass a function
18// to log results (for example: reportWebVitals(console.log))
19// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
20reportWebVitals();
21

1import { BrowserRouter, Routes, Route } from "react-router-dom";
2import NewCategory from "./component/page/NewCategory";
3
4function App() {
5  return (
6    <BrowserRouter>
7      <Routes>
8        <Route path={`/category/new`} element={<NewCategory />} />
9      </Routes>
10    </BrowserRouter>
11  );
12}
13
14export default App;
15

1export default function NewCategory() {
2 return (
3  "NewCategory"
4  );
5}

yarn start

1import React, { useState } from 'react';
2import {
3  Box,
4  Input,
5  Button,
6  Center,
7} from "@chakra-ui/react";
8import { useToast } from "@chakra-ui/react";
9import axios from 'axios';
10
11export default function NewCategory() {
12  const [category, setCategory] = useState('');
13  const [isLoading, setIsLoading] = useState(false);
14  const toast = useToast();
15
16  async function fetchCreateCategory() {
17    setIsLoading(true);
18
19    try {
20      if (!category) {
21        toast({
22          title: 'カテゴリを入力して下さい。',
23          status: 'error',
24          isClosable: true,
25        });
26
27        return;
28      }
29
30      const res = await axios.post("http://localhost:3010/api/v1/categories", {
31        category: {
32          name: category,
33        },
34      });
35
36      if (!res.status || (res.status < 200 && res.status >= 300)) {
37        throw new Error(`HTTP error! status: ${res.status}`);
38      }
39
40      toast({
41        title: 'カテゴリを登録しました。',
42        status: 'success',
43        isClosable: true,
44      });
45    }
46    catch (error) {
47      console.error('Error creating credos:', error);
48      toast({
49        title: 'カテゴリの登録に失敗しました。',
50        status: 'error',
51        isClosable: true,
52      });
53    }
54    finally {
55      setIsLoading(false);
56      setCategory('');
57    }
58  }
59
60  return (
61    <Center>
62      <Box w={["100%", "90%", "80%", "70%", "60%"]} mt={["50px", "100px", "150px", "200px"]}>
63          <Input
64            value={category}
65            onChange={(e) => setCategory(e.target.value)}
66            placeholder="追加したいカテゴリを入力" />
67        <Center>
68          <Button mt="6px" onClick={fetchCreateCategory} isLoading={isLoading}>登録</Button>
69        </Center>
70      </Box>
71    </Center>
72  );
73}

rails s