updates

Author: chenkie

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hackernews-react-apollo",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.2.2",

server/prisma/dev.db

@@ -25,9 +25,25 @@ const feed = async (parent, args, context) => {
       take: args.take
     });
 
-    const count = links.length;
+    const count = await context.prisma.link.count({
+      where: {
+        OR: [
+          {
+            url: {
+              contains: args.filter
+            }
+          },
+          {
+            description: {
+              contains: args.filter
+            }
+          }
+        ]
+      }
+    });
 
     return {
+      id: args.skip,
       links,
       count
     };

server/src/resolvers/Query.js

@@ -23,6 +23,7 @@ const schema = gql`
   }
 
   type Feed {
+    id: ID!
     links: [Link!]!
     count: Int!
   }

server/src/schema.js

@@ -13,8 +13,8 @@ class App extends Component {
         <Header />
         <div className="ph3 pv1 background-gray">
           <Switch>
-            {/* <Route exact path="/" render={() => <Redirect to="/new/1" />} />
-             */}
+            <Route exact path="/" render={() => <Redirect to="/new/1" />} />
+            
             <Route
               exact
               path="/create"

src/components/App.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FEED_QUERY } from './LinkList';
 import { AUTH_TOKEN } from '../constants';
 import { timeDifferenceForDate } from '../utils';
 
@@ -30,6 +31,30 @@ const Link = (props) => {
     {
       variables: {
         linkId: link.id
+      },
+      update(cache, { data: { vote } }) {
+        const { feed } = cache.readQuery({
+          query: FEED_QUERY
+        });
+
+        const updatedLinks = feed.links.map((feedLink) => {
+          if (feedLink.id === link.id) {
+            return {
+              ...feedLink,
+              votes: [...feedLink.votes, vote]
+            };
+          }
+          return feedLink;
+        });
+
+        cache.writeQuery({
+          query: FEED_QUERY,
+          data: {
+            feed: {
+              links: updatedLinks
+            }
+          }
+        });
       }
     }
   );
@@ -45,28 +70,6 @@ const Link = (props) => {
         >
           ▲
         </div>
-        {/* {authToken && (
-          <Mutation
-            mutation={VOTE_MUTATION}
-            variables={{ linkId: this.props.link.id }}
-            update={(store, { data: { vote } }) =>
-              this.props.updateStoreAfterVote(
-                store,
-                vote,
-                this.props.link.id
-              )
-            }
-          >
-            {(voteMutation) => (
-              <div
-                className="ml1 gray f11"
-                onClick={voteMutation}
-              >
-                ▲
-              </div>
-            )}
-          </Mutation>
-        )} */}
       </div>
       <div className="ml1">
         <div>

src/components/Link.js

@@ -12,6 +12,7 @@ export const FEED_QUERY = gql`
     $orderBy: LinkOrderByInput
   ) {
     feed(take: $take, skip: $skip, orderBy: $orderBy) {
+      id
       links {
         id
         createdAt
@@ -92,13 +93,36 @@ const getLinksToRender = (isNewPage, data) => {
   return rankedLinks;
 };
 
+const getQueryVariables = (isNewPage, page) => {
+  const skip = isNewPage ? (page - 1) * LINKS_PER_PAGE : 0;
+  const take = isNewPage ? LINKS_PER_PAGE : 100;
+  const orderBy = isNewPage ? 'createdAt_DESC' : null;
+  return { take, skip, orderBy };
+};
+
 const LinkList = () => {
-  const { data, loading, error } = useQuery(FEED_QUERY);
   const history = useHistory();
   const isNewPage = history.location.pathname.includes(
     'new'
   );
-  const pageIndex = 1;
+  const pageIndexParams = history.location.pathname.split(
+    '/'
+  );
+  const page = parseInt(
+    pageIndexParams[pageIndexParams.length - 1]
+  );
+
+  const pageIndex = page ? (page - 1) * LINKS_PER_PAGE : 0;
+
+  const {
+    data,
+    loading,
+    error,
+    subscribeToMore
+  } = useQuery(FEED_QUERY, {
+    variables: getQueryVariables(isNewPage, page)
+  });
+
   return (
     <>
       {loading && <p>Loading...</p>}
@@ -111,23 +135,32 @@ const LinkList = () => {
                 key={link.id}
                 link={link}
                 index={index + pageIndex}
-                updateStoreAfterVote={() =>
-                  console.log('update')
-                }
               />
             )
           )}
           {isNewPage && (
             <div className="flex ml4 mv3 gray">
               <div
                 className="pointer mr2"
-                onClick={() => console.log('prev page')}
+                onClick={() => {
+                  if (page > 1) {
+                    history.push(`/new/${page - 1}`);
+                  }
+                }}
               >
                 Previous
               </div>
               <div
                 className="pointer"
-                onClick={() => console.log('next page')}
+                onClick={() => {
+                  if (
+                    page <=
+                    data.feed.count / LINKS_PER_PAGE
+                  ) {
+                    const nextPage = page + 1;
+                    history.push(`/new/${nextPage}`);
+                  }
+                }}
               >
                 Next
               </div>