add open state to the session storage (#26)

Co-authored-by: sa23sa <74133458+sa23sa@users.noreply.github.com>

Author: Ahmed Nawaf

package-lock.json

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { Logo } from "./components/Logo";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import { RDTContextProvider } from "./context/RDTContext";
 import { tabs } from "./tabs";
 import { useTimelineHandler } from "./hooks/useTimelineHandler";
@@ -18,9 +18,14 @@ interface Props extends RemixDevToolsProps {
 }
 
 const RemixDevTools = ({ defaultOpen, position }: Props) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-  const { activeTab, setActiveTab, setShouldConnectWithForge, height } =
-    useRDTContext();
+  const {
+    activeTab,
+    setActiveTab,
+    setShouldConnectWithForge,
+    height,
+    setPersistOpen,
+    persistOpen,
+  } = useRDTContext();
   const { enableResize, disableResize, isResizing } = useResize();
   useTimelineHandler();
   const { isConnected, isConnecting } = useGetSocket();
@@ -29,12 +34,15 @@ const RemixDevTools = ({ defaultOpen, position }: Props) => {
     position === "top-left" ||
     position === "bottom-left" ||
     position === "middle-left";
-
+  const isOpen = useMemo(
+    () => defaultOpen || persistOpen,
+    [persistOpen, defaultOpen]
+  );
   return (
     <div className="remix-dev-tools">
       <div
         style={{ zIndex: 9999 }}
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={() => setPersistOpen(!isOpen)}
         className={clsx(
           "rdt-fixed rdt-m-1.5 rdt-h-14 rdt-w-14 rdt-cursor-pointer rdt-rounded-full ",
           position === "bottom-right" && "rdt-bottom-0 rdt-right-0",

src/RemixDevTools/RemixDevTools.tsx

@@ -15,6 +15,7 @@ export type RemixDevToolsState = {
     port: number;
     height: number;
   };
+  persistOpen: boolean;
 };
 
 export const initialState: RemixDevToolsState = {
@@ -28,6 +29,7 @@ export const initialState: RemixDevToolsState = {
     port: 3003,
     height: 400,
   },
+  persistOpen: false,
 };
 
 export type ReducerActions = Pick<RemixDevToolsActions, "type">["type"];
@@ -109,6 +111,11 @@ type SetShouldConnectToForgeAction = {
   payload: boolean;
 };
 
+type SetPersistOpenAction = {
+  type: "SET_PERSIST_OPEN";
+  payload: boolean;
+};
+
 /** Aggregate of all action types */
 export type RemixDevToolsActions =
   | SetTimelineEvent
@@ -123,7 +130,8 @@ export type RemixDevToolsActions =
   | SetRouteWildcards
   | SetDevToolsHeight
   | SetShouldConnectToForgeAction
-  | SetIsSubmittedAction;
+  | SetIsSubmittedAction
+  | SetPersistOpenAction;
 
 export const rdtReducer = (
   state: RemixDevToolsState = initialState,
@@ -269,6 +277,11 @@ export const rdtReducer = (
           shouldConnectWithForge: payload,
         },
       };
+    case "SET_PERSIST_OPEN":
+      return {
+        ...state,
+        persistOpen: payload,
+      };
     default:
       return state;
   }

src/RemixDevTools/context/rdtReducer.ts

@@ -11,7 +11,8 @@ const useRDTContext = () => {
     throw new Error("useRDTContext must be used within a RDTContextProvider");
   }
   const { state, dispatch } = context;
-  const { timeline, settings, showRouteBoundaries, terminals } = state;
+  const { timeline, settings, showRouteBoundaries, terminals, persistOpen } =
+    state;
   const { activeTab, shouldConnectWithForge, routeWildcards, port, height } =
     settings;
 
@@ -118,6 +119,16 @@ const useRDTContext = () => {
     [dispatch]
   );
 
+  const setPersistOpen = useCallback(
+    (persistOpen: boolean) => {
+      dispatch({
+        type: "SET_PERSIST_OPEN",
+        payload: persistOpen,
+      });
+    },
+    [dispatch]
+  );
+
   return {
     setTimelineEvent,
     setActiveTab,
@@ -139,6 +150,8 @@ const useRDTContext = () => {
     clearTerminalOutput,
     addTerminalHistory,
     setProcessId,
+    persistOpen,
+    setPersistOpen,
   };
 };