Refactor

Vizzuality · Sep 11, 2024 · 44ebaed · 44ebaed
1 parent ed96186
commit 44ebaed
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 87 deletions.
diff --git a/client/src/components/ui/button.tsx b/client/src/components/ui/button.tsx
@@ -22,7 +22,7 @@ const buttonVariants = cva(
           "border border-bluish-gray-500/35 text-primary bg-transparent hover:border-bluish-gray-500 disabled:border-bluish-gray-500/35 disabled:text-primary/20 disabled:bg-transparent",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-foreground underline-offset-[3px] underline",
-        transparent: "",
+        clean: "",
       },
       size: {
         default: "h-10 px-4 py-2",

diff --git a/client/src/containers/content-section/index.tsx b/client/src/containers/content-section/index.tsx
@@ -12,13 +12,13 @@ const ContentSection: FC<PropsWithChildren<ContentSectionProps>> = ({
   children,
 }) => {
   return (
-    <div>
+    <>
       <div className="rounded-2xl bg-secondary p-6">
         <h2 className="text-xl font-semibold">{title}</h2>
         <div>{description}</div>
       </div>
       {children}
-    </div>
+    </>
   );
 };
 

diff --git a/client/src/containers/sidebar/index.tsx b/client/src/containers/sidebar/index.tsx
@@ -17,72 +17,58 @@ import {
 import { Button } from "@/components/ui/button";
 
 const Sidebar: FC = () => {
-  const currentPage = usePathname().startsWith("/sandbox")
-    ? "sandbox"
-    : "explore";
-  let AccordionComponent = null;
+  const isExplore = usePathname().startsWith("/explore");
 
-  if (currentPage === "explore") {
-    AccordionComponent = (
-      <SidebarAccordion
-        key="sidebar-accordion-explore"
-        defaultValue={["explore-sections"]}
-      >
-        <AccordionItem value="explore-filters">
-          <AccordionTrigger>Filters</AccordionTrigger>
-          <AccordionContent>filters here...</AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="explore-sections">
-          <AccordionTrigger>Sections</AccordionTrigger>
-          <AccordionContent></AccordionContent>
-        </AccordionItem>
-      </SidebarAccordion>
-    );
-  }
-
-  if (currentPage === "sandbox") {
-    AccordionComponent = (
-      <SidebarAccordion
-        key="sidebar-accordion-sandbox"
-        defaultValue={["sandbox-settings", "sandbox-filters"]}
-      >
-        <AccordionItem value="sandbox-settings">
-          <AccordionTrigger>Settings</AccordionTrigger>
-          <AccordionContent>settings here...</AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="sandbox-filters">
-          <AccordionTrigger>Filters</AccordionTrigger>
-          <AccordionContent>filters here...</AccordionContent>
-        </AccordionItem>
-      </SidebarAccordion>
-    );
-  }
   return (
     <>
       <Header />
       <div className="flex rounded-2xl bg-primary">
         <Button
-          variant="transparent"
-          className={cn(
-            "w-full",
-            currentPage === "explore" && "bg-white text-primary",
-          )}
+          variant="clean"
+          className={cn("w-full", isExplore && "bg-white text-primary")}
           asChild
         >
           <Link href="/explore">Explore</Link>
         </Button>
         <Button
-          variant="transparent"
-          className={cn(
-            "w-full",
-            currentPage === "sandbox" && "bg-white text-primary",
-          )}
+          variant="clean"
+          className={cn("w-full", !isExplore && "bg-white text-primary")}
           asChild
         >
           <Link href="/sandbox">Sandbox</Link>
         </Button>
       </div>
-      {AccordionComponent}
+      <SidebarAccordion
+        defaultValue={
+          isExplore
+            ? ["explore-sections"]
+            : ["sandbox-settings", "sandbox-filters"]
+        }
+      >
+        {isExplore ? (
+          <>
+            <AccordionItem value="explore-filters">
+              <AccordionTrigger>Filters</AccordionTrigger>
+              <AccordionContent>filters here...</AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="explore-sections">
+              <AccordionTrigger>Sections</AccordionTrigger>
+              <AccordionContent></AccordionContent>
+            </AccordionItem>
+          </>
+        ) : (
+          <>
+            <AccordionItem value="sandbox-settings">
+              <AccordionTrigger>Settings</AccordionTrigger>
+              <AccordionContent>settings here...</AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="sandbox-filters">
+              <AccordionTrigger>Filters</AccordionTrigger>
+              <AccordionContent>filters here...</AccordionContent>
+            </AccordionItem>
+          </>
+        )}
+      </SidebarAccordion>
     </>
   );
 };

diff --git a/client/src/containers/sidebar/sidebar-accordion.tsx b/client/src/containers/sidebar/sidebar-accordion.tsx
@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, useState } from "react";
+import { FC, PropsWithChildren, useEffect, useState } from "react";
 
 import { Accordion } from "@/components/ui/accordion";
 
@@ -12,6 +12,11 @@ const SidebarAccordion: FC<PropsWithChildren<SidebarAccordionProps>> = ({
 }) => {
   const [value, setValue] = useState(defaultValue || undefined);
 
+  useEffect(() => {
+    if (value === defaultValue) return;
+    setValue(defaultValue);
+  }, [defaultValue, setValue]);
+
   return (
     <Accordion
       type="multiple"

diff --git a/client/src/hooks/index.ts b/client/src/hooks/index.ts
diff --git a/client/src/hooks/useHash.ts b/client/src/hooks/useHash.ts