feat(web): user-settings-integration

Author: tractorss

web/src/consts/index.ts

@@ -21,7 +21,8 @@ export const RELEASE_VERSION = version;
 
 // https://www.w3.org/TR/2012/WD-html-markup-20120329/input.email.html#input.email.attrs.value.single
 // eslint-disable-next-line security/detect-unsafe-regex
-export const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+export const EMAIL_REGEX =
+  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 export const TELEGRAM_REGEX = /^@\w{5,32}$/;
 export const ETH_ADDRESS_REGEX = /^0x[a-fA-F0-9]{40}$/;
 export const ETH_SIGNATURE_REGEX = /^0x[a-fA-F0-9]{130}$/;

web/src/context/AtlasProvider.tsx

@@ -1,17 +1,36 @@
 import React, { useMemo, createContext, useContext, useState, useCallback, useEffect } from "react";
 
+import { useQuery } from "@tanstack/react-query";
 import { GraphQLClient } from "graphql-request";
 import { decodeJwt } from "jose";
 import { useAccount, useChainId, useSignMessage } from "wagmi";
 
 import { useSessionStorage } from "hooks/useSessionStorage";
-import { createMessage, getNonce, loginUser } from "utils/atlas";
+import {
+  createMessage,
+  getNonce,
+  loginUser,
+  addUser as addUserToAtlas,
+  fetchUser,
+  updateUser as updateUserInAtlas,
+  type User,
+  type AddUserData,
+  type UpdateUserData,
+} from "utils/atlas";
+
+import { isUndefined } from "src/utils";
 
 interface IAtlasProvider {
   isVerified: boolean;
   isSigningIn: boolean;
-
+  isAddingUser: boolean;
+  isFetchingUser: boolean;
+  isUpdatingUser: boolean;
+  user: User | undefined;
+  userExists: boolean;
   authoriseUser: () => void;
+  addUser: (userSettings: AddUserData) => Promise<boolean>;
+  updateUser: (userSettings: UpdateUserData) => Promise<boolean>;
 }
 
 const Context = createContext<IAtlasProvider | undefined>(undefined);
@@ -26,13 +45,15 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
   const chainId = useChainId();
   const [authToken, setAuthToken] = useSessionStorage<string | undefined>("authToken", undefined);
   const [isSigningIn, setIsSigningIn] = useState(false);
+  const [isAddingUser, setIsAddingUser] = useState(false);
+  const [isUpdatingUser, setIsUpdatingUser] = useState(false);
   const [isVerified, setIsVerified] = useState(false);
   const { signMessageAsync } = useSignMessage();
 
   const atlasGqlClient = useMemo(() => {
     const headers = authToken
       ? {
-          authorization: authToken,
+          authorization: `Bearer ${authToken}`,
         }
       : undefined;
     return new GraphQLClient(atlasUri, { headers });
@@ -71,6 +92,30 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
     };
   }, [authToken, verifySession]);
 
+  const {
+    data: user,
+    isLoading: isFetchingUser,
+    refetch: refetchUser,
+  } = useQuery({
+    queryKey: [`UserSettings`],
+    enabled: isVerified && !isUndefined(address),
+    staleTime: Infinity,
+    queryFn: async () => {
+      try {
+        if (!isVerified || isUndefined(address)) return undefined;
+        return await fetchUser(atlasGqlClient, address);
+      } catch {
+        return undefined;
+      }
+    },
+  });
+
+  // this would change based on the fields we have and what defines a user to be existing
+  const userExists = useMemo(() => {
+    if (!user) return false;
+    return user.email ? true : false;
+  }, [user]);
+
   /**
    * @description authorise user and enable authorised calls
    */
@@ -94,9 +139,86 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
     }
   }, [address, chainId, setAuthToken, signMessageAsync, atlasGqlClient]);
 
