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 { useHistory } from 'react-router';
import { useMutation, gql } from '@apollo/client';
import { LINKS_PER_PAGE } from '../constants';
import { FEED_QUERY } from './LinkList';
// import { LINKS_PER_PAGE } from '../constants';
// 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 } }) => {
const take = LINKS_PER_PAGE;
const skip = 0;
const orderBy = { createdAt: 'desc' };
// update: (cache, { data: { post } }) => {
// const take = LINKS_PER_PAGE;
// const skip = 0;
// const orderBy = { createdAt: 'desc' };
const { data } = cache.readQuery({
query: FEED_QUERY,
variables: {
take,
skip,
orderBy
}
});
// const { data } = cache.readQuery({
// query: FEED_QUERY,
// variables: {
// take,
// skip,
// orderBy
// }
// });
cache.writeQuery({
query: FEED_QUERY,
data: {
feed: {
links: [post, ...data.feed.links]
}
},
variables: {
take,
skip,
orderBy
}
});
},
// cache.writeQuery({
// query: FEED_QUERY,
// data: {
// feed: {
// links: [post, ...data.feed.links]
// }
// },
// variables: {
// take,
// skip,
// orderBy
// }
// });
// },
onCompleted: () => history.push('/new/1')
});

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

@@ -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>
<Link to="/" className="ml1 no-underline black">
new
</Link>
<div className="fw7 mr1">News</div>
<Link to="/" className="ml1 no-underline black">Top</Link>
<div className="ml1">|</div>
<Link to="/top" className="ml1 no-underline black">
top
</Link>
<Link to="/new/1" className="ml1 no-underline black">New</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"
>
submit
</Link>
<Link to="/create" className="ml1 no-underline black">Create</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>

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

@@ -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 } }) {
const { feed } = cache.readQuery({
query: FEED_QUERY
});
// 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;
});
// 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
}
}
});
}
// cache.writeQuery({
// query: FEED_QUERY,
// data: {
// feed: {
// links: updatedLinks
// }
// }
// });
// }
});
return (
@@ -70,19 +63,13 @@ 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{' '}

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

@@ -75,8 +75,6 @@ const LinkList = () => {
pageIndexParams[pageIndexParams.length - 1]
);
console.log(pageIndexParams.length, page);
const pageIndex = page ? (page - 1) * LINKS_PER_PAGE : 0;
const {
@@ -88,8 +86,6 @@ const LinkList = () => {
variables: getQueryVariables(isNewPage, page)
});
// const { data } = useQuery(FEED_QUERY);
const getLinksToRender = (isNewPage, data) => {
if (isNewPage) {
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`
query FeedSearchQuery($filter: String!) {
feed(filter: $filter) {
id
links {
id
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.