diff --git a/app/components/superProfile/upsertNFT.js b/app/components/superProfile/upsertNFT.js new file mode 100644 index 00000000..61d9adf3 --- /dev/null +++ b/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; diff --git a/app/components/wallet/NFTprofile.js b/app/components/wallet/NFTprofile.js index 85bd779f..16c4d22e 100644 --- a/app/components/wallet/NFTprofile.js +++ b/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 ( <> Select a NFT - {error && ( + {mutate === true && ( + + )} + + {mutate == "err" && ( {errMess} - Please try again! )} + {mutate == "yay" && ( + { + handleClose(); + setMutate(false); + }} + dismissible + > + NFT set success! + + )} {assets ? assets.map(