Refactor context (#139)

* Refactor context

* fix

* fix

ui-src/components/ExportForm.tsx

@@ -2,14 +2,14 @@ import { Button } from '@create-figma-plugin/ui';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import { Stack } from '@ui/components/Stack';
-import { useFigma } from '@ui/context';
+import { useFigmaContext } from '@ui/context';
 
 import { MissingFontsSection } from './MissingFontsSection';
 
 export type FormValues = Record<string, string>;
 
 export const ExportForm = () => {
-  const { cancel, exportPenpot } = useFigma();
+  const { cancel, exportPenpot } = useFigmaContext();
   const methods = useForm<FormValues>();
 
   return (

ui-src/components/ExporterProgress.tsx

@@ -1,11 +1,11 @@
 import { LoadingIndicator } from '@create-figma-plugin/ui';
 
-import { useFigma } from '@ui/context';
+import { useFigmaContext } from '@ui/context';
 
 import { Stack } from './Stack';
 
 export const ExporterProgress = () => {
-  const { currentNode, totalPages, processedPages, downloading } = useFigma();
+  const { currentNode, totalPages, processedPages, downloading } = useFigmaContext();
 
   const truncateText = (text: string, maxChars: number) => {
     if (text.length <= maxChars) {

ui-src/components/MissingFontsSection.tsx

@@ -1,12 +1,12 @@
 import { Banner, IconInfo32, Link, Textbox } from '@create-figma-plugin/ui';
 import { Controller, useFormContext } from 'react-hook-form';
 
-import { useFigma } from '@ui/context';
+import { useFigmaContext } from '@ui/context';
 
 import { Stack } from './Stack';
 
 export const MissingFontsSection = () => {
-  const { missingFonts } = useFigma();
+  const { missingFonts } = useFigmaContext();
 
   if (!missingFonts || !missingFonts.length) return null;
 

ui-src/components/PenpotExporter.tsx

@@ -1,13 +1,13 @@
 import { LoadingIndicator } from '@create-figma-plugin/ui';
 
-import { useFigma } from '@ui/context';
+import { useFigmaContext } from '@ui/context';
 
 import { ExportForm } from './ExportForm';
 import { ExporterProgress } from './ExporterProgress';
 import { PluginReload } from './PluginReload';
 
 export const PenpotExporter = () => {
-  const { loading, needsReload, exporting } = useFigma();
+  const { loading, needsReload, exporting } = useFigmaContext();
 
   if (loading) return <LoadingIndicator />;
 

ui-src/components/PluginReload.tsx

@@ -1,10 +1,10 @@
 import { Banner, Button, IconInfo32 } from '@create-figma-plugin/ui';
 
 import { Stack } from '@ui/components/Stack';
-import { useFigma } from '@ui/context';
+import { useFigmaContext } from '@ui/context';
 
 export const PluginReload = () => {
-  const { reload, cancel } = useFigma();
+  const { reload, cancel } = useFigmaContext();
 
   return (
     <Stack space="small">

ui-src/context/FigmaContext.tsx

@@ -1,113 +1,14 @@
-import { JSX, PropsWithChildren, useEffect, useState } from 'react';
-
-import { FormValues } from '@ui/components/ExportForm';
-import { parse } from '@ui/parser';
-import { PenpotDocument } from '@ui/types';
+import { JSX, PropsWithChildren } from 'react';
 
 import { createGenericContext } from './createGenericContext';
+import { UseFigmaHook, useFigma } from './useFigma';
 
-type Context = {
-  missingFonts: string[] | undefined;
-  needsReload: boolean;
-  loading: boolean;
-  exporting: boolean;
-  downloading: boolean;
-  currentNode: string | undefined;
-  totalPages: number | undefined;
-  processedPages: number | undefined;
-  reload: () => void;
-  cancel: () => void;
-  exportPenpot: (data: FormValues) => void;
-};
-
-const [useFigma, StateContextProvider] = createGenericContext<Context>();
+const [useFigmaContext, StateContextProvider] = createGenericContext<UseFigmaHook>();
 
 const FigmaProvider = ({ children }: PropsWithChildren): JSX.Element => {
-  const [missingFonts, setMissingFonts] = useState<string[]>();
-  const [needsReload, setNeedsReload] = useState(false);
-  const [loading, setLoading] = useState(true);
-  const [exporting, setExporting] = useState(false);
-  const [downloading, setDownloading] = useState(false);
-  const [currentNode, setCurrentNode] = useState<string | undefined>();
-  const [totalPages, setTotalPages] = useState<number | undefined>();
-  const [processedPages, setProcessedPages] = useState<number | undefined>();
-
-  const onMessage = (event: MessageEvent<{ pluginMessage: { type: string; data: unknown } }>) => {
-    if (event.data.pluginMessage?.type == 'PENPOT_DOCUMENT') {
-      setDownloading(true);
-
-      const document = event.data.pluginMessage.data as PenpotDocument;
-      const file = parse(document);
-
-      file.export();
-    } else if (event.data.pluginMessage?.type == 'CUSTOM_FONTS') {
-      setMissingFonts(event.data.pluginMessage.data as string[]);
-      setLoading(false);
-      setNeedsReload(false);
-    } else if (event.data.pluginMessage?.type == 'CHANGES_DETECTED') {
-      setNeedsReload(true);
-    } else if (event.data.pluginMessage?.type === 'PROGRESS_NODE') {
-      setCurrentNode(event.data.pluginMessage.data as string);
-    } else if (event.data.pluginMessage?.type === 'PROGRESS_TOTAL_PAGES') {
-      setTotalPages(event.data.pluginMessage.data as number);
-      setProcessedPages(0);
-    } else if (event.data.pluginMessage?.type === 'PROGRESS_PROCESSED_PAGES') {
-      setProcessedPages(event.data.pluginMessage.data as number);
-    }
-  };
-
-  const reload = () => {
-    setLoading(true);
-    parent.postMessage({ pluginMessage: { type: 'reload' } }, '*');
-  };
-
-  const cancel = () => {
-    parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*');
-  };
-
-  const exportPenpot = (data: FormValues) => {
-    setExporting(true);
-
-    parent.postMessage(
-      {
-        pluginMessage: {
-          type: 'export',
-          data
-        }
-      },
-      '*'
-    );
-  };
-
-  useEffect(() => {
-    window.addEventListener('message', onMessage);
-
-    parent.postMessage({ pluginMessage: { type: 'ready' } }, '*');
-
-    return () => {
-      window.removeEventListener('message', onMessage);
-    };
-  }, []);
+  const hook = useFigma();
 
-  return (
-    <StateContextProvider
-      value={{
-        missingFonts,
-        needsReload,
-        loading,
-        exporting,
-        downloading,
-        currentNode,
-        totalPages,
-        processedPages,
-        reload,
-        cancel,
-        exportPenpot
-      }}
-    >
-      {children}
-    </StateContextProvider>
-  );
+  return <StateContextProvider value={hook}>{children}</StateContextProvider>;
 };
 
-export { FigmaProvider, useFigma };
+export { FigmaProvider, useFigmaContext };

ui-src/context/useFigma.ts

@@ -0,0 +1,150 @@
+import { useEffect, useState } from 'react';
+
+import { FormValues } from '@ui/components/ExportForm';
+import { parse } from '@ui/parser';
+import { PenpotDocument } from '@ui/types';
+
+export type UseFigmaHook = {
+  missingFonts: string[] | undefined;
+  needsReload: boolean;
+  loading: boolean;
+  exporting: boolean;
+  downloading: boolean;
+  currentNode: string | undefined;
+  totalPages: number | undefined;
+  processedPages: number | undefined;
+  reload: () => void;
+  cancel: () => void;
+  exportPenpot: (data: FormValues) => void;
+};
+
+type PluginMessage =
+  | PenpotDocumentMessage
+  | CustomFontsMessage
+  | ChangesDetectedMessage
+  | ProgressNodeMessage
+  | ProgressTotalPagesMessage
+  | ProgressProcessedPagesMessage;
+
+type PenpotDocumentMessage = {
+  type: 'PENPOT_DOCUMENT';
+  data: PenpotDocument;
+};
+
+type CustomFontsMessage = {
+  type: 'CUSTOM_FONTS';
+  data: string[];
+};
+
+type ChangesDetectedMessage = {
+  type: 'CHANGES_DETECTED';
+};
+
+type ProgressNodeMessage = {
+  type: 'PROGRESS_NODE';
+  data: string;
+};
+
+type ProgressTotalPagesMessage = {
+  type: 'PROGRESS_TOTAL_PAGES';
+  data: number;
+};
+
+type ProgressProcessedPagesMessage = {
+  type: 'PROGRESS_PROCESSED_PAGES';
+  data: number;
+};
+
+export const useFigma = (): UseFigmaHook => {
+  const [missingFonts, setMissingFonts] = useState<string[]>();
+  const [needsReload, setNeedsReload] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [exporting, setExporting] = useState(false);
+  const [downloading, setDownloading] = useState(false);
+  const [currentNode, setCurrentNode] = useState<string | undefined>();
+  const [totalPages, setTotalPages] = useState<number | undefined>();
+  const [processedPages, setProcessedPages] = useState<number | undefined>();
+
+  const postMessage = (type: string, data?: unknown) => {
+    parent.postMessage({ pluginMessage: { type, data } }, '*');
+  };
+
+  const onMessage = (event: MessageEvent<{ pluginMessage?: PluginMessage }>) => {
+    if (!event.data.pluginMessage) return;
+
+    const { pluginMessage } = event.data;
+
+    switch (pluginMessage.type) {
+      case 'PENPOT_DOCUMENT': {
+        setDownloading(true);
+
+        const file = parse(pluginMessage.data);
+
+        file.export();
+        break;
+      }
+      case 'CUSTOM_FONTS': {
+        setMissingFonts(pluginMessage.data);
+        setLoading(false);
+        setNeedsReload(false);
+        break;
+      }
+      case 'CHANGES_DETECTED': {
+        setNeedsReload(true);
+        break;
+      }
+      case 'PROGRESS_NODE': {
+        setCurrentNode(pluginMessage.data);
+        break;
+      }
+      case 'PROGRESS_TOTAL_PAGES': {
+        setTotalPages(pluginMessage.data);
+        setProcessedPages(0);
+        break;
+      }
+      case 'PROGRESS_PROCESSED_PAGES': {
+        setProcessedPages(pluginMessage.data);
+        break;
+      }
+    }
+  };
+
+  const reload = () => {
+    setLoading(true);
+    postMessage('reload');
+  };
+
+  const cancel = () => {
+    postMessage('cancel');
+  };
+
+  const exportPenpot = (data: FormValues) => {
+    setExporting(true);
+
+    postMessage('export', data);
+  };
+
+  useEffect(() => {
+    window.addEventListener('message', onMessage);
+
+    postMessage('ready');
+
+    return () => {
+      window.removeEventListener('message', onMessage);
+    };
+  }, []);
+
+  return {
+    missingFonts,
+    needsReload,
+    loading,
+    exporting,
+    downloading,
+    currentNode,
+    totalPages,
+    processedPages,
+    reload,
+    cancel,
+    exportPenpot
+  };
+};