leumas-private-shared/src/SideBar/Aside.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React from 'react';

import {useState , useEffect} from "react"
import useAuthUser from 'react-auth-kit/hooks/useAuthUser';
import AsideRender from './AsideRender';
import {handleLinkClick} from "./Helpers"
import HasIdValidation from "../LeumasID/HasIdValidation";
import { FaUsers } from "react-icons/fa";
import { IoIosNotifications } from "react-icons/io";
import {useTheme} from "../Theme/ThemeContext"
import { FaBars, FaTimes } from 'react-icons/fa';
const Aside = ({ isOpen, toggleAside, setMode, onLinksComputed = () => {}, getInitialLinks = () => [] , leumasId, setLeumasId ,  linkDataArray }) => {

  const { theme } = useTheme();

  const [currentIndex, setCurrentIndex] = useState(0);



  
  const [extraData, setExtraData] = useState({});
  const auth = useAuthUser();
  const [openDropdown, setOpenDropdown] = useState(null);
  const [loading, setLoading] = useState(true);
  const [links, setLinks] = useState([]);



  // Now you can call getInitialLinks here
  useEffect(() => {
    // Load initial links using getInitialLinks passed via props
    setLinks(getInitialLinks( setMode, auth?.token, auth?.id, extraData));
}, [setMode, auth?.id, extraData]); // Include getInitialLinks in the dependency array


useEffect(() => {
  const fetchData = async () => {
      try {
       
        // const result2 = await getItemsByOwner("Conversation", auth?.id, "LeumasAPI", auth?.token);
        setExtraData({
          default: 'test'
          //   aiModels: result1,
            // conversations: result2,
        });
      
        // setLinks(getInitialLinks(handleDeleteConversation, setMode , auth?.token, auth?.id , result1));
          setLoading(false);
      } catch (error) {
          console.error("Error fetching conversations:", error);
      }
  }

  fetchData();
}, [auth?.id, setMode]); // This effect runs once when the component mounts.
useEffect(() => {
  // console.log('linkDataArray:', linkDataArray);

  if (currentIndex !== 0 || !getInitialLinks) {
    const currentLinkData = linkDataArray[currentIndex];
    if (currentLinkData) {
      setLinks(currentLinkData.getInitialLinks(setMode, auth?.token, auth?.id, extraData));
    }
  }
}, [currentIndex, linkDataArray, setMode, extraData, getInitialLinks]);


useEffect(() => {
if (extraData.aiModelsResult1 && extraData.aiModelsResult2) {
    setLinks(getInitialLinks( setMode, auth?.token, auth?.id, extraData));
    console.log(extraData)
}
}, [extraData, setMode]);


useEffect(() => {
  // This runs only once on mount, so make sure it doesn't conflict with the initial loading
  const computedLinks = getInitialLinks( setMode, auth?.token, auth?.id, extraData);
  onLinksComputed(computedLinks);
}, []); // Empty dependency array to run only on mount



if (loading) {
  return <div>Loading...</div>; // Render loading state
}

    
  return (
<aside className={`${theme === 'light' ? 'bg-gray-50 border-gray-200' : 'bg-black border-gray-900'} ${isOpen ? 'absolute' : 'hidden'} w-64 h-full p-4 overflow-y-auto z-20 top-0 left-0 m-0 rounded-lg border-r-2 transition-all duration-300 ease-in-out`}>


    {/* Aside content */}
    {isOpen && (
        <ul className={`flex flex-col gap-2`}>
            <AsideRender
                links={links}
                handleLinkClick={(link) => handleLinkClick(link, setMode, setOpenDropdown, openDropdown)}
                openDropdown={openDropdown}
                setMode={setMode}
            />
        </ul>
    )}
</aside>
  )
}



export default Aside;