Skip to content

Commit 3acb477

Browse files
TrevHeathTrevHeath
authored
Merge pull request #32 from howtographql/re-organization
Reorganization
2 parents 5a7619c + 0181f0a commit 3acb477

31 files changed

+260
-256
lines changed

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

+5-16
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
11
import * as React from 'react';
2-
import gql from 'graphql-tag';
32
import { Mutation } from 'react-apollo';
4-
import { loginUser } from '../utils/auth';
5-
import { BookmarkButton } from './buttons';
6-
import { handleMutationResponse, ApiErrors } from '../utils/errorHandling';
3+
import { loginUser } from '../../utils/auth';
4+
import { BookmarkButton } from '../shared/buttons';
5+
import { BookmarkTutorial } from '../../utils/queries';
6+
import { handleMutationResponse, ApiErrors } from '../../utils/errorHandling';
77

88
const BookmarkMutation = ({ tutorial }) => (
99
<Mutation
10-
mutation={gql`
11-
mutation BookmarkTutorial($id: ID!) {
12-
bookmarkTutorial(tutorialId: $id) {
13-
code
14-
success
15-
userTutorial {
16-
id
17-
bookmarked
18-
}
19-
}
20-
}
21-
`}
10+
mutation={BookmarkTutorial}
2211
variables={{
2312
id: tutorial.id,
2413
}}

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

+5-24
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import * as React from 'react';
2-
import { Heading, Text, Card, Flex, Box } from './shared/base';
3-
import { getTutorialOverviewSlug } from '../utils/getTutorialSlug';
2+
import { Heading, Text, Card, Flex, Box } from '../shared/base';
3+
import { getTutorialOverviewSlug } from '../../utils/getTutorialSlug';
44
import { Link } from 'gatsby';
55
import { Query } from 'react-apollo';
6-
import gql from 'graphql-tag';
76
import UpvoteMutation from './UpvoteMutation';
87
import BookmarkMutation from './BookmarkMutation';
9-
import Percentage from './Percentage';
8+
import Percentage from '../shared/Percentage';
9+
import { getTutorialbyGatsbyID } from '../../utils/queries';
1010

1111
type TutorialListingProps = {
1212
tutorial: Tutorial;
@@ -30,26 +30,7 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
3030
const gatsbyID = tutorial.frontmatter.id;
3131
let tutorialPath = getTutorialOverviewSlug(tutorial.fileAbsolutePath);
3232
return (
33-
<Query
34-
query={gql`
35-
query getTutorialbyGatsbyID($gatsbyID: String!) {
36-
getTutorialbyGatsbyID(gatsbyID: $gatsbyID) {
37-
id
38-
name
39-
upvotes
40-
numberofChapters
41-
numberOfStudents
42-
viewerUserTutorial {
43-
id
44-
upvoted
45-
bookmarked
46-
currentChapter
47-
}
48-
}
49-
}
50-
`}
51-
variables={{ gatsbyID: gatsbyID }}
52-
>
33+
<Query query={getTutorialbyGatsbyID} variables={{ gatsbyID: gatsbyID }}>
5334
{({ data }) => {
5435
return (
5536
<Card width={[1]} p={4} my={4} borderRadius={8} boxShadow="small">

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

+6-26
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,13 @@
11
import * as React from 'react';
2-
import gql from 'graphql-tag';
32
import { Mutation } from 'react-apollo';
4-
import { loginUser } from '../utils/auth';
5-
import { handleMutationResponse, ApiErrors } from '../utils/errorHandling';
6-
import { VoteButton } from './buttons';
7-
import { Heading, Flex } from './shared/base';
3+
import { loginUser } from '../../utils/auth';
4+
import { handleMutationResponse, ApiErrors } from '../../utils/errorHandling';
5+
import { VoteButton } from '../shared/buttons';
6+
import { Heading, Flex } from '../shared/base';
7+
import { UpvoteTutorial } from '../../utils/queries';
88

99
const UpvoteMutation = ({ tutorial }) => (
10-
<Mutation
11-
mutation={gql`
12-
mutation UpvoteTutorial($id: ID!) {
13-
upvoteTutorial(tutorialId: $id) {
14-
code
15-
success
16-
userTutorial {
17-
id
18-
upvoted
19-
tutorial {
20-
id
21-
upvotes
22-
}
23-
}
24-
}
25-
}
26-
`}
27-
variables={{
28-
id: tutorial.id,
29-
}}
30-
>
10+
<Mutation mutation={UpvoteTutorial} variables={{ id: tutorial.id }}>
3111
{upvote => {
3212
let active = tutorial.viewerUserTutorial.upvoted;
3313
let upvotes = tutorial.upvotes;

‎packages/gatsby-theme/src/components/courses/CourseCard.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import * as React from 'react';
2+
import { Card, Flex, Image } from '../shared/base';
3+
import ProgressBar from '../shared/ProgressBar';
4+
import { TutorialButton } from '../shared/buttons';
5+
import { getTutorialOverviewSlug } from '../../utils/getTutorialSlug';
6+
7+
type CourseCardProps = {
8+
tutorialTitle: string;
9+
fileAbsolutePath: string;
10+
};
11+
12+
const CourseCard: React.FunctionComponent<CourseCardProps> = ({
13+
tutorialTitle,
14+
fileAbsolutePath,
15+
}) => {
16+
return (
17+
<Card m={[1, 1, 1]} p={[2, 2, 2]}>
18+
<Flex flexDirection="column" alignItems="center" justifyContent="center">
19+
<Image
20+
width={[0.5, 0.5, 0.5]}
21+
src="https://i.ibb.co/TcKwmwR/Icons.png"
22+
/>
23+
<h3>{tutorialTitle}</h3>
24+
<ProgressBar percentage={Math.floor(Math.random() * 100)} width={80} />
25+
<a href={getTutorialOverviewSlug(fileAbsolutePath)}>
26+
<TutorialButton>Start Tutorial</TutorialButton>
27+
</a>
28+
</Flex>
29+
</Card>
30+
);
31+
};
32+
33+
export default CourseCard;

‎packages/gatsby-theme/src/components/courses/CourseSection.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import * as React from 'react';
2+
import { Heading, Text, Flex, Box } from '../shared/base';
3+
import CourseCard from './CourseCard';
4+
5+
type CourseSectionProps = {
6+
heading: string;
7+
body: string;
8+
data: [QueryData];
9+
};
10+
11+
type QueryData = {
12+
node: Node;
13+
};
14+
15+
type Node = {
16+
id: string;
17+
fileAbsolutePath: string;
18+
frontmatter: Frontmatter;
19+
};
20+
21+
type Frontmatter = {
22+
tutorialTitle: string;
23+
description: string;
24+
};
25+
26+
const CourseSection: React.FunctionComponent<CourseSectionProps> = ({
27+
heading,
28+
body,
29+
data,
30+
}) => {
31+
return (
32+
<Flex m={[1, 1, 1]}>
33+
<Box width={[0.2, 0.2, 0.2]}>
34+
<Heading> {heading} </Heading>
35+
<Text>{body}</Text>
36+
</Box>
37+
<Box width={[0.8, 0.8, 0.8]}>
38+
<Flex alignItems="top" justifyContent="center" flexWrap="wrap">
39+
{data.map(tutorial => (
40+
<Box width={[1, 0.8, 0.4]} key={tutorial.node.id}>
41+
<CourseCard
42+
tutorialTitle={tutorial.node.frontmatter.tutorialTitle}
43+
fileAbsolutePath={tutorial.node.fileAbsolutePath}
44+
/>
45+
</Box>
46+
))}
47+
</Flex>
48+
</Box>
49+
</Flex>
50+
);
51+
};
52+
53+
export default CourseSection;

‎packages/gatsby-theme/src/components/listing.tsx ‎packages/gatsby-theme/src/components/index/listing.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Link } from 'gatsby';
22
import * as React from 'react';
3-
import { styled } from '../styles';
4-
import { useAllTutorialQuery } from '../hooks/useAllTutorialQuery';
5-
import { getTutorialSlug } from '../utils/getTutorialSlug';
3+
import { styled } from '../../styles';
4+
import { useAllTutorialQuery } from '../../hooks/useAllTutorialQuery';
5+
import { getTutorialSlug } from '../../utils/getTutorialSlug';
66

77
const Post = styled.article`
88
box-shadow: 0 0.3rem 1rem rgba(25, 17, 34, 0.05);

‎packages/gatsby-theme/src/components/Account.tsx ‎packages/gatsby-theme/src/components/profile/Account.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
2-
import { Text, Image, Flex } from './shared/base';
2+
import { Text, Image, Flex } from '../shared/base';
33
import { Link } from 'gatsby';
4-
import { GithubButton } from './buttons';
5-
import { loginUser } from '../utils/auth';
6-
import WithCurrentUser from '../utils/auth/WithCurrentUser';
7-
import { CenteredLoader } from '../components/Loader';
4+
import { GithubButton } from '../shared/buttons';
5+
import { loginUser } from '../../utils/auth';
6+
import WithCurrentUser from '../../utils/auth/WithCurrentUser';
7+
import { CenteredLoader } from '../shared/Loader';
88

99
const Account = () => {
1010
return (

‎packages/gatsby-theme/src/components/shared/Header.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import Account from '../Account';
2+
import Account from '../profile/Account';
33

44
// Vectors
55
import Logo from './Logo';

‎packages/gatsby-theme/src/components/Loader.tsx ‎packages/gatsby-theme/src/components/shared/Loader.tsx

File renamed without changes.

‎packages/gatsby-theme/src/components/Percentage.tsx ‎packages/gatsby-theme/src/components/shared/Percentage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { Text } from './shared/base';
2+
import { Text } from './base';
33

44
const Percentage = ({ tutorial }) => {
55
let progress = tutorial.viewerUserTutorial.currentChapter;

‎packages/gatsby-theme/src/components/ProgressBar.tsx ‎packages/gatsby-theme/src/components/shared/ProgressBar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
2-
import { styled } from '../styles';
3-
import { Text } from './shared/base';
2+
import { styled } from '../../styles';
3+
import { Text } from './base';
44

55
interface ProgressBarProps extends FillerProps, ContainerProps {}
66

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import { ButtonProps } from './shared/base';
3-
import { Flex, Image, Button } from './shared/base';
2+
import { ButtonProps } from './base';
3+
import { Flex, Image, Button } from './base';
44

55
export const VoteButton: React.FunctionComponent<
66
ButtonProps & {

‎packages/gatsby-theme/src/components/code.tsx ‎packages/gatsby-theme/src/components/shared/code.tsx

File renamed without changes.

‎packages/gatsby-theme/src/components/image.tsx ‎packages/gatsby-theme/src/components/shared/image.tsx

File renamed without changes.

‎packages/gatsby-theme/src/components/layout.tsx ‎packages/gatsby-theme/src/components/shared/layout.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { RouterProps } from '@reach/router';
22
import * as React from 'react';
33
import Helmet from 'react-helmet';
4-
import { theme, ThemeProvider, styled } from '../styles';
5-
import { useLayoutQuery } from '../hooks/useLayoutQuery';
6-
import Header from './shared/Header';
4+
import { theme, ThemeProvider, styled } from '../../styles';
5+
import { useLayoutQuery } from '../../hooks/useLayoutQuery';
6+
import Header from './Header';
77

88
const MainLayout = styled.main`
99
max-width: 90%;

‎packages/gatsby-theme/src/components/templates/Tutorial.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import * as React from 'react';
22
import { RouterProps } from '@reach/router';
3-
import Layout from '../layout';
3+
import Layout from '../shared/layout';
44
import { MDXRenderer } from 'gatsby-mdx';
55
import { graphql } from 'gatsby';
6-
import { Sidebar, TabletSidebar } from '../TutorialSidebar';
6+
import { Sidebar, TabletSidebar } from '../tutorial/TutorialSidebar';
77
import { TutorialMdxQuery } from '../../graphqlTypes';
88
import { HideOnTablet, ShowOnTablet } from '../../utils/responsive';
99
import { Flex, Box } from '../shared/base';
1010
import { optionalChaining } from '../../utils/helpers';
11-
import ChapterMutation from '../ChapterMutation';
11+
import ChapterMutation from '../tutorial/ChapterMutation';
1212

1313
type TutorialLayoutProps = { data: TutorialMdxQuery } & RouterProps;
1414

‎packages/gatsby-theme/src/components/templates/TutorialOverview.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
2-
import Layout from '../layout';
3-
import Chapter from '../Chapter';
2+
import Layout from '../shared/layout';
3+
import Chapter from '../tutorial/Chapter';
44
import { TutorialOverviewQuery } from 'src/graphqlTypes';
5-
import AuthorList from '../AuthorList';
6-
import TutorialHeader from '../TutorialHeader';
5+
import AuthorList from '../tutorial/AuthorList';
6+
import TutorialHeader from '../tutorial/TutorialHeader';
77
import { Heading, Flex, Box } from '../shared/base';
8-
import ProgressBar from '../ProgressBar';
9-
import { GithubButton, SpectrumButton, TutorialButton } from '../buttons';
8+
import ProgressBar from '../shared/ProgressBar';
9+
import { GithubButton, SpectrumButton, TutorialButton } from '../shared/buttons';
1010
import { Content } from '../shared/styledHelpers';
1111
import { authors } from '../../utils/sampleData';
1212
import { graphql } from 'gatsby';

‎packages/gatsby-theme/src/components/AuthorList.tsx ‎packages/gatsby-theme/src/components/tutorial/AuthorList.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Image, Text, Flex, Box } from './shared/base';
2+
import { Image, Text, Flex, Box } from '../shared/base';
33

44
type Author = {
55
name: string;

‎packages/gatsby-theme/src/components/Chapter.tsx ‎packages/gatsby-theme/src/components/tutorial/Chapter.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
2-
import { getTutorialSlug } from '../utils/getTutorialSlug';
2+
import { getTutorialSlug } from '../../utils/getTutorialSlug';
33
import { Link } from 'gatsby';
4-
import { Heading, Text, Flex, Card } from './shared/base';
4+
import { Heading, Text, Flex, Card } from '../shared/base';
55

66
type ChapterProps = {
77
num: string | number;

‎packages/gatsby-theme/src/components/ChapterMutation.tsx ‎packages/gatsby-theme/src/components/tutorial/ChapterMutation.tsx

+5-16
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import * as React from 'react';
2-
import gql from 'graphql-tag';
2+
import { upsertCurrentChapter } from '../../utils/queries';
33
import { Mutation } from 'react-apollo';
4-
import { loginUser } from '../utils/auth';
5-
import { handleMutationResponse, ApiErrors } from '../utils/errorHandling';
6-
import { Button } from './shared/base';
4+
import { loginUser } from '../../utils/auth';
5+
import { handleMutationResponse, ApiErrors } from '../../utils/errorHandling';
6+
import { Button } from '../shared/base';
77

88
type ChapterMutationProps = {
99
gatsbyID: any;
@@ -15,18 +15,7 @@ const ChapterMutation: React.FunctionComponent<ChapterMutationProps> = ({
1515
currentChapter,
1616
}) => (
1717
<Mutation
18-
mutation={gql`
19-
mutation upsertCurrentChapter($gatsbyID: String!, $chapter: Int!) {
20-
upsertCurrentChapter(gatsbyID: $gatsbyID, chapter: $chapter) {
21-
code
22-
success
23-
userTutorial {
24-
id
25-
currentChapter
26-
}
27-
}
28-
}
29-
`}
18+
mutation={upsertCurrentChapter}
3019
variables={{
3120
gatsbyID: gatsbyID,
3221
chapter: currentChapter,

‎packages/gatsby-theme/src/components/TutorialHeader.tsx ‎packages/gatsby-theme/src/components/tutorial/TutorialHeader.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Box, Image, Heading, Text } from './shared/base';
2+
import { Box, Image, Heading, Text } from '../shared/base';
33

44
interface TutorialHeaderProps {
55
title: string | null;

‎packages/gatsby-theme/src/components/TutorialSidebar.tsx ‎packages/gatsby-theme/src/components/tutorial/TutorialSidebar.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
2-
import { Card, Image, Heading, Flex } from './shared/base';
3-
import { authors } from '../utils/sampleData';
2+
import { Card, Image, Heading, Flex } from '../shared/base';
3+
import { authors } from '../../utils/sampleData';
44
import AuthorList from './AuthorList';
5-
import { SpectrumButton } from './buttons';
5+
import { SpectrumButton } from '../shared/buttons';
66

77
type SidebarProps = {
88
tutorialTitle: string;

‎packages/gatsby-theme/src/pages/404.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import Layout from '../components/layout';
2+
import Layout from '../components/shared/layout';
33

44
const NotFoundPage = () => (
55
<Layout>

0 commit comments

Comments
 (0)