Skip to content

Commit 8bec0a7

Browse files
AllicolyerAllicolyer
committed
clean up components, add active props to buttons
1 parent d51c9a0 commit 8bec0a7

File tree

7 files changed

+82
-67
lines changed

7 files changed

+82
-67
lines changed

‎oss

Submodule oss updated 58 files

‎packages/gatsby-theme/src/components/BookmarkMutation.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@ import * as React from 'react';
22
import gql from 'graphql-tag';
33
import { Mutation } from 'react-apollo';
44
import { loginUser } from '../utils/auth';
5-
5+
import { BookmarkButton } from './buttons';
66
import { handleMutationResponse, ApiErrors } from '../utils/errorHandling';
7-
import { Button } from './shared/base';
87

98
const BookmarkMutation = ({ tutorial }) => (
109
<Mutation
@@ -25,8 +24,10 @@ const BookmarkMutation = ({ tutorial }) => (
2524
}}
2625
>
2726
{bookmark => {
27+
let bookmarked = tutorial.viewerUserTutorial.bookmarked;
2828
return (
29-
<Button
29+
<BookmarkButton
30+
active={bookmarked}
3031
onClick={async () => {
3132
const mutationRes = await handleMutationResponse(bookmark());
3233
if (mutationRes.error) {
@@ -37,9 +38,7 @@ const BookmarkMutation = ({ tutorial }) => (
3738
}
3839
}
3940
}}
40-
>
41-
Bookmark
42-
</Button>
41+
/>
4342
);
4443
}}
4544
</Mutation>

‎packages/gatsby-theme/src/components/TutorialListing.tsx

+5-10
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import * as React from 'react';
2-
import { Heading, Text, Card, Flex, Box, Button } from './shared/base';
2+
import { Heading, Text, Card, Flex, Box } from './shared/base';
33
import { getTutorialOverviewSlug } from '../utils/getTutorialSlug';
4-
import Upvote from './Upvote';
54
import { Link } from 'gatsby';
6-
import { Query, Mutation } from 'react-apollo';
5+
import { Query } from 'react-apollo';
76
import gql from 'graphql-tag';
8-
import { optionalChaining } from '../utils/helpers';
9-
import { loginUser } from '../utils/auth';
10-
import { handleMutationResponse, ApiErrors } from '../utils/errorHandling';
117
import UpvoteMutation from './UpvoteMutation';
128
import BookmarkMutation from './BookmarkMutation';
139

