feat(project):ユーザー機能

backend/main.go

@@ -21,11 +21,20 @@ type Handler struct {
 }
 
 type Post struct {
-	ID        string `db:"id" json:"id"`
-	Body      string `db:"body" json:"body"`
+	ID        string    `db:"id" json:"id"`
+	Body      string    `db:"body" json:"body"`
 	CreatedAt time.Time `db:"created_at" json:"created_at"`
 }
 
+type User struct {
+	ID              string `db:"id" json:"id"`
+	Name            string `db:"username" json:"name"`
+	CreatedAt       string `db:"created_at" json:"created_at"`
+	UpdatedAt       string `db:"updated_at" json:"updated_at"`
+	ProfileImageURL string `db:"profile_image_url" json:"profile_image_url"`
+	Bio             string `db:"bio" json:"bio"`
+}
+
 var (
 	SQL_PATH   = "./sql"
 	IMAGES_DIR = "./public/images"
@@ -104,6 +113,8 @@ func main() {
 		e.Logger.Info("health check")
 		return c.JSON(200, "ok")
 	})
+	api.GET("/users", h.GetUsers)
+	api.POST("/users/new", h.CreateUser)
 	e.Logger.Fatal(e.Start(":8000"))
 }
 
@@ -199,3 +210,36 @@ func (h *Handler) CreatePost(c echo.Context) error {
 
 	return c.JSON(200, post)
 }
+
+func (h *Handler) GetUsers(c echo.Context) error {
+	users := []User{}
+	err := h.DB.Select(&users, "SELECT * FROM users")
+	if err != nil {
+		h.Logger.Error(err)
+		return c.JSON(500, err)
+	}
+	return c.JSON(200, users)
+}
+
+func (h *Handler) CreateUser(c echo.Context) error {
+	id, err := uuid.NewRandom()
+	if err != nil {
+		h.Logger.Error(err)
+		return c.JSON(500, err)
+	}
+	user := new(User)
+	if err := c.Bind(user); err != nil {
+		h.Logger.Error(err)
+		return c.JSON(500, err)
+	}
+	user.ID = id.String()
+	user.CreatedAt = time.Now().Format("2006-01-02 15:04:05")
+	user.UpdatedAt = time.Now().Format("2006-01-02 15:04:05")
+
+	_, err = h.DB.Exec("INSERT INTO users (id, username, created_at, updated_at, profile_image_url, bio) VALUES (?, ?, ?, ?, ?, ?)", user.ID, user.Name, user.CreatedAt, user.UpdatedAt, user.ProfileImageURL, user.Bio)
+	if err != nil {
+		h.Logger.Error(err)
+		return c.JSON(500, err)
+	}
+	return c.JSON(200, user)
+}

backend/sql/2_create_user_table.sql

@@ -0,0 +1,9 @@
+CREATE TABLE IF NOT EXISTS `users` (
+  `id` varchar(36) NOT NULL COMMENT 'ユーザーID',
+  `username` varchar(255) NOT NULL COMMENT 'ユーザー名',
+  `created_at` datetime NOT NULL COMMENT '登録日時',
+  `updated_at` datetime NOT NULL COMMENT '更新日時',
+  `profile_image_url` varchar(255) DEFAULT NULL COMMENT 'プロフィール画像のURL',
+  `bio` varchar(1024) DEFAULT NULL COMMENT '自己紹介文',
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

frontend/package.json

@@ -17,7 +17,7 @@
     "@mui/material": "^5.14.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.17.0"
+    "react-router-dom": "^6.19.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

frontend/src/App.jsx

@@ -1,10 +1,11 @@
 import { CssBaseline } from "@mui/material";
 import { GlobalStyles } from "@mui/material";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes,Link } from "react-router-dom";
 import { Header } from "./components/Header";
 import { ColorModeProvider } from "./components/theme/ColorModeProvider.jsx";
 import { ToggleTheme } from "./components/theme/ToggleTheme.jsx";
 import { Home } from "./pages/Home.jsx";
