feat(nova): implemented disabling settings form unless changes occur

litespace-org · Dec 25, 2024 · cf65514 · cf65514
1 parent 115c87d
commit cf65514
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 29 deletions.
diff --git a/apps/nova/src/components/Settings/ProfileForm.tsx b/apps/nova/src/components/Settings/ProfileForm.tsx
@@ -21,6 +21,7 @@ import { QueryKey } from "@litespace/headless/constants";
 import { useUpdateUser } from "@litespace/headless/user";
 import TopicSelector from "@/components/Settings/TopicSelector";
 import { useTopics, useUserTopics } from "@litespace/headless/topic";
+import { isEqual } from "lodash";
 
 type IForm = {
   name: string;
@@ -83,6 +84,25 @@ export const ProfileForm: React.FC<{ user: IUser.Self }> = ({ user }) => {
     !!form.watch("password.current") ||
     !!form.watch("password.confirm");
 
+  const currentValues = form.watch();
+  /**
+   * flag to indicate that change has happened in user settings to enable sending requests
+   */
+  const canSubmit = useMemo(() => {
+    const initialValues = form.control._defaultValues;
+
+    console.log({ userTopics, topics });
+    console.log(isEqual(userTopics, topics));
+
+    return (
+      isEqual(initialValues, currentValues) &&
+      !photo &&
+      isEqual(userTopics, topics)
+    );
+  }, [form, currentValues, photo, topics, userTopics]);
+
+  console.log(canSubmit);
+
   const onSuccess = useCallback(() => {
     invalidateQuery([QueryKey.FindCurrentUser]);
     toast.success({ title: intl("profile.update.success") });
@@ -120,6 +140,7 @@ export const ProfileForm: React.FC<{ user: IUser.Self }> = ({ user }) => {
 
   const onSubmit = useCallback(
     (data: IForm) => {
+      if (!canSubmit) return;
       if (photo) console.log("upload photo");
       if (!user) return;
 
@@ -141,7 +162,7 @@ export const ProfileForm: React.FC<{ user: IUser.Self }> = ({ user }) => {
         },
       });
     },
-    [mutation, photo, user]
+    [mutation, photo, user, canSubmit]
   );
 
   useEffect(() => {
@@ -310,7 +331,7 @@ export const ProfileForm: React.FC<{ user: IUser.Self }> = ({ user }) => {
         loading={allTopicsQuery.query.isPending || userTopicsQuery.isPending}
       />
       <Button
-        disabled={false}
+        disabled={canSubmit}
         size={ButtonSize.Large}
         className="mr-auto mt-auto"
         htmlType="submit"

diff --git a/packages/luna/src/components/MultiSelect/MultiSelect.tsx b/packages/luna/src/components/MultiSelect/MultiSelect.tsx
@@ -14,6 +14,7 @@ import { isEmpty } from "lodash";
 import { useCallback, useMemo, useState } from "react";
 import { X } from "react-feather";
 import React from "react";
+import { Tooltip } from "@/components/Tooltip/Tooltip";
 
 export const MultiSelect = <T,>({
   options,
@@ -67,8 +68,7 @@ export const MultiSelect = <T,>({
         >
           <div className="tw-flex tw-flex-row tw-justify-between tw-items-center tw-gap-2 tw-h-full">
             <SearchIcon className="tw-justify-self-start" />
-            {/* TODO: make it accept multiple lines */}
-            <div className="tw-h-full tw-flex-1 tw-flex tw-flex-wrap tw-justify-start tw-items-center tw-gap-2">
+            <div className="tw-h-full tw-flex-1 tw-flex tw-justify-start tw-items-center tw-gap-2">
               {isEmpty(selectedOptions) ? (
                 <Typography className="tw-flex-1 tw-text-natural-400 tw-text-start">
                   {placeholder}
@@ -77,30 +77,29 @@ export const MultiSelect = <T,>({
                 selectedOptions.map(({ label, value }, idx) => {
                   if (idx <= 1)
                     return (
-                      <div
-                        key={label}
-                        className="tw-flex tw-justify-center tw-items-center tw-px-[10px] tw-py-2 tw-rounded-full tw-gap-2 tw-bg-brand-700 tw-h-full"
-                      >
-                        <Typography
-                          element="body"
-                          className="tw-text-natural-50"
-                        >
-                          {label}
-                        </Typography>
-                        <button
-                          onClick={() => {
-                            if (!setValues) return;
-                            const copy = structuredClone(values);
-                            setValues(
-                              copy.filter(
-                                (optionValue) => optionValue !== value
-                              )
-                            );
-                          }}
-                        >
-                          <X className="tw-w-4 tw-h-4 tw-stroke-natural-50" />
-                        </button>
-                      </div>
+                      <Tooltip side="top" content={label} key={label}>
+                        <div className=" tw-flex tw-justify-center tw-items-center tw-px-[10px] tw-py-2 tw-rounded-full tw-gap-2 tw-bg-brand-700 tw-h-full">
+                          <Typography
+                            element="body"
+                            className="tw-text-natural-50 tw-max-w-[100px] tw-truncate"
+                          >
+                            {label}
+                          </Typography>
+                          <button
+                            onClick={() => {
+                              if (!setValues) return;
+                              const copy = structuredClone(values);
+                              setValues(
+                                copy.filter(
+                                  (optionValue) => optionValue !== value
+                                )
+                              );
+                            }}
+                          >
+                            <X className="tw-w-4 tw-h-4 tw-stroke-natural-50" />
+                          </button>
+                        </div>
+                      </Tooltip>
                     );
 
                   if (idx === 2)
@@ -111,7 +110,7 @@ export const MultiSelect = <T,>({
                       >
                         <Typography
                           element="body"
-                          className="tw-text-natural-50"
+                          className="tw-text-natural-50 tw-whitespace-nowrap"
                         >
                           {selectedOptions.length - idx} +
                         </Typography>