refactor: extract layout to a hook

thenick775 · Dec 28, 2023 · bd7f12f · bd7f12f
1 parent 1c74a50
commit bd7f12f
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 50 deletions.
diff --git a/gbajs3/src/components/modals/load-local-rom.tsx b/gbajs3/src/components/modals/load-local-rom.tsx
@@ -6,7 +6,6 @@ import { ModalBody } from './modal-body.tsx';
 import { ModalFooter } from './modal-footer.tsx';
 import { ModalHeader } from './modal-header.tsx';
 import { EmulatorContext } from '../../context/emulator/emulator.tsx';
-import { LayoutContext } from '../../context/layout/layout.tsx';
 import { ModalContext } from '../../context/modal/modal.tsx';
 import {
   EmbeddedProductTour,
@@ -58,7 +57,6 @@ const RomList = styled.ul`
 export const LoadLocalRomModal = () => {
   const { setIsModalOpen } = useContext(ModalContext);
   const { emulator } = useContext(EmulatorContext);
-  const { hasSetLayout, clearLayouts } = useContext(LayoutContext);
   const romListId = useId();
   const ignorePaths = ['.', '..'];
   const localRoms = emulator
@@ -89,11 +87,7 @@ export const LoadLocalRomModal = () => {
             <StyledLi key={`${romName}_${idx}`}>
               <LoadRomButton
                 onClick={() => {
-                  const hasSucceeded = emulator?.run(
-                    emulator.filePaths().gamePath + '/' + romName
-                  );
-                  if (hasSucceeded && !hasSetLayout) clearLayouts();
-
+                  emulator?.run(emulator.filePaths().gamePath + '/' + romName);
                   setIsModalOpen(false);
                 }}
               >

diff --git a/gbajs3/src/components/modals/load-rom.tsx b/gbajs3/src/components/modals/load-rom.tsx
@@ -8,7 +8,6 @@ import { ModalBody } from './modal-body.tsx';
 import { ModalFooter } from './modal-footer.tsx';
 import { ModalHeader } from './modal-header.tsx';
 import { EmulatorContext } from '../../context/emulator/emulator.tsx';
-import { LayoutContext } from '../../context/layout/layout.tsx';
 import { ModalContext } from '../../context/modal/modal.tsx';
 import { useListRoms } from '../../hooks/use-list-roms.tsx';
 import { useLoadRom } from '../../hooks/use-load-rom.tsx';
@@ -112,7 +111,6 @@ export const LoadRomModal = () => {
   const theme = useTheme();
   const { setIsModalOpen } = useContext(ModalContext);
   const { emulator } = useContext(EmulatorContext);
-  const { hasSetLayout, clearLayouts } = useContext(LayoutContext);
   const romListId = useId();
   const {
     data: romList,
@@ -130,26 +128,15 @@ export const LoadRomModal = () => {
   );
 
   useEffect(() => {
-    if (!romLoading && romFile && currentRomLoading) {
+    if (!romLoading && romFile) {
       const runCallback = () => {
-        const hasSucceeded = emulator?.run(
-          emulator.filePaths().gamePath + '/' + romFile.name
-        );
-
-        if (hasSucceeded && !hasSetLayout) clearLayouts();
+        emulator?.run(emulator.filePaths().gamePath + '/' + romFile.name);
       };
 
       emulator?.uploadRom(romFile, runCallback);
       setCurrentRomLoading(null);
     }
-  }, [
-    emulator,
-    romLoading,
-    romFile,
-    clearLayouts,
-    currentRomLoading,
-    hasSetLayout
-  ]);
+  }, [emulator, romLoading, romFile]);
 
   const LoadingIndicator = () => (
     <PacmanLoader

diff --git a/gbajs3/src/components/modals/upload-rom.tsx b/gbajs3/src/components/modals/upload-rom.tsx
@@ -9,7 +9,6 @@ import { ModalBody } from './modal-body.tsx';
 import { ModalFooter } from './modal-footer.tsx';
 import { ModalHeader } from './modal-header.tsx';
 import { EmulatorContext } from '../../context/emulator/emulator.tsx';
-import { LayoutContext } from '../../context/layout/layout.tsx';
 import { ModalContext } from '../../context/modal/modal.tsx';
 import {
   EmbeddedProductTour,
@@ -48,7 +47,6 @@ const BiCloudUploadLarge = styled(BiCloudUpload)`
 export const UploadRomModal = () => {
   const { setIsModalOpen } = useContext(ModalContext);
   const { emulator } = useContext(EmulatorContext);
-  const { hasSetLayout, clearLayouts } = useContext(LayoutContext);
   const {
     register,
     reset,
@@ -80,7 +78,6 @@ export const UploadRomModal = () => {
         emulator.filePaths().gamePath + '/' + romFile.name
       );
       if (hasSucceeded) {
-        if (!hasSetLayout) clearLayouts();
         setIsModalOpen(false);
       }
     };

diff --git a/gbajs3/src/context/emulator/emulator.tsx b/gbajs3/src/context/emulator/emulator.tsx
@@ -14,6 +14,7 @@ import {
 } from './consts.tsx';
 import { fadeCanvas } from '../../components/screen/fade.ts';
 import { useEmulator } from '../../hooks/use-emulator.tsx';
+import { useLayouts } from '../../hooks/use-layouts.tsx';
 
 import type {
   GBAEmulator,
@@ -53,6 +54,7 @@ export const EmulatorProvider = ({ children }: EmulatorProviderProps) => {
   const [isEmulatorRunning, setIsEmulatorRunning] = useState(false);
   const [areItemsDraggable, setAreItemsDraggable] = useState(false);
   const [areItemsResizable, setAreItemsResizable] = useState(false);
+  const { hasSetLayout, clearLayouts } = useLayouts();
   const [currentEmulatorVolume] = useLocalStorage(
     emulatorVolumeLocalStorageKey,
     1
@@ -79,6 +81,8 @@ export const EmulatorProvider = ({ children }: EmulatorProviderProps) => {
       if (canvas)
         setVideoDimensions({ width: canvas.width, height: canvas.height });
 
+      if (isSuccessfulRun && !hasSetLayout) clearLayouts();
+
       return isSuccessfulRun;
     };
 
@@ -116,7 +120,9 @@ export const EmulatorProvider = ({ children }: EmulatorProviderProps) => {
     canvas,
     currentEmulatorVolume,
     currentKeyBindings,
-    setVideoDimensions
+    setVideoDimensions,
+    clearLayouts,
+    hasSetLayout
   ]);
 
   return (

diff --git a/gbajs3/src/context/layout/layout.tsx b/gbajs3/src/context/layout/layout.tsx
@@ -1,11 +1,6 @@
-import { useLocalStorage } from '@uidotdev/usehooks';
-import {
-  createContext,
-  useCallback,
-  useEffect,
-  useMemo,
-  type ReactNode
-} from 'react';
+import { createContext, useCallback, useEffect, type ReactNode } from 'react';
+
+import { useLayouts } from '../../hooks/use-layouts.tsx';
 
 type Layout = {
   position?: { x: number; y: number };
@@ -26,8 +21,6 @@ type LayoutContextProps = {
 
 type LayoutProviderProps = { children: ReactNode };
 
-const layoutLocalStorageKey = 'componentLayouts';
-
 export const LayoutContext = createContext<LayoutContextProps>({
   layouts: {},
   hasSetLayout: false,
@@ -36,19 +29,7 @@ export const LayoutContext = createContext<LayoutContextProps>({
 });
 
 export const LayoutProvider = ({ children }: LayoutProviderProps) => {
-  const [layouts, setLayouts] = useLocalStorage<Layouts>(
-    layoutLocalStorageKey,
-    {}
-  );
-  const hasSetLayout = useMemo(
-    () =>
-      !!Object.values(layouts).some(
-        (layout) => !!layout?.position || !!layout?.size
-      ),
-    [layouts]
-  );
-
-  const clearLayouts = useCallback(() => setLayouts({}), [setLayouts]);
+  const { layouts, setLayouts, hasSetLayout, clearLayouts } = useLayouts();
 
   const setLayout = useCallback(
     (layoutKey: string, layout: Layout) =>

diff --git a/gbajs3/src/hooks/use-layouts.tsx b/gbajs3/src/hooks/use-layouts.tsx
@@ -0,0 +1,33 @@
+import { useLocalStorage } from '@uidotdev/usehooks';
+import { useCallback, useMemo } from 'react';
+
+type Layout = {
+  position?: { x: number; y: number };
+  size?: { width: string | number; height: string | number };
+  initialBounds?: DOMRect;
+};
+
+type Layouts = {
+  [key: string]: Layout;
+};
+
+const layoutLocalStorageKey = 'componentLayouts';
+
+export const useLayouts = () => {
+  const [layouts, setLayouts] = useLocalStorage<Layouts>(
+    layoutLocalStorageKey,
+    {}
+  );
+
+  const clearLayouts = useCallback(() => setLayouts({}), [setLayouts]);
+
+  const hasSetLayout = useMemo(
+    () =>
+      !!Object.values(layouts).some(
+        (layout) => !!layout?.position || !!layout?.size
+      ),
+    [layouts]
+  );
+
+  return { layouts, setLayouts, hasSetLayout, clearLayouts };
+};