[NEW][TR] Add support for key value abstraction

app/components/auth/firebase/ui/FirebaseLoginForm.js

@@ -13,25 +13,11 @@ import {getApp} from 'firebase/app';
 import { useState } from "react";
 import { FormControl, Alert, Button } from "react-bootstrap";
 import {FB_APP_NAME} from '../lib/constants';
-import { useMutation, gql } from '@apollo/client'
 import Cookies from "js-cookie";
-
-
-const UPSERT_USER = gql`
-  mutation UpsertUser($uid: String!, $email: String!, $displayName: String!, $phoneNumber: String, $photoURL: String  ) {
-    upsertUser(uid: $uid, email: $email, displayName: $displayName, phoneNumber: $phoneNumber, photoURL: $photoURL) {
-      _id
-      uid
-      email
-      displayName
-      phoneNumber
-      photoURL
-    }
-  }
-`;
+import { superProMutate } from "../../../superprofile/SuperMutate";
 
 export default function FirebaseLoginForm({onSignupClick}){
-    const [upsertUserFunc, { data, loading, error }] = useMutation(UPSERT_USER);
+    const [upsertUserFunc, { data, loading, error }] = superProMutate("user");
     const [email,setEmail] = useState("");
     const [password,setPassword] = useState("");
     const [errorMessage,setError] = useState("");
@@ -81,15 +67,7 @@ export default function FirebaseLoginForm({onSignupClick}){
         try {
             const userCred = await signInWithPopup(auth,provider);
             Cookies.set('user', userCred.user.uid);
-            await upsertUserFunc({
-                variables: {
-                    uid: userCred.user.uid,
-                    email: userCred.user.email,
-                    displayName: userCred.user.displayName,
-                    phoneNumber: userCred.user.phoneNumber,
-                    photoURL: userCred.user.photoURL
-                },
-              })
+            await upsertUserFunc("user", userCred)
             if(diffCredError){
                 // The signin was requested to link new credentials with the account 
                 await linkWithCredential(userCred.user,OAuthProvider.credentialFromError(diffCredError.error));

app/components/auth/firebase/ui/FirebaseSignupForm.js

@@ -4,25 +4,11 @@ import {reload} from 'firebase/auth';
 import { useState, useEffect } from "react";
 import { FormControl, Alert, Button } from "react-bootstrap";
 import {FB_APP_NAME} from '../lib/constants';
-import { useMutation, gql } from '@apollo/client'
 import Cookies from "js-cookie";
-
-const UPSERT_USER = gql`
-  mutation UpsertUser($uid: String!, $email: String!, $displayName: String!, $phoneNumber: String, $photoURL: String  ) {
-    upsertUser(uid: $uid, email: $email, displayName: $displayName, phoneNumber: $phoneNumber, photoURL: $photoURL) {
-      _id
-      uid
-      email
-      displayName
-      phoneNumber
-      photoURL
-    }
-  }
-`;
-
+import { superProMutate } from "../../../superprofile/SuperMutate";
 
 export default function FirebaseSignupForm({onSignupComplete}){
-    const [upsertUserFunc, { data, loading, error }] = useMutation(UPSERT_USER);
+    const [upsertUserFunc, { data, loading, error }] = superProMutate("user");
     const [email,setEmail] = useState("");
     const [name,setName] = useState("");
     const [password1,setPassword1] = useState("");
@@ -70,15 +56,7 @@ export default function FirebaseSignupForm({onSignupComplete}){
             const userCred = await createUserWithEmailAndPassword(getAuth(fbApp),email,password1);
             await updateProfile(userCred.user,{displayName: name});
             await reload(userCred.user);
-            upsertUserFunc({
-                variables: {
-                    uid: userCred.user.uid,
-                    email: userCred.user.email,
-                    displayName: userCred.user.displayName,
-                    phoneNumber: userCred.user.phoneNumber,
-                    photoURL: userCred.user.photoURL
-                },
-              })
+            upsertUserFunc("user", userCred)
             Cookies.set('user', userCred.user.uid);
             await sendEmailVerification(userCred.user);
             onSignupComplete && onSignupComplete();

app/components/superprofile/SuperMutate.js

@@ -0,0 +1,68 @@
+import { gql, useMutation } from "@apollo/client";
+
+const UPSERT_NFT = gql`
+  mutation UpsertNFT($id: String!, $address: String!, $token: String!) {
+    upsertNFT(id: $id, address: $address, token: $token) {
+      _id
+      address
+      token
+    }
+  }
+`;
+const UPSERT_USER = gql`
+  mutation UpsertUser(
+    $uid: String!
+    $email: String!
+    $displayName: String!
+    $phoneNumber: String
+    $photoURL: String
+  ) {
+    upsertUser(
+      uid: $uid
+      email: $email
+      displayName: $displayName
+      phoneNumber: $phoneNumber
+      photoURL: $photoURL
+    ) {
+      _id
+      uid
+      email
+      displayName
+      phoneNumber
+      photoURL
+    }
+  }
+`;
+
+export const superProMutate = (target) => {
+  //the different useMutation function goes here
+  let mutationSchema = null;
+  if (target == "nft") {
+    mutationSchema = UPSERT_NFT;
+  }
+  if (target === "user") {
+    mutationSchema = UPSERT_USER;
+  }
+  const callSuper = (key, prop) => {
+    if (key === "nft") {
+      upsert({
+        variables: { id: prop.uid, address: prop.address, token: prop.token },
+      });
+    }
+    if (key === "user") {
+      upsert({
+        variables: {
+          uid: prop.user.uid,
+          email: prop.user.email,
+          displayName: prop.user.displayName,
+          phoneNumber: prop.user.phoneNumber,
+          photoURL: prop.user.photoURL,
+        },
+      });
+    }
+    // Add other cases eg. if (key == "user")
+  };
+  const [upsert, { data, loading, error, reset }] = useMutation(mutationSchema);
+
+  return [ callSuper, {data, loading, error, reset} ];
+};

app/components/superprofile/SuperQuery.js

@@ -0,0 +1,35 @@
+import { gql, useLazyQuery } from "@apollo/client";
+
+const FIND_USER_UID = gql`
+  query findbyUid($uid: String!) {
+    findUserByUid(uid: $uid) {
+        _id
+        uid
+        displayName
+        email
+        photoURL
+        phoneNumber
+      }
+  }
+`;
+
+export const superProQuery = (target) => {
+    //the different useMutation function goes here
+    let querySchema = null;
+    if (target === "user") {
+      querySchema = FIND_USER_UID;
+    }
+    const callSuper = (key, prop) => {
+      if (key === "user") {
+        query({
+          variables: {
+            uid: prop.uid
+          }
+        });
+      }
+      // Add other cases eg. if (key == "user")
+    };
+    const [query, { data, error, loading }] = useLazyQuery(querySchema);
+
+    return [ callSuper, {data, loading, error} ];
+  };

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 { superProMutate } from "../superprofile/SuperMutate";
 
 const NFTProfile = ({ limit }) => {
   const [assets, setAssets] = useState(null);
@@ -109,21 +99,30 @@ const GalleryModal = ({
   errMess,
   setErrMess,
 }) => {
-  const [upsertNFT, { data, loading, error, reset }] = useMutation(UPSERT_NFT);
+  const [ superMutate, {data, loading, error, reset} ] = superProMutate("nft");
+
   useEffect(() => {
     if (data) {
       setLoad(false);
     }
   }, [data]);
+
   if (loading) {
     setLoad(true);
   }
+
   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 } });
+    const data = {
+      uid: uid,
+      address: address,
+      token: token,
+    };
+
+    superMutate("nft", data);
   };
 
   if (error) {

app/pages/profile/[uid].js

@@ -1,62 +1,55 @@
-import { useRouter } from 'next/router'
-import { useLazyQuery, gql } from '@apollo/client'
-import { useEffect } from 'react';
-import Cookies from 'js-cookie';
-import { NoUserAvatar } from '../../components/auth/NoUserAvatar';
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import Cookies from "js-cookie";
+import { NoUserAvatar } from "../../components/auth/NoUserAvatar";
 
 
-const FindUserByUid = gql`
-  query findbyUid($uid: String!) {
-    findUserByUid(uid: $uid) {
-        _id
-        uid
-        displayName
-        email
-        photoURL
-        phoneNumber
-      }
-  }
-`;
-
 const Profile = () => {
-    const router = useRouter()
-    const { uid } = router.query
-    const cookies = Cookies.get('user');
-    const [getCurrentUser, { data, error, loading }] = useLazyQuery(FindUserByUid);
+  const router = useRouter();
+  const { uid } = router.query;
+  const cookies = Cookies.get("user");
+  const [getCurrentUser, { data, error, loading }] = superProQuery("user");
 
-    useEffect(() => {
-        if(!cookies) {
-          router.push('/')
-        } 
-        getCurrentUser({
-          variables: {
-            uid: uid
-          }
-        })
-      }, [])
+  useEffect(() => {
+    if (!cookies) {
+      router.push("/");
+    }
+    getCurrentUser("user", {
+      uid: uid,
+    });
+  }, []);
 
-    if(error) console.log(error)
-
-    if(data?.findUserByUid){
-        const user = data.findUserByUid
-        return(
-            <>
-            <div className="my-3" style={{display:"flex", alignItems:"center", flexDirection:"column"}}>{
-            user?.photoURL ?
-            <img src={user.photoURL}
-                alt={user.displayName}
-                className="rounded-circle"
-                height="130px"
-                width="130px" />
-            :
+  if (error) console.log(error);
+
+  if (data?.findUserByUid) {
+    const user = data.findUserByUid;
+    return (
+      <>
+        <div
+          className="my-3"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "column",
+          }}
+        >
+          {user?.photoURL ? (
+            <img
+              src={user.photoURL}
+              alt={user.displayName}
+              className="rounded-circle"
+              height="130px"
+              width="130px"
+            />
+          ) : (
             <NoUserAvatar name={user?.displayName} size="130" />
-            }
-            <h2 className="my-3">{user.displayName}</h2>
-            </div>
-            </>
-        )
-      }
+          )}
+          <h2 className="my-3">{user.displayName}</h2>
+        </div>
+      </>
+    );
+  }
 
-    return <></>
-    }  
-  export default Profile
+  return <></>;
+};
+export default Profile;