profile画面のバグ修正

ogatakatsuya · Jul 18, 2024 · c74906c · c74906c
1 parent fecbff6
commit c74906c
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 28 deletions.
diff --git a/backend/api/db.py b/backend/api/db.py
@@ -12,7 +12,7 @@
 
 ASYNC_DB_URL = f"mysql+aiomysql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}:3306/{DB_NAME}?charset=utf8"
 
-async_engine = create_async_engine(ASYNC_DB_URL, echo=True)
+async_engine = create_async_engine(ASYNC_DB_URL)
 async_session = sessionmaker(
     autocommit=False, autoflush=False, bind=async_engine, class_=AsyncSession
 )

diff --git a/backend/api/migrate_db.py b/backend/api/migrate_db.py
@@ -11,7 +11,7 @@
 DB_NAME = os.getenv('DB_NAME')
 
 DB_URL = f"mysql+pymysql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}:3306/{DB_NAME}?charset=utf8"
-engine = create_engine(DB_URL, echo=True)
+engine = create_engine(DB_URL)
 
 
 def reset_database():

diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
@@ -12,6 +12,7 @@ const nextConfig = {
       },
     ],
   },
+  reactStrictMode: false,
 };
 
 export default nextConfig;
diff --git a/frontend/src/app/profile/[user_id]/_components/Post.jsx b/frontend/src/app/profile/[user_id]/_components/Post.jsx
@@ -47,10 +47,6 @@ const Post = ({ user_id }) => {
             console.error("Error fetching posts:", error);
         }
     };
-
-    useEffect(() => {
-        fetchPost(offset)
-    },[])
 
     useEffect(() => {
         if (hasMore && offset>0) {

diff --git a/frontend/src/app/profile/me/_components/MyPost.jsx b/frontend/src/app/profile/me/_components/MyPost.jsx
@@ -13,14 +13,15 @@ import {
     IconButton,
     StackDivider,
     Stack,
-} from '@chakra-ui/react'
+} from '@chakra-ui/react';
 import { MdExpandMore } from "react-icons/md";
 
 const MyPost = () => {
     const router = useRouter();
     const [post, setPost] = useState([]);
     const [hasMore, setHasMore] = useState(true);
     const [offset, setOffset] = useState(0);
+    const [initialLoad, setInitialLoad] = useState(true); // 初回ロードフラグ
     const observerTarget = useRef(null);
 
     const fetchPost = async (offset) => {
@@ -32,15 +33,13 @@ const MyPost = () => {
             });
             if (res.ok) {
                 const data = await res.json();
-                if (offset === 0) { //初回表示時はレンダリングが2回行われるため
+                if (offset === 0 && initialLoad) { // 初回表示時は上書きする
                     setPost(data);
-                    setOffset(0);
-                    console.log(data)
+                    setInitialLoad(false); // 初回ロードを完了としてマーク
                 } else {
                     setPost((prevPosts) => [...prevPosts, ...data]);
-                    console.log(data)
                 }
-                setHasMore( data.length === 10 )
+                setHasMore(data.length === 10);
             } else {
                 console.error("Error fetching posts:", res.statusText);
             }
@@ -50,12 +49,7 @@ const MyPost = () => {
     };
 
     useEffect(() => {
-        fetchPost(offset)
-    },[])
-
-    useEffect(() => {
-        if (hasMore && offset>0) {
-            console.log("fetch post")
+        if (hasMore && offset > 0) {
             fetchPost(offset);
         }
     }, [offset, hasMore]);
@@ -82,7 +76,7 @@ const MyPost = () => {
 
     const redirectToDetail = (post_id) => {
         router.push(`/post/${post_id}`);
-    }
+    };
 
     return (
         <>
@@ -92,7 +86,7 @@ const MyPost = () => {
                         <Card width="650px" key={item.id} bgColor="gray.100">
                             <CardBody>
                                 <Flex alignItems="center">
-                                    <Avatar src={item?.icon_url}/>
+                                    <Avatar src={item?.icon_url} />
                                     <Box ml={3}>
                                         <Text fontSize='md'>
                                             {item.user_nickname ? item.user_nickname : item.user_name}
@@ -108,12 +102,12 @@ const MyPost = () => {
                                     </Text>
                                     {item.file_url &&
                                         <Image
-                                                src={item.file_url}
-                                                width={200}
-                                                height={200}
-                                                alt="Imege"
-                                                style={{ width: 'auto', height: 'auto' }}
-                                                priority
+                                            src={item.file_url}
+                                            width={200}
+                                            height={200}
+                                            alt="Image"
+                                            style={{ width: 'auto', height: 'auto' }}
+                                            priority
                                         />
                                     }
                                 </Box>
@@ -139,6 +133,6 @@ const MyPost = () => {
             </Box>
         </>
     );
-}
+};
 
-export default MyPost;
+export default MyPost;