refactor(web): refetch-on-address-change-and-set-empty-email-invalid

Author: tractorss

web/src/context/AtlasProvider.tsx

@@ -90,7 +90,7 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
     return () => {
       clearInterval(intervalId);
     };
-  }, [authToken, verifySession]);
+  }, [authToken, verifySession, address]);
 
   const {
     data: user,
@@ -110,6 +110,11 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
     },
   });
 
+  useEffect(() => {
+    if (!isVerified) return;
+    refetchUser();
+  }, [isVerified, refetchUser]);
+
   // this would change based on the fields we have and what defines a user to be existing
   const userExists = useMemo(() => {
     if (!user) return false;
@@ -129,7 +134,6 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
       const signature = await signMessageAsync({ message });
 
       const token = await loginUser(atlasGqlClient, { message, signature });
-
       setAuthToken(token);
     } catch (err: any) {
       // eslint-disable-next-line

web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx

@@ -38,7 +38,7 @@ const FormContact: React.FC<IForm> = ({
   isEditing,
 }) => {
   useEffect(() => {
-    setContactIsValid(contactInput === "" ? true : validator.test(contactInput));
+    setContactIsValid(validator.test(contactInput));
   }, [contactInput, setContactIsValid, validator]);
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -51,7 +51,7 @@ const FormContact: React.FC<IForm> = ({
       return undefined;
     }
     return contactIsValid ? "success" : "error";
-  }, [contactInput, contactIsValid]);
+  }, [contactInput, contactIsValid, isEditing]);
 
   return (
     <>

web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx

@@ -41,15 +41,14 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   const { user, isAddingUser, isFetchingUser, addUser, updateUser, isUpdatingUser, userExists } = useAtlasProvider();
 
   const isEditingEmail = useMemo(() => {
-    if (!user?.email && emailInput === "") return false;
     return user?.email !== emailInput;
   }, [user, emailInput]);
 
   useEffect(() => {
-    if (!user) return;
+    if (!user || !userExists) return;
 
     setEmailInput(user.email);
-  }, [user]);
+  }, [user, userExists]);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();

web/src/utils/atlas/updateUser.ts

@@ -5,7 +5,7 @@ import { OPTIONS } from "utils/wrapWithToast";
 
 const query = gql`
   mutation UpdateUser($settings: UpdateUserDto!) {
-    updateUser(updatedUserSettings: $settings)
+    updateUser(updateUserSettings: $settings)
   }
 `;