react/src/App.js

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';
import NavRight from './components/NavRight';
import { I18nProvider } from './middlewares/Locale';
const cookie = new Cookies();

export default function App() {
  const backEnd_URL = "http://localhost:3001/";
  const [title] = useState("Wondanes");
  const [description] = useState("Ele Mele Ǩismeti");
  const [selectedMenu, setSelectedMenu] = useState("");
  const [profile, setProfile] = useState("");
  const [auth, setAuth] = useState("");
  const [rightPage, setRightPage] = useState("null");
  const [locale, setLocale] = useState('');

  const [pageMenusContent, setPageMenusContent] = useState("null"); // Yeni state

  useEffect(() => {
    FetchPOST({
      port: 3001,
      pathname: "/get/user/my"
    })
    .then(res => {
      setProfile(res.user);
      setLocale(res.user.locale);
    });

    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));
  },[]);

  const handlePageMenuUpdate = (content) => {
    setPageMenusContent(content);
  };

  const exports = {setRightPage, rightPage};

  if(auth === false){
    return (
      <I18nProvider locale={locale}>
        <div>
          <Header title={title} description={description} backEnd_URL={backEnd_URL} auth={auth}/>
          <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>
      </I18nProvider>
    )
  }else if(auth === true){
    return (
      <I18nProvider locale={locale} setLocale={setLocale} localeCode={locale}>
        <div className='flex flex-col h-screen overflow-hidden'>
          <Header title={title} description={description} backEnd_URL={backEnd_URL} auth={auth}/>
          <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 selectedMenu={selectedMenu} setSelectedMenu={setSelectedMenu}/>
                  </div>
                </div>
                <div className='flex col-start-2 col-end-5 h-full overflow-y-scroll bg-white rounded-2xl border-8 border-white'>
                  <Pages
                    selectedMenu={selectedMenu}
                    setSelectedMenu={setSelectedMenu}
                    profile={profile}
                    auth={auth}
                    setAuth={setAuth}
                    exports={exports}
                    locale={locale}
                  />
                </div>
                <div id='page-menus' className='flex bg-white h-full rounded-2xl overflow-hidden'>
                  <NavRight/>
                </div>
              </div>
              <div className='grid grid-cols-5 h-16 gap-4'>
                <div className='flex bg-white rounded-2xl overflow-hidden'>
                  <ProfileMenuBox selectedMenu={selectedMenu} setSelectedMenu={setSelectedMenu} profile={profile}/>
                </div>
                <div className='flex col-start-2 col-end-5 bg-white rounded-2xl'></div>
                <div className='flex bg-white rounded-2xl'></div>
              </div>
            </div>
          </div>
          <div id='popup' className='hidden absolute w-full h-full items-center justify-center overflow-hidden'></div>
        </div>
      </I18nProvider>
    );
  }
};