Merge pull request #12 from RiccardoSenica/dependabot/npm_and_yarn/client/npm_and_yarn-b1509cf74d

Bump the npm_and_yarn group across 2 directories with 2 updates

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.3.6",

client/src/components/App.js

@@ -1,10 +1,13 @@
-import React from 'react';
+// import logo from './../logo.svg';
+// 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 { Route, Switch } from 'react-router-dom';
+import { Redirect, Route, Switch } from 'react-router-dom';
 
 const App = () => {
   return (
@@ -31,4 +34,31 @@ 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

@@ -0,0 +1,8 @@
+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,30 +9,48 @@ const Header = () => {
     return (
         <div className="flex pa1 justify-between nowrap orange">
             <div className="flex flex-fixed black">
-                <div className="fw7 mr1">News</div>
+                <div className="fw7 mr1">Hacker News</div>
-                <Link to="/" className="ml1 no-underline black">Top</Link>
+                <Link to="/" className="ml1 no-underline black">
+                    new
+        </Link>
                 <div className="ml1">|</div>
-                <Link to="/new/1" className="ml1 no-underline black">New</Link>
+                <Link to="/top" className="ml1 no-underline black">
+                    top
+</Link>
                 <div className="ml1">|</div>
-                <Link to="/search" className="ml1 no-underline black">Search</Link>
+                <Link to="/search" className="ml1 no-underline black">
+                    search
+  </Link>
                 {authToken && (
                     <div className="flex">
                         <div className="ml1">|</div>
-                        <Link to="/create" className="ml1 no-underline black">Create</Link>
+                        <Link
+                            to="/create"
+                            className="ml1 no-underline black"
+                        >
+                            submit
+            </Link>
                     </div>
                 )}
             </div>
             <div className="flex flex-fixed">
                 {authToken ? (
-                    <div className="ml1 pointer black" onClick={() => {
+                    <div
+                        className="ml1 pointer black"
+                        onClick={() => {
                             localStorage.removeItem(AUTH_TOKEN);
                             history.push(`/`);
                         }}
                     >
-                        Logout
+                        logout
                     </div>
                 ) : (
-                        <Link to="/login" className="ml1 no-underline black">Login</Link>
+                        <Link
+                            to="/login"
+                            className="ml1 no-underline black"
+                        >
+                            login
+                        </Link>
                     )}
             </div>
         </div>
@@ -40,3 +58,30 @@ 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 } from '../constants';
+import { AUTH_TOKEN, LINKS_PER_PAGE } 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,38 +24,45 @@ 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 (
@@ -63,16 +70,22 @@ const Link = (props) => {
             <div className="flex items-center">
                 <span className="gray">{props.index + 1}.</span>
                 {authToken && (
-                    <div className="ml1 gray f11" style={{ cursor: 'pointer' }} onClick={vote}>▲</div>
+                    <div
+                        className="ml1 gray f11"
+                        style={{ cursor: 'pointer' }}
+                        onClick={vote}
+                    >
+                        ▲
+                    </div>
                 )}
             </div>
             <div className="ml1">
                 <div>
                     {link.description} ({link.url})
-                </div>
+        </div>
                 {authToken && (
                     <div className="f6 lh-copy gray">
-                        {link.votes.length} votes, submitted by{' '}
+                        {link.votes.length} votes | by{' '}
                         {link.postedBy ? link.postedBy.name : 'Unknown'}{' '}
                         {timeDifferenceForDate(link.createdAt)}
                     </div>
@@ -82,4 +95,15 @@ 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,6 +11,7 @@ export const FEED_QUERY = gql`
     $orderBy: LinkOrderByInput
   ) {
     feed(take: $take, skip: $skip, orderBy: $orderBy) {
+      id
       links {
         id
         createdAt
@@ -75,6 +76,8 @@ const LinkList = () => {
     pageIndexParams[pageIndexParams.length - 1]
   );
 
+  console.log(pageIndexParams.length, page);
+
   const pageIndex = page ? (page - 1) * LINKS_PER_PAGE : 0;
 
   const {
@@ -86,6 +89,8 @@ const LinkList = () => {
     variables: getQueryVariables(isNewPage, page)
   });
 
+  // const { data } = useQuery(FEED_QUERY);
+
   const getLinksToRender = (isNewPage, data) => {
     if (isNewPage) {
       return data.feed.links;
@@ -166,4 +171,28 @@ 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,4 +1,5 @@
 import React, { useState } from 'react';
+import { useMutation } from '@apollo/client';
 import { useLazyQuery } from '@apollo/client';
 import gql from 'graphql-tag';
 import Link from './Link';
@@ -6,6 +7,7 @@ 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 = 5;
+export const LINKS_PER_PAGE = 3;

client/src/index.js

@@ -2,15 +2,28 @@ 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

@@ -0,0 +1,5 @@
+// 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

@@ -1,5 +1,5 @@
 {
-  "name": "hackernews-node",
+  "name": "server",
   "version": "1.0.0",
   "license": "MIT",
   "scripts": {
@@ -8,10 +8,9 @@
   },
   "dependencies": {
     "@prisma/client": "^2.12.1",
-    "apollo-server": "^2.19.0",
+    "apollo-server": "^3.13.0",
     "bcryptjs": "2.4.3",
-    "graphql-depth-limit": "^1.1.0",
+    "jsonwebtoken": "9.0.2"
-    "jsonwebtoken": "8.5.1"
   },
   "devDependencies": {
     "@prisma/cli": "^2.12.1",

server/src/index.js

@@ -1,6 +1,5 @@
 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');
@@ -32,7 +31,6 @@ const server = new ApolloServer({
     'utf8'
   ),
   resolvers,
-  validationRules: [depthLimit(4)],
   context: ({ req }) => {
     return {
       ...req,

server/src/resolvers/Mutation.js

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

server/src/resolvers/Query.js

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