Attempt to sync up code with tutorial

Author: kitten

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+end_of_line = lf
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

package.json

@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "@urql/exchange-graphcache": "^1.0.0-beta.3",
-    "@urql/exchange-suspense": "^0.1.0",
     "graphql": "14.5.3",
     "graphql-tag": "^2.10.1",
     "react": "16.9.0",

src/components/App.js

@@ -1,26 +1,24 @@
 import React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
+
 import LinkList from './LinkList';
 import CreateLink from './CreateLink';
 import Header from './Header';
 import Login from './Login';
 import Search from './Search';
 
-const Fetching = () => <p>Fetcing</p>;
 const App = () => (
   <div className="center w85">
     <Header />
     <div className="ph3 pv1 background-gray">
-      <React.Suspense fallback={<Fetching />}>
-        <Switch>
-          <Route exact path="/" render={() => <Redirect to="/new/1" />} />
-          <Route exact path="/create" component={CreateLink} />
-          <Route exact path="/login" component={Login} />
-          <Route exact path="/search" component={Search} />
-          <Route exact path="/top" component={LinkList} />
-          <Route exact path="/new/:page" component={LinkList} />
-        </Switch>
-      </React.Suspense>
+      <Switch>
+        <Route exact path="/" render={() => <Redirect to="/new/1" />} />
+        <Route exact path="/top" component={LinkList} />
+        <Route exact path="/new/:page" component={LinkList} />
+        <Route exact path="/create" component={CreateLink} />
+        <Route exact path="/login" component={Login} />
+        <Route exact path="/search" component={Search} />
+      </Switch>
     </div>
   </div>
 );

src/components/CreateLink.js

@@ -11,18 +11,19 @@ const POST_MUTATION = gql`
       description
     }
   }
-`
+`;
 
-const CreateLink = ({ history }) => {
+const CreateLink = props => {
   const [description, setDescription] = React.useState('');
   const [url, setUrl] = React.useState('');
-  const [{ fetching }, executeMutation] = useMutation(POST_MUTATION);
+
+  const [state, executeMutation] = useMutation(POST_MUTATION);
 
   const postMutation = React.useCallback(() => {
     executeMutation({ url, description }).then(() => {
-      history.push('/new/1');
+      props.history.push('/new/1');
     });
-  }, [url, description, executeMutation, history]);
+  }, [executeMutation, url, description, executeMutation, props.history]);
 
   return (
     <div>
@@ -42,11 +43,14 @@ const CreateLink = ({ history }) => {
           placeholder="The URL for the link"
         />
       </div>
-      <button type="button" disabled={fetching} onClick={postMutation}>
+      <button
+        disabled={state.fetching}
+        onClick={postMutation}
+      >
         Submit
       </button>
     </div>
   );
-}
+};
 
 export default CreateLink;

src/components/Header.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { withRouter } from 'react-router';
-import { getToken, deleteToken } from '../utils';
+
+import { getToken, deleteToken } from '../token';
 
 const Header = ({ history }) => {
-  const authToken = getToken();
-  const logout = React.useCallback(() => {
-    deleteToken();
-    history.push('/');
-  }, [history])
+  const isLoggedIn = !!getToken();
+
   return (
     <div className="flex pa1 justify-between nowrap orange">
       <div className="flex flex-fixed black">
@@ -24,7 +22,7 @@ const Header = ({ history }) => {
         <Link to="/search" className="ml1 no-underline black">
           search
         </Link>
-        {authToken && (
+        {isLoggedIn && (
           <div className="flex">
             <div className="ml1">|</div>
             <Link to="/create" className="ml1 no-underline black">
@@ -34,10 +32,13 @@ const Header = ({ history }) => {
         )}
       </div>
       <div className="flex flex-fixed">
-        {authToken ? (
+        {isLoggedn ? (
           <div
             className="ml1 pointer black"
-            onClick={logout}
+            onClick={() => {
+              deleteToken()
+              props.history.push('/')
+            }}
           >
             logout
           </div>
@@ -51,4 +52,4 @@ const Header = ({ history }) => {
   );
 }
 
-export default withRouter(Header);
+export default withRouter(Header);

src/components/Link.js

@@ -1,43 +1,43 @@
 import React from 'react';
 import { useMutation } from 'urql';
 import gql from 'graphql-tag';
-import { timeDifferenceForDate, getToken } from '../utils';
+
+import { timeDifferenceForDate } from '../dates';
+import { getToken } from '../token';
 
 const VOTE_MUTATION = gql`
   mutation VoteMutation($linkId: ID!) {
     vote(linkId: $linkId) {
-      id
       link {
+        id
         votes {
           id
           user {
             id
           }
         }
       }
-      user {
-        id
-      }
     }
   }
 `;
 
 const Link = ({ link, index }) => {
-  const authToken = getToken();
-  const [{ fetching }, executeMutation] = useMutation(VOTE_MUTATION);
+  const isLoggedIn = getToken();
+
+  const [state, executeMutation] = useMutation(VOTE_MUTATION);
 
-  const voteMutation = React.useCallback(() => {
-    if (!fetching) {
+  const upvote = React.useCallback(() => {
+    if (!state.fetching) {
       executeMutation({ linkId: link.id });
     }
-  }, [fetching, link, executeMutation]);
+  }, [state.fetching, link, executeMutation]);
 
   return (
     <div className="flex mt2 items-start">
       <div className="flex items-center">
         <span className="gray">{index + 1}.</span>
-        {authToken && (
-          <div className="ml1 gray f11" onClick={voteMutation} disabled={fetching}>
+        {isLoggedIn && (
+          <div className="ml1 gray f11" onClick={upvote}>
             ▲
           </div>
         )}
@@ -58,4 +58,4 @@ const Link = ({ link, index }) => {
   );
 }
 
-export default Link;
+export default Link;

src/components/LinkList.js

@@ -1,7 +1,7 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useQuery, useSubscription } from 'urql';
 import gql from 'graphql-tag';
-import { LINKS_PER_PAGE } from '../constants';
+
 import Link from './Link';
 
 export const FEED_QUERY = gql`
