Clean code: use a map to show buttons sidebar footer

QuivrHQ · Oct 25, 2023 · fb082dc · fb082dc
1 parent 80950f8
commit fb082dc
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/frontend/app/brains-management/[brainId]/components/BrainsList/BrainsList.tsx b/frontend/app/brains-management/[brainId]/components/BrainsList/BrainsList.tsx
@@ -17,7 +17,7 @@ export const BrainsList = (): JSX.Element => {
   const { t } = useTranslation(["brain", "chat"]);
 
   return (
-    <Sidebar showButtons={["user", "upgradeToPlus"]}>
+    <Sidebar showButtons={["upgradeToPlus", "user"]}>
       <div className="flex flex-col p-2 gap-2">
         <Link href="/chat">
           <Button type="button" className="bg-primary text-white py-2 w-full">

diff --git a/frontend/app/chat/components/ChatsList/index.tsx b/frontend/app/chat/components/ChatsList/index.tsx
@@ -15,7 +15,7 @@ export const ChatsList = (): JSX.Element => {
   const { shouldDisplayWelcomeChat } = useOnboarding();
 
   return (
-    <Sidebar showButtons={["myBrains", "user", "upgradeToPlus"]}>
+    <Sidebar showButtons={["myBrains", "upgradeToPlus", "user"]}>
       <div className="flex flex-col flex-1 h-full" data-testid="chats-list">
         <div className="pt-2">
           <NewChatButton />

diff --git a/frontend/lib/components/Sidebar/components/SidebarFooter/SidebarFooter.tsx b/frontend/lib/components/Sidebar/components/SidebarFooter/SidebarFooter.tsx
@@ -12,12 +12,16 @@ type SidebarFooterProps = {
 export const SidebarFooter = ({
   showButtons,
 }: SidebarFooterProps): JSX.Element => {
+  const buttons = {
+    myBrains: <BrainManagementButton />,
+    upgradeToPlus: <UpgradeToPlus />,
+    user: <UserButton />,
+  };
+
   return (
     <div className="bg-gray-50 dark:bg-gray-900 border-t dark:border-white/10 mt-auto p-2">
       <div className="max-w-screen-xl flex justify-center items-center flex-col">
-        {showButtons.includes("myBrains") && <BrainManagementButton />}
-        {showButtons.includes("upgradeToPlus") && <UpgradeToPlus />}
-        {showButtons.includes("user") && <UserButton />}
+        {showButtons.map((button) => buttons[button])}
       </div>
     </div>
   );