kişiler, bloglar ve profil düzenlendi. Profilde yaşanan render sorunu çözüme kavuşturuldu. Servisler componenti eklendi.

src/components/Pages.jsx

@@ -13,6 +13,7 @@ import Posts from './Posts';
 import About from './About';
 import Blogs from '../pages/Blogs';
 import Peoples from '../pages/Peoples';
+import Services from '../pages/Services';
 
 export default function Pages(props, auth, setAuth) {
   return (
@@ -22,11 +23,8 @@ export default function Pages(props, auth, setAuth) {
           <Route path='/blogs' element={<Blogs setSelectedMenu={props.setSelectedMenu}/>}></Route>
           <Route path='/blogs/:cate' element={<Blogs setSelectedMenu={props.setSelectedMenu}/>}></Route>          
           <Route path='/peoples' element={<Peoples setSelectedMenu={props.setSelectedMenu}/>}></Route>
-          <Route path='/profile/:username' element={
-            <Profile setSelectedMenu={props.setSelectedMenu}>
-              <ProfileDetail profile={props.profile}/>
-            </Profile>
-          }>
+          <Route path='/services' element={<Services setSelectedMenu={props.setSelectedMenu}/>}></Route>
+          <Route path='/profile/:username' element={<Profile setSelectedMenu={props.setSelectedMenu}></Profile>}>
             {/* <Route path='' element={<Overview/>}></Route> */}
             <Route path='' element={<Posts/>}></Route>
             {/* <Route path='about' element={<About/>}></Route> */}

src/components/Post.jsx

@@ -18,7 +18,7 @@ export default function Post(props) {
                     <div className="flex flex-col gap-1">
                         <div className="flex gap-2 items-end justify-end">
                             {/* <a href="<%-data.blogsCate.href%>">data.blogsCate.title</a> */}
-                            <p>Buraya Kategori eklenecek</p>
+                            <Link to={"/blogs/" + props.data.category.title.toLowerCase()} onClick={() => (props.changeMenu) && props.changeMenu(props.data.category.id)}>{props.data.category.title}</Link>
                             <p>-</p>
                             <p className="text-end">01.01.2024</p>
                         </div>

src/components/ProfileDetail.jsx

@@ -21,7 +21,12 @@ export default function ProfileDetail(props) {
                 setData(false);
             };
         });
-    },[]);
+        
+        return () => {
+            setData([]);
+            setLoading(true);
+        };    
+    },[username]);
 
     if(loading) {
         return (<></>)

src/menus.js

@@ -10,6 +10,10 @@ export const menus = [{
     id: 3,
     title: "Kişiler",
     path: "/peoples"
+},{
+    id: 4,
+    title: "Servisler",
+    path: "/services"
 }];
 
 export const profileMenus = [{

src/pages/Blogs.jsx

@@ -14,28 +14,46 @@ export default function Blogs(props) {
   useEffect(() => {
     props.setSelectedMenu(2);
     
-    FetchPOST({
-      port: 3001,
-      pathname: "/page/blogs"
-    }).then(res => {
-      setPageData(res);
-      res.categories.filter(get => get.title.toLowerCase() === cate && setSelectedMenu(get.id));
-      setLoading(false);
-    });
+    if(cate === undefined){
+      FetchPOST({
+        port: 3001,
+        pathname: "/page/blogs"
+      }).then(res => {
+        setData(res.blogs)
+        setPageData(res);
+        setLoading(false);
+      });
+    }else if(cate){
+      FetchPOST({
+        port: 3001,
+        pathname: "/page/blogs/" + cate
+      }).then(res => {
+        const categoriesIds = res.categories.map(get => get.id);
+        
+        setPageData(res);
+        setLoading(false);
+        changeCategory(res.currentCategory.id, categoriesIds, setData);
+        setSelectedMenu(res.currentCategory.id);
+      });
+    }
+
   },[]);
   
   const changeMenu = (id) => {
+    const categoriesIds = pageData.categories.map(get => get.id);
+    
     setSelectedMenu(id);
-  }
+    changeCategory(id, categoriesIds, setData);
+  };
 
   if(loading){
     return (<></>)
-  }
+  };
 
   return (
     <div className='flex flex-col gap-4'>
       <div className='flex overflow-hidden overflow-x-scroll gap-2'>
-        <Link to={"/blogs"} key={0} onClick={(e) => {setSelectedMenu(0)}} className={'flex h-20 rounded-2xl bg-gray-200 aspect-square items-center justify-center cursor-pointer hover:bg-pc hover:bg-opacity-50 ' + ((selectedMenu === 0) && "bg-pc")}>
+        <Link to={"/blogs"} key={0} onClick={(e) => {changeMenu(0)}} className={'flex h-20 rounded-2xl bg-gray-200 aspect-square items-center justify-center cursor-pointer hover:bg-pc hover:bg-opacity-50 ' + ((selectedMenu === 0) && "bg-pc")}>
           Genel
         </Link>
         {
@@ -50,7 +68,7 @@ export default function Blogs(props) {
       {
         (data) && 
           data.map(get => <div key={get.id}>
-            <Post key={get.id} data={get}></Post>
+            <Post key={get.id} data={get} changeMenu={changeMenu}></Post>
           </div>)
       }
     </div>
@@ -58,14 +76,18 @@ export default function Blogs(props) {
 };
 
 
-function changeCategory() {
-  if(cate === undefined){
+function changeCategory(id, categoriesIds, setData) {
+  if(id === 0){
     FetchPOST({
       port: 3001,
       pathname: "/get/blogs/all"
     }).then(res => setData(res));
-  }else{
-    setData([]);
-    console.log(data);
-  };
+  }else if(categoriesIds.includes(id)){
+    FetchPOST({
+      port: 3001,
+      pathname: "/get/blogs/" + id
+    }).then(res => setData(res));
+  }else {
+    setData([])
+  }
 };

src/pages/Home.jsx

@@ -1,6 +1,10 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 
 export default function Home(props) {
+  useEffect(() => {
+    props.setSelectedMenu(1);
+  },[]);
+  
   return (
     <div>
       Anasayfa

src/pages/Profile.jsx

@@ -1,16 +1,24 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { FetchPOST } from '../middlewares/Fetch';
+import ProfileDetail from '../components/ProfileDetail';
 
-export default function Profile({children, setSelectedMenu}) {
-  const {username} = useParams();
+export default function Profile({setSelectedMenu}) {
+  const { username } = useParams();
 
   useEffect(() => {
-    setSelectedMenu(0);
+    FetchPOST({
+      port: 3001,
+      pathname: "/get/user/my"
+    }).then(get => {
+      (get.username === username) && setSelectedMenu(0);
+    });
   },[]);
+  console.log(username)
 
   return (
     <div className='flex flex-col w-full'>
-      {children}
+      <ProfileDetail/>
     </div>
   )
 }

src/pages/Services.jsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react'
+import { Link } from 'react-router-dom'
+
+export default function Services(props) {
+    useEffect(() => {
+        props.setSelectedMenu(4);
+    },[]);
+  return (
+    <div className='flex'>
+        <Link to={"http://localhost:2283"} className='flex p-8 aspect-square items-center justify-center rounded-2xl border-solid border-pc border-4 hover:bg-pc hover:bg-opacity-50'>
+            İmmich
+        </Link>
+    </div>
+  )
+}