(fix) - make the updates work again

Author: JoviDeCroock

server/src/resolvers/Mutation.js

@@ -7,13 +7,12 @@ function post(parent, { url, description }, context) {
   return context.prisma.createLink({
     url,
     description,
-    /*
+    votes: [],
     postedBy: {
-      connect: {
-        id: userId
-      }
+      // connect: {
+      //   id: userId
+      // }
     }
-    */
   })
 }
 

src/components/CreateLink.js

@@ -9,6 +9,16 @@ const POST_MUTATION = gql`
       createdAt
       url
       description
+      postedBy {
+        id
+        name
+      }
+      votes {
+        id
+        user {
+          id
+        }
+      }
     }
   }
 `;
@@ -23,7 +33,7 @@ const CreateLink = props => {
     executeMutation({ url, description }).then(() => {
       props.history.push('/new/1');
     });
-  }, [executeMutation, url, description, executeMutation, props.history]);
+  }, [url, description, executeMutation, props.history]);
 
   return (
     <div>

src/components/Header.js

@@ -4,7 +4,7 @@ import { withRouter } from 'react-router';
 
 import { getToken, deleteToken } from '../token';
 
-const Header = ({ history }) => {
+const Header = (props) => {
   const isLoggedIn = !!getToken();
 
   return (
@@ -32,21 +32,21 @@ const Header = ({ history }) => {
         )}
       </div>
       <div className="flex flex-fixed">
-        {isLoggedn ? (
+        {isLoggedIn ? (
           <div
             className="ml1 pointer black"
             onClick={() => {
-              deleteToken()
-              props.history.push('/')
+              deleteToken();
+              props.history.push("/");
             }}
           >
             logout
           </div>
         ) : (
-            <Link to="/login" className="ml1 no-underline black">
-              login
+          <Link to="/login" className="ml1 no-underline black">
+            login
           </Link>
-          )}
+        )}
       </div>
     </div>
   );

src/components/LinkList.js

@@ -92,8 +92,9 @@ const LinkList = props => {
   useSubscription({ query: NEW_VOTES_SUBSCRIPTION });
   useSubscription({ query: NEW_LINKS_SUBSCRIPTION });
 
+  console.log(data && data.feed);
   const linksToRender = React.useMemo(() => {
-    if (!data) {
+    if (!data || !data.feed) {
       return [];
     } else if (isNewPage) {
       return data.feed.links;
@@ -104,12 +105,12 @@ const LinkList = props => {
       return rankedLinks;
     }
   }, [data, isNewPage]);
-
+  console.log(linksToRender);
   const nextPage = React.useCallback(() => {
     if (page <= data.feed.count / 10) {
       props.history.push(`/new/${page + 1}`);
     }
-  }, [props.history, data.feed.count, page]);
+  }, [props.history, data, page]);
 
   const previousPage = React.useCallback(() => {
     if (page > 1) {

src/components/Login.js

@@ -21,12 +21,12 @@ const LOGIN_MUTATION = gql`
 `;
 
 const Login = props => {
-  const [login, setLogin] = React.useState(true);
+  const [isLogin, setLogin] = React.useState(true);
   const [email, setEmail] = React.useState('');
   const [password, setPassword] = React.useState('');
   const [name, setName] = React.useState('');
 
-  const [state, executeMutation] = useMutation(
+  const [{ fetching }, executeMutation] = useMutation(
     isLogin ? LOGIN_MUTATION : SIGNUP_MUTATION
   );
 
@@ -39,13 +39,13 @@ const Login = props => {
           props.history.push('/')
         }
       });
-  }, [executeMutation, props.history, setToken, email, password, name]);
+  }, [executeMutation, props.history, email, password, name, isLogin]);
 
   return (
     <div>
-      <h4 className="mv3">{login ? 'Login' : 'Sign Up'}</h4>
+      <h4 className="mv3">{isLogin ? "Login" : "Sign Up"}</h4>
       <div className="flex flex-column">
-        {!login && (
+        {!isLogin && (
           <input
             value={name}
             onChange={e => setName(e.target.value)}
@@ -73,14 +73,14 @@ const Login = props => {
           onClick={mutate}
           disabled={fetching}
         >
-          {login ? 'login' : 'create account'}
+          {isLogin ? "login" : "create account"}
         </button>
         <button
           type="button"
           className="pointer button"
-          onClick={() => setLogin(!login)}
+          onClick={() => setLogin(!isLogin)}
         >
-          {login ? 'need to create an account?' : 'already have an account?'}
+          {isLogin ? "need to create an account?" : "already have an account?"}
         </button>
       </div>
     </div>

src/index.js

@@ -21,33 +21,38 @@ import { FEED_QUERY } from './components/LinkList';
 import { getToken } from './token';
 
 const cache = cacheExchange({
+  keys: {
+    Feed: data => data.id || null,
+    Link: data => data.id || null,
+    Post: data => data.id || null
+  },
   updates: {
     Mutation: {
       post: ({ post }, _args, cache) => {
-        const variables = { first: 10, skip: 0, orderBy: 'createdAt_DESC' }
+        const variables = { first: 10, skip: 0, orderBy: "createdAt_DESC" };
         cache.updateQuery({ query: FEED_QUERY, variables }, data => {
           if (data !== null) {
-            data.feed.links.unshift(post)
-            data.feed.count++
-            return data
+            data.feed.links.unshift(post);
+            data.feed.count++;
+            return data;
           } else {
-            return null
+            return null;
           }
-        })
+        });
       }
     },
     Subscription: {
       newLink: ({ newLink }, _args, cache) => {
-        const variables = { first: 10, skip: 0, orderBy: 'createdAt_DESC' }
+        const variables = { first: 10, skip: 0, orderBy: "createdAt_DESC" };
         cache.updateQuery({ query: FEED_QUERY, variables }, data => {
           if (data !== null) {
-            data.feed.links.unshift(newLink)
-            data.feed.count++
-            return data
+            data.feed.links.unshift(newLink);
+            data.feed.count++;
+            return data;
           } else {
-            return null
+            return null;
           }
-        })
+        });
       }
     }
   }
@@ -89,5 +94,3 @@ ReactDOM.render(
   </BrowserRouter>,
   document.getElementById('root'),
 );
-
-serviceWorker.unregister();