fix upload config

FRC2713 · Jan 14, 2025 · 6320a8e · 6320a8e
1 parent 26d39e4
commit 6320a8e
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 27 deletions.
diff --git a/src/components/ConfigEditor.tsx b/src/components/ConfigEditor.tsx
@@ -1,12 +1,12 @@
 import { Button } from '@/components/ui/button';
 import Editor, { useMonaco } from '@monaco-editor/react';
 import { Menu, Save } from 'lucide-react';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import schema from '../assets/schema.json';
 import {
   getConfig,
   resetToDefaultConfig,
-  uploadConfig,
+  setConfig,
   useQRScoutState,
 } from '../store/store';
 import { Config } from './inputs/BaseInputProps';
@@ -63,6 +63,7 @@ export function ConfigEditor(props: ConfigEditorProps) {
   );
   const [errorCount, setErrorCount] = useState<number>(0);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     setCurrentConfigText(JSON.stringify(config, null, 2));
@@ -81,9 +82,35 @@ export function ConfigEditor(props: ConfigEditorProps) {
     });
   }, [monaco]);
 
+  const handleUploadClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, [fileInputRef]);
+
+  const handleUploadChange = useCallback(
+    (evt: React.ChangeEvent<HTMLInputElement>) => {
+      var reader = new FileReader();
+      reader.onload = function (e) {
+        const configText = e.target?.result as string;
+        const result = setConfig(configText);
+        if (!result.success) {
+          setError(result.error.message);
+        } else {
+          setError(null);
+        }
+      };
+      if (evt.currentTarget.files && evt.currentTarget.files.length > 0) {
+        reader.readAsText(evt.currentTarget.files[0]);
+      }
+    },
+    [],
+  );
+
   return (
     <div className="flex flex-col gap-2 h-full pb-2">
       <div className="flex-grow rounded-lg overflow-clip ">
+        {error && (
+          <div className="bg-red-100 text-red-800 p-2 rounded-lg">{error}</div>
+        )}
         <Editor
           defaultLanguage="json"
           value={currentConfigText}
@@ -110,17 +137,9 @@ export function ConfigEditor(props: ConfigEditorProps) {
             <DropdownMenuItem onClick={() => downloadConfig(config)}>
               Download Config
             </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => fileInputRef.current?.click()}>
+            <DropdownMenuItem onClick={handleUploadClick}>
               Upload Config
             </DropdownMenuItem>
-
-            <Input
-              type="file"
-              ref={fileInputRef}
-              onChange={e => uploadConfig(e)}
-              className="hidden"
-              aria-hidden="true"
-            />
           </DropdownMenuContent>
         </DropdownMenu>
         <Button
@@ -131,6 +150,15 @@ export function ConfigEditor(props: ConfigEditorProps) {
           <Save className="h-5 w-5" />
           Save
         </Button>
+
+        <Input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleUploadChange}
+          className="hidden"
+          aria-hidden="true"
+          accept=".json,application/json"
+        />
       </div>
     </div>
   );

diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
@@ -38,10 +38,8 @@ export function ThemeProvider({
   useEffect(() => {
     if (!appTheme || !appTheme.light || !appTheme.dark) return;
     if (resolvedTheme === 'dark') {
-      console.log('Setting dark theme', appTheme.dark);
       setColorScheme(appTheme.dark);
     } else {
-      console.log('Setting light theme', appTheme.light);
       setColorScheme(appTheme.light);
     }
   }, [resolvedTheme, appTheme]);

diff --git a/src/store/store.ts b/src/store/store.ts
@@ -1,6 +1,5 @@
 import { produce } from 'immer';
 import { cloneDeep } from 'lodash';
-import { ChangeEvent } from 'react';
 import configJson from '../../config/2024/config.json';
 import {
   Config,
@@ -9,6 +8,8 @@ import {
 } from '../components/inputs/BaseInputProps';
 import { createStore } from './createStore';
 
+type Result<T> = { success: true; data: T } | { success: false; error: Error };
+
 function getDefaultConfig(): Config {
   const config = configSchema.safeParse(configJson);
   if (!config.success) {
@@ -70,23 +71,25 @@ export function resetFields() {
 }
 
 export function setFormData(config: Config) {
-  useQRScoutState.setState({ formData: config });
-}
+  const oldState = useQRScoutState.getState();
 
-export function setConfig(configText: string) {
-  const jsonData = JSON.parse(configText);
-  setFormData(jsonData as Config);
+  useQRScoutState.setState({ ...oldState, formData: config });
 }
 
-export function uploadConfig(evt: ChangeEvent<HTMLInputElement>) {
-  var reader = new FileReader();
-  reader.onload = function (e) {
-    const configText = e.target?.result as string;
-    setConfig(configText);
-  };
-  if (evt.currentTarget.files && evt.currentTarget.files.length > 0) {
-    reader.readAsText(evt.currentTarget.files[0]);
+export function setConfig(configText: string): Result<void> {
+  let jsonData: any;
+  try {
+    jsonData = JSON.parse(configText);
+  } catch (e: any) {
+    return { success: false, error: e.message };
+  }
+  const c = configSchema.safeParse(jsonData);
+  if (!c.success) {
+    console.error(c.error);
+    return { success: false, error: c.error };
   }
+  setFormData(c.data);
+  return { success: true, data: undefined };
 }
 
 export function inputSelector<T extends InputBase>(