Fixes

client/src/components/App.js

@@ -1,13 +1,10 @@
-// import logo from './../logo.svg';
-// import './../styles/App.css';
-
-import React, { Component } from 'react';
+import React 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/CreateLink.js

@@ -36,7 +36,7 @@ const CreateLink = () => {
             const skip = 0;
             const orderBy = { createdAt: 'desc' };
 
-            const data = cache.readQuery({
+            const { data } = cache.readQuery({
                 query: FEED_QUERY,
                 variables: {
                     take,

client/src/components/Header.js

@@ -12,15 +12,15 @@ const Header = () => {
                 <div className="fw7 mr1">Hacker News</div>
                 <Link to="/" className="ml1 no-underline black">
                     new
-        </Link>
+                </Link>
                 <div className="ml1">|</div>
                 <Link to="/top" className="ml1 no-underline black">
                     top
-</Link>
+                </Link>
                 <div className="ml1">|</div>
                 <Link to="/search" className="ml1 no-underline black">
                     search
-  </Link>
+                </Link>
                 {authToken && (
                     <div className="flex">
                         <div className="ml1">|</div>
@@ -29,7 +29,7 @@ const Header = () => {
                             className="ml1 no-underline black"
                         >
                             submit
-            </Link>
+                        </Link>
                     </div>
                 )}
             </div>
@@ -58,30 +58,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

@@ -85,7 +85,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 +95,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
@@ -171,28 +170,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';

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,

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(
-    filter: String
-    skip: Int
-    take: Int
-    orderBy: LinkOrderByInput
-  ): Feed!
+  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(
-    email: String!
-    password: String!
-    name: String!
-  ): AuthPayload
+  signup(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
 };