Merge pull request #2884 from ever-co/feat/create-generic-useLocalSto…

…rageState-hook

[Feat]: Add Generic useLocalStorageState hook for localStorage management

apps/web/app/hooks/useLocalStorageState.ts

@@ -0,0 +1,30 @@
+"use client"
+import { useState, useEffect } from 'react';
+/**
+ * Custom hook to manage state that is synchronized with `localStorage`.
+ *
+ * @template T - The type of the state value.
+ * @param {string} key - The key under which the value is stored in `localStorage`.
+ * @param {T} defaultValue - The default value to use if the key is not found in `localStorage`.
+ *
+ * @returns {[T, React.Dispatch<React.SetStateAction<T>>]} - Returns a stateful value and a function to update it.
+ *
+ * @example
+ * const [calendar, setCalendar] = useLocalStorageState<ChangeCalendar>('calendar-timesheet', 'Calendar');
+ *
+ * - The state `calendar` will be initialized with the value from `localStorage` if it exists, or 'Calendar' if not.
+ * - Any updates to `calendar` will be reflected in `localStorage`.
+ */
+
+export const useLocalStorageState = <T,>(key: string, defaultValue: T) => {
+  const [state, setState] = useState<T>(() =>
+    (typeof window !== 'undefined' && window.localStorage.getItem(key) as T) || defaultValue
+  );
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(key, state as any);
+    }
+  }, [state, key]);
+
+  return [state, setState] as const;
+};

apps/web/lib/features/user-profile-plans.tsx

@@ -32,6 +32,7 @@ import { handleDragAndDrop } from '@app/helpers/drag-and-drop';
 import { DragDropContext, Droppable, Draggable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd';
 import { useDateRange } from '@app/hooks/useDateRange';
 import { checkPastDate } from 'lib/utils';
+import { useLocalStorageState } from '@app/hooks/useLocalStorageState';
 
 export type FilterTabs = 'Today Tasks' | 'Future Tasks' | 'Past Tasks' | 'All Tasks' | 'Outstanding';
 type FilterOutstanding = 'ALL' | 'DATE';
@@ -42,16 +43,12 @@ export function UserProfilePlans() {
 			? (window.localStorage.getItem('daily-plan-tab') as FilterTabs) || null
 			: 'Today Tasks';
 
-	const defaultOutstanding =
-		typeof window !== 'undefined'
-			? (window.localStorage.getItem('outstanding') as FilterOutstanding) || null
-			: 'ALL';
 
 	const profile = useUserProfilePage();
 	const { todayPlan, futurePlans, pastPlans, outstandingPlans, sortedPlans, profileDailyPlans } = useDailyPlan();
 	const fullWidth = useRecoilValue(fullWidthState);
 	const [currentTab, setCurrentTab] = useState<FilterTabs>(defaultTab || 'Today Tasks');
-	const [currentOutstanding, setCurrentOutstanding] = useState<FilterOutstanding>(defaultOutstanding || 'ALL');
+	const [currentOutstanding, setCurrentOutstanding] = useLocalStorageState<FilterOutstanding>('outstanding', 'ALL');
 
 	const [currentDataDailyPlan, setCurrentDataDailyPlan] = useRecoilState(dataDailyPlanState);
 	const { setDate, date } = useDateRange(currentTab);
@@ -96,9 +93,6 @@ export function UserProfilePlans() {
 		}
 	}, [currentTab, setCurrentDataDailyPlan, setDate, date]);
 
-	useEffect(() => {
-		window.localStorage.setItem('outstanding', currentOutstanding);
-	}, [currentOutstanding]);
 
 	return (
 		<div className="">