add save changes to app general tab

src/modules/apps/AppSingle.tsx

@@ -58,7 +58,7 @@ export const AppSingle: React.FC = () => {
   const tabs = [
     {
       name: 'General',
-      component: <GeneralTab automaticUpdates={app.automaticUpdates} onChange={_.noop} />,
+      component: <GeneralTab />,
     },
     { name: 'Advanced Configuration', component: <AdvancedTab /> },
   ];

src/modules/apps/components/GeneralTab/GeneralTab.tsx

@@ -1,17 +1,36 @@
-import React from 'react';
-import { Switch } from '@headlessui/react';
+import _ from 'lodash';
+import React, { useEffect, useRef } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { Switch } from 'src/components/Form';
+import { App, useApps } from 'src/services/apps';
 
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
+export const GeneralTab = () => {
+  const { app, editApp } = useApps();
+  const { control, reset, handleSubmit } = useForm<App>({
+    defaultValues: { automaticUpdates: false },
+  });
 
-interface GeneralTabProps {
-  automaticUpdates: boolean;
-  onChange: () => void;
-}
+  useEffect(() => {
+    if (!_.isEmpty(app)) {
+      reset(app);
+    }
+
+    return () => {
+      reset({ automaticUpdates: false });
+    };
+  }, [app, reset]);
+
+  const onSubmit: SubmitHandler<App> = (data) => {
+    try {
+      editApp(data);
+    } catch (e: any) {
+      // continue
+    }
+  };
 
-export const GeneralTab = ({ automaticUpdates, onChange }: GeneralTabProps) => {
   return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
         <div className="py-4">
           <div className="md:grid md:grid-cols-3 md:gap-6">
             <div className="md:col-span-2">
@@ -22,24 +41,21 @@ export const GeneralTab = ({ automaticUpdates, onChange }: GeneralTabProps) => {
               </p>
             </div>
             <div className="my-auto ml-auto">
-          <Switch
-            checked={automaticUpdates}
-            onChange={onChange}
-            className={classNames(
-              automaticUpdates ? 'bg-primary-600' : 'bg-gray-200',
-              'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none',
-            )}
+              <Switch control={control} name="automaticUpdates" />
+            </div>
+          </div>
+        </div>
+        <div className="py-3 sm:flex">
+          <div className="ml-auto sm:flex sm:flex-row-reverse">
+            <button
+              type="submit"
+              className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
             >
-            <span
-              aria-hidden="true"
-              className={classNames(
-                automaticUpdates ? 'translate-x-5' : 'translate-x-0',
-                'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
-              )}
-            />
-          </Switch>
-        </div>
+              Save changes
+            </button>
           </div>
         </div>
+      </form>
+    </>
   );
 };

src/services/apps/hooks/use-apps.ts

@@ -1,5 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchApps, fetchAppBySlug, updateAppBySlug, installAppBySlug, clearCurrentApp, deleteApp } from '../redux';
+import { fetchApps, fetchAppBySlug, updateApp, installAppBySlug, clearCurrentApp, deleteApp } from '../redux';
 import { getCurrentApp, getAppLoading, getAppsLoading, getApps } from '../redux/selectors';
 
 export function useApps() {
@@ -17,8 +17,8 @@ export function useApps() {
     return dispatch(fetchAppBySlug(slug));
   }
 
-  function editAppBySlug(data: any) {
-    return dispatch(updateAppBySlug(data));
+  function editApp(data: any) {
+    return dispatch(updateApp(data));
   }
 
   function installApp(data: any) {
@@ -38,7 +38,7 @@ export function useApps() {
     app,
     loadApp,
     loadApps,
-    editAppBySlug,
+    editApp,
     appLoading,
     appTableLoading,
     installApp,

src/services/apps/redux/actions.ts

@@ -68,7 +68,7 @@ export const fetchAppBySlug = (slug: string) => async (dispatch: Dispatch<any>)
   dispatch(setAppLoading(false));
 };
 
-export const updateAppBySlug = (app: any) => async (dispatch: Dispatch<any>) => {
+export const updateApp = (app: any) => async (dispatch: Dispatch<any>) => {
   dispatch(setAppLoading(true));
 
   try {
@@ -83,6 +83,8 @@ export const updateAppBySlug = (app: any) => async (dispatch: Dispatch<any>) =>
       payload: transformApp(data),
     });
 
+    showToast('App is updated!', ToastType.Success);
+
     dispatch(fetchApps());
   } catch (err) {
     console.error(err);