From 97aa678830985e8703e4068ea1c97490494373e2 Mon Sep 17 00:00:00 2001
From: Davor <davor.ivankovic@init.hr>
Date: Tue, 2 Aug 2022 23:43:18 +0200
Subject: [PATCH] add save changes to app general tab

---
 src/modules/apps/AppSingle.tsx                |  2 +-
 .../apps/components/GeneralTab/GeneralTab.tsx | 90 +++++++++++--------
 src/services/apps/hooks/use-apps.ts           |  8 +-
 src/services/apps/redux/actions.ts            |  4 +-
 4 files changed, 61 insertions(+), 43 deletions(-)

diff --git a/src/modules/apps/AppSingle.tsx b/src/modules/apps/AppSingle.tsx
index 2d074a2..d3cb8e5 100644
--- a/src/modules/apps/AppSingle.tsx
+++ b/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 /> },
   ];
diff --git a/src/modules/apps/components/GeneralTab/GeneralTab.tsx b/src/modules/apps/components/GeneralTab/GeneralTab.tsx
index c930b5d..5211a7f 100644
--- a/src/modules/apps/components/GeneralTab/GeneralTab.tsx
+++ b/src/modules/apps/components/GeneralTab/GeneralTab.tsx
@@ -1,45 +1,61 @@
-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 (
-    <div className="py-4">
-      <div className="md:grid md:grid-cols-3 md:gap-6">
-        <div className="md:col-span-2">
-          <h3 className="text-lg font-medium leading-6 text-gray-900">Automatic updates</h3>
-          <p className="mt-1 text-sm text-gray-500">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et nibh sit amet mauris faucibus molestie
-            gravida at orci.
-          </p>
+    <>
+      <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">
+              <h3 className="text-lg font-medium leading-6 text-gray-900">Automatic updates</h3>
+              <p className="mt-1 text-sm text-gray-500">
+                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">
-          <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',
-            )}
-          >
-            <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 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"
+            >
+              Save changes
+            </button>
+          </div>
         </div>
-      </div>
-    </div>
+      </form>
+    </>
   );
 };
diff --git a/src/services/apps/hooks/use-apps.ts b/src/services/apps/hooks/use-apps.ts
index 919bebe..521df87 100644
--- a/src/services/apps/hooks/use-apps.ts
+++ b/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,
diff --git a/src/services/apps/redux/actions.ts b/src/services/apps/redux/actions.ts
index 8bd4d48..17b8f2c 100644
--- a/src/services/apps/redux/actions.ts
+++ b/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);