feat: change save button behaviour in settings

xgeekshq · Sep 27, 2023 · 41e4372 · 41e4372
1 parent c5337af
commit 41e4372
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/packages/web-ui/app/admin/login/page.tsx b/packages/web-ui/app/admin/login/page.tsx
@@ -32,7 +32,7 @@ export default function SuperAdminLogin() {
         variant: 'destructive',
       });
     },
-    onSuccess: (room) => {
+    onSuccess: () => {
       router.push('/admin/manage/users');
     },
   });

diff --git a/packages/web-ui/components/admin/add-ai-models-form.tsx b/packages/web-ui/components/admin/add-ai-models-form.tsx
@@ -55,7 +55,7 @@ export function AddAiModelsForm() {
         variant: 'destructive',
       });
     },
-    onSuccess: (room) => {
+    onSuccess: () => {
       setOpen(false);
       toast({
         title: 'AI Model added successfully!',

diff --git a/packages/web-ui/components/admin/update-roles-form.tsx b/packages/web-ui/components/admin/update-roles-form.tsx
@@ -62,7 +62,7 @@ export function UpdateRolesForm({
         variant: 'destructive',
       });
     },
-    onSuccess: (room) => {
+    onSuccess: () => {
       setOpen(false);
       toast({
         title: 'Roles updated successfully!',

diff --git a/packages/web-ui/components/update-room-form.tsx b/packages/web-ui/components/update-room-form.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { updateRoom } from '@/api/requests/rooms/update-room';
 import { RoomResponseDto } from '@/contract/rooms/room.response.dto.d';
@@ -27,10 +28,13 @@ import { useToast } from '@/components/ui/use-toast';
 interface UpdateRoomFormProps {
   room: RoomResponseDto;
 }
+
 export function UpdateRoomForm({ room }: UpdateRoomFormProps) {
   const router = useRouter();
   const { toast } = useToast();
   const { getToken } = useAuth();
+  const [originalName, setOriginalName] = useState(room.name);
+  const [originalPrivacy, setOriginalPrivacy] = useState(room.isPrivate);
   const { mutate: updateRoomMutationReq, isLoading } = useMutation({
     mutationFn: async (values: UpdateRoomSettingsRequestDto) =>
       updateRoom(room.id, values, await getToken()),
@@ -40,10 +44,12 @@ export function UpdateRoomForm({ room }: UpdateRoomFormProps) {
         variant: 'destructive',
       });
     },
-    onSuccess: () => {
+    onSuccess: (room) => {
       toast({
         title: 'Room updated successfully!',
       });
+      setOriginalName(room.name);
+      setOriginalPrivacy(room.isPrivate);
       router.refresh();
     },
   });
@@ -54,6 +60,13 @@ export function UpdateRoomForm({ room }: UpdateRoomFormProps) {
       isPrivate: room.isPrivate,
     },
   });
+  const isFormChanged = useMemo(() => {
+    const formValues = form.getValues();
+    return (
+      originalName !== formValues.name ||
+      originalPrivacy !== formValues.isPrivate
+    );
+  }, [originalName, originalPrivacy, form.getValues()]);
 
   async function onSubmit(values: UpdateRoomSettingsRequestDto) {
     try {
@@ -96,7 +109,11 @@ export function UpdateRoomForm({ room }: UpdateRoomFormProps) {
                   />
                 </FormControl>
                 <div className="flex w-full justify-end">
-                  <Button disabled={isLoading} variant="success" type="submit">
+                  <Button
+                    disabled={isLoading || !isFormChanged}
+                    variant="success"
+                    type="submit"
+                  >
                     Save
                   </Button>
                 </div>