@@ -76,59 +76,54 @@ const NEW_VOTES_SUBSCRIPTION = gql`
   }
 `;
 
-const LinkList = ({ location, match, history }) => {
-  const isNewPage = location.pathname.includes('new');
-
-  const variables = React.useMemo(() => {
-    const page = parseInt(match.params.page, 10);
+const LinkList = props => {
+  const isNewPage = props.location.pathname.includes('new')
+  const page = parseInt(props.match.params.page, 10)
 
-    const skip = isNewPage ? (page - 1) * LINKS_PER_PAGE : 0;
-    const first = isNewPage ? LINKS_PER_PAGE : 100;
-    const orderBy = isNewPage ? 'createdAt_DESC' : null;
-    return { first, skip, orderBy };
-  }, [match, isNewPage]);
+  const variables = React.useMemo(() => ({
+    skip: isNewPage ? (page - 1) * 10 : 0,
+    first: isNewPage ? 10 : 100,
+    orderBy: isNewPage ? 'createdAt_DESC' : null
+  }), [isNewPage, page])
 
-  const [{ data, error, fetching }] = useQuery({
-    query: FEED_QUERY,
-    variables,
-  });
+  const [result] = useQuery({ query: FEED_QUERY, variables });
+  const { data, fetching, error } = result;
 
   useSubscription({ query: NEW_VOTES_SUBSCRIPTION });
   useSubscription({ query: NEW_LINKS_SUBSCRIPTION });
 
   const linksToRender = React.useMemo(() => {
-    if (fetching) return [];
-    if (isNewPage) return data.feed.links;
-    const rankedLinks = data.feed.links.slice();
-    rankedLinks.sort((l1, l2) => l2.votes.length - l1.votes.length);
-    return rankedLinks;
-  }, [data, fetching, isNewPage]);
+    if (!data) {
+      return [];
+    } else if (isNewPage) {
+      return data.feed.links;
+    } else {
+      const rankedLinks = data.feed.links
+        .slice()
+        .sort((l1, l2) => l2.votes.length - l1.votes.length);
+      return rankedLinks;
+    }
+  }, [data, isNewPage]);
 
   const nextPage = React.useCallback(() => {
-    const page = parseInt(match.params.page, 10);
-    if (page <= data.feed.count / LINKS_PER_PAGE) {
-      const nextPage = page + 1;
-      history.push(`/new/${nextPage}`);
+    if (page <= data.feed.count / 10) {
+      props.history.push(`/new/${page + 1}`);
     }
-  }, [data, history, match.params]);
+  }, [props.history, data.feed.count, page]);
 
   const previousPage = React.useCallback(() => {
-    const page = parseInt(match.params.page, 10);
     if (page > 1) {
-      const previousPage = page - 1;
-      history.push(`/new/${previousPage}`);
+      props.history.push(`/new/${page - 1}`);
     }
-  }, [match, history]);
+  }, [props.history, page]);
 
   if (fetching) return <div>Fetching</div>;
   if (error) return <div>Error</div>;
 
