fix broken eslint, streamlined with movie-web

src/popup.tsx

@@ -1,54 +1,54 @@
-import { useStorage } from '@plasmohq/storage/hook'
+import { useStorage } from '@plasmohq/storage/hook';
 import { useState } from 'react';
+
 import { DEFAULT_DOMAIN_WHITELIST } from '~utils/storage';
 
 function IndexPopup() {
   const [domainInput, setDomainInput] = useState('');
-  const [domainWhiteist, setDomainWhitelist] = useStorage<string[]>('domainWhitelist', (v) => v ?? DEFAULT_DOMAIN_WHITELIST)
+  const [domainWhiteist, setDomainWhitelist] = useStorage<string[]>(
+    'domainWhitelist',
+    (v) => v ?? DEFAULT_DOMAIN_WHITELIST,
+  );
 
-  const [error, setError] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null);
 
   const handleDomainSubmit = () => {
     try {
-      const origin = new URL(domainInput).origin
-      setDomainWhitelist([...domainWhiteist, origin])
-      setDomainInput('')
+      const origin = new URL(domainInput).origin;
+      setDomainWhitelist([...domainWhiteist, origin]);
+      setDomainInput('');
     } catch (e) {
-      setError('Invalid domain')
+      setError('Invalid domain');
     }
-  }
+  };
 
   return (
     <div style={{ width: 300 }}>
       <div style={{ display: 'flex', alignItems: 'center' }}>
-      <h1 style={{flexGrow: 1}}>
-        movie-web
-      </h1>
+        <h1 style={{ flexGrow: 1 }}>movie-web</h1>
 
-      <h3>
-        v{chrome.runtime.getManifest().version}
-      </h3>
+        <h3>v{chrome.runtime.getManifest().version}</h3>
       </div>
 
       <h2 style={{ marginTop: 0 }}>Domains</h2>
 
       <div>
         <div>
-          <input
-            type="text"
-            value={domainInput}
-            onChange={e => setDomainInput(e.target.value)}
-          />
-          <button onClick={handleDomainSubmit}>Save</button>
+          <input type="text" value={domainInput} onChange={(e) => setDomainInput(e.target.value)} />
+          <button type="button" onClick={handleDomainSubmit}>
+            Save
+          </button>
         </div>
-          {error && <span style={{ fontWeight: 'bold' }}>{error}</span>}
+        {error && <span style={{ fontWeight: 'bold' }}>{error}</span>}
         <table>
           <tbody>
             {domainWhiteist.map((domain) => (
               <tr key={domain}>
                 <td>{domain}</td>
                 <td>
-                  <button onClick={() => setDomainWhitelist(domainWhiteist.filter(d => d !== domain))}>Remove</button>
+                  <button type="button" onClick={() => setDomainWhitelist(domainWhiteist.filter((d) => d !== domain))}>
+                    Remove
+                  </button>
                 </td>
               </tr>
             ))}
@@ -56,7 +56,7 @@ function IndexPopup() {
         </table>
       </div>
     </div>
-  )
+  );
 }
 
-export default IndexPopup
+export default IndexPopup;