+import { Registration } from "./pages/Registration.jsx";
 
 function App() {
   return (
@@ -22,7 +23,8 @@ function App() {
         />
         <Router>
           <Routes>
-            <Route path="/" element={<Home />}></Route>
+            <Route exact path="/" element={<Home />}></Route>
+            <Route  path="/registration" element={<Registration />}></Route>
           </Routes>
         </Router>
       </ColorModeProvider>

frontend/src/components/Form.jsx

@@ -1,16 +1,16 @@
 import { Box, Button, FormLabel, TextField } from "@mui/material";
 import { useState } from "react";
 
-export const Form = ({ onSubmitted }) => {
+export const Form = ({ onSubmitted ,selectedUser}) => {
   const [body, setBody] = useState("");
   const [isSending, setIsSending] = useState(false);
 
   const sendPost = async (e) => {
     e.preventDefault();
     setIsSending(true);
-    const res = await fetch("/api/posts", {
+    const res = await fetch(`/api/posts`, {
       method: "POST",
-      body: JSON.stringify({ body }),
+      body: JSON.stringify({ body,user_id:selectedUser }),
       headers: {
         "Content-Type": "application/json",
       },

frontend/src/components/UserSelectBox.jsx

@@ -0,0 +1,28 @@
+import { 
+    FormControl,
+    InputLabel,
+    Select,
+    MenuItem,
+} from '@mui/material';
+
+
+export  const UserSelectBox = ({users,selectedUser, handleChange}) =>{
+  return(
+  <>
+  <FormControl fullWidth>
+    <InputLabel id="user">User</InputLabel>
+    <Select
+      labelId="user"
+      id="user"
+      value={selectedUser}
+      label="User"
+      onChange={handleChange}
+    >
+    {users.map((user) => (
+      <MenuItem value = {user.id} key = {user.id}>{user.name}</MenuItem>
+    ))}
+    </Select>
+  </FormControl>
+  </>
+  )
+}

frontend/src/pages/Home.jsx

@@ -2,10 +2,14 @@ import { Container } from "@mui/material";
 import { useEffect, useState } from "react";
 import { Form } from "../components/Form";
 import { Timeline } from "../components/Timeline";
+import { UserSelectBox } from "../components/UserSelectBox";
+import { Link } from "react-router-dom";
 
 export const Home = () => {
   const [posts, setPosts] = useState([]);
+  const [users, setUsers] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [selectedUser, setSelectedUser] = useState('');//現在選択されているユーザーidを保持する変数
   const onSubmitted = (post) => {
     setPosts([post, ...posts]);
   };
@@ -22,8 +26,23 @@ export const Home = () => {
     setIsLoading(false);
   };
 
+  const fetchUsers = async () =>{
+    const res = await fetch("/api/users");
+    if(res.ok){
+      const data = await res.json();
+      setUsers(data);
+    } else{
+      console.error(data);
+    }
+  }
+  //セレクトボックスの人が変更されたときに呼ばれるハンドラ関数
+  const handleChange = (event) => {
+    setSelectedUser(event.target.value);
+  };
+
   useEffect(() => {
     fetchPosts();
+    fetchUsers();
   }, []);
 
   return (
@@ -33,8 +52,24 @@ export const Home = () => {
         py: 3,
       }}
     >
-      <Form onSubmitted={onSubmitted} />
-      <Timeline posts={posts} isLoading={isLoading} fetchPosts={fetchPosts} />
+      <div>
+        <Link to={"/registration"}>ユーザー登録</Link>
+      </div>
+      <UserSelectBox
+        users={users}
+        selectedUser={selectedUser}
+        handleChange={handleChange}
+      />
+      <Form 
+        onSubmitted={onSubmitted} 
+        selectedUser={selectedUser}
+      />
+      <Timeline 
+        posts={posts} 
+        isLoading={isLoading} 
+        fetchPosts={fetchPosts} 
+      />
+
     </Container>
   );
 };