refactor: packing input

src/App.css

@@ -6,38 +6,3 @@
 }
 
 
-/* Temporary styling */
-.logs-container {
-  margin-top: 10px;
-  padding: 10px;
-  /* background-color: #f9f9f9;
-  border: 1px solid #ddd; */
-  border-radius: 5px;
-  max-height: 300px;
-  overflow-y: auto;
-  /* font-family: monospace; */
-  font-size: 14px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.log-entry {
-  margin-bottom: 5px;
-  padding: 8px;
-  border-bottom: 1px solid #eee;
-  word-wrap: break-word;
-  /* Prevent long messages from breaking layout */
-}
-
-.box {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  text-align: start;
-}
-
-.collapsible {
-  width: 450px;
-  margin-top: 5%;
-}

src/components/Dropdown/index.tsx

@@ -0,0 +1,31 @@
+import { FirebaseDict } from "../../types";
+import { FIRESTORE_FIELDS } from "../../constants/firebaseConstants";
+
+interface DropdownProps {
+    value: string;
+    placeholder: string;
+    options: FirebaseDict;
+    onChange: (value: string) => void;
+}
+
+const Dropdown = (props: DropdownProps): JSX.Element => {
+    const { value, placeholder, options, onChange } = props;
+
+    return (
+        <select
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+        >
+            <option value="" disabled>
+                {placeholder}
+            </option>
+            {Object.entries(options).map(([key, value]) => (
+                <option key={key} value={value[FIRESTORE_FIELDS.FIREBASE_ID]}>
+                    {key}
+                </option>
+            ))}
+        </select>
+    );
+};
+
+export default Dropdown;

src/components/ErrorLogs/style.css

@@ -1,3 +1,8 @@
+.collapsible {
+  width: 450px;
+  margin-top: 5%;
+}
+
 .log-box {
   display: flex;
   justify-content: space-between;

src/components/JSONViewer/index.tsx

@@ -0,0 +1,38 @@
+import "./style.css";
+
+interface JSONViewerProps {
+    title: string;
+    content: string;
+    isVisible: boolean;
+    isEditable?: boolean;
+    onToggle: () => void;
+    onChange?: (value: string) => void;
+}
+
+const JSONViewer = (props: JSONViewerProps): JSX.Element => {
+    const { title, content, isVisible, isEditable = false, onToggle, onChange } = props;
+    if (!content) {
+        return (<></>)
+    }
+    return (
+        <div className={`${title.toLowerCase()}-box`}>
+            <button type="button" className="collapsible" onClick={onToggle}>
+                {title}
+            </button>
+            <div className={`${title.toLowerCase()}-json`}>
+                {isVisible && (
+                    isEditable ? (
+                        <textarea 
+                            value={content} 
+                            onChange={(e) => onChange?.(e.target.value)}
+                        />
+                    ) : (
+                        <pre>{content}</pre>
+                    )
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default JSONViewer;

src/components/JSONViewer/style.css

@@ -0,0 +1,37 @@
+.recipe-box {
+  width: 45%;
+  float: left;
+}
+
+.config-box {
+  width: 45%;
+  float: right;
+}
+
+.recipe-json {
+  max-height: 300px;
+  width: 450px;
+  overflow-y: auto;
+}
+
+.config-json {
+  max-height: 300px;
+  width: 450px;
+  overflow-y: auto;
+}
+
+.collapsible {
+  width: 450px;
+  margin-top: 5%;
+}
+
+textarea {
+  width: 450px;
+  height: 300px;
+  padding: 12px 20px;
+  box-sizing: border-box;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+  font-size: 13px;
+  resize: none;
+}

src/components/PackingInput/index.tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from "react";
 import { FirebaseDict } from "../../types";
 import { FIRESTORE_COLLECTIONS } from "../../constants/firebaseConstants";
 import { getFirebaseRecipe, getDocById, getLocationDict } from "../../firebase";
+import Dropdown from "../Dropdown";
+import JSONViewer from "../JSONViewer";
 import "./style.css";
 
 interface PackingInputProps {
@@ -58,57 +60,38 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
     return (
         <div>
             <div className="input-container">
-                <select
+                <Dropdown
                     value={selectedRecipeId}
-                    onChange={(e) => selectRecipe(e.target.value)}
-                >
-                    <option value="" disabled>
-                        Select a recipe
-                    </option>
-                    {Object.entries(recipes).map(([key, value]) => (
-                        <option key={key} value={value["firebaseId"]}>
-                            {key}
-                        </option>
-                    ))}
-                </select>
-                <select
+                    placeholder="Select a recipe"
+                    options={recipes}
+                    onChange={selectRecipe}
+                />
+                <Dropdown
                     value={selectedConfigId}
-                    onChange={(e) => selectConfig(e.target.value)}
-                >
-                    <option value="" disabled>
-                        Select a config
-                    </option>
-                    {Object.entries(configs).map(([key, value]) => (
-                        <option key={key} value={value["firebaseId"]}>
-                            {key}
-                        </option>
-                    ))}
-                </select>
+                    placeholder="Select a config"
+                    options={configs}
+                    onChange={selectConfig}
+                />
                 <button onClick={runPacking} disabled={!selectedRecipeId}>
                     Pack
                 </button>
             </div>
             <div className="box">
-                {recipeStr.length > 0 && (
-                    <div className="recipe-box">
-                        <button type="button" className="collapsible" onClick={toggleRecipe}>Recipe</button>
-                        <div className="recipe-json">
-                            {viewRecipe && (
-                                <textarea value={recipeStr} onChange={e => setRecipeStr(e.target.value)}/>
-                            )}
-                        </div>
-                    </div>
-                )}
-                {configStr.length > 0 && (
-                    <div className="config-box">
-                        <button type="button" className="collapsible" onClick={toggleConfig}>Config</button>
-                        <div className="config-json">
-                            {viewConfig && (
-                                <pre>{configStr}</pre>
-                            )}
-                        </div>
-                    </div>
-                )}
+                <JSONViewer
+                    title="Recipe"
+                    content={recipeStr}
+                    isVisible={viewRecipe}
+                    isEditable={true}
+                    onToggle={toggleRecipe}
+                    onChange={setRecipeStr}
+                />
+                <JSONViewer
+                    title="Config"
+                    content={configStr}
+                    isVisible={viewConfig}
+                    isEditable={false}
+                    onToggle={toggleConfig}
+                />
             </div>
         </div>
     );

src/components/PackingInput/style.css

@@ -1,32 +1,6 @@
-.recipe-box {
-  width: 45%;
-  float: left;
-}
-
-.config-box {
-  width: 45%;
-  float: right;
-}
-
-.recipe-json {
-  max-height: 300px;
-  width: 450px;
-  overflow-y: auto;
-}
-
-.config-json {
-  max-height: 300px;
-  width: 450px;
-  overflow-y: auto;
-}
-
-textarea {
-  width: 450px;
-  height: 300px;
-  padding: 12px 20px;
-  box-sizing: border-box;
-  border: 2px solid #ccc;
-  border-radius: 4px;
-  font-size: 13px;
-  resize: none;
+.box {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  text-align: start;
 }

src/constants/firebaseConstants.ts

@@ -30,6 +30,9 @@ export const FIRESTORE_FIELDS = {
     REGIONS: "regions",
     INTERIOR: "interior",
     GRADIENT: "gradient",
+    FIREBASE_ID: "firebaseId",
+    URL: "url",
+    STATUS: "status",
     TIMESTAMP: "timestamp",
 } as const;
 

src/firebase.ts

@@ -115,12 +115,12 @@ const extractSingleDocumentData = (querySnapshot: QuerySnapshot<DocumentData>, f
 // Query functions for our use case using generic functions
 const getResultPath = async (jobId: string) => {
     const querySnapshot = await queryDocumentsByField(FIRESTORE_COLLECTIONS.RESULTS, FIRESTORE_FIELDS.BATCH_JOB_ID, jobId);
-    return extractSingleDocumentData(querySnapshot, "url");
+    return extractSingleDocumentData(querySnapshot, FIRESTORE_FIELDS.URL);
 };
 
 const getJobStatus = async (jobId: string) => {
     const querySnapshot = await queryDocumentById(FIRESTORE_COLLECTIONS.JOB_STATUS, jobId);
-    return extractSingleDocumentData(querySnapshot, "status");
+    return extractSingleDocumentData(querySnapshot, FIRESTORE_FIELDS.STATUS);
 }
 
 const getAllDocsFromCollection = async (collectionName: string) => {
@@ -138,7 +138,7 @@ const getLocationDict = async (collectionName: string) => {
         const id = doc.id;
         if (name) {
             locationDict[name] = {
-                "firebaseId": id,
+                [FIRESTORE_FIELDS.FIREBASE_ID]: id,
             };
         } 
         return locationDict;