attempts to make the code more readable - also remove runtime warnings

00magikarp · 00magikarp · commit 49099e8fa99e · 2025-06-24T19:02:00.000-04:00
diff --git a/scoutingapp/src/App.tsx b/scoutingapp/src/App.tsx
@@ -3,6 +3,7 @@ import { Routes, Route } from 'react-router-dom';
 import { Page, ParentPage, StoragePage } from "./components/pages"
 import structure from "./config/structure.json"
 import React from 'react';
+import {PageSetup} from "./components/interface";
 
 
 function App() {
@@ -14,9 +15,9 @@ function App() {
     <Routes>
       <Route path='/' element={<ParentPage pageSetup={structure}/>}></Route>
       {
-        structure.map((page) => {
+        structure.map((page: PageSetup, key: number) => {
             return (
-              <Route path={'/'+page.name.replaceAll(/\s/g,'')} element={<Page config={page}/>}></Route>
+              <Route key={key} path={'/'+page.name.replaceAll(/\s/g,'')} element={<Page {...page}/>}></Route>
             )
         })
       }
diff --git a/scoutingapp/src/components/img/RobotImage.tsx b/scoutingapp/src/components/img/RobotImage.tsx
@@ -1,47 +1,30 @@
 import React, {useEffect, useState} from "react"
 import { ComponentSetup } from "../interface"
 
-export const emptyImage = <img
-    style={{height: "0px", alignItems: 'center', justifyContent: 'center', margin: "auto"}}
-    src={`../gray.png`}
-
-/>
-
 export function RobotImage(props: ComponentSetup) {
   const [componentInside, setComponentInside] = useState(<></>)
   const robotNumber = props.getValue["TeamNumber"]
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      if (robotNumber) {
-        fileExists(`../${robotNumber}.jpeg`).then((exists) => {
-          if (exists) {
-            setComponentInside(
-                <img
-                    style={{ height: "300px", alignItems: 'center', justifyContent: 'center', margin: "auto"}}
-                    src={`../${robotNumber}.jpeg`}
-                />
-            )
-          } else {
-            setComponentInside(
-                <img
-                    style={{ height: "0px", alignItems: 'center', justifyContent: 'center', margin: "auto"}}
-                    src={`../gray.png`}
-                />
-            )
-          }
-        });
-      } else {
-        setComponentInside(
-          <img
-            style={{ height: "0px", alignItems: 'center', justifyContent: 'center', margin: "auto"}}
-            src={`../gray.png`}
-          />
-        )
-      }
-    }, 500)
-    return () => clearInterval(interval);
-  })
+    if (robotNumber) {
+      fileExists(`../${robotNumber}.jpeg`).then((exists) => {
+        if (exists) {
+          setComponentInside(
+            <img
+              style={{height: "300px", alignItems: 'center', justifyContent: 'center', margin: "auto"}}
+              src={`../${robotNumber}.jpeg`}
+              alt={''}
+            />
+          )
+          return
+        }
+      })
+    }
+
+    setComponentInside(
+      <></>
+    )
+  }, [robotNumber])
 
   return (<>
     {componentInside}
diff --git a/scoutingapp/src/components/img/index.ts b/scoutingapp/src/components/img/index.ts
diff --git a/scoutingapp/src/components/inputs/DropdownTextInput.tsx b/scoutingapp/src/components/inputs/DropdownTextInput.tsx
@@ -28,10 +28,10 @@ function DropdownTextInput(props: ComponentSetup) {
 				)}
             </label>
             <div className="flex appearance-none h-[40px] border border-color-[#D0D5DD] border-[1.5px] rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-                <select name="option" id="options" className="inline" onChange={updateStateDropdown}>
