feat: persist code block tab selection to locaStorage

This comes at the expense of some inevitable hydration errors

Author: a-hariti

src/components/codeContext.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {createContext, useEffect, useState} from 'react';
+import {createContext, useEffect, useReducer, useState} from 'react';
 import Cookies from 'js-cookie';
 
 type ProjectCodeKeywords = {
@@ -88,10 +88,12 @@ export const DEFAULTS: CodeKeywords = {
   USER: undefined,
 };
 
+type SeledtedCodeTabs = Record<string, string | undefined>;
+
 type CodeContextType = {
   codeKeywords: CodeKeywords;
   isLoading: boolean;
-  sharedCodeSelection: [string | null, React.Dispatch<string | null>];
+  sharedCodeSelection: [SeledtedCodeTabs, React.Dispatch<[string, string]>];
   sharedKeywordSelection: [
     Record<string, number>,
     React.Dispatch<Record<string, number>>,
@@ -297,8 +299,18 @@ export function CodeContextProvider({children}: {children: React.ReactNode}) {
   // that is the only namespace that actually has a list
   const sharedKeywordSelection = useState<Record<string, number>>({});
 
+  const storedSelections = Object.fromEntries(
+    Object.entries(
+      // default to an empty object if localStorage is not available on the server
+      typeof localStorage === 'undefined' ? {} : localStorage
+    ).filter(([key]) => key.startsWith('Tabgroup:'))
+  );
+
   // Maintains the global selection for which code block tab is selected
-  const sharedCodeSelection = useState<string | null>(null);
+  // const sharedCodeSelection = useState<SeledtedCodeTabs>(storedSelections);
+  const sharedCodeSelection = useReducer((tabs: SeledtedCodeTabs, [groupId, value]: [string, string]) => {
+    return {...tabs, [groupId]: value};
+  }, storedSelections)
 
   const result: CodeContextType = {
     codeKeywords,

src/components/codeTabs.tsx

@@ -86,10 +86,14 @@ export function CodeTabs({children}: CodeTabProps) {
     }
   });
 
-  const [sharedSelection, setSharedSelection] = codeContext?.sharedCodeSelection ?? [];
+  // The groupId is used to store the selection in localStorage.
+  // It is a unique identifier based on the tab titles.
+  const groupId = 'Tabgroup:' + possibleChoices.sort().join('|');
 
-  const sharedSelectionChoice = sharedSelection
-    ? possibleChoices.find(x => x === sharedSelection)
+  const [sharedSelections, setSharedSelections] = codeContext?.sharedCodeSelection ?? [];
+
+  const sharedSelectionChoice = sharedSelections
+    ? possibleChoices.find(x => x === sharedSelections[groupId])
     : null;
   const localSelectionChoice = localSelection
     ? possibleChoices.find(x => x === localSelection)
@@ -99,6 +103,11 @@ export function CodeTabs({children}: CodeTabProps) {
   const finalSelection =
     sharedSelectionChoice ?? localSelectionChoice ?? possibleChoices[0];
 
+  // Save the selected tab for Tabgroup to localStorage whenever it changes
+  useEffect(() => {
+    localStorage.setItem(groupId, finalSelection);
+  }, [finalSelection]);
+
   // Whenever local selection and the final selection are not in sync, the local
   // selection is updated from the final one.  This means that when the shared
   // selection moves to something that is unsupported by the block it stays on
@@ -117,7 +126,7 @@ export function CodeTabs({children}: CodeTabProps) {
           // see useEffect above.
           setLastScrollOffset(containerRef.current.getBoundingClientRect().y);
         }
-        setSharedSelection?.(choice);
+        setSharedSelections?.([groupId, choice]);
         setLocalSelection(choice);
       }}
     >