[NEW]Abstract the NFT upsert

app/components/superProfile/upsertNFT.js

@@ -0,0 +1,86 @@
+import { useMutation, gql } from "@apollo/client";
+import { useEffect } from "react";
+
+const UPSERT_NFT = gql`
+  mutation UpsertNFT($id: String!, $address: String!, $token: String!) {
+    upsertNFT(id: $id, address: $address, token: $token) {
+      _id
+      address
+      token
+    }
+  }
+`;
+
+export const mutationNFT = async ({ uid, address, token, setMutate }) => {
+  const [upsertNFT, { data, loading, error, reset }] = useMutation(UPSERT_NFT);
+  useEffect(async () => {
+    await upsertNFT({ variables: { id: uid, address: address, token: token } });
+  }, [uid]);
+
+  if (data) {
+    setMutate(false);
+    return { data: data };
+  }
+
+  if (loading) {
+    return { loading: loading };
+  }
+
+  if (error) {
+    return { error: error, reset: reset };
+  }
+};
+
+const SuperProfileUpsertNFT = ({
+  setMutate,
+  setErrMess,
+  setLoad,
+  uid,
+  address,
+  token,
+}) => {
+  const mutationData = mutationNFT({ uid, address, token, setMutate })
+    .then((res) => {
+      if (!res) {
+        return;
+      }
+      if (res && res.data) {
+        setLoad(false);
+        setMutate("yay");
+        return;
+      }
+
+      if (res && res.error) {
+        setMutate("err");
+        if (
+          res.error.graphQLErrors[0].extensions.code == "instance not found"
+        ) {
+          setErrMess("User not found");
+        }
+        if (
+          res.error.graphQLErrors[0].extensions.code == "instance not unique"
+        ) {
+          setErrMess("NFT is owned by someone else");
+        } else {
+          setErrMess(res.error.message);
+        }
+        setTimeout(() => {
+          res.reset();
+          setLoad(false);
+          setMutate(false);
+        }, 5000);
+      }
+
+      if (res && res.loading) {
+        setLoad(true);
+        return;
+      }
+    })
+    .catch((err) => {
+      console.log("catch error", err);
+    });
+
+  return <></>;
+};
+
+export default SuperProfileUpsertNFT;

app/components/wallet/NFTprofile.js

@@ -3,18 +3,8 @@ import { Alert, Button, Image, Modal, Spinner } from "react-bootstrap";
 import { connectAccount, fetchAssets } from "../../lib/walletAPI";
 import { ErrorModal } from "./connectMeta";
 import styles from "../../styles/meta.module.css";
-import { gql, useMutation } from "@apollo/client";
 import Cookies from "js-cookie";
-
-const UPSERT_NFT = gql`
-  mutation UpsertNFT($id: String!, $address: String!, $token: String!) {
-    upsertNFT(id: $id, address: $address, token: $token) {
-      _id
-      address
-      token
-    }
-  }
-`;
+import SuperProfileUpsertNFT, { mutationNFT } from "../superProfile/upsertNFT";
 
 const NFTProfile = ({ limit }) => {
   const [assets, setAssets] = useState(null);
@@ -109,47 +99,57 @@ const GalleryModal = ({
   errMess,
   setErrMess,
 }) => {
-  const [upsertNFT, { data, loading, error, reset }] = useMutation(UPSERT_NFT);
-  useEffect(() => {
-    if (data) {
-      setLoad(false);
-    }
-  }, [data]);
-  if (loading) {
-    setLoad(true);
+  const [mutate, setMutate] = useState(false);
+  try {
+    let assetSelected = assets[select.split("_")[1]] || undefined;
+
+    let address = assetSelected.asset_contract.address;
+    let token = assetSelected.token_id;
+  } catch {
+    let address = "";
+    let token = "";
   }
+
   const handleSubmit = (e) => {
     e.preventDefault();
-    const assetSelected = assets[select.split("_")[1]];
-    const address = assetSelected.asset_contract.address;
-    const token = assetSelected.token_id;
-    upsertNFT({ variables: { id: uid, address: address, token: token } });
+    assetSelected = assets[select.split("_")[1]];
+    address = assetSelected.asset_contract.address;
+    token = assetSelected.token_id;
+    setMutate(true);
   };
 
-  if (error) {
-    if (error.graphQLErrors[0].extensions.code == "instance not found") {
-      setErrMess("User not found");
-    }
-    if (error.graphQLErrors[0].extensions.code == "instance not unique") {
-      setErrMess("NFT is owned by someone else");
-    } else {
-      setErrMess(error.message);
-    }
-    setTimeout(() => {
-      reset();
-      setLoad(false);
-    }, 5000);
-  }
-
   return (
     <>
       <Modal show={show} onHide={handleClose}>
         <Modal.Header closeButton>
           <Modal.Title>Select a NFT</Modal.Title>
         </Modal.Header>
-        {error && (
+        {mutate === true && (
+          <SuperProfileUpsertNFT
+            setMutate={setMutate}
+            setErrMess={setErrMess}
+            setLoad={setLoad}
+            uid={uid}
+            address={address}
+            token={token}
+          />
+        )}
+
+        {mutate == "err" && (
           <Alert variant={"danger"}>{errMess} - Please try again!</Alert>
         )}
+        {mutate == "yay" && (
+          <Alert
+            variant={"success"}
+            onClose={() => {
+              handleClose();
+              setMutate(false);
+            }}
+            dismissible
+          >
+            NFT set success!
+          </Alert>
+        )}
         <Modal.Body className={styles.selectNFT}>
           {assets
             ? assets.map(