バグの修正、スタイルの修正

#79
lvncer · Dec 14, 2024 · 47068d8 · 47068d8
1 parent 9c79309
commit 47068d8
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 157 deletions.
diff --git a/src/components/layouts/allUsers/AllUsers.tsx b/src/components/layouts/allUsers/AllUsers.tsx
@@ -7,7 +7,7 @@ import * as Feedback from "@/components/shared/feedback/index";
 import useAllUsers from "@/hooks/useAllUsers";
 import { User } from "@/types/user";
 import PersonIcon from "@mui/icons-material/Person";
-import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
+import RocketIcon from "@mui/icons-material/Rocket";
 
 const AllUsersComponent: React.FC = () => {
   const { users, loading, error } = useAllUsers();
@@ -22,7 +22,7 @@ const AllUsersComponent: React.FC = () => {
         <div className="w-full flex justify-center p-4">
           <div className="w-96">
             <h4 className="text-xl font-bold mb-4 text-center">全ユーザー</h4>
-            <div className="space-y-2">
+            <div className="space-y-4">
               {users.map((user: User) => (
                 <Link
                   href={{
@@ -33,17 +33,7 @@ const AllUsersComponent: React.FC = () => {
                   className="flex items-center p-2 rounded hover:bg-gray-300 transition duration-200"
                 >
                   <div className="flex items-center">
-                    {user.profilePicture ? (
-                      <RocketLaunchIcon
-                        fontSize="medium"
-                        className="w-8 h-8 rounded-full"
-                      />
-                    ) : (
-                      <PersonIcon
-                        fontSize="medium"
-                        className="w-8 h-8 rounded-full"
-                      />
-                    )}
+                    {user.profilePicture ? <RocketIcon /> : <PersonIcon />}
                     <span className="ml-2 text-lg">{user.username}</span>
                   </div>
                 </Link>

diff --git a/src/components/layouts/header/Header.tsx b/src/components/layouts/header/Header.tsx
@@ -18,7 +18,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
+import RocketIcon from "@mui/icons-material/Rocket";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { useAuth } from "@/hooks/useAuth";
 
@@ -43,7 +43,7 @@ const Topbar: React.FC = () => {
 
   return (
     <div className="h-16 w-full flex items-center sticky top-0 z-20 backdrop-blur border-b border-gray-300">
-      <SidebarTrigger className="ml-5"/>
+      <SidebarTrigger className="ml-5" />
 
       <div className="flex-1 flex items-center justify-start space-x-4 ml-5 xl:ml-60">
         <Link href="/home" className="ml-2 font-bold text-2xl no-underline">
@@ -76,14 +76,7 @@ const Topbar: React.FC = () => {
 
         <DropdownMenu>
           <DropdownMenuTrigger aria-label="user-icon">
-            {user && user.profilePicture ? (
-              <RocketLaunchIcon
-                fontSize="medium"
-                className="w-8 h-8 no-underline"
-              />
-            ) : (
-              <PersonIcon fontSize="medium" className="w-8 h-8 no-underline" />
-            )}
+            {user && user.profilePicture ? <RocketIcon /> : <PersonIcon />}
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuLabel>My Account</DropdownMenuLabel>
@@ -99,7 +92,7 @@ const Topbar: React.FC = () => {
                     }}
                     className="no-underline"
                   >
-                    <PersonOutlineIcon fontSize="medium" />
+                    <PersonOutlineIcon />
                     Profile
                   </Link>
                 </DropdownMenuItem>

diff --git a/src/components/layouts/login/LoginForm.tsx b/src/components/layouts/login/LoginForm.tsx
@@ -1,24 +1,16 @@
 "use client";
 
 import React, { useEffect, useRef } from "react";
-// import { useRouter } from "next/navigation";
 import { loginCall } from "@/app/actionCalls";
-// import {
-//   loginStart,
-//   loginSuccess,
-//   loginError,
-// } from "@/features/auth/authSlice";
 import { useAppDispatch } from "@/hooks/useDispatch";
 import { User } from "@/types/user";
 import { useAuth } from "@/hooks/useAuth";
 
 const LoginForm: React.FC = () => {
   const emailRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);
-
   const dispatch = useAppDispatch();
   const { login } = useAuth();
-  // const router = useRouter();
 
   useEffect(() => {
     // 自動でメールフィールドにフォーカスを当てる
@@ -34,17 +26,11 @@ const LoginForm: React.FC = () => {
   };
 
   const onSubmit = async (email: string, password: string): Promise<void> => {
-    // dispatch(loginStart());
-
     try {
       const userData: User = await loginCall({ email, password, dispatch });
       login(userData);
-      // dispatch(loginSuccess(userData));
-      // router.push("/home");
     } catch (err) {
-      // dispatch(loginError("ログインに失敗しました"));
       alert("エラーが発生しました。");
-      // router.refresh();
     }
   };
 

diff --git a/src/components/layouts/postEdit/PostEdit.tsx b/src/components/layouts/postEdit/PostEdit.tsx
@@ -5,6 +5,7 @@ import LoadingSpinner from "@/components/elements/loadingSpinner/LoadingSpinner"
 import usePost from "@/hooks/usePost";
 import * as Feedback from "@/components/shared/feedback/index";
 import { useAuth } from "@/hooks/useAuth";
+import { Button } from "@/components/ui/button";
 
 interface PostEditProps {
   postId: string;
@@ -33,7 +34,7 @@ const PostEditComponent = ({ postId }: PostEditProps): JSX.Element | null => {
   }
 
   return (
-    <div className="flex justify-center p-3 border-x-2 rounded-md max-w-xl min-h-screen mx-auto">
+    <div className="flex justify-center p-3 max-w-xl min-h-screen mx-auto">
       <div className="p-6 w-full">
         <h2 className="text-2xl font-bold mb-4">投稿設定</h2>
         <div className="space-y-2">
@@ -55,18 +56,20 @@ const PostEditComponent = ({ postId }: PostEditProps): JSX.Element | null => {
             />
           </div>
           <div className="flex space-x-4">
-            <button
+            <Button
               onClick={() => handleEdit(user?._id || "")}
-              className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+              variant="outline"
+              className="hover:bg-gray-300"
             >
-              編集
-            </button>
-            <button
+              Edit
+            </Button>
+            <Button
               onClick={() => handleDelete(user?._id || "")}
-              className="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
+              variant="outline"
+              className="bg-red-500 text-white rounded-md hover:bg-red-600"
             >
-              投稿削除
-            </button>
+              Delete
+            </Button>
           </div>
         </div>
       </div>

diff --git a/src/components/layouts/profile/Profile.tsx b/src/components/layouts/profile/Profile.tsx
@@ -7,7 +7,7 @@ import { toast } from "react-toastify";
 import { USERS_ENDPOINT } from "@/constants/api";
 import { useUser } from "@/hooks/useUser";
 import PersonIcon from "@mui/icons-material/Person";
-import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
+import RocketIcon from "@mui/icons-material/Rocket";
 import { useAuth } from "@/hooks/useAuth";
 import { User } from "@/types/user";
 
@@ -80,11 +80,13 @@ const ProfileComponent: React.FC<ProfileComponentProps> = ({ username }) => {
   return (
     <div className="p-4 mt-2 mb-2 border-2 shadow-md rounded-lg max-w-xl mx-auto">
       <div className="flex items-center space-x-4">
-        {showingUser.profilePicture ? (
-          <RocketLaunchIcon fontSize="large" className="ml-2" />
-        ) : (
-          <PersonIcon fontSize="large" className="ml-2" />
-        )}
+        <div className="ml-2">
+          {showingUser.profilePicture ? (
+            <RocketIcon fontSize="large" />
+          ) : (
+            <PersonIcon fontSize="large" />
+          )}
+        </div>
         <div className="text-xl font-semibold">
           {showingUser.username}{" "}
           {username === user?.username && (

diff --git a/src/components/layouts/setting/Setting.tsx b/src/components/layouts/setting/Setting.tsx
@@ -5,6 +5,8 @@ import { useRouter } from "next/navigation";
 import axios from "axios";
 import { USERS_ENDPOINT } from "@/constants/api";
 import { useAuth } from "@/hooks/useAuth";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
 
 const SettingComponent: React.FC = () => {
   const { user, logoutUser } = useAuth();
@@ -49,10 +51,10 @@ const SettingComponent: React.FC = () => {
   };
 
   return (
-    <div className="w-full flex justify-center p-3 border-x-2 rounded-lg shadow-md max-w-xl min-h-screen mx-auto">
+    <div className="w-full flex justify-center p-3 max-w-xl min-h-screen mx-auto">
       <div className="p-6 w-96">
         <h2 className="text-2xl font-bold mb-4">ユーザー設定</h2>
-        <div className="space-y-2">
+        <div className="space-y-3">
           <div className="text-lg font-medium">
             ユーザー名：{user?.username}
           </div>
@@ -64,20 +66,32 @@ const SettingComponent: React.FC = () => {
             rows={2}
           />
           <div className="flex space-x-4">
-            <button
+            <Button
               onClick={handleEdit}
-              className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+              variant="outline"
+              className="hover:bg-gray-300"
             >
-              編集
-            </button>
-            <button
+              Edit
+            </Button>
+            {/* TODO: アカウント削除時にもう一度メールアドレスとパスワードで認証すること。 */}
+            {/* <Button
               onClick={handleDelete}
-              className="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
+              variant="outline"
+              className="text-white bg-red-500 hover:bg-red-600"
             >
-              ユーザ削除
-            </button>
+              Delete
+            </Button> */}
           </div>
         </div>
+        <div className="mt-5">
+          <Link
+            href="#"
+            onClick={() => alert("現在、アカウントの削除はできません。")}
+            className="hover:underline"
+          >
+            アカウント削除はこちらから
+          </Link>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/layouts/timeline/PostForm.tsx b/src/components/layouts/timeline/PostForm.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef } from "react";
 import axios from "axios";
 import { POSTS_ENDPOINT } from "@/constants/api";
 import PersonIcon from "@mui/icons-material/Person";
 import { User } from "@/types/user";
 import { Post } from "@/types/post";
 import PostButton from "./PostButton";
-import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
+import RocketIcon from "@mui/icons-material/Rocket";
 import { useAuth } from "@/hooks/useAuth";
 
 interface PostFormProps {
@@ -39,30 +39,21 @@ const PostForm: React.FC<PostFormProps> = ({ onPostSuccess }) => {
       if (desc.current) {
         desc.current.value = ""; // テキストエリアをクリア
       }
-    } catch (error) {
+    } catch (err) {
       alert("エラーが発生しました。");
     }
   };
 
-  const [isClient, setIsClient] = useState(false);
-
-  useEffect(() => {
-    setIsClient(true); // クライアントサイドでのレンダリングを有効化
-  }, []);
-
-  if (!isClient) return null; // クライアントサイドでない場合、何も表示しない
-
   return (
     <div className="top-10 h-auto border-2 shadow-md rounded-lg p-2 mt-3">
       <div className="flex items-center py-1">
-        {user.profilePicture ? (
-          <RocketLaunchIcon
-            fontSize="large"
-            className="w-8 h-8 mx-2 no-underline"
-          />
-        ) : (
-          <PersonIcon className="w-12 h-12 mx-2" />
-        )}
+        <div className="mx-2">
+          {user.profilePicture ? (
+            <RocketIcon fontSize="large" />
+          ) : (
+            <PersonIcon fontSize="large" />
+          )}
+        </div>
         <textarea
           className="w-full mx-2 px-3 py-2 rounded-lg border-2 border-gray-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 resize-vertical"
           placeholder="What's Happend??"