-                    <option disabled selected value=""> -- </option>
-                    { props.options?.map (option => (
-                        <option value={option}>{option}</option>
+                <select name="option" id="options" className="inline" onChange={updateStateDropdown} defaultValue="">
+                    <option disabled value=""> -- </option>
+                    { props.options?.map ((option: string, key: number) => (
+                        <option key={key} value={option}>{option}</option>
                     ))}
                 </select>
 
diff --git a/scoutingapp/src/components/interface.ts b/scoutingapp/src/components/interface.ts
@@ -9,6 +9,16 @@ export interface ComponentSetup {
     required?: any
 }
 
+export interface ImportedComponentSetup extends ComponentSetup {
+    type: string;
+}
+
 export interface PageSetup {
-    config?: any // TODO: find the proper type
+    name: string,
+    description: string,
+    components: ImportedComponentSetup[],
+    exports: {
+        delimiter: string,
+        order: string[]
+    }
 }
diff --git a/scoutingapp/src/components/pages/Page.tsx b/scoutingapp/src/components/pages/Page.tsx
@@ -1,21 +1,16 @@
 import React from "react"
-import { useEffect, useState } from "react"
 import { Link } from "react-router-dom"
 import { DarkButton } from "../buttons"
 import { DropdownTextInput, GenericTextArea, GenericTextInput, IncrementNumberInput, SliderInput, ConeCubeIncrementInput } from "../inputs"
-import { ComponentSetup, PageSetup } from "../interface"
+import {ImportedComponentSetup, PageSetup} from "../interface"
 import { GenericCheckboxSelect, GenericDropdown, GenericRadioSelect, GenericToggle, ChargedUpGridSelect } from "../selects"
 import { GenericHeaderOne, GenericHeaderTwo, QRCodeModal, Timer } from "../texts"
 import { CycleCounter } from "../monitor"
-import { RobotImage, emptyImage } from "../img/RobotImage"
+import { RobotImage } from "../img"
 import ChargedUpStartingPosition from "../selects/ChargedUpStartingPosition"
 
-interface ImportedComponentSetup extends ComponentSetup {
-    type: string;
-}
-
-export function Page(props: PageSetup) {
-    const ComponentLibrary: Object = {
+export function Page({ components, exports }: PageSetup) {
+    const ComponentLibrary: { [key: string]: [React.ComponentType<any>, any] } = {
         "DarkButton": [DarkButton, false],
         "DropdownTextInput": [DropdownTextInput, ["", ""]],
         "GenericTextArea": [GenericTextArea, ""],
@@ -33,67 +28,51 @@ export function Page(props: PageSetup) {
         "ChargedUpGridSelect": [ChargedUpGridSelect, []],
         "ChargedUpStartingPosition": [ChargedUpStartingPosition, ""],
         "ConeCubeIncrementInput": [ConeCubeIncrementInput, []],
-        "RobotImage": [RobotImage, emptyImage]
+        "RobotImage": [RobotImage, <></>]
     }
 
-    let componentSetup: any = {}
-
-    const required: String[] = [];
+    const componentSetup: { [key: string]: any } = {}
+    const requiredComponents: string[] = [];
 
-    props?.config?.components?.map((component: ImportedComponentSetup) => {
+    components.map((component: ImportedComponentSetup) => {
         if (component.type != "Spacing") {
             try {
-                componentSetup[component.id] = (ComponentLibrary as any)[component.type][1]
+                componentSetup[component.id] = ComponentLibrary[component.type][1]
                 if (component.required == true) {
-                    required.push(component.id)
+                    requiredComponents.push(component.id)
                 }
-            } catch { }
+            } catch { } // Illegal component
         }
     })
 
     componentSetup["export"] = {
         text: "",
-        delimiter: props?.config?.export.delimiter,
+        delimiter: exports.delimiter,
         isRequiredCompleted: false
     }
 
-      const setRobotImage = (newState: any) => {
-        useState(newState);
-        if (newState.buttonClicked) {
-          useState((prevState: any) => ({
-            ...prevState,
-            robotNumber: prevState.textInputValue,
-          }));
-        }
-      };
-
-    const requiredComponents: String[] = []
-
-    const [pageComponents, setPageComponents] = useState(componentSetup)
-    const propsSetPageComponent = (state: any) => {
-        console.log("test")
-        //setPageComponents(state)
-        componentSetup = pageComponents
-        if (pageComponents["result"]) {
-            var order = ""
-            for (var i = 0; i < props?.config?.export.order.length; i++) {
-                order += pageComponents[props?.config?.export.order[i]]
-                if (i != props?.config?.export.order.length - 1) {
-                    order += props?.config?.export.delimiter
+    const propsSetPageComponent = () => {
+        // if qr code has been selected to be shown
+        if (componentSetup["result"]) {
+            // combine all the data with the delimiter between each data point
+            let order = ""
+            for (let i = 0; i < exports.order.length; i++) {
+                order += componentSetup[exports.order[i]]
+                if (i != exports.order.length - 1) {
+                    order += exports.delimiter
                 }
             }
             componentSetup["export"].text = order
-            //setPageComponents(componentSetup)
         }
-        props?.config?.components?.map((requiredId: any) => {
-            componentSetup["export"].isRequiredCompleted = true
-            if (!["", []].includes(componentSetup[requiredId])) {
-                console.log(false)
+
+        componentSetup["export"].isRequiredCompleted = true
+        requiredComponents?.map((requiredId: string) => {
+            if (["", []].includes(componentSetup[requiredId])) {
                 componentSetup["export"].isRequiredCompleted = false
             }
         })
+        
         console.log("Required done", componentSetup["export"].isRequiredCompleted)
-
     }
 
     return (
@@ -106,35 +85,31 @@ export function Page(props: PageSetup) {
                 </div>
             </Link>
             {
-                props?.config?.components?.map((component: ImportedComponentSetup) => {
-                    if (component.required == true) {
-                        requiredComponents.push(component.id)
-                    }
-
+                components.map((component: ImportedComponentSetup, key: number) => {
                     if (component.type == "Spacing") {
                         return (
-                            <div className="h-[2px]" />
+                            <div key={key} className="h-[2px]" />
                         )
                     }
                     else {
-                        var sendprops = {
+                        const sendprops = {
                             text: component.text,
                             route: component.route,
                             options: component.options,
                             placeholder: component.placeholder,
                             required: component.required
                         }
 
-                        const FoundComponent = (ComponentLibrary as any)[component.type][0];
+                        const FoundComponent: React.ComponentType<any> = ComponentLibrary[component.type][0];
 
                         return (
-                            <FoundComponent {...sendprops} getValue={pageComponents} setValue={propsSetPageComponent} id={component.id} />
+                            <FoundComponent {...sendprops} key={key} getValue={componentSetup} setValue={propsSetPageComponent} id={component.id} />
                         );
 
                     }
                 })
             }
-            <QRCodeModal getValue={pageComponents} setValue={propsSetPageComponent} required={requiredComponents} />
+            <QRCodeModal getValue={componentSetup} setValue={propsSetPageComponent} required={requiredComponents} />
         </div>
     )
 }
diff --git a/scoutingapp/src/components/pages/ParentPage.tsx b/scoutingapp/src/components/pages/ParentPage.tsx
@@ -14,9 +14,9 @@ export function ParentPage(props: ParentPageSetup){
                 <Link className="text-xl font-semibold mb-8 inline float-left ml-4 -mt-1 bg-gray-200 rounded-md p-2" to="/saved">Saved Codes</Link>
             </div>
             {
-                props?.pageSetup?.map((page: any) => {
+                props?.pageSetup?.map((page: any, key: number) => {
                     return (
-                        <Link to={'/'+page.name.replaceAll(/\s/g,'')} className="text-2xl">
+                        <Link to={'/'+page.name.replaceAll(/\s/g,'')} className="text-2xl" key={key}>
                             <div className="mb-4 w-full block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100">
                                 <h1 className="text-2xl font-bold mb-4">{page.name}</h1>
                                 <h1 className="text-lg font-regular mb-2">{page.description}</h1>
diff --git a/scoutingapp/src/components/selects/GenericCheckboxSelect.tsx b/scoutingapp/src/components/selects/GenericCheckboxSelect.tsx
@@ -28,16 +28,16 @@ function GenericCheckboxSelect(props: ComponentSetup) {
 			<form onChange={updateStateSelections}>
                 <div className="flex flex-wrap">
                     <div className="w-1/2 px-1">
-                        { props.options?.slice(0, Math.ceil(props.options?.length / 2)).map (option => (
-                            <div className="mb-1">
+                        { props.options?.slice(0, Math.ceil(props.options?.length / 2)).map ((option: string, key: number) => (
+                            <div className="mb-1" key={key}>
                                 <input type="checkbox" name={option} value={option} className={`radio ${props.id}`}/>
                                 <p className="ml-3 inline">{option}</p>
                             </div>
                         ))}
                     </div>
                     <div className="w-1/2 px-1">
-                        { props.options?.slice(Math.ceil(props.options?.length / 2)).map (option => (
-                            <div className="mb-1">
+                        { props.options?.slice(Math.ceil(props.options?.length / 2)).map ((option: string, key: number) => (
+                            <div className="mb-1" key={key}>
                                 <input type="checkbox" name={option} value={option} className={`radio ${props.id}`}/>
                                 <p className="inline ml-3">{option}</p>
                             </div>
diff --git a/scoutingapp/src/components/selects/GenericDropdown.tsx b/scoutingapp/src/components/selects/GenericDropdown.tsx
@@ -26,10 +26,10 @@ function GenericDropdown(props: ComponentSetup) {
 					</span>
 				)}
 			</label>
-			<select name="option" onChange={updateStateSelections} id="options" className="appearance-none border border-color-[#D0D5DD] rounded w-full py-2 px-3 text-gray-700 focus:outline-none">
-				<option disabled selected value=""> -- </option>
-				{ props.options?.map (option => (
-                    <option value={option}>{option}</option>
+			<select name="option" defaultValue="" onChange={updateStateSelections} id="options" className="appearance-none border border-color-[#D0D5DD] rounded w-full py-2 px-3 text-gray-700 focus:outline-none">
+				<option disabled value=""> -- </option>
+				{ props.options?.map ((option: string, key: number) => (
+                    <option key={key} value={option}>{option}</option>
                 ))}
             </select>
 		</div>
diff --git a/scoutingapp/src/config/structure.json b/scoutingapp/src/config/structure.json
@@ -409,7 +409,7 @@
                 "id": "result"
             }
         ],
-        "export": {
+        "exports": {
             "delimiter": "|",
             "order": [
                 "ScoutId",
@@ -571,7 +571,7 @@
                 "id": "result"
             }
         ],
-        "export": {
+        "exports": {
             "delimiter": "|",
             "order": [
                 "ScoutId",

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ import { Routes, Route } from 'react-router-dom';`
`3`	`3`	`import { Page, ParentPage, StoragePage } from "./components/pages"`
`4`	`4`	`import structure from "./config/structure.json"`
`5`	`5`	`import React from 'react';`
	`6`	`+import {PageSetup} from "./components/interface";`
`6`	`7`
`7`	`8`
`8`	`9`	`function App() {`
`@@ -14,9 +15,9 @@ function App() {`
`14`	`15`	`<Routes>`
`15`	`16`	`<Route path='/' element={<ParentPage pageSetup={structure}/>}></Route>`
`16`	`17`	`{`
`17`		`- structure.map((page) => {`
	`18`	`+ structure.map((page: PageSetup, key: number) => {`
`18`	`19`	`return (`
`19`		`- <Route path={'/'+page.name.replaceAll(/\s/g,'')} element={<Page config={page}/>}></Route>`
	`20`	`+ <Route key={key} path={'/'+page.name.replaceAll(/\s/g,'')} element={<Page {...page}/>}></Route>`
`20`	`21`	`)`
`21`	`22`	`})`
`22`	`23`	`}`