Backend update

ui/src/components/Configs/UpsertConfig.tsx

@@ -38,7 +38,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
 
 export const UpsertConfig = ({ config, open, onClose }: Props): ReactElement => {
 
-  const { runConfig, setRunConfig } = useRunConfig();
+  const { updateConfig, deleteConfig } = useRunConfig();
   const [newVar, setNewVar] = useState<string>('');
   const [newValue, setNewValue] = useState<string>('');
   const [configName, setConfigName] = useState<string>(config?.name || '');
@@ -55,10 +55,7 @@ export const UpsertConfig = ({ config, open, onClose }: Props): ReactElement =>
   };
 
   const handleSaveButtonPress = () => {
-    setRunConfig([...runConfig.filter(config1 => config1.id !== newConfig.id),
-      {
-        name: configName, id: newConfig.id, vars: newConfig.vars,
-      }]);
+    updateConfig({ name: configName, id: newConfig.id, vars: newConfig.vars });
     onClose();
   };
 
@@ -70,7 +67,7 @@ export const UpsertConfig = ({ config, open, onClose }: Props): ReactElement =>
 
   const handleDeleteButtonPress = () => {
     if (newConfig.id) {
-      setRunConfig(runConfig.filter(config1 => config1.id !== newConfig.id));
+      deleteConfig(newConfig.id);
     }
     onClose();
   };

ui/src/components/Configs/index.tsx

@@ -1,3 +1,2 @@
-export * from './ConfigOptions';
 export * from './StartConfigs';
 export * from './UpsertConfig';

ui/src/components/Header/Controller.tsx

@@ -15,24 +15,22 @@ const useStyles = makeStyles(() => createStyles({
 
 export const Controller = (): ReactElement => {
   const ddClient = useDDClient();
-  const { runConfig, isLoading, setRunConfig } = useRunConfig();
+  const { runConfig, isLoading, createConfig } = useRunConfig();
   const { data, mutate } = useLocalStack();
   const [runningConfig, setRunningConfig] = useState<string>('Default');
   const isRunning = data && data.State === 'running';
 
   const classes = useStyles();
 
   useEffect(() => {
-    if (!isLoading && !runConfig.find(item => item.name === 'Default')) {
-      setRunConfig([...runConfig,
-        {
-          name: 'Default', id: DEFAULT_CONFIGURATION_ID, vars:
+    if (!isLoading && (!runConfig || !runConfig.find(item => item.name === 'Default'))) {
+      createConfig({
+        name: 'Default', id: DEFAULT_CONFIGURATION_ID, vars:
           [{ variable: 'EXTRA_CORS_ALLOWED_ORIGINS', value: 'http://localhost:3000', id: uuid() }],
-        },
-      ]);
+      },
+      );
     }
-  });
-
+  },[isLoading]);
 
   const start = async () => {
     const images = await ddClient.docker.listImages() as [DockerImage];
@@ -70,7 +68,7 @@ export const Controller = (): ReactElement => {
             onChange={({ target }) => setRunningConfig(target.value)}
           >
             {
-              runConfig.map(config => (
+              runConfig?.map(config => (
                 <MenuItem key={config.id} value={config.name}>{config.name}</MenuItem>
               ))
             }

ui/src/services/hooks/api.ts

@@ -6,7 +6,9 @@ import { useDDClient } from './utils';
 interface useRunConfigReturn {
   runConfig: RunConfig[],
   isLoading: boolean,
-  setRunConfig: (data: RunConfig[]) => unknown;
+  createConfig: (data: RunConfig) => unknown;
+  updateConfig: (data: RunConfig) => unknown;
+  deleteConfig: (data: string) => unknown;
 }
 
 interface HTTPMessageBody {
@@ -18,17 +20,30 @@ export const useRunConfig = (): useRunConfigReturn => {
   const ddClient = useDDClient();
   const { data, mutate, isValidating, error } = useSWR(
     cacheKey,
-    () => (ddClient.extension.vm.service.get('/getConfig') as Promise<HTTPMessageBody>),
+    () => (ddClient.extension.vm.service.get('/configs') as Promise<HTTPMessageBody>),
   );
-  const mutateRunConfig = async (newData: RunConfig[]) => {
-    await ddClient.extension.vm.service.post('/setConfig', { Data: JSON.stringify(newData) });
+
+  const updateConfig = async (newData: RunConfig) => {
+    await ddClient.extension.vm.service.put('/configs', { Data: JSON.stringify(newData) });
+    mutate();
+  };
+
+  const createConfig = async (newData: RunConfig) => {
+    await ddClient.extension.vm.service.post('/configs', { Data: JSON.stringify(newData) });
+    mutate();
+  };
+
+  const deleteConfig = async (configId: string) => {
+    await ddClient.extension.vm.service.delete(`/configs/${configId}`);
     mutate();
   };
 
   return {
-    runConfig: (!data || data?.Message === '' || data?.Message as string === 'Failed') ? [] : JSON.parse(data?.Message),
+    runConfig: (!data || data?.Message === '' || error) ? [] : JSON.parse(data?.Message),
     isLoading: isValidating || (!error && !data),
-    setRunConfig: mutateRunConfig,
+    createConfig,
+    updateConfig,
+    deleteConfig,
   };
 };