riccardo/apollo-graphql
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Done

Browse Source
This commit is contained in:
Riccardo
2021-08-29 10:35:05 +02:00
parent 7939d15537
commit a40d04d138
8 changed files with 62 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/App.test.js
View File

@@ -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();
});

56
client/src/components/CreateLink.js
View File

@@ -1,8 +1,8 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import { useMutation, gql } from '@apollo/client'; 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` const CREATE_LINK_MUTATION = gql`
mutation PostMutation( mutation PostMutation(
@@ -31,34 +31,34 @@ const CreateLink = () => {
description: formState.description, description: formState.description,
url: formState.url 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') onCompleted: () => history.push('/new/1')
}); });

34
client/src/components/Header.js
View File

@@ -9,48 +9,30 @@ const Header = () => {
return ( return (
<div className="flex pa1 justify-between nowrap orange"> <div className="flex pa1 justify-between nowrap orange">
<div className="flex flex-fixed black"> <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> <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> <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 && ( {authToken && (
<div className="flex"> <div className="flex">
<div className="ml1">|</div> <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> </div>
<div className="flex flex-fixed"> <div className="flex flex-fixed">
{authToken ? ( {authToken ? (
<div <div className="ml1 pointer black" onClick={() => {
className="ml1 pointer black"
onClick={() => {
localStorage.removeItem(AUTH_TOKEN); localStorage.removeItem(AUTH_TOKEN);
history.push(`/`); history.push(`/`);
}} }}
> >
logout Logout
</div> </div>
) : ( ) : (
<Link <Link to="/login" className="ml1 no-underline black">Login</Link>
to="/login"
className="ml1 no-underline black"
>
login
</Link>
)} )}
</div> </div>
</div> </div>

65
client/src/components/Link.js
View File

@@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import { useMutation, gql } from '@apollo/client'; import { useMutation, gql } from '@apollo/client';
import { AUTH_TOKEN, LINKS_PER_PAGE } from '../constants'; import { AUTH_TOKEN } from '../constants';
import { timeDifferenceForDate } from '../utils' import { timeDifferenceForDate } from '../utils'
import { FEED_QUERY } from './LinkList' // import { FEED_QUERY } from './LinkList'
const VOTE_MUTATION = gql` const VOTE_MUTATION = gql`
mutation VoteMutation($linkId: ID!) { 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 { link } = props; const { link } = props;
const authToken = localStorage.getItem(AUTH_TOKEN); const authToken = localStorage.getItem(AUTH_TOKEN);
const take = LINKS_PER_PAGE;
const skip = 0;
const orderBy = { createdAt: 'desc' };
const [vote] = useMutation(VOTE_MUTATION, { const [vote] = useMutation(VOTE_MUTATION, {
variables: { variables: {
linkId: link.id 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 ( return (
@@ -70,19 +63,13 @@ const Link = (props) => {
<div className="flex items-center"> <div className="flex items-center">
<span className="gray">{props.index + 1}.</span> <span className="gray">{props.index + 1}.</span>
{authToken && ( {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>
<div className="ml1"> <div className="ml1">
<div> <div>
{link.description} ({link.url}) {link.description} ({link.url})
</div> </div>
{authToken && ( {authToken && (
<div className="f6 lh-copy gray"> <div className="f6 lh-copy gray">
{link.votes.length} votes, submitted by{' '} {link.votes.length} votes, submitted by{' '}

4
client/src/components/LinkList.js
View File

@@ -75,8 +75,6 @@ const LinkList = () => {
pageIndexParams[pageIndexParams.length - 1] pageIndexParams[pageIndexParams.length - 1]
); );
console.log(pageIndexParams.length, page);
const pageIndex = page ? (page - 1) * LINKS_PER_PAGE : 0; const pageIndex = page ? (page - 1) * LINKS_PER_PAGE : 0;
const { const {
@@ -88,8 +86,6 @@ const LinkList = () => {
variables: getQueryVariables(isNewPage, page) variables: getQueryVariables(isNewPage, page)
}); });
// const { data } = useQuery(FEED_QUERY);
const getLinksToRender = (isNewPage, data) => { const getLinksToRender = (isNewPage, data) => {
if (isNewPage) { if (isNewPage) {
return data.feed.links; return data.feed.links;

1
client/src/components/Search.js
View File

@@ -6,7 +6,6 @@ import Link from './Link';
const FEED_SEARCH_QUERY = gql` const FEED_SEARCH_QUERY = gql`
query FeedSearchQuery($filter: String!) { query FeedSearchQuery($filter: String!) {
feed(filter: $filter) { feed(filter: $filter) {
id
links { links {
id id
url url

5
client/src/setupTests.js
View File

@@ -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';

BIN
server/prisma/dev.db
View File

Binary file not shown.