Done

client/src/components/App.js

@@ -1,13 +1,10 @@
-// import logo from './../logo.svg';
+import React from 'react';
-// import './../styles/App.css';
-
-import React, { Component } from 'react';
 import LinkList from './LinkList';
 import CreateLink from './CreateLink'
 import Header from './Header';
 import Login from './Login'
 import Search from './Search';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 const App = () => {
   return (
@@ -34,31 +31,4 @@ const App = () => {
   );
 };
 
-// class App extends Component {
-//   render() {
-//     return <CreateLink />;
-//   }
-// }
-
-// function App() {
-//   return (
-//     <div className="App">
-//       <header className="App-header">
-//         <img src={logo} className="App-logo" alt="logo" />
-//         <p>
-//           Edit <code>src/App.js</code> and save to reload.
-//         </p>
-//         <a
-//           className="App-link"
-//           href="https://reactjs.org"
-//           target="_blank"
-//           rel="noopener noreferrer"
-//         >
-//           Learn React
-//         </a>
-//       </header>
-//     </div>
-//   );
-// }
-
 export default App;

client/src/components/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

client/src/components/CreateLink.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router';
 import { useMutation, gql } from '@apollo/client';
-import { LINKS_PER_PAGE } from '../constants';
+// import { LINKS_PER_PAGE } from '../constants';
-import { FEED_QUERY } from './LinkList';
+// import { FEED_QUERY } from './LinkList';
 
 const CREATE_LINK_MUTATION = gql`
   mutation PostMutation(
@@ -31,34 +31,34 @@ const CreateLink = () => {
             description: formState.description,
             url: formState.url
         },
-        update: (cache, { data: { post } }) => {
+        // update: (cache, { data: { post } }) => {
-            const take = LINKS_PER_PAGE;
+        //     const take = LINKS_PER_PAGE;
-            const skip = 0;
+        //     const skip = 0;
-            const orderBy = { createdAt: 'desc' };
+        //     const orderBy = { createdAt: 'desc' };
 
-            const data = cache.readQuery({
+        //     const { data } = cache.readQuery({
-                query: FEED_QUERY,
+        //         query: FEED_QUERY,
-                variables: {
+        //         variables: {
-                    take,
+        //             take,
-                    skip,
+        //             skip,
-                    orderBy
+        //             orderBy
-                }
+        //         }
-            });
+        //     });
 
-            cache.writeQuery({
+        //     cache.writeQuery({
-                query: FEED_QUERY,
+        //         query: FEED_QUERY,
-                data: {
+        //         data: {
-                    feed: {
+        //             feed: {
-                        links: [post, ...data.feed.links]
+        //                 links: [post, ...data.feed.links]
-                    }
+        //             }
-                },
+        //         },
-                variables: {
+        //         variables: {
-                    take,
+        //             take,
-                    skip,
+        //             skip,
-                    orderBy
+        //             orderBy
-                }
+        //         }
-            });
+        //     });
-        },
+        // },
         onCompleted: () => history.push('/new/1')
     });
 

client/src/components/Header.js

@@ -9,48 +9,30 @@ const Header = () => {
     return (
         <div className="flex pa1 justify-between nowrap orange">
             <div className="flex flex-fixed black">
-                <div className="fw7 mr1">Hacker News</div>
+                <div className="fw7 mr1">News</div>
-                <Link to="/" className="ml1 no-underline black">
+                <Link to="/" className="ml1 no-underline black">Top</Link>
-                    new
-        </Link>
                 <div className="ml1">|</div>
-                <Link to="/top" className="ml1 no-underline black">
+                <Link to="/new/1" className="ml1 no-underline black">New</Link>
-                    top
-</Link>
                 <div className="ml1">|</div>
-                <Link to="/search" className="ml1 no-underline black">
+                <Link to="/search" className="ml1 no-underline black">Search</Link>
-                    search
-  </Link>
                 {authToken && (
                     <div className="flex">
                         <div className="ml1">|</div>
-                        <Link
+                        <Link to="/create" className="ml1 no-underline black">Create</Link>
-                            to="/create"
-                            className="ml1 no-underline black"
-                        >
-                            submit
-            </Link>
                     </div>
                 )}
             </div>
             <div className="flex flex-fixed">
                 {authToken ? (
-                    <div
+                    <div className="ml1 pointer black" onClick={() => {
-                        className="ml1 pointer black"
-                        onClick={() => {
                             localStorage.removeItem(AUTH_TOKEN);
                             history.push(`/`);
                         }}
                     >
-                        logout
+                        Logout
                     </div>
                 ) : (
-                        <Link
+                        <Link to="/login" className="ml1 no-underline black">Login</Link>
-                            to="/login"
-                            className="ml1 no-underline black"
-                        >
-                            login
-                        </Link>
                     )}
             </div>
         </div>
@@ -58,30 +40,3 @@ const Header = () => {
 };
 
 export default Header;
-
-// import React from 'react';
-// import { useHistory } from 'react-router';
-// import { Link, withRouter } from 'react-router-dom';
-
-// const Header = () => {
-//     const history = useHistory();
-//     return (
-//         <div className="flex pa1 justify-between nowrap orange">
-//             <div className="flex flex-fixed black">
-//                 <div className="fw7 mr1">Hacker News</div>
-//                 <Link to="/" className="ml1 no-underline black">
-//                     new
-//         </Link>
-//                 <div className="ml1">|</div>
-//                 <Link
-//                     to="/create"
-//                     className="ml1 no-underline black"
-//                 >
-//                     submit
-//         </Link>
-//             </div>
-//         </div>
-//     );
-// };
-
-// export default Header;

client/src/components/Link.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useMutation, gql } from '@apollo/client';
-import { AUTH_TOKEN, LINKS_PER_PAGE } from '../constants';
+import { AUTH_TOKEN } from '../constants';
 import { timeDifferenceForDate } from '../utils'
-import { FEED_QUERY } from './LinkList'
+// import { FEED_QUERY } from './LinkList'
 
 const VOTE_MUTATION = gql`
   mutation VoteMutation($linkId: ID!) {
@@ -24,45 +24,38 @@ const VOTE_MUTATION = gql`
   }
 `;
 
-const take = LINKS_PER_PAGE;
-const skip = 0;
-const orderBy = { createdAt: 'desc' };
-
 const Link = (props) => {
     const { link } = props;
     const authToken = localStorage.getItem(AUTH_TOKEN);
-    const take = LINKS_PER_PAGE;
-    const skip = 0;
-    const orderBy = { createdAt: 'desc' };
 
     const [vote] = useMutation(VOTE_MUTATION, {
         variables: {
             linkId: link.id
         },
-        update(cache, { data: { vote } }) {
+        // update(cache, { data: { vote } }) {
-            const { feed } = cache.readQuery({
+        //     const { feed } = cache.readQuery({
-                query: FEED_QUERY
+        //         query: FEED_QUERY
-            });
+        //     });
 
-            const updatedLinks = feed.links.map((feedLink) => {
+        //     const updatedLinks = feed.links.map((feedLink) => {
-                if (feedLink.id === link.id) {
+        //         if (feedLink.id === link.id) {
-                    return {
+        //             return {
-                        ...feedLink,
+        //                 ...feedLink,
-                        votes: [...feedLink.votes, vote]
+        //                 votes: [...feedLink.votes, vote]
-                    };
+        //             };
-                }
+        //         }
-                return feedLink;
+        //         return feedLink;
-            });
+        //     });
 
-            cache.writeQuery({
+        //     cache.writeQuery({
-                query: FEED_QUERY,
+        //         query: FEED_QUERY,
-                data: {
+        //         data: {
-                    feed: {
+        //             feed: {
-                        links: updatedLinks
+        //                 links: updatedLinks
-                    }
+        //             }
-                }
+        //         }
-            });
+        //     });
-        }
+        // }
     });
 
     return (
@@ -70,13 +63,7 @@ const Link = (props) => {
             <div className="flex items-center">
                 <span className="gray">{props.index + 1}.</span>
                 {authToken && (
-                    <div
+                    <div className="ml1 gray f11" style={{ cursor: 'pointer' }} onClick={vote}>▲</div>
-                        className="ml1 gray f11"
-                        style={{ cursor: 'pointer' }}
-                        onClick={vote}
-                    >
-                        ▲
-                    </div>
                 )}
             </div>
             <div className="ml1">
@@ -85,7 +72,7 @@ const Link = (props) => {
                 </div>
                 {authToken && (
                     <div className="f6 lh-copy gray">
-                        {link.votes.length} votes | by{' '}
+                        {link.votes.length} votes, submitted by{' '}
                         {link.postedBy ? link.postedBy.name : 'Unknown'}{' '}
                         {timeDifferenceForDate(link.createdAt)}
                     </div>
@@ -95,15 +82,4 @@ const Link = (props) => {
     );
 };
 
-// const Link = (props) => {
-//     const { link } = props;
-//     return (
-//         <div>
-//             <div>
-//                 {link.id} - {link.description} ({link.url})
-//       </div>
-//         </div>
-//     );
-// };
-
 export default Link;

client/src/components/LinkList.js

@@ -11,7 +11,6 @@ export const FEED_QUERY = gql`
     $orderBy: LinkOrderByInput
   ) {
     feed(take: $take, skip: $skip, orderBy: $orderBy) {
-      id
       links {
         id
         createdAt
@@ -76,8 +75,6 @@ const LinkList = () => {
     pageIndexParams[pageIndexParams.length - 1]
   );
 
-  console.log(pageIndexParams.length, page);
-
   const pageIndex = page ? (page - 1) * LINKS_PER_PAGE : 0;
 
   const {
@@ -89,8 +86,6 @@ const LinkList = () => {
     variables: getQueryVariables(isNewPage, page)
   });
 
-  // const { data } = useQuery(FEED_QUERY);
-
   const getLinksToRender = (isNewPage, data) => {
     if (isNewPage) {
       return data.feed.links;
@@ -171,28 +166,4 @@ const LinkList = () => {
   );
 };
 
-// const LinkList = () => {
-//     const linksToRender = [
-//         {
-//             id: '1',
-//             description:
-//                 'Link first😎',
-//             url: 'https://prisma.io'
-//         },
-//         {
-//             id: '2',
-//             description: 'Link zwei',
-//             url: 'https://www.apollographql.com/docs/react/'
-//         }
-//     ];
-// 
-//     return (
-//         <div>
-//             {linksToRender.map((link) => (
-//                 <Link key={link.id} link={link} />
-//             ))}
-//         </div>
-//     );
-// };
-
 export default LinkList;

client/src/components/Search.js

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { useMutation } from '@apollo/client';
 import { useLazyQuery } from '@apollo/client';
 import gql from 'graphql-tag';
 import Link from './Link';
@@ -7,7 +6,6 @@ import Link from './Link';
 const FEED_SEARCH_QUERY = gql`
   query FeedSearchQuery($filter: String!) {
     feed(filter: $filter) {
-      id
       links {
         id
         url

client/src/constants.js

@@ -1,2 +1,2 @@
 export const AUTH_TOKEN = 'auth-token';
-export const LINKS_PER_PAGE = 3;
+export const LINKS_PER_PAGE = 5;

client/src/index.js

@@ -2,28 +2,15 @@ import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { setContext } from '@apollo/client/link/context';
 import { AUTH_TOKEN } from './constants';
-
 import { split } from '@apollo/client';
 import { WebSocketLink } from '@apollo/client/link/ws';
 import { getMainDefinition } from '@apollo/client/utilities';
-// import LinkList from './components/LinkList';
-
-// class App extends Component {
-//   render() {
-//     return <LinkList />;
-//   }
-// }
-
-// export default App;
-
-// import React from 'react';
 import ReactDOM from 'react-dom';
 import './styles/index.css';
 import './styles/tachyons.min.css'
 import App from './components/App';
-// // import * as serviceWorker from './serviceWorker';
 
-// // 1
+// 1
 import {
   ApolloProvider,
   ApolloClient,

client/src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

server/package.json

@@ -10,6 +10,7 @@
     "@prisma/client": "^2.12.1",
     "apollo-server": "^2.19.0",
     "bcryptjs": "2.4.3",
+    "graphql-depth-limit": "^1.1.0",
     "jsonwebtoken": "8.5.1"
   },
   "devDependencies": {

server/src/index.js

@@ -1,5 +1,6 @@
 const { ApolloServer, PubSub } = require('apollo-server');
 const { PrismaClient } = require('@prisma/client');
+const depthLimit = require('graphql-depth-limit');
 const Query = require('./resolvers/Query');
 const Mutation = require('./resolvers/Mutation');
 const Subscription = require('./resolvers/Subscription');
@@ -31,6 +32,7 @@ const server = new ApolloServer({
     'utf8'
   ),
   resolvers,
+  validationRules: [depthLimit(4)],
   context: ({ req }) => {
     return {
       ...req,

server/src/resolvers/Mutation.js

@@ -1,11 +1,12 @@
 const bcrypt = require('bcryptjs');
 const jwt = require('jsonwebtoken');
+const utils = require('../utils');
 const { APP_SECRET } = require('../utils');
 
-function post(parent, args, context, info) {
+async function post(parent, args, context, info) {
   const { userId } = context;
 
-  const newLink = context.prisma.link.create({
+  const newLink = await context.prisma.link.create({
     data: {
       url: args.url,
       description: args.description,
@@ -13,30 +14,19 @@ function post(parent, args, context, info) {
     }
   });
 
+  context.pubsub.publish('NEW_LINK', newLink);
+
   return newLink;
 }
-// async function post(parent, args, context, info) {
-//   const { userId } = context;
-
-//   const newLink = await context.prisma.link.create({
-//     data: {
-//       url: args.url,
-//       description: args.description,
-//       postedBy: { connect: { id: userId } }
-//     }
-//   });
-//   context.pubsub.publish('NEW_LINK', newLink);
-
-//   return newLink;
-// }
 
 async function signup(parent, args, context, info) {
   const password = await bcrypt.hash(args.password, 10);
+  
   const user = await context.prisma.user.create({
     data: { ...args, password }
   });
 
-  const token = jwt.sign({ userId: user.id }, APP_SECRET);
+  const token = utils.setToken(user.id);
 
   return {
     token,
@@ -56,11 +46,12 @@ async function login(parent, args, context, info) {
     args.password,
     user.password
   );
+
   if (!valid) {
     throw new Error('Invalid password');
   }
 
-  const token = jwt.sign({ userId: user.id }, APP_SECRET);
+  const token = utils.setToken(user.id);
 
   return {
     token,

server/src/resolvers/Query.js

@@ -18,7 +18,6 @@ async function feed(parent, args, context, info) {
   const count = await context.prisma.link.count({ where });
 
   return {
-    id: 'main-feed',
     links,
     count
   };

server/src/schema.graphql

@@ -1,26 +1,16 @@
 type Query {
   info: String!
-  feed(
+  feed(filter: String, skip: Int, take: Int, orderBy: LinkOrderByInput): Feed!
-    filter: String
-    skip: Int
-    take: Int
-    orderBy: LinkOrderByInput
-  ): Feed!
 }
 
 type Feed {
-  id: ID!
   links: [Link!]!
   count: Int!
 }
 
 type Mutation {
   post(url: String!, description: String!): Link!
-  signup(
+  signup(email: String!, password: String!, name: String!): AuthPayload
-    email: String!
-    password: String!
-    name: String!
-  ): AuthPayload
   login(email: String!, password: String!): AuthPayload
   vote(linkId: ID!): Vote
 }

server/src/utils.js

@@ -5,7 +5,11 @@ function getTokenPayload(token) {
   return jwt.verify(token, APP_SECRET);
 }
 
-function getUserId(req, authToken) {
+function setToken(user_id) {
+  return jwt.sign({ userId: user_id }, APP_SECRET);
+}
+
+function getUserId(req) {
   if (req) {
     const authHeader = req.headers.authorization;
     if (authHeader) {
@@ -16,9 +20,6 @@ function getUserId(req, authToken) {
       const { userId } = getTokenPayload(token);
       return userId;
     }
-  } else if (authToken) {
-    const { userId } = getTokenPayload(authToken);
-    return userId;
   }
 
   throw new Error('Not authenticated');
@@ -26,5 +27,6 @@ function getUserId(req, authToken) {
 
 module.exports = {
   APP_SECRET,
+  setToken,
   getUserId
 };