-  const pageIndex =match.params.page
-    ? (match.params.page - 1) * LINKS_PER_PAGE
-    : 0;
+  const pageIndex = isNewPage ? (page - 1) * 10 : 0
 
   return (
-    <Fragment>
+    <React.Fragment>
       {linksToRender.map((link, index) => (
         <Link
           key={link.id}
@@ -146,7 +141,7 @@ const LinkList = ({ location, match, history }) => {
           </div>
         </div>
       )}
-    </Fragment>
+    </React.Fragment>
   );
 }
 

src/components/Login.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useMutation } from 'urql';
 import gql from 'graphql-tag';
-import { setToken } from '../utils';
+
+import { setToken } from '../token';
 
 const SIGNUP_MUTATION = gql`
   mutation SignupMutation($email: String!, $password: String!, $name: String!) {
@@ -19,21 +20,26 @@ const LOGIN_MUTATION = gql`
   }
 `;
 
-const Login = ({ history }) => {
+const Login = props => {
   const [login, setLogin] = React.useState(true);
   const [email, setEmail] = React.useState('');
   const [password, setPassword] = React.useState('');
   const [name, setName] = React.useState('');
 
-  const [{ fetching }, executeMutation] = useMutation(login ? LOGIN_MUTATION : SIGNUP_MUTATION);
+  const [state, executeMutation] = useMutation(
+    isLogin ? LOGIN_MUTATION : SIGNUP_MUTATION
+  );
 
   const mutate = React.useCallback(() => {
-    executeMutation({ email, password, name }).then(({ data }) => {
-      const { token } = login ? data.login : data.signup;
-      setToken(token);
-      history.push(`/`);
-    });
-  }, [email, password, name, executeMutation, history, login]);
+    executeMutation({ email, password, name })
+      .then(({ data }) => {
+        const token = data && data[isLogin ? 'login' : 'signup'].token
+        if (token) {
+          setToken(token)
+          props.history.push('/')
+        }
+      });
+  }, [executeMutation, props.history, setToken, email, password, name]);
 
   return (
     <div>

src/components/Search.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useQuery } from 'urql';
 import gql from 'graphql-tag';
+
 import Link from './Link';
 
 const FEED_SEARCH_QUERY = gql`
@@ -28,13 +29,19 @@ const FEED_SEARCH_QUERY = gql`
 
 const Search = () => {
   const [filter, setFilter] = React.useState('');
-  const [result, executeQuery] = useQuery({ query: FEED_SEARCH_QUERY, variables: { filter}, pause: true });
 
-  const links = result.data ? result.data.feed.links : [];
+  const [result, executeQuery] = useQuery({
+    query: FEED_SEARCH_QUERY,
+    variables: { filter },
+    pause: true,
+  });
+
   const search = React.useCallback(() => {
     executeQuery();
   }, [executeQuery]);
 
+  const links = result.data ? result.data.feed.links : [];
+
   return (
     <div>
       <div>