* split up

realratchet · Mar 19, 2023 · a2364b5 · a2364b5
1 parent 44fbda0
commit a2364b5
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 65 deletions.
diff --git a/css/app.css b/css/app.css
@@ -1,10 +1,10 @@
 @import "_example/_example.css";
 
-.app {
+.app .header {
     display: grid;
     grid-template-columns: 1fr 3fr 3fr 1fr;
 }
 
-.app .dropdown-container {
+.app .header .dropdown-container {
     padding: 0px 16px;
 }
diff --git a/src/components/app.jsx b/src/components/app.jsx
@@ -1,81 +1,32 @@
 import "../../css/app.css";
-import { Fragment, useState } from "react";
+import { Header } from "./header.jsx";
 import { ipcRenderer } from "electron";
+import { Fragment, useState } from "react";
 
-let pkg, setPkg;
+/**
+ * @type {[string, React.Dispatch<React.SetStateAction<string>>]}
+ */
+let statePkg;
 
 async function onUserInteractionReply(_, { type, payload } = {}) {
+    const [, setPkg] = statePkg;
+
     switch (type) {
         case "read-package": setPkg(payload); break;
         default: throw new Error(`Unsupported event type: ${type}`);
     }
 }
 
 function App() {
-    const [activeExpGroup, setExpGroup] = useState("");
-    const [activeExp, setExp] = useState("");
-
-    [pkg, setPkg] = useState();
-
-    const groups = (pkg?.exports || []).reduce(function (acc, exp) {
-        const container = acc[exp.type] = acc[exp.type] || [];
-
-        container.push(exp);
+    const stateExpGroup = useState("");
+    const stateExp = useState("");
 
-        return acc;
-    }, {});
-
-    const groupKeys = Object.keys(groups), groupCount = groupKeys.length;
-    const expCount = activeExpGroup !== "" ? groups[activeExpGroup].length : 0;
-
-    function onGroupChanged({ target: { value } }) {
-        setExpGroup(value);
-        setExp("");
-    }
-
-    function onExportChanged({ target: { value } }) {
-        ipcRenderer.send("user-interaction", {
-            type: "load-export",
-            payload: parseInt(value)
-        });
-
-        setExp(value);
-    }
+    statePkg = useState("");
 
     return (
-        <Fragment>
-            <div className="app">
-                <div>{pkg?.filename || "No file"}</div>
-                <div className="dropdown-container">
-                    <select value={activeExpGroup} disabled={groupCount === 0} onChange={onGroupChanged}>
-                        <option disabled={true} value="">-Nothing selected-</option>
-                        {
-                            groupKeys.map((gr, i) => (<option key={`group-dd-${i}`} value={gr}>{gr}</option>))
-                        }
-                    </select>
-                </div>
-                <div className="dropdown-container">
-                    <select value={activeExp} disabled={expCount === 0} onChange={onExportChanged} /*onClick={onExportChanged}*/>
-                        <option disabled={true} value="">-Nothing selected-</option>
-                        {
-                            activeExpGroup === ""
-                                ? null
-                                : groups[activeExpGroup]
-                                    .map((exp, i) => (
-                                        <option
-                                            key={`exp-dd-${i}`}
-                                            value={exp.index}
-                                        >{exp.name}</option>)
-                                    )
-                        }
-                    </select>
-                </div>
-                <input type="button" value="Open File" onClick={() => ipcRenderer.send("user-interaction", {
-                    type: "read-package",
-                    payload: { package: "17_25", type: "Level" }
-                })}></input>
-            </div>
-        </Fragment>
+        <div className="app">
+            <Header pkg={statePkg} expGroup={stateExpGroup} exp={stateExp}></Header>
+        </div>
     );
 }
 

diff --git a/src/components/header.jsx b/src/components/header.jsx
@@ -0,0 +1,70 @@
+import { ipcRenderer } from "electron";
+import { Fragment, useState } from "react";
+
+function Header({
+    pkg: [activePkg, setPkg],
+    expGroup: [activeExpGroup, setExpGroup],
+    exp: [activeExp, setExp]
+}) {
+    const groups = (activePkg?.exports || []).reduce(function (acc, exp) {
+        const container = acc[exp.type] = acc[exp.type] || [];
+
+        container.push(exp);
+
+        return acc;
+    }, {});
+
+    const groupKeys = Object.keys(groups), groupCount = groupKeys.length;
+    const expCount = activeExpGroup !== "" ? groups[activeExpGroup].length : 0;
+
+    function onGroupChanged({ target: { value } }) {
+        setExpGroup(value);
+        setExp("");
+    }
+
+    function onExportChanged({ target: { value } }) {
+        ipcRenderer.send("user-interaction", {
+            type: "load-export",
+            payload: parseInt(value)
+        });
+
+        setExp(value);
+    }
+
+    return (
+        <div className="header">
+            <div>{activePkg?.filename || "No file"}</div>
+            <div className="dropdown-container">
+                <select value={activeExpGroup} disabled={groupCount === 0} onChange={onGroupChanged}>
+                    <option disabled={true} value="">-Nothing selected-</option>
+                    {
+                        groupKeys.map((gr, i) => (<option key={`group-dd-${i}`} value={gr}>{gr}</option>))
+                    }
+                </select>
+            </div>
+            <div className="dropdown-container">
+                <select value={activeExp} disabled={expCount === 0} onChange={onExportChanged}>
+                    <option disabled={true} value="">-Nothing selected-</option>
+                    {
+                        activeExpGroup === ""
+                            ? null
+                            : groups[activeExpGroup]
+                                .map((exp, i) => (
+                                    <option
+                                        key={`exp-dd-${i}`}
+                                        value={exp.index}
+                                    >{exp.name}</option>)
+                                )
+                    }
+                </select>
+            </div>
+            <input type="button" value="Open File" onClick={() => ipcRenderer.send("user-interaction", {
+                type: "read-package",
+                payload: { package: "17_25", type: "Level" }
+            })}></input>
+        </div>
+    );
+}
+
+export default Header;
+export { Header };