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,45 +1,61 @@
-import React from 'react';
+import _ from 'lodash';
-import { Switch } from '@headlessui/react';
+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) {
+export const GeneralTab = () => {
-  return classes.filter(Boolean).join(' ');
+  const { app, editApp } = useApps();
-}
+  const { control, reset, handleSubmit } = useForm<App>({
+    defaultValues: { automaticUpdates: false },
+  });
 
-interface GeneralTabProps {
+  useEffect(() => {
-  automaticUpdates: boolean;
+    if (!_.isEmpty(app)) {
-  onChange: () => void;
+      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 (
-    <div className="py-4">
+    <>
-      <div className="md:grid md:grid-cols-3 md:gap-6">
+      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="md:col-span-2">
+        <div className="py-4">
-          <h3 className="text-lg font-medium leading-6 text-gray-900">Automatic updates</h3>
+          <div className="md:grid md:grid-cols-3 md:gap-6">
-          <p className="mt-1 text-sm text-gray-500">
+            <div className="md:col-span-2">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et nibh sit amet mauris faucibus molestie
+              <h3 className="text-lg font-medium leading-6 text-gray-900">Automatic updates</h3>
-            gravida at orci.
+              <p className="mt-1 text-sm text-gray-500">
-          </p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et nibh sit amet mauris faucibus molestie
+                gravida at orci.
+              </p>
+            </div>
+            <div className="my-auto ml-auto">
+              <Switch control={control} name="automaticUpdates" />
+            </div>
+          </div>
         </div>
-        <div className="my-auto ml-auto">
+        <div className="py-3 sm:flex">
-          <Switch
+          <div className="ml-auto sm:flex sm:flex-row-reverse">
-            checked={automaticUpdates}
+            <button
-            onChange={onChange}
+              type="submit"
-            className={classNames(
+              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"
-              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',
+              Save changes
-            )}
+            </button>
-          >
+          </div>
-            <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>
-      </div>
+      </form>
-    </div>
+    </>
   );
 };

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) {
+  function editApp(data: any) {
-    return dispatch(updateAppBySlug(data));
+    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);