Move to function component (#11)

src/ui/PenpotExporter.tsx

@@ -1,87 +1,69 @@
-import { Component } from 'react';
+import { useEffect, useState } from 'react';
 import slugify from 'slugify';
 
 import { createPenpotFile } from './converters';
 import { validateFont } from './validators';
 
-type PenpotExporterState = {
+export const PenpotExporter = () => {
-  missingFonts: Set<string>;
+  const [missingFonts, setMissingFonts] = useState(new Set<string>());
-  exporting: boolean;
+  const [exporting, setExporting] = useState(false);
-};
 
-export default class PenpotExporter extends Component<unknown, PenpotExporterState> {
+  const addFontWarning = (font: string) => {
-  state: PenpotExporterState = {
+    setMissingFonts(missingFonts => missingFonts.add(font));
-    missingFonts: new Set(),
-    exporting: false
-  };
-
-  componentDidMount = () => {
-    window.addEventListener('message', this.onMessage);
-  };
-
-  componentDidUpdate = () => {
-    this.setDimensions();
-  };
-
-  componentWillUnmount = () => {
-    window.removeEventListener('message', this.onMessage);
-  };
-  addFontWarning(font: string) {
-    const newMissingFonts = this.state.missingFonts;
-    newMissingFonts.add(font);
-
-    this.setState(() => ({ missingFonts: newMissingFonts }));
-  }
-
-  onCreatePenpot = () => {
-    this.setState(() => ({ exporting: true }));
-    parent.postMessage({ pluginMessage: { type: 'export' } }, '*');
-  };
-
-  onCancel = () => {
-    parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*');
   };
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onMessage = (event: any) => {
+  const onMessage = (event: any) => {
     if (event.data.pluginMessage.type == 'FIGMAFILE') {
       const file = createPenpotFile(event.data.pluginMessage.data);
-      // validate file.fontNames
+
       file.fontNames.forEach(font => {
         if (!validateFont(font)) {
-          this.addFontWarning(slugify(font.family.toLowerCase()));
+          addFontWarning(slugify(font.family.toLowerCase()));
         }
       });
+
       file.penpotFile.export();
-      this.setState(() => ({ exporting: false }));
+
+      setExporting(false);
     }
   };
 
-  setDimensions = () => {
+  const onCreatePenpot = () => {
-    const isMissingFonts = this.state.missingFonts.size > 0;
+    setExporting(true);
+
+    parent.postMessage({ pluginMessage: { type: 'export' } }, '*');
+  };
+
+  const onCancel = () => {
+    parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*');
+  };
+
+  const setDimensions = () => {
+    const isMissingFonts = missingFonts.size > 0;
 
     let width = 300;
     let height = 280;
 
     if (isMissingFonts) {
-      height += this.state.missingFonts.size * 20;
+      height += missingFonts.size * 20;
       width = 400;
       parent.postMessage({ pluginMessage: { type: 'resize', width: width, height: height } }, '*');
     }
   };
 
-  renderFontWarnings = () => {
+  useEffect(() => {
-    return (
+    window.addEventListener('message', onMessage);
-      <ul>
+
-        {Array.from(this.state.missingFonts).map(font => (
+    return () => {
-          <li key={font}>{font}</li>
+      window.removeEventListener('message', onMessage);
-        ))}
+    };
-      </ul>
+  }, []);
-    );
+
-  };
+  useEffect(() => {
+    setDimensions();
+  }, [missingFonts]);
 
-  render() {
-    // Update the dimensions of the plugin window based on available data and selections
   return (
     <main>
       <header>
@@ -89,22 +71,27 @@ export default class PenpotExporter extends Component<unknown, PenpotExporterSta
         <h2>Penpot Exporter</h2>
       </header>
       <section>
-          <div style={{ display: this.state.missingFonts.size > 0 ? 'inline' : 'none' }}>
+        <div style={{ display: missingFonts.size > 0 ? 'inline' : 'none' }}>
           <div id="missing-fonts">
-              {this.state.missingFonts.size} non-default font
+            {missingFonts.size} non-default font
-              {this.state.missingFonts.size > 1 ? 's' : ''}:{' '}
+            {missingFonts.size > 1 ? 's' : ''}:{' '}
           </div>
           <small>Ensure fonts are installed in Penpot before importing.</small>
-            <div id="missing-fonts-list">{this.renderFontWarnings()}</div>
+          <div id="missing-fonts-list">
+            <ul>
+              {Array.from(missingFonts).map(font => (
+                <li key={font}>{font}</li>
+              ))}
+            </ul>
+          </div>
         </div>
       </section>
       <footer>
-          <button className="brand" disabled={this.state.exporting} onClick={this.onCreatePenpot}>
+        <button className="brand" disabled={exporting} onClick={onCreatePenpot}>
-            {this.state.exporting ? 'Exporting...' : 'Export to Penpot'}
+          {exporting ? 'Exporting...' : 'Export to Penpot'}
         </button>
-          <button onClick={this.onCancel}>Cancel</button>
+        <button onClick={onCancel}>Cancel</button>
       </footer>
     </main>
   );
-  }
+};
-}

src/ui/ui.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import PenpotExporter from './PenpotExporter';
+import { PenpotExporter } from './PenpotExporter';
 import './ui.css';
 
 createRoot(document.getElementById('penpot-export-page') as HTMLElement).render(