Merge pull request #790 from cam-inc/retains-group-open-status

fix(app): retains group toggle open status

.changeset/twelve-ducks-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@viron/app": minor
+---
+
+retains group toggle open status

packages/app/src/hooks/endpoint.ts

@@ -28,6 +28,7 @@ import {
   useEndpointListUngroupedGlobalStateValue,
   useEndpointGroupListGlobalStateSet,
   useEndpointGroupListSortedGlobalStateValue,
+  useEndpointGroupListGlobalState,
 } from '~/store';
 import {
   Endpoint,
@@ -922,3 +923,19 @@ export const useEndpoint = (): UseEndpointReturn => {
   );
   return ret;
 };
+
+export const useEndpointGroupToggle = (id: string) => {
+  const [endpointGroups, setEndpointGroups] = useEndpointGroupListGlobalState();
+  const endpointGroup = endpointGroups.find((group) => group.id === id);
+  const isOpen = endpointGroup?.isOpen ?? false;
+
+  const toggle = () => {
+    setEndpointGroups((groups) => {
+      return groups.map((group) => {
+        return group.id === id ? { ...group, isOpen: !isOpen } : group;
+      });
+    });
+  };
+
+  return { isOpen, toggle };
+};

packages/app/src/pages/dashboard/endpoints/_/body/index.tsx

@@ -7,7 +7,7 @@ import Head from '~/components/head';
 import ChevronDownIcon from '~/components/icon/chevronDown/outline';
 import ChevronRightIcon from '~/components/icon/chevronRight/outline';
 import PlusIcon from '~/components/icon/plus/outline';
-import { useEndpoint } from '~/hooks/endpoint';
+import { useEndpoint, useEndpointGroupToggle } from '~/hooks/endpoint';
 import { Trans, useTranslation } from '~/hooks/i18n';
 import { Props as LayoutProps } from '~/layouts/';
 import Modal, { useModal } from '~/portals/modal';
@@ -143,19 +143,16 @@ type GroupProps = {
   list: Endpoint[];
 };
 const Group: React.FC<GroupProps> = ({ group, list }) => {
-  const [isOpened, setIsOpened] = useState<boolean>(!!list.length);
-  const handleToggleClick = () => {
-    setIsOpened((currVal) => !currVal);
-  };
+  const { isOpen, toggle } = useEndpointGroupToggle(group.id);
 
-  const ToggleIcon = isOpened ? ChevronDownIcon : ChevronRightIcon;
+  const ToggleIcon = isOpen ? ChevronDownIcon : ChevronRightIcon;
 
   return (
     <div>
       {/* Head */}
       <button
         className="flex gap-1 w-full hover:bg-thm-on-background-faint py-2 rounded"
-        onClick={handleToggleClick}
+        onClick={toggle}
       >
         <span className="p-0.5">
           <ToggleIcon className="w-4 h-4" />
@@ -177,7 +174,7 @@ const Group: React.FC<GroupProps> = ({ group, list }) => {
         className={classnames(
           'grid grid-cols-1 @[740px]:grid-cols-2 @[995px]:grid-cols-3 gap-6 mt-2 py-2',
           {
-            hidden: !isOpened,
+            hidden: !isOpen,
           }
         )}
       >

packages/app/src/types/index.ts

@@ -31,6 +31,7 @@ export type EndpointGroup = {
   name: string;
   description?: string;
   priority?: number;
+  isOpen?: boolean;
 };
 
 export type EndpointID = string;