code refactor sidebar & cloud modal

src/components/Sidebar/index.tsx

@@ -132,6 +132,19 @@ function rotateLayout(direction: "LEFT" | "RIGHT" | "DOWN" | "UP") {
   return 360;
 }
 
+const SidebarButton: React.FC<{
+  onClick: () => void;
+  deviceDisplay?: "desktop" | "mobile";
+  title: string;
+  component: React.ReactNode;
+}> = ({ onClick, deviceDisplay, title, component }) => {
+  return (
+    <Tooltip className={deviceDisplay} title={title}>
+      <StyledElement onClick={onClick}>{component}</StyledElement>
+    </Tooltip>
+  );
+};
+
 export const Sidebar: React.FC = () => {
   const setVisible = useModal(state => state.setVisible);
   const setDirection = useGraph(state => state.setDirection);
@@ -184,77 +197,84 @@ export const Sidebar: React.FC = () => {
           </StyledElement>
         </Link>
 
-        <Tooltip className="mobile" title="Edit JSON">
-          <StyledElement onClick={() => toggleFullscreen(!fullscreen)}>
-            <AiOutlineEdit />
-          </StyledElement>
-        </Tooltip>
-
-        <Tooltip title="Import File">
-          <StyledElement onClick={() => setVisible("import")(true)}>
-            <AiOutlineFileAdd />
-          </StyledElement>
-        </Tooltip>
-
-        <Tooltip title="Rotate Layout">
-          <StyledElement onClick={toggleDirection}>
-            <StyledFlowIcon rotate={rotateLayout(direction)} />
-          </StyledElement>
-        </Tooltip>
-
-        <Tooltip className="mobile" title="Center View">
-          <StyledElement onClick={centerView}>
-            <MdCenterFocusWeak />
-          </StyledElement>
-        </Tooltip>
-
-        <Tooltip className="desktop" title={foldNodes ? "Unfold Nodes" : "Fold Nodes"}>
-          <StyledElement onClick={toggleFoldNodes}>
-            {foldNodes ? <CgArrowsShrinkH /> : <CgArrowsMergeAltH />}
-          </StyledElement>
-        </Tooltip>
-
-        <Tooltip className="desktop" title={graphCollapsed ? "Expand Graph" : "Collapse Graph"}>
-          <StyledElement onClick={toggleExpandCollapseGraph}>
-            {graphCollapsed ? <VscExpandAll /> : <VscCollapseAll />}
-          </StyledElement>
-        </Tooltip>
-
-        <Tooltip className="desktop" title="Download JSON">
-          <StyledElement onClick={handleSave}>
-            <AiOutlineSave />
-          </StyledElement>
-        </Tooltip>
-
-        <Tooltip className="mobile" title="Download Image">
-          <StyledElement onClick={() => setVisible("download")(true)}>
-            <FiDownload />
-          </StyledElement>
-        </Tooltip>
-
-        <Tooltip title="Delete JSON">
-          <StyledElement onClick={() => setVisible("clear")(true)}>
-            <AiOutlineDelete />
-          </StyledElement>
-        </Tooltip>
-
-        <Tooltip className="desktop" title="View Cloud">
-          <StyledElement onClick={() => setVisible("cloud")(true)}>
-            <VscCloud />
-          </StyledElement>
-        </Tooltip>
+        <SidebarButton
+          title="Edit JSON"
+          deviceDisplay="mobile"
+          onClick={() => toggleFullscreen(!fullscreen)}
+          component={<AiOutlineEdit />}
+        />
+
+        <SidebarButton
+          title="Import File"
+          onClick={() => setVisible("import")(true)}
+          component={<AiOutlineFileAdd />}
+        />
+
+        <SidebarButton
+          title="Rotate Layout"
+          onClick={toggleDirection}
+          component={<StyledFlowIcon rotate={rotateLayout(direction)} />}
+        />
+
+        <SidebarButton
+          title="Center View"
+          deviceDisplay="mobile"
+          onClick={centerView}
+          component={<MdCenterFocusWeak />}
+        />
+
+        <SidebarButton
+          title={foldNodes ? "Unfold Nodes" : "Fold Nodes"}
+          deviceDisplay="desktop"
+          onClick={toggleFoldNodes}
+          component={foldNodes ? <CgArrowsShrinkH /> : <CgArrowsMergeAltH />}
+        />
+
+        <SidebarButton
+          title={graphCollapsed ? "Expand Graph" : "Collapse Graph"}
+          deviceDisplay="desktop"
+          onClick={toggleExpandCollapseGraph}
+          component={graphCollapsed ? <VscExpandAll /> : <VscCollapseAll />}
+        />
+
+        <SidebarButton
+          title="Download JSON"
+          deviceDisplay="desktop"
+          onClick={handleSave}
+          component={<AiOutlineSave />}
+        />
+
+        <SidebarButton
+          title="Download Image"
+          deviceDisplay="mobile"
+          onClick={() => setVisible("download")(true)}
+          component={<FiDownload />}
+        />
+
+        <SidebarButton
+          title="Delete JSON"
+          onClick={() => setVisible("clear")(true)}
+          component={<AiOutlineDelete />}
+        />
+
+        <SidebarButton
+          title="View Cloud"
+          deviceDisplay="desktop"
+          onClick={() => setVisible("cloud")(true)}
+          component={<VscCloud />}
+        />
       </StyledTopWrapper>
       <StyledBottomWrapper>
-        <Tooltip title="Account">
-          <StyledElement onClick={() => setVisible("account")(true)}>
-            <VscAccount />
-          </StyledElement>
-        </Tooltip>
-        <Tooltip title="Settings">
-          <StyledElement onClick={() => setVisible("settings")(true)}>
-            <VscSettingsGear />
-          </StyledElement>
-        </Tooltip>
+        <SidebarButton
+          title="Account"
+          onClick={() => setVisible("account")(true)}
+          component={<VscAccount />}
+        />
+        <SidebarButton
+          title="Settings"
+          onClick={() => setVisible("settings")(true)}
+          component={<VscSettingsGear />}
+        />
       </StyledBottomWrapper>
     </StyledSidebar>
   );

src/components/Tooltip/index.tsx

@@ -5,14 +5,9 @@ interface TooltipProps extends React.ComponentPropsWithoutRef<"div"> {
   title?: string;
 }
 
-const StyledTooltipWrapper = styled.div`
-  position: relative;
-  width: fit-content;
-  height: 100%;
-`;
-
-const StyledTooltip = styled.div<{ visible: boolean }>`
+const StyledTooltip = styled.div`
   position: absolute;
+  display: none;
   top: 0;
   right: 0;
   transform: translate(calc(100% + 15px), 25%);
@@ -21,7 +16,6 @@ const StyledTooltip = styled.div<{ visible: boolean }>`
   color: ${({ theme }) => theme.TEXT_NORMAL};
   border-radius: 5px;
   padding: 6px 8px;
-  display: ${({ visible }) => (visible ? "initial" : "none")};
   white-space: nowrap;
   font-family: "Mona Sans";
   font-size: 16px;
@@ -47,22 +41,23 @@ const StyledTooltip = styled.div<{ visible: boolean }>`
   }
 `;
 
-const StyledChildren = styled.div``;
+const StyledTooltipWrapper = styled.div`
+  position: relative;
+  width: fit-content;
+  height: 100%;
+
+  &:hover ${StyledTooltip} {
+    display: initial;
+  }
+`;
 
 export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   children,
   title,
   ...props
-}) => {
-  const [visible, setVisible] = React.useState(false);
-
-  return (
-    <StyledTooltipWrapper {...props}>
-      {title && <StyledTooltip visible={visible}>{title}</StyledTooltip>}
-
-      <StyledChildren onMouseEnter={() => setVisible(true)} onMouseLeave={() => setVisible(false)}>
-        {children}
-      </StyledChildren>
-    </StyledTooltipWrapper>
-  );
-};
+}) => (
+  <StyledTooltipWrapper {...props}>
+    {title && <StyledTooltip>{title}</StyledTooltip>}
+    <div>{children}</div>
+  </StyledTooltipWrapper>
+);

src/containers/Modals/CloudModal/index.tsx

@@ -152,11 +152,9 @@ const CreateCard: React.FC = () => (
 );
 
 export const CloudModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
-  const { isReady, query } = useRouter();
+  const { query } = useRouter();
 
-  const { data, isFetching, refetch } = useQuery(["allJson", query], () => getAllJson(), {
-    enabled: isReady,
-  });
+  const { data, isFetching, refetch } = useQuery(["allJson", query], () => getAllJson());
 
   return (
     <StyledModal visible={visible} setVisible={setVisible}>

src/services/db/json.tsx

@@ -24,7 +24,7 @@ const saveJson = async ({ id, data }): Promise<{ data: { _id: string } }> => {
   });
 };
 
-const getAllJson = async (): Promise<{ data: JSON[] }> => await altogic.endpoint.get(`json`);
+const getAllJson = async (): Promise<{ data: { result: JSON[] } }> => await altogic.endpoint.get(`json`);
 
 const updateJson = async (id: string, data: object) =>
   await altogic.endpoint.put(`json/${id}`, {