@@ -31,13 +27,13 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
3127
tutorial,
3228
}) => {
3329
const gatsbyID = tutorial.frontmatter.id;
34-
console.log(gatsbyID);
3530
return (
3631
<Query
3732
query={gql`
3833
query gatsbyTutorialQuery($gatsbyID: String!) {
3934
gatsbyTutorialQuery(gatsbyID: $gatsbyID) {
4035
id
36+
name
4137
upvotes
4238
numberOfStudents
4339
viewerUserTutorial {
@@ -50,9 +46,7 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
5046
`}
5147
variables={{ gatsbyID: gatsbyID }}
5248
>
53-
{({ loading, error, data }) => {
54-
if (error) return `Error! ${error.message}`;
55-
49+
{({ data }) => {
5650
return (
5751
<Card width={[1]} p={4} my={4} borderRadius={8} boxShadow="small">
5852
<Flex alignItems="center" justifyContent="center">
@@ -64,6 +58,7 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
6458
<BookmarkMutation tutorial={data.gatsbyTutorialQuery} />
6559
)}
6660
</Box>
61+
6762
<Box width={11 / 12}>
6863
<Link to={getTutorialOverviewSlug(tutorial.fileAbsolutePath)}>
6964
<Heading>{tutorial.frontmatter.tutorialTitle}</Heading>

‎packages/gatsby-theme/src/components/Upvote.tsx

-25
This file was deleted.

‎packages/gatsby-theme/src/components/UpvoteMutation.tsx

+23-20
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import * as React from 'react';
22
import gql from 'graphql-tag';
33
import { Mutation } from 'react-apollo';
4-
import { optionalChaining } from '../utils/helpers';
54
import { loginUser } from '../utils/auth';
65
import { handleMutationResponse, ApiErrors } from '../utils/errorHandling';
7-
import Upvote from './Upvote';
6+
import { VoteButton } from './buttons';
7+
import { Heading, Flex } from './shared/base';
88

99
const UpvoteMutation = ({ tutorial }) => (
1010
<Mutation
@@ -29,26 +29,29 @@ const UpvoteMutation = ({ tutorial }) => (
2929
}}
3030
>
3131
{upvote => {
32+
let active = tutorial.viewerUserTutorial.upvoted;
33+
let upvotes = tutorial.upvotes;
3234
return (
33-
<Upvote
34-
onClick={async () => {
35-
const mutationRes = await handleMutationResponse(upvote());
36-
if (mutationRes.error) {
37-
if (mutationRes.error === ApiErrors.AUTHORIZATION) {
38-
loginUser();
39-
} else {
40-
console.log(tutorial.id);
41-
console.log(tutorial);
42-
43-
console.log(mutationRes.error);
35+
<Flex
36+
flexDirection="column"
37+
alignItems="center"
38+
justifyContent="center"
39+
>
40+
<VoteButton
41+
onClick={async () => {
42+
const mutationRes = await handleMutationResponse(upvote());
43+
if (mutationRes.error) {
44+
if (mutationRes.error === ApiErrors.AUTHORIZATION) {
45+
loginUser();
46+
} else {
47+
console.log(mutationRes.error);
48+
}
4449
}
45-
}
46-
}}
47-
active={
48-
optionalChaining(() => tutorial.viewerUserTutorial.upvoted) || false
49-
}
50-
upvotes={optionalChaining(() => tutorial.upvotes)}
51-
/>
50+
}}
51+
active={active}
52+
/>
53+
<Heading>{upvotes}</Heading>
54+
</Flex>
5255
);
5356
}}
5457
</Mutation>

‎packages/gatsby-theme/src/components/buttons.tsx

+47-4
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,27 @@ import React from 'react';
22
import { ButtonProps } from './shared/base';
33
import { Flex, Image, Button } from './shared/base';
44

5-
export const VoteButton: React.FunctionComponent<ButtonProps> = props => (
6-
<CustomButton {...props} type="vote" />
7-
);
5+
export const VoteButton: React.FunctionComponent<
6+
ButtonProps & {
7+
active?: Boolean;
8+
}
9+
> = props =>
10+
props.active ? (
11+
<CustomButton {...props} type="voteActive" />
12+
) : (
13+
<CustomButton {...props} type="vote" />
14+
);
15+
16+
export const BookmarkButton: React.FunctionComponent<
17+
ButtonProps & {
18+
active?: Boolean;
19+
}
20+
> = props =>
21+
props.active ? (
22+
<CustomButton {...props} type="bookmarkActive" />
23+
) : (
24+
<CustomButton {...props} type="bookmark" />
25+
);
826

927
export const GithubButton: React.FunctionComponent<ButtonProps> = props => (
1028
<CustomButton {...props} type="github" />
@@ -20,7 +38,15 @@ export const SpectrumButton: React.FunctionComponent<ButtonProps> = props => (
2038

2139
export const CustomButton: React.FunctionComponent<
2240
ButtonProps & {
23-
type?: 'github' | 'tutorial' | 'spectrum' | 'vote' | 'default';
41+
type?:
42+
| 'github'
43+
| 'tutorial'
44+
| 'spectrum'
45+
| 'vote'
46+
| 'voteActive'
47+
| 'bookmark'
48+
| 'bookmarkActive'
49+
| 'default';
2450
}
2551
> = ({ type = 'default', children, ...buttonProps }) => {
2652
const { icon, bg } = customButtonTypes[type];
@@ -49,6 +75,9 @@ interface CustomButtonType {
4975
github: ButtonType;
5076
spectrum: ButtonType;
5177
vote: ButtonType;
78+
voteActive: ButtonType;
79+
bookmark: ButtonType;
80+
bookmarkActive: ButtonType;
5281
default: ButtonType;
5382
}
5483

@@ -69,6 +98,20 @@ const customButtonTypes: CustomButtonType = {
6998
icon: 'https://i.ibb.co/b3FGXbD/Vote.png',
7099
bg: 'white',
71100
},
101+
voteActive: {
102+
icon: 'https://i.ibb.co/b3FGXbD/Vote.png',
103+
bg: 'blue',
104+
},
105+
bookmark: {
106+
icon:
107+
'http://endlessicons.com/wp-content/uploads/2014/03/bookmark-icon-1-614x460.png',
108+
bg: 'white',
109+
},
110+
bookmarkActive: {
111+
icon:
112+
'http://endlessicons.com/wp-content/uploads/2014/03/bookmark-icon-1-614x460.png',
113+
bg: 'blue',
114+
},
72115
default: {
73116
icon: '',
74117
bg: 'primary',

‎packages/gatsby-theme/src/utils/errorHandling.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export async function handleMutationResponse(
1515
};
1616
}
1717
return {
18-
error: ApiErrors.INVALID,
18+
err: ApiErrors.INVALID,
1919
};
2020
}
2121
}

0 commit comments

Comments
 (0)