add ability to reset to default config

FRC2713 · Jan 11, 2024 · a00c205 · a00c205
1 parent bd36e68
commit a00c205
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 27 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -7,6 +7,7 @@ import Button, { Variant } from './components/core/Button';
 import {
   getQRCodeData,
   resetSections,
+  resetToDefaultConfig,
   uploadConfig,
   useQRScoutState,
 } from './store/store';
@@ -102,10 +103,9 @@ export function App() {
                 Reset
               </button>
             </div>
-            <div className="mb-4 flex flex-col justify-center rounded bg-white shadow-md dark:bg-gray-600">
+            <div className="mb-4 flex flex-col justify-center rounded bg-white shadow-md dark:bg-gray-600 gap-2 p-2">
               <Button
                 variant={Variant.Secondary}
-                className="m-2"
                 onClick={() =>
                   navigator.clipboard.writeText(
                     formData.sections
@@ -120,12 +120,11 @@ export function App() {
               </Button>
               <Button
                 variant={Variant.Secondary}
-                className="m-2"
                 onClick={() => downloadConfig()}
               >
                 Download Config
               </Button>
-              <label className="m-2 flex cursor-pointer flex-row justify-center rounded bg-gray-500 py-2 text-center font-bold text-white shadow-sm hover:bg-gray-600">
+              <label className="mx-2 flex cursor-pointer flex-row justify-center rounded bg-gray-500 py-2 text-center font-bold text-white shadow-sm hover:bg-gray-600">
                 <span className="text-base leading-normal">Upload Config</span>
                 <input
                   type="file"
@@ -134,30 +133,35 @@ export function App() {
                   onChange={e => uploadConfig(e)}
                 />
               </label>
-              {
-                <div className="m-2 flex flex-col justify-start bg-gray-500 p-2">
-                  <div className="rounded-t pb-2 text-left font-bold text-white">
-                    Theme
-                  </div>
-                  <select
-                    className="rounded bg-white px-4 py-2 dark:bg-gray-700 dark:text-white"
-                    name="Theme"
-                    id="theme"
-                    onInput={v => setTheme(v.currentTarget.value)}
-                    value={theme}
-                  >
-                    <option key={'system'} value={'system'}>
-                      System
-                    </option>
-                    <option key={'dark'} value={'dark'}>
-                      Dark
-                    </option>
-                    <option key={'light'} value={'light'}>
-                      Light
-                    </option>
-                  </select>
+              <div className="mx-2 flex flex-col justify-start bg-gray-500 p-2 rounded">
+                <div className="rounded-t pb-2 text-left font-bold text-white">
+                  Theme
                 </div>
-              }
+                <select
+                  className="rounded bg-white px-4 py-2 dark:bg-gray-700 dark:text-white"
+                  name="Theme"
+                  id="theme"
+                  onInput={v => setTheme(v.currentTarget.value)}
+                  value={theme}
+                >
+                  <option key={'system'} value={'system'}>
+                    System
+                  </option>
+                  <option key={'dark'} value={'dark'}>
+                    Dark
+                  </option>
+                  <option key={'light'} value={'light'}>
+                    Light
+                  </option>
+                </select>
+              </div>
+
+              <Button
+                variant={Variant.Secondary}
+                onClick={() => resetToDefaultConfig()}
+              >
+                Reset To Default Config
+              </Button>
             </div>
           </div>
         </form>

diff --git a/src/store/store.ts b/src/store/store.ts
@@ -35,6 +35,10 @@ export const useQRScoutState = createStore<QRScoutState>(
   },
 );
 
+export function resetToDefaultConfig() {
+  useQRScoutState.setState(initialState);
+}
+
 export function updateValue(sectionName: string, code: string, data: any) {
   useQRScoutState.setState(
     produce((state: QRScoutState) => {