iyileştirmeler ve node bağlantısı

2025-02-20 05:58:05 +03:00 · 2025-02-20 05:58:05 +03:00 · f02c04a787
commit f02c04a787
parent 4f4c70c3d6
15 changed files with 206 additions and 224 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -11,6 +11,7 @@
        "axios": "^1.7.9",
        "cra-template": "1.2.0",
        "react": "^19.0.0",
+        "react-audio-player": "^0.17.0",
        "react-dom": "^19.0.0",
        "react-router-dom": "^7.1.3",
        "react-scripts": "5.0.1",
@ -12933,6 +12934,18 @@
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
    },
+    "node_modules/react-audio-player": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-audio-player/-/react-audio-player-0.17.0.tgz",
+      "integrity": "sha512-aCZgusPxA9HK7rLZcTdhTbBH9l6do9vn3NorgoDZRxRxJlOy9uZWzPaKjd7QdcuP2vXpxGA/61JMnnOEY7NXeA==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
    "node_modules/react-dev-utils": {
      "version": "12.0.1",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
--- a/package.json
+++ b/package.json
@ -6,6 +6,7 @@
    "axios": "^1.7.9",
    "cra-template": "1.2.0",
    "react": "^19.0.0",
+    "react-audio-player": "^0.17.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.1.3",
    "react-scripts": "5.0.1",
--- a/public/1.mp3
+++ b/public/1.mp3
--- a/src/App.js
+++ b/src/App.js
@ -1,157 +1,14 @@
-// import React, { Component } from 'react'
-// import Header from './components/Header';
-// // import NavRight from './components/NavRight';
-// import NavLeft from './components/NavLeft';
-// import Pages from './components/Pages';
-// import ProfileMenuBox from './components/ProfileMenuBox';
-// import BottomBox from './components/BottomBox';
-// import Login from './pages/Login';
-// import Auth from './middlewares/Auth';
-// import Cookies from 'universal-cookie';
-// const cookies = new Cookies();
-
-// export default class App extends Component {
-//   state = {
-//     profile: {
-//       id: 1,
-//       first_name: 'Batuhan',
-//       second_name: 'Coşkun',
-//       username: 'batuhancoskun',
-//       menus: {
-//         selected: '',
-//         list: [{
-//           id: 0,
-//           title: 'Özet',
-//           path: ''
-//         },{
-//           id: 1,
-//           title: 'Gönderiler',
-//           path: 'posts'
-//         },{
-//           id: 2,
-//           title: 'Hakkında',
-//           path: 'about'
-//         }]
-//       }
-//     },
-//     menus: {
-//       selected: '',
-//       list: [{
-//         id: 0,
-//         title: 'Anasayfa',
-//         path: ''
-//       }]
-//     },
-//     serverOptions: {
-//       endBack: {
-//         url: "http://192.168.1.27:3001"
-//       },
-//       backEnd: {
-//         title: "Node",
-//         url: "http://192.168.1.27:3001"
-//       }
-//     },
-//     auth: false,
-//     runAuth: false
-//   };
-
-//   functions = {
-//     profile: {
-//       menus: {
-//         changeMenu: (menuId) => {
-//           this.setState({
-//             profile: {
-//               ...this.state.profile,
-//               menus: {
-//                 ...this.state.profile.menus,
-//                 selected: menuId
-//               }
-//             }
-//           })
-//         },
-//         menuControl: (menuId) => {
-//           const control = this.state.profile.menus.selected === menuId;
-//           if(!control){
-//             this.functions.profile.menus.changeMenu(menuId);
-//           };
-//         }
-//       }
-//     },
-//     menus: {
-//       changeMenu: (menuId) => {
-//         this.setState({
-//           menus: {
-//             ...this.state.menus,
-//             selected: menuId
-//           }
-//         })
-//       },
-//       menuControl: (menuId) => {
-//         const control = this.state.menus.selected === menuId;
-//         if(!control){
-//           this.functions.menus.changeMenu(menuId);
-//         };
-//       }
-//     }
-//   };
-
-//   render() {
-//     Auth(this.state.serverOptions.endBack.url);
-
-//     if(cookies.get("auth") === "Success"){
-//       return (
-//         <div className='flex flex-col h-screen overflow-hidden'>
-//           <Header state={this.state}/>
-//           <div className='flex flex-col h-screen overflow-hidden p-4'>
-//             <div className='flex flex-col h-screen overflow-hidden gap-4'>
-//               <div className='grid grid-cols-5 h-full overflow-hidden gap-4'>
-//                 <div className='flex flex-col gap-4'>
-//                   <div className='flex bg-white h-full rounded-2xl overflow-hidden'>
-//                     <NavLeft state={this.state} functions={this.functions}/>
-//                   </div>
-//                 </div>
-//                 <div className='flex col-span-4 h-full overflow-y-scroll bg-white rounded-2xl p-4'>
-//                   <Pages state={this.state} functions={this.functions}/>
-//                 </div>
-//               </div>
-//               <div className='grid grid-cols-5 h-16 gap-4'>
-//                 <div className='flex bg-white rounded-2xl overflow-hidden'>
-//                   <ProfileMenuBox state={this.state} functions={this.functions}/>
-//                 </div>
-//                 <div className='flex col-span-4 bg-white rounded-2xl'>
-//                   <BottomBox/>
-//                 </div>
-//               </div>
-//             </div>
-//           </div>
-//         </div>
-//       );
-//     }else{
-//       return(
-//         <div className='flex flex-col h-screen overflow-hidden'>
-//           <Header state={this.state}/>
-//           <div className='flex flex-col h-screen overflow-hidden p-4'>
-//             <div className='flex flex-col h-screen overflow-hidden gap-4'>
-//               <div className='grid grid-cols-5 h-full overflow-hidden gap-4'>
-//                 <div className='flex col-span-5 h-full w-full items-center justify-center overflow-y-scroll bg-white rounded-2xl p-4'>
-//                   <Login state={this.state} functions={this.functions}/>
-//                 </div>
-//               </div>
-//             </div>
-//           </div>
-//         </div>
-//       )
-//     }
-
-//   };
-// };
-
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Header from './components/Header';
 import NavLeft from './components/NavLeft';
 import ProfileMenuBox from './components/ProfileMenuBox';
 import BottomBox from './components/BottomBox';
 import Pages from './components/Pages';
+import Login from './pages/Login';
+import Cookies from 'universal-cookie';
+import {FetchPOST} from './middlewares/Fetch';
+import MusikBox from './components/MusikBox';
+const cookie = new Cookies();

 export default function App() {
  const [backEnd_URL] = "http://localhost:3001/";
@ -163,6 +20,42 @@ export default function App() {
    second_name: "Coşkun",
    username: "batuhancoskun"
  });
+  const [auth, setAuth] = useState(false);
+
+  useEffect(() => {
+    FetchPOST({
+      port: 3001,
+      pathname: "/login/control",
+      fetchData: {
+        method: "post",
+        credentials: 'include',
+        headers: {
+            'Accept' : 'application/json',
+            'Content-Type' : 'application/json'
+        },
+        body: JSON.stringify({
+          token: cookie.get("barbaros-sid")
+        })
+      }
+    }).then(res => setAuth(res.Status === "Success" && true));
+  },[]);
+
+  if(auth === false){
+    return (
+      <div>
+        <Header title={title} description={description} backEnd_URL={backEnd_URL}/>
+        <div className='flex flex-col h-screen overflow-hidden p-4'>
+          <div className='flex flex-col h-screen overflow-hidden gap-4'>
+            <div className='grid grid-cols-5 h-full overflow-hidden gap-4'>
+              <div className='flex items-center justify-center col-span-5 h-full overflow-y-scroll bg-white rounded-2xl p-4'>
+                <Login auth={auth} setAuth={setAuth}/>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }

  return (
    <div className='flex flex-col h-screen overflow-hidden'>
@ -176,7 +69,7 @@ export default function App() {
              </div>
            </div>
            <div className='flex col-span-4 h-full overflow-y-scroll bg-white rounded-2xl p-4'>
-              <Pages selectedMenu={selectedMenu} setSelectedMenu={setSelectedMenu} profile={profile}/>
+              <Pages selectedMenu={selectedMenu} setSelectedMenu={setSelectedMenu} profile={profile} auth={auth} setAuth={setAuth}/>
            </div>
          </div>
          <div className='grid grid-cols-5 h-16 gap-4'>
@ -184,7 +77,7 @@ export default function App() {
              <ProfileMenuBox selectedMenu={selectedMenu} setSelectedMenu={setSelectedMenu} profile={profile}/>
            </div>
            <div className='flex col-span-4 bg-white rounded-2xl'>
-              <BottomBox/>
+              <MusikBox/>
            </div>
          </div>
        </div>
--- a/src/components/MusikBox.jsx
+++ b/src/components/MusikBox.jsx
@ -1,24 +1,29 @@
-import React, { Component } from 'react'
+import React from 'react'
+import ReactAudioPlayer from 'react-audio-player';

-export default class MusikBox extends Component {
-  render() {
-    return (
-      <div className='flex p-2 gap-4 items-center w-full bg-pc rounded-2xl'>
-        <img className='h-12 rounded-2xl' src='https://vivaturkiye.eu/wp-content/uploads/2020/02/Bar%C4%B1%C5%9F-Akarsu.jpg'></img>
-        <div className='flex flex-col flex-shrink-0 items-start justify-center'>
-          <p className='font-bold'>Rüzgâr</p>
-          <p>Barış Akarsu</p>
-        </div>
-        {/* <div className='flex w-full'>
-          <div className='flex w-full bg-white h-4 rounded-2xl overflow-hidden'>
-            <div className='flex w-1/2 bg-black rounded-r-2xl'>
-            </div>
+export default function MusikBox() {
+  return (
+    <div className='flex p-2 gap-4 items-center w-full bg-pc rounded-2xl'>
+      <ReactAudioPlayer
+      id='media-source'
+      src='1.mp3'
+      controls
+      >
+      </ReactAudioPlayer>
+      <img className='h-12 rounded-2xl' src='https://vivaturkiye.eu/wp-content/uploads/2020/02/Bar%C4%B1%C5%9F-Akarsu.jpg'></img>
+      <div className='flex flex-col flex-shrink-0 items-start justify-center'>
+        <p className='font-bold'>Rüzgâr</p>
+        <p>Barış Akarsu</p>
+      </div>
+      <div className='flex w-full'>
+        <div className='flex w-full bg-white h-4 rounded-2xl overflow-hidden'>
+          <div style={{width: "1%"}} className='flex bg-black rounded-r-2xl'>
          </div>
-        </div> */}
-        <div className='flex'>
-          <img className='h-8' src={process.env.PUBLIC_URL + '/icons/musicplayer-play-button.svg'}></img> 
        </div>
      </div>
-    )
-  }
+      <div className='flex'>
+        <img className='h-8' src={process.env.PUBLIC_URL + '/icons/musicplayer-play-button.svg'}></img> 
+      </div> 
+    </div>
+  );
 };
--- a/src/components/Overview.jsx
+++ b/src/components/Overview.jsx
@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { useOutletContext } from 'react-router-dom';

 export default function Overview() {
    return (
--- a/src/components/Pages.jsx
+++ b/src/components/Pages.jsx
@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import {Routes, Route} from 'react-router-dom';


@ -12,13 +12,19 @@ import Overview from './Overview';
 import Posts from './Posts';
 import About from './About';
 import Blogs from '../pages/Blogs';
+import Peoples from '../pages/Peoples';
+import Login from '../pages/Login';
+import { FetchPOST } from '../middlewares/Fetch';
+import Cookies from 'universal-cookie';
+const cookie = new Cookies();

-export default function Pages(props) {
+export default function Pages(props, auth, setAuth) {
  return (
    <div className='w-full'>
      <Routes>
          <Route path='/' element={<Home/>}/>
          <Route path='/blogs' element={<Blogs/>}></Route>
+          <Route path='/peoples' element={<Peoples/>}></Route>
          <Route path='/profile/:username' element={
            <Profile setSelectedMenu={props.setSelectedMenu}>
              <ProfileDetail profile={props.profile}/>
@ -28,7 +34,7 @@ export default function Pages(props) {
            <Route path='posts' element={<Posts/>}></Route>
            <Route path='about' element={<About/>}></Route>
          </Route>
-          {/* <Route path='/login' element={<Login state={this.props.state} />} /> */}
+          {/* <Route path='/login' element={<Login/>} /> */}
          <Route path='*' element={<NotPage/>}/>
      </Routes>
    </div>
--- a/src/components/ProfileDetail.jsx
+++ b/src/components/ProfileDetail.jsx
@ -41,7 +41,7 @@ export default function ProfileDetail(props) {
                ))}
            </div>
            <div className='bg-white p-4'>
-                <Outlet/>
+                <Outlet context={[selectedMenu, setSelectedMenu]}/>
            </div>
        </div>
    );
--- a/src/menus.js
+++ b/src/menus.js
@ -6,6 +6,10 @@ export const menus = [{
    id: 2,
    title: "Bloglar",
    path: "/blogs"
+},{
+    id: 3,
+    title: "Kişiler",
+    path: "/peoples"
 }];

 export const profileMenus = [{
--- a/src/middlewares/Fetch.jsx
+++ b/src/middlewares/Fetch.jsx
@ -0,0 +1,7 @@
+import { useEffect, useState } from "react";
+
+export async function FetchPOST({port, pathname, fetchData}) {
+    return await fetch(window.location.protocol + "//" + window.location.hostname + ((port) && ":") + ((port) ? port : "") + pathname, {...fetchData, credentials: 'include'})
+    .then(res => res.json())
+    .then(res => {return res});
+};
--- a/src/pages/Blogs.jsx
+++ b/src/pages/Blogs.jsx
@ -1,25 +1,25 @@
 import React, { useEffect, useState } from 'react'
+import { FetchPOST } from '../middlewares/Fetch';

 export default function Blogs() {
-  const [blogs, setBlogs] = useState();
+  const [data, setData] = useState();

  useEffect(() => {
-    fetch("http://localhost:3001/get/blogs", {
-      method: "GET",
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type':'application/json'
-      }
-    })
-    .then(res => res.json())
-    .then(data => setBlogs(data));
-  },[]);
+    FetchPOST({
+      port: 3001,
+      pathname: "/get/blogs"
+    }).then(res => setData(res));
+  },[])
+  
+  
+  if(!data){
+  }
  
  return (
    <div>
      {
-        (blogs) && 
-          blogs.map(get => <div key={get.id}>
+        (data) && 
+          data.map(get => <div key={get.id}>
            <p><span style={{fontWeight: "bold"}}>ID: </span>{get.id}</p>
            <p><span style={{fontWeight: "bold"}}>Başlık: </span>{get.title}</p>
            <p><span style={{fontWeight: "bold"}}>İçerik: </span>{get.text}</p>
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@ -1,9 +1,19 @@
-import React, { Component } from 'react'
+import React, { useEffect, useState } from 'react'
+import { FetchPOST } from '../middlewares/Fetch';

 export default function Home() {
+  const [data, setData] = useState();
+  
+  useEffect(() => {
+    FetchPOST({
+      port: 3001,
+      pathname: "/get/peoples"
+    }).then(res => setData(res));
+  },[])
+
  return (
    <div>
-      <p>Ana sayfa</p>
+      Anasayfa
    </div>
  );
 };
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@ -1,40 +1,57 @@
-import React, { Component } from 'react'
-import axios from 'axios';
+import React, { useState } from 'react'
 import Cookies from 'universal-cookie';
-const cookies = new Cookies();
+import { FetchPOST } from '../middlewares/Fetch';


-export default class Login extends Component {
-    render() {
+export default function Login() {
+    const [data, setData] = useState();
+
+    const handleSubmit = async (event) => {
+        event.preventDefault();
        
-        const handleSubmit = (event) => {
-            event.preventDefault();
-            
-            axios.defaults.withCredentials = true;
-            axios.post(this.props.state.serverOptions.endBack.url + "/login", {
-                email: event.target.email.value,
-                password: event.target.password.value
-            })
-            .then(get => {
-                console.log(get.data);
-                if(get.data.Status === "Success"){
-                    cookies.set('auth', 'Success', { path: '/' });
-                    window.location.href = "/";
-                };
-            });
-        };
+        const result = await FetchPOST({
+            port: 3001,
+            pathname: "/login",
+            fetchData: {
+                method: "post",
+                credentials: 'include',
+                headers: {
+                    'Accept' : 'application/json',
+                    'Content-Type' : 'application/json'
+                },
+                body: JSON.stringify({
+                    email: "batuhancoskun@yaani.com",
+                    password: "Yaren2010"
+                })
+            }
+        });
+        afterPost({
+            data: result
+        })
+    };

-        return (
-            <div className='flex h-full items-center justify-center'>
-                <div className='flex item-center justify-center'>
-                    <form className='flex flex-col items-center justify-center gap-4 p-4 rounded-2xl bg-pc bg-opacity-30' onSubmit={handleSubmit}>
-                        <h3 className='font-bold text-2xl'>Giriş Yap</h3>
-                        <input name='email' type='text' className='border-solid border-2 rounded-lg p-3'></input>
-                        <input name='password' type='password' className='border-solid border-2 rounded-lg p-3'></input>
-                        <button className='border-solid w-full rounded-lg bg-pc p-3 hover:bg-pc hover:bg-opacity-50'>Giriş Yap</button>
-                    </form>
-                </div>
+    return (
+        <div className='flex h-full items-center justify-center'>
+            {
+                (data) && <p>{data.Status}</p>
+            }
+            <div className='flex item-center justify-center'>
+                <form className='flex flex-col items-center justify-center gap-4 p-4 rounded-2xl bg-pc bg-opacity-30' onSubmit={handleSubmit}>
+                    <h3 className='font-bold text-2xl'>Giriş Yap</h3>
+                    <input name='email' type='text' className='border-solid border-2 rounded-lg p-3'></input>
+                    <input name='password' type='password' className='border-solid border-2 rounded-lg p-3'></input>
+                    <button className='border-solid w-full rounded-lg bg-pc p-3 hover:bg-pc hover:bg-opacity-50'>Giriş Yap</button>
+                </form>
            </div>
-        )
-  }
+        </div>
+    );
 }
+
+function afterPost({data}){
+    if(data.Status === "Success"){
+        console.log(data)
+        const cookie = new Cookies();
+        cookie.set("barbaros-sid", data.Token);
+        // window.location.pathname = "/";
+    };
+};
--- a/src/pages/Peoples.jsx
+++ b/src/pages/Peoples.jsx
@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import { FetchPOST } from "../middlewares/Fetch"
+
+export default function Peoples(){
+    const [data, setData] = useState();
+    
+    useEffect(() => {
+        FetchPOST({
+            port: 3001,
+            pathname: "/get/peoples"
+        }).then(res => setData(res));
+    },[]);
+
+    return (
+        <div>
+            {
+                (data) && data.map(people =>
+                    <div key={people.id}>
+                        <p><span style={{fontWeight: "bold"}}>{people.id}. </span>{people.name} {people.surname}</p>
+                    </div>
+                )
+            }
+        </div>
+    )
+}
--- a/src/pages/Profile.jsx
+++ b/src/pages/Profile.jsx
@ -1,6 +1,6 @@
-import React, { Component } from 'react';
+import React from 'react';

-export default function Profile({children, setSelectedMenu}) {
+export default function Profile({children}) {
  return (
    <div className='flex flex-col w-full'>
      {children}