+  /**
+   * @description adds a new user to atlas
+   * @param {AddUserData} userSettings - object containing data to be added
+   * @returns {Promise<boolean>} A promise that resolves to true if the user was added successfully
+   */
+  const addUser = useCallback(
+    async (userSettings: AddUserData) => {
+      try {
+        if (!address || !isVerified) return false;
+        setIsAddingUser(true);
+
+        const userAdded = await addUserToAtlas(atlasGqlClient, { address, ...userSettings });
+        refetchUser();
+
+        return userAdded;
+      } catch (err: any) {
+        // eslint-disable-next-line
+        console.log("Add User Error : ", err?.message);
+        return false;
+      } finally {
+        setIsAddingUser(false);
+      }
+    },
+    [address, isVerified, setIsAddingUser, atlasGqlClient, refetchUser]
+  );
+
+  /**
+   * @description updates user settings in atlas
+   * @param {UpdateUserData} userSettings - object containing data to be updated
+   * @returns {Promise<boolean>} A promise that resolves to true if settings were updated successfully
+   */
+  const updateUser = useCallback(
+    async (userSettings: UpdateUserData) => {
+      try {
+        if (!address || !isVerified) return false;
+        setIsUpdatingUser(true);
+
+        const userUpdated = await updateUserInAtlas(atlasGqlClient, userSettings);
+        refetchUser();
+
+        return userUpdated;
+      } catch (err: any) {
+        // eslint-disable-next-line
+        console.log("Update User Error : ", err?.message);
+        return false;
+      } finally {
+        setIsUpdatingUser(false);
+      }
+    },
+    [address, isVerified, setIsUpdatingUser, atlasGqlClient, refetchUser]
+  );
+
   return (
     <Context.Provider
-      value={useMemo(() => ({ isVerified, isSigningIn, authoriseUser }), [isVerified, isSigningIn, authoriseUser])}
+      value={useMemo(
+        () => ({
+          isVerified,
+          isSigningIn,
+          isAddingUser,
+          authoriseUser,
+          addUser,
+          user,
+          isFetchingUser,
+          updateUser,
+          isUpdatingUser,
+          userExists,
+        }),
+        [
+          isVerified,
+          isSigningIn,
+          isAddingUser,
+          authoriseUser,
+          addUser,
+          user,
+          isFetchingUser,
+          updateUser,
+          isUpdatingUser,
+          userExists,
+        ]
+      )}
     >
       {children}
     </Context.Provider>

web/src/hooks/useSessionStorage.ts

@@ -3,7 +3,8 @@ import { useState } from "react";
 export function useSessionStorage<T>(keyName: string, defaultValue: T) {
   const [storedValue, setStoredValue] = useState<T>(() => {
     try {
-      const value = window.localStorage.getItem(keyName);
+      const value = window.sessionStorage.getItem(keyName);
+
       return value ? JSON.parse(value) : defaultValue;
     } catch (err) {
       return defaultValue;

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

@@ -1,15 +1,18 @@
 import React, { useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
+
 import { useAccount } from "wagmi";
+
 import { Button } from "@kleros/ui-components-library";
-import { uploadSettingsToSupabase } from "utils/uploadSettingsToSupabase";
-import FormContact from "./FormContact";
-import { EMAIL_REGEX, TELEGRAM_REGEX } from "consts/index";
+
+import { EMAIL_REGEX } from "consts/index";
+import { useAtlasProvider } from "context/AtlasProvider";
 
 import { responsiveSize } from "styles/responsiveSize";
 
 import { ISettings } from "../../../../index";
-import { useUserSettings } from "hooks/queries/useUserSettings";
+
+import FormContact from "./FormContact";
 
 const FormContainer = styled.form`
   width: 100%;
@@ -32,33 +35,21 @@ const FormContactContainer = styled.div`
 `;
 
 const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
-  const [telegramInput, setTelegramInput] = useState<string>("");
   const [emailInput, setEmailInput] = useState<string>("");
-  const [telegramIsValid, setTelegramIsValid] = useState<boolean>(false);
   const [emailIsValid, setEmailIsValid] = useState<boolean>(false);
   const { address } = useAccount();
-  const { data: userSettings, refetch: refetchUserSettings } = useUserSettings();
+  const { user, isAddingUser, isFetchingUser, addUser, updateUser, isUpdatingUser, userExists } = useAtlasProvider();
 
   const isEditingEmail = useMemo(() => {
-    if (!userSettings?.email && emailInput === "") return false;
-    return userSettings?.email !== emailInput;
-  }, [userSettings, emailInput]);
-
-  const isEditingTelegram = useMemo(() => {
-    if (!userSettings?.telegram && telegramInput === "") return false;
-    return userSettings?.telegram !== telegramInput;
-  }, [userSettings, telegramInput]);
-
-  useEffect(() => {
-    refetchUserSettings();
-  }, [address]);
+    if (!user?.email && emailInput === "") return false;
+    return user?.email !== emailInput;
+  }, [user, emailInput]);
 
   useEffect(() => {
-    if (!userSettings) return;
+    if (!user) return;
 
-    setEmailInput(userSettings.email ?? "");
-    setTelegramInput(userSettings.telegram ?? "");
-  }, [userSettings]);
+    setEmailInput(user.email);
+  }, [user]);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -68,18 +59,26 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
 
     const data = {
       email: emailInput,
-      telegram: telegramInput,
-      address,
     };
 
-    uploadSettingsToSupabase(data)
-      .then(async (res) => {
-        if (res.ok) {
-          toggleIsSettingsOpen();
-          refetchUserSettings();
-        }
-      })
-      .catch((err) => console.log(err));
+    // if user exists then update
+    if (userExists) {
+      updateUser(data)
+        .then(async (res) => {
+          if (res) {
+            toggleIsSettingsOpen();
+          }
+        })
+        .catch((err) => console.log(err));
+    } else {
+      addUser(data)
+        .then(async (res) => {
+          if (res) {
+            toggleIsSettingsOpen();
+          }
+        })
+        .catch((err) => console.log(err));
+    }
   };
   return (
     <FormContainer onSubmit={handleSubmit}>
@@ -109,8 +108,10 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
       </FormContactContainer>
 
       <ButtonContainer>
-        {/* <Button text="Save" disabled={(!isEditingEmail && !isEditingTelegram) || !emailIsValid || !telegramIsValid} /> */}
-        <Button text="Save" disabled={!isEditingEmail || !emailIsValid} />
+        <Button
+          text="Save"
+          disabled={!isEditingEmail || !emailIsValid || isAddingUser || isFetchingUser || isUpdatingUser}
+        />
       </ButtonContainer>
     </FormContainer>
   );

web/src/utils/atlas/addUser.ts

@@ -0,0 +1,51 @@
+import { gql, type GraphQLClient } from "graphql-request";
+import { toast } from "react-toastify";
+import { Address } from "viem";
+
+import { OPTIONS } from "utils/wrapWithToast";
+
+const query = gql`
+  mutation AddUser($settings: AddUserSettingsDto!) {
+    addUser(addUserSettings: $settings)
+  }
+`;
+
+export type AddUserData = {
+  address?: Address;
+  email: string;
+};
+
+type AddUserResponse = {
+  addUser: boolean;
+};
+
+export function addUser(client: GraphQLClient, userData: AddUserData): Promise<boolean> {
+  const variables = {
+    settings: userData,
+  };
+
+  return toast.promise<boolean, Error>(
+    client
+      .request<AddUserResponse>(query, variables)
+      .then(async (response) => response.addUser)
+      .catch((errors) => {
+        // eslint-disable-next-line no-console
+        console.log("Add User error:", { errors });
+
+        const errorMessage = Array.isArray(errors?.response?.errors)
+          ? errors.response.errors[0]?.message
+          : "Unknown error";
+        throw new Error(errorMessage);
+      }),
+    {
+      pending: `Adding User ...`,
+      success: "User added successfully!",
+      error: {
+        render({ data: error }) {
+          return `Adding User failed: ${error?.message}`;
+        },
+      },
+    },
+    OPTIONS
+  );
+}