refactor: store accordion preference

src/app/components/Accordion/Accordion.test.tsx

@@ -98,9 +98,9 @@ describe("Button", () => {
 
 	it("should toggle the accordion on click", async () => {
 		const Accordion = () => {
-			useAccordion();
+			useAccordion("accordion");
 
-			const { isExpanded, handleHeaderClick } = useAccordion();
+			const { isExpanded, handleHeaderClick } = useAccordion("accordion");
 
 			return (
 				<AccordionWrapper>

src/app/components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -25,6 +25,57 @@ exports[`Button > should hide the toggle button if no onClick method 1`] = `
 </div>
 `;
 
+exports[`Button > should not set it expanded if no stored value 1`] = `
+<div>
+  <div
+    class="css-fvpuky"
+  >
+    <div
+      class="select-none cursor-pointer group md:h-20 py-6 px-8 md:p-4 flex flex-row items-center border-theme-secondary-300 dark:border-theme-secondary-800"
+      data-testid="AccordionHeader"
+    >
+      <div
+        class="flex flex-grow flex-row items-center"
+      >
+        Header
+      </div>
+      <div
+        class="ml-4 flex flex-shrink-0 items-center self-stretch transition-all duration-100 css-o6tyc"
+      >
+        <div
+          class="css-tz6w2"
+          data-testid="Accordion__toggle"
+        >
+          <div
+            class="transition-transform css-15txs7d"
+            height="10"
+            width="10"
+          >
+            <svg
+              id="chevron-down-small"
+              viewBox="0 0 10 10"
+              x="0"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+              y="0"
+            >
+              <path
+                d="M9 3.1L5.2 6.9c-.1.1-.3.1-.4 0L1 3.1"
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Button > should render 1`] = `
 <div>
   <div

src/app/hooks/use-accordion.ts

@@ -1,17 +1,37 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
-export const useAccordion = () => {
-	const [isExpanded, setIsExpanded] = useState(true);
+const getStorageKey = (key: string) => `accordion_${key}_isExpanded`;
+
+export const useAccordion = (key: string) => {
+	const storageKey = getStorageKey(key);
+	const [isExpanded, setIsExpanded] = useState<boolean>(() => {
+		const storedValue = localStorage.getItem(storageKey);
+		return storedValue ? JSON.parse(storedValue) : true;
+	});
 
 	const handleHeaderClick = useCallback(
 		(event: React.MouseEvent) => {
 			event.stopPropagation();
 			event.preventDefault();
 
-			setIsExpanded(!isExpanded);
+			const newValue = !isExpanded;
+			setIsExpanded(newValue);
+			localStorage.setItem(storageKey, JSON.stringify(newValue));
 		},
-		[isExpanded],
+		[isExpanded, storageKey],
 	);
 
+	useEffect(() => {
+		const handleStorageChange = () => {
+			const storedValue = localStorage.getItem(storageKey);
+			if (storedValue) {
+				setIsExpanded(JSON.parse(storedValue));
+			}
+		};
+
+		window.addEventListener("storage", handleStorageChange);
+		return () => window.removeEventListener("storage", handleStorageChange);
+	}, [storageKey]);
+
 	return { handleHeaderClick, isExpanded };
 };

src/domains/contact/components/ContactListMobile/ContactListItemMobile.tsx

@@ -40,7 +40,7 @@ export const ContactListItemMobile: React.VFC<Properties> = ({
 		[availableNetworks, onSend],
 	);
 
-	const { isExpanded, handleHeaderClick } = useAccordion();
+	const { isExpanded, handleHeaderClick } = useAccordion(`${profile.id()}_contact_list_mobile_${contact.id()}`);
 
 	return (
 		<AccordionWrapper>

src/domains/setting/pages/Servers/Servers.test.tsx

@@ -1000,6 +1000,10 @@ describe("Servers Settings", () => {
 				},
 			);
 
+			const table = screen.getByTestId(customPeerListTestId);
+
+			await userEvent.click(within(table).getAllByTestId(networkAccordionIconTestId)[0]);
+
 			await waitFor(() => expect(screen.queryByTestId(peerStatusLoadingTestId)).not.toBeInTheDocument());
 
 			await userEvent.click(screen.queryAllByTestId("CustomPeers-network-item--mobile--refresh")[0]);
@@ -1406,10 +1410,10 @@ describe("Servers Settings", () => {
 			);
 
 			// Is loading initially
-			expect(screen.getAllByTestId(peerStatusLoadingTestId)).toHaveLength(6);
+			expect(screen.getAllByTestId(peerStatusLoadingTestId)).toHaveLength(3);
 
 			// After ping it should show error
-			await waitFor(() => expect(screen.getAllByTestId(peerStatusErrorTestId)).toHaveLength(6));
+			await waitFor(() => expect(screen.getAllByTestId(peerStatusErrorTestId)).toHaveLength(3));
 
 			expect(asFragment()).toMatchSnapshot();
 		});
@@ -1430,7 +1434,7 @@ describe("Servers Settings", () => {
 			);
 
 			// After ping it should show error
-			await waitFor(() => expect(screen.getAllByTestId(peerStatusErrorTestId)).toHaveLength(5));
+			await waitFor(() => expect(screen.getAllByTestId(peerStatusErrorTestId)).toHaveLength(4));
 
 			expect(asFragment()).toMatchSnapshot();
 		});