(refactor) - transform usePreviousValue checks to .then on executeMutation

Author: JoviDeCroock

server/prisma/prisma.yml

@@ -1,6 +1,6 @@
 # Specifies the HTTP endpoint of your Prisma API.
 #endpoint: ''
-endpoint: ''
+endpoint: https://eu1.prisma.sh/jovi-de-croock-c8d40d/server/dev
 
 # Defines your models, each model is mapped to the database as a table.
 datamodel: datamodel.prisma

server/src/generated/prisma-client/index.js

@@ -20,7 +20,7 @@ var models = [
 exports.Prisma = prisma_lib_1.makePrismaClientClass({
   typeDefs,
   models,
-  endpoint: ``,
+  endpoint: `https://eu1.prisma.sh/jovi-de-croock-c8d40d/server/dev`,
   secret: `mysecret123`
 });
 exports.prisma = new exports.Prisma();

src/components/CreateLink.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useMutation } from 'urql';
 import gql from 'graphql-tag';
-import usePreviousValue from '../hooks/usePreviousValue';
 
 const POST_MUTATION = gql`
   mutation PostMutation($description: String!, $url: String!) {
@@ -17,18 +16,13 @@ const POST_MUTATION = gql`
 const CreateLink = ({ history }) => {
   const [description, setDescription] = React.useState("");
   const [url, setUrl] = React.useState('');
-  const [state, executeMutation] = useMutation(POST_MUTATION);
-  const prevFetching = usePreviousValue(state.fetching);
-
-  React.useEffect(() => {
-    if (state.fetching === false && prevFetching === true) {
-      history.push('/new/1');
-    }
-  }, [state.fetching, prevFetching, history]);
+  const [{ fetching }, executeMutation] = useMutation(POST_MUTATION);
 
   const postMutation = React.useCallback(() => {
-    executeMutation({ url, description });
-  }, [url, description, executeMutation]);
+    executeMutation({ url, description }).then(() => {
+      history.push('/new/1');
+    });
+  }, [url, description, executeMutation, history]);
 
   return (
     <div>
@@ -48,7 +42,7 @@ const CreateLink = ({ history }) => {
           placeholder="The URL for the link"
         />
       </div>
-      <button onClick={postMutation}>Submit</button>
+      <button disabled={fetching} onClick={postMutation}>Submit</button>
     </div>
   );
 }

src/components/Link.js

@@ -25,7 +25,7 @@ const VOTE_MUTATION = gql`
 
 const Link = ({ link, index }) => {
   const authToken = localStorage.getItem(AUTH_TOKEN);
-  const [, executeMutation] = useMutation(VOTE_MUTATION);
+  const [{ fetching }, executeMutation] = useMutation(VOTE_MUTATION);
 
   const voteMutation = React.useCallback(() => {
     executeMutation({ linkId: link.id });
@@ -36,7 +36,7 @@ const Link = ({ link, index }) => {
       <div className="flex items-center">
         <span className="gray">{index + 1}.</span>
         {authToken && (
-          <div className="ml1 gray f11" onClick={voteMutation}>
+          <div className="ml1 gray f11" onClick={voteMutation} disabled={fetching}>
             ▲
           </div>
         )}

src/components/Login.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useMutation } from 'urql';
 import gql from 'graphql-tag';
-import usePreviousValue from '../hooks/usePreviousValue';
 import { AUTH_TOKEN } from "../constants";
 
 const SIGNUP_MUTATION = gql`
@@ -26,21 +25,17 @@ const Login = ({ history }) => {
   const [password, setPassword] = React.useState('');
   const [name, setName] = React.useState('');
 
-  const [{ fetching, data }, executeMutation] = useMutation(login ? LOGIN_MUTATION : SIGNUP_MUTATION);
-  const prevFetching = usePreviousValue(fetching);
+  const [{ fetching }, executeMutation] = useMutation(login ? LOGIN_MUTATION : SIGNUP_MUTATION);
 
   const mutate = React.useCallback(() => {
-    executeMutation({ email, password, name });
+    executeMutation({ email, password, name }).then(result => {
+      console.log(result);
+      const { token } = login ? result.login : result.signup;
+      localStorage.setItem(AUTH_TOKEN, token);
+      history.push(`/`);
+    });
   }, [email, password, name, executeMutation]);
 
-  React.useEffect(() => {
-    if (prevFetching === true && fetching === false && data) {
-        const { token } = login ? data.login : data.signup;
-        localStorage.setItem(AUTH_TOKEN, token);
-        history.push(`/`);
-    }
-  }, [prevFetching, fetching, history, data, login])
-
   return (
     <div>
       <h4 className="mv3">{login ? "Login" : "Sign Up"}</h4>
@@ -67,15 +62,21 @@ const Login = ({ history }) => {
         />
       </div>
       <div className="flex mt3">
-        <div className="pointer mr2 button" onClick={mutate}>
+        <button
+          type="button"
+          className="pointer mr2 button"
+          onClick={mutate}
+          disabled={fetching}
+        >
           {login ? "login" : "create account"}
-        </div>
-        <div
+        </button>
+        <button
+          type="button"
           className="pointer button"
           onClick={() => setLogin(!login)}
         >
           {login ? "need to create an account?" : "already have an account?"}
-        </div>
+        </button>
       </div>
     </div>
   );