From 65405213b652428a27cb19dbfc454505610fc7f6 Mon Sep 17 00:00:00 2001
From: Neeraj <neeraj.rtly@gmail.com>
Date: Mon, 21 Oct 2024 15:27:40 +0530
Subject: [PATCH] Remove organization switcher from sidebar

---
 packages/frontend/src/components/Logo.tsx     |  9 +--
 .../src/components/shared/Sidebar/Sidebar.tsx | 63 ++-----------------
 .../frontend/src/pages/org-slug/layout.tsx    |  5 +-
 3 files changed, 9 insertions(+), 68 deletions(-)

diff --git a/packages/frontend/src/components/Logo.tsx b/packages/frontend/src/components/Logo.tsx
index 6b6d8131..c3bceb09 100644
--- a/packages/frontend/src/components/Logo.tsx
+++ b/packages/frontend/src/components/Logo.tsx
@@ -1,13 +1,7 @@
-import { Link } from 'react-router-dom';
 import { Heading } from './shared/Heading';
 
-interface LogoProps {
-  orgSlug?: string;
-}
-
-export const Logo = ({ orgSlug }: LogoProps) => {
+export const Logo = () => {
   return (
-    <Link to={`/${orgSlug}`}>
       <div className="flex items-center gap-3 px-0 lg:px-2">
         <img
           src="/logo.svg"
@@ -18,6 +12,5 @@ export const Logo = ({ orgSlug }: LogoProps) => {
           Snowball
         </Heading>
       </div>
-    </Link>
   );
 };
diff --git a/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx b/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx
index 9c0ca570..daad9918 100644
--- a/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx
+++ b/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx
@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { NavLink, useNavigate, useParams } from 'react-router-dom';
-import { Organization, User } from 'gql-client';
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { User } from 'gql-client';
 import { motion } from 'framer-motion';
 import { useDisconnect } from 'wagmi';
 
@@ -19,8 +19,6 @@ import { getInitials } from 'utils/geInitials';
 import { Button } from 'components/shared/Button';
 import { cn } from 'utils/classnames';
 import { useMediaQuery } from 'usehooks-ts';
-import { SIDEBAR_MENU } from './constants';
-import { UserSelect } from 'components/shared/UserSelect';
 import { BASE_URL } from 'utils/constants';
 
 interface SidebarProps {
@@ -28,7 +26,6 @@ interface SidebarProps {
 }
 
 export const Sidebar = ({ mobileOpen }: SidebarProps) => {
-  const { orgSlug } = useParams();
   const navigate = useNavigate();
   const client = useGQLClient();
   const isDesktop = useMediaQuery('(min-width: 960px)');
@@ -45,46 +42,6 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
     fetchUser();
   }, []);
 
-  const [selectedOrgSlug, setSelectedOrgSlug] = useState(orgSlug);
-  const [organizations, setOrganizations] = useState<Organization[]>([]);
-
-  const fetchUserOrganizations = useCallback(async () => {
-    const { organizations } = await client.getOrganizations();
-    setOrganizations(organizations);
-  }, [orgSlug]);
-
-  useEffect(() => {
-    fetchUserOrganizations();
-    setSelectedOrgSlug(orgSlug);
-  }, [orgSlug]);
-
-  const formattedSelected = useMemo(() => {
-    const selected = organizations.find((org) => org.slug === selectedOrgSlug);
-    return {
-      value: selected?.slug ?? '',
-      label: selected?.name ?? '',
-      imgSrc: '/logo.svg',
-    };
-  }, [organizations, selectedOrgSlug, orgSlug]);
-
-  const formattedSelectOptions = useMemo(() => {
-    return organizations.map((org) => ({
-      value: org.slug,
-      label: org.name,
-      imgSrc: '/logo.svg',
-    }));
-  }, [organizations, selectedOrgSlug, orgSlug]);
-
-  const renderMenu = useMemo(() => {
-    return SIDEBAR_MENU(orgSlug).map(({ title, icon, url }, index) => (
-      <NavLink to={url} key={index}>
-        <Tabs.Trigger icon={icon} value={title}>
-          {title}
-        </Tabs.Trigger>
-      </NavLink>
-    ));
-  }, [orgSlug]);
-
   const handleLogOut = useCallback(async () => {
     await fetch(`${BASE_URL}/auth/logout`, {
       method: 'POST',
@@ -115,18 +72,10 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
       >
         {/* Logo */}
         <div className="hidden lg:flex">
-          <Logo orgSlug={orgSlug} />
-        </div>
-        {/* Switch organization */}
-        <div className="flex flex-1 flex-col gap-4">
-          <UserSelect
-            value={formattedSelected}
-            options={formattedSelectOptions}
-          />
-          <Tabs defaultValue="Projects" orientation="vertical">
-            <Tabs.List>{renderMenu}</Tabs.List>
-          </Tabs>
+          <Logo />
         </div>
+        {/* This element ensures the space between logo and navigation */}
+        <div className="flex-1"></div>
         {/* Bottom navigation */}
         <div className="flex flex-col gap-5 justify-end">
           <Tabs defaultValue="Projects" orientation="vertical">
diff --git a/packages/frontend/src/pages/org-slug/layout.tsx b/packages/frontend/src/pages/org-slug/layout.tsx
index b1bf2226..4cf7955a 100644
--- a/packages/frontend/src/pages/org-slug/layout.tsx
+++ b/packages/frontend/src/pages/org-slug/layout.tsx
@@ -9,7 +9,7 @@ import {
 import { Sidebar } from 'components/shared/Sidebar';
 import { OctokitProvider } from 'context/OctokitContext';
 import { ComponentPropsWithoutRef, useEffect, useState } from 'react';
-import { Outlet, useParams } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import { cn } from 'utils/classnames';
 import { useMediaQuery } from 'usehooks-ts';
@@ -22,7 +22,6 @@ export const DashboardLayout = ({
   className,
   ...props
 }: DashboardLayoutProps) => {
-  const { orgSlug } = useParams();
   const isDesktop = useMediaQuery('(min-width: 960px)');
 
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
@@ -45,7 +44,7 @@ export const DashboardLayout = ({
       >
         {/* Header on mobile */}
         <div className="flex lg:hidden items-center px-4 py-2.5 justify-between">
-          <Logo orgSlug={orgSlug} />
+          <Logo />
           <div className="flex items-center gap-0.5">
             <AnimatePresence>
               {isSidebarOpen ? (