add add and delete functionality

Hubs-Foundation · Aug 1, 2023 · f1cefd7 · f1cefd7
1 parent 3b561dc
commit f1cefd7
Showing 1 changed file with 20 additions and 1 deletion.
diff --git a/admin/src/react-components/ThemeBuilder/ThemeBuilder.tsx b/admin/src/react-components/ThemeBuilder/ThemeBuilder.tsx
@@ -38,21 +38,40 @@ const ThemeBuilder = ({config, onGlobalChange, onSave, path, setState, disableSa
         }
     }
 
+    const addTheme = e => {
+        const newTheme = {
+            ...themes[0],
+            id: "new-theme", //TO DO: use UUID
+            name: "New Theme"
+        }
+        setThemes(prevState => [...prevState, newTheme])
+        setSelectedTheme(newTheme)
+        onSave(e)
+    }
+
+    const deleteTheme = e => {
+        setThemes(prevState => prevState.filter(theme => theme.id !== selectedTheme.id))
+        setSelectedTheme(themes[0])
+        onSave(e)
+    }
+
     // edit name and validate no duplicates
     // add new theme
+    // duplicate theme
     // generate id from theme name?
     // copy json
     // import theme from json - validate and populate missing variables
     // import theme from web url?? - validate and populate missing variables
     // select from github themes
-    // duplicate theme
     // delete theme
     // populate with defaults
     // calculate darkness or lightness from states
 
     return (
         <div>
             <Select label="Themes" options={formattedThemes} name="Themes" value={selectedTheme.id} onChange={onThemeSelect}/>
+            <Button type="button" text="Add theme" label="Add theme" onClick={e => addTheme(e)}/>
+            <Button type="button" text="Delete theme" label="Delete theme" onClick={deleteTheme}/>
             <form onSubmit={onSubmit} >
                 <Input label="Name" name="Name" value={selectedTheme.name} onChange={onNameChange} placeholder="Name your theme" />
                 {Object.entries(selectedTheme.variables).map(([key, value]) => {