iyileştirme

src/components/Loading.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export default function Loading() {
+  return (
+    <div className='flex items-center justify-center'>
+        <img className='h-16 w-16' src='/loading.gif'></img>
+    </div>
+  );
+};

src/components/Posts.jsx

@@ -6,25 +6,38 @@ import { Link, useParams } from 'react-router-dom';
 export default function Posts() {
   const { username }= useParams();
   const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     FetchPOST({
       port: 3001,
       pathname: "/get/blogs/user/" + username
-    }).then(res => setData(res))
+    }).then(res => {
+      setData(res);
+      setLoading(false);
+    });
   },[]);
-  console.log(data)
+
+  if(loading){
+    return (
+      <div className='flex items-center justify-center'>
+        <img className='h-16 w-16' src='/loading.gif'></img>
+      </div>
+    );
+  }else if(!loading && data.length <= 0){
+    return(
+      <div style={{display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center"}}>
+        <p style={{fontWeight: "bold", textAlign: "center"}}>Burada hiçbir gönderi mevcut değil.</p>
+        <Link to="/peoples" style={{textAlign: "center"}}>Daha fazla kişi keşfet</Link>
+      </div>
+    );
+  };
   
   return (
     <div className='flex flex-col gap-4'>
       {
-        (data.length > 0) ?
-        data.map(get => <Post key={get.id} data={get}></Post>) : 
-        <div style={{display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center"}}>
-          <p style={{fontWeight: "bold", textAlign: "center"}}>Burada hiçbir gönderi mevcut değil.</p>
-          <Link to="/peoples" style={{textAlign: "center"}}>Daha fazla kişi keşfet</Link>
-        </div>
+        data.map(get => <Post key={get.id} data={get}></Post>)
       }
     </div>
-  )
+  );
 };

src/components/ProfileDetail.jsx

@@ -2,11 +2,13 @@ import React, { useEffect, useState } from 'react'
 import {Link, Outlet, useParams} from 'react-router-dom';
 import { profileMenus } from '../menus';
 import { FetchPOST } from '../middlewares/Fetch';
+import Loading from './Loading';
 
 export default function ProfileDetail(props) {
     const {username} = useParams();
     const [selectedMenu, setSelectedMenu] = useState("");
     const [data, setData] = useState([]);
+    const [posts, setPosts] = useState([]);
     const [loading, setLoading] = useState(true);
 
     useEffect(() => {
@@ -21,16 +23,25 @@ export default function ProfileDetail(props) {
                 setData(false);
             };
         });
+
+        FetchPOST({
+            port: 3001,
+            pathname: "/get/blogs/user/" + username
+        }).then(res => {
+            setPosts(res);
+            setLoading(false);
+        });
         
         return () => {
             setData([]);
+            setPosts([]);
             setLoading(true);
         };    
     },[username]);
 
-    if(loading) {
+    if(loading){
         return (<></>)
-    };
+    }
 
     return (
         <div className='flex flex-col gap-4'>

src/components/blogs/Posts.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Post from '../Post'
+
+export default function Posts({data}) {
+  return (
+    <div className='flex flex-col gap-4'>
+        {
+            data.map(get => <Post key={get.id} data={get}/>)
+        }
+    </div>
+  )
+}

src/pages/Blogs.jsx

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react'
 import { FetchPOST } from '../middlewares/Fetch';
 import Post from '../components/Post';
 import { Link, useParams } from 'react-router-dom';
+import Loading from '../components/Loading';
+import Posts from '../components/blogs/Posts';
 
 export default function Blogs(props) {
   const [data, setData] = useState();
@@ -19,7 +21,7 @@ export default function Blogs(props) {
         port: 3001,
         pathname: "/page/blogs"
       }).then(res => {
-        setData(res.blogs)
+        setData(res.blogs);
         setPageData(res);
         setLoading(false);
       });
@@ -35,9 +37,8 @@ export default function Blogs(props) {
         changeCategory(res.currentCategory.id, categoriesIds, setData);
         setSelectedMenu(res.currentCategory.id);
       });
-    }
-
-  },[]);
+    };
+  },[cate]);
   
   const changeMenu = (id) => {
     const categoriesIds = pageData.categories.map(get => get.id);
@@ -65,12 +66,9 @@ export default function Blogs(props) {
           ))
         }
       </div>
-      {
-        (data) && 
-          data.map(get => <div key={get.id}>
-            <Post key={get.id} data={get} changeMenu={changeMenu}></Post>
-          </div>)
-      }
+      <div className='flex flex-col gap-4'>
+        <Posts data={pageData.blogs}/>
+      </div>
     </div>
   );
 };

src/pages/Profile.jsx

@@ -2,9 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { FetchPOST } from '../middlewares/Fetch';
 import ProfileDetail from '../components/ProfileDetail';
+import Loading from '../components/Loading';
 
 export default function Profile({setSelectedMenu}) {
   const { username } = useParams();
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     FetchPOST({
@@ -12,9 +14,13 @@ export default function Profile({setSelectedMenu}) {
       pathname: "/get/user/my"
     }).then(get => {
       (get.username === username) && setSelectedMenu(0);
+      setLoading(false);
     });
   },[]);
-  console.log(username)
+
+  if(loading){
+    return (<></>)
+  }
 
   return (
     <div className='flex flex-col w-full'>

src/pages/Services.jsx

@@ -11,5 +11,5 @@ export default function Services(props) {
             İmmich
         </Link>
     </div>
-  )
-}
+  );
+};