import React, { useCallback, useEffect, useState } from 'react'; import { NavLink, useNavigate, useParams } from 'react-router-dom'; import { Organization, User } from 'gql-client'; import { Option } from '@material-tailwind/react'; import { useDisconnect } from 'wagmi'; import { useGQLClient } from 'context/GQLClientContext'; import AsyncSelect from 'components/shared/AsyncSelect'; import { ChevronGrabberHorizontal, FolderIcon, GlobeIcon, LifeBuoyIcon, LogoutIcon, QuestionMarkRoundIcon, SettingsSlidersIcon, } from 'components/shared/CustomIcon'; import { Tabs } from 'components/shared/Tabs'; import { Logo } from 'components/Logo'; import { Avatar } from 'components/shared/Avatar'; import { formatAddress } from 'utils/format'; import { getInitials } from 'utils/geInitials'; import { Button } from 'components/shared/Button'; export const Sidebar = () => { const { orgSlug } = useParams(); const navigate = useNavigate(); const client = useGQLClient(); const { disconnect } = useDisconnect(); const [user, setUser] = useState(); const fetchUser = useCallback(async () => { const { user } = await client.getUser(); setUser(user); }, []); useEffect(() => { fetchUser(); }, []); const [selectedOrgSlug, setSelectedOrgSlug] = useState(orgSlug); const [organizations, setOrganizations] = useState([]); const fetchUserOrganizations = useCallback(async () => { const { organizations } = await client.getOrganizations(); setOrganizations(organizations); }, [orgSlug]); useEffect(() => { fetchUserOrganizations(); setSelectedOrgSlug(orgSlug); }, [orgSlug]); const handleLogOut = useCallback(() => { disconnect(); navigate('/login'); }, [disconnect, navigate]); return ( ); };