submit functionality added

admin/src/react-components/ThemeBuilder/ThemeBuilder.tsx

@@ -1,39 +1,32 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 // import theme from "../../utils/sample-theme";
 import {Button, Input, Select} from '@mozilla/lilypad-ui'
 
-const ThemeBuilder = ({config}) => {
-    const themes = JSON.parse(config?.hubs?.theme?.themes)
-    const formattedThemes = themes.map(theme => ({title: theme.name, value: theme.id}));
-
+const ThemeBuilder = ({config, onGlobalChange, onSave, path}) => {
+    const [themes, setThemes] =useState(JSON.parse(config?.hubs?.theme?.themes))
     const [selectedTheme, setSelectedTheme] = useState(themes.find(theme => !!theme?.default))
+    const formattedThemes = useMemo(() => themes.map(theme => ({title: theme.name, value: theme.id})), [themes]);
 
-    const onChange = e => {
+    const onThemeSelect = e => {
         setSelectedTheme(themes.find(theme => theme.id === e.target.value))
     }
 
     const onSubmit = e => {
-        e.preventDefault()
-        console.log(selectedTheme)
+        onSave(e)
+        setThemes(prevState => [...prevState.filter(theme => theme.id !== selectedTheme.id), selectedTheme])
     }
 
     const onVariableChange = (e, key )=> {
-        console.log(e.target.value, key)
         e.preventDefault()
         e.persist()
-        setSelectedTheme(prevState => {
-            console.log(prevState)
-           return {...prevState, variables: {...prevState.variables, [key]: e.target.value}}
-        })
+        setSelectedTheme(prevState => ({...prevState, variables: {...prevState.variables, [key]: e.target.value}}))
+        console.log([...themes.filter(theme => theme.id !== selectedTheme.id), {...selectedTheme, variables: {...selectedTheme.variables, [key]: e.target.value}}])
+        onGlobalChange(path, JSON.stringify([...themes.filter(theme => theme.id !== selectedTheme.id), {...selectedTheme, variables: {...selectedTheme.variables, [key]: e.target.value}}]))
     }
-
-    useEffect(() => {
-        console.log(selectedTheme)
-    }, [selectedTheme])
-
+
     return (
         <div>
-            <Select label="Themes" options={formattedThemes} name="Themes" value={selectedTheme.id} onChange={onChange}/>
+            <Select label="Themes" options={formattedThemes} name="Themes" value={selectedTheme.id} onChange={onThemeSelect}/>
             <form onSubmit={onSubmit} >
                 {Object.entries(selectedTheme.variables).map(([key, value]) => {
                     return <Input label={key} name={key} value={value} onChange={e => onVariableChange(e, key)}/>

admin/src/react-components/service-editor.js

@@ -208,7 +208,7 @@ class ConfigurationEditor extends Component {
 
   onSubmit(e) {
     e.preventDefault();
-
+    
     this.setState({ saving: true }, async () => {
       try {
         for (const [service, config] of Object.entries(this.state.config)) {
@@ -430,8 +430,10 @@ class ConfigurationEditor extends Component {
     const configurables = this.getFilteredDescriptors(theme);
     const getInput = ([path, descriptor]) => this.renderConfigurable(path, descriptor, getConfigValue(config, path));
 
+
+
     return (<>
-    <ThemeBuilder config={config}/>
+    <ThemeBuilder config={config} onGlobalChange={this.onChange.bind(this)} onSave={this.onSubmit.bind(this)} path={configurables[2][0]}/>
       <form onSubmit={this.onSubmit.bind(this)}>
         <h3 className="heading-sm mb-24">Nametags</h3>
         {getInput(configurables[0])}