Skip to content

Commit 14f9796

Browse files
AllicolyerAllicolyer
committed
clean up types for courses page
1 parent 7cb93ac commit 14f9796

File tree

5 files changed

+59
-52
lines changed

5 files changed

+59
-52
lines changed

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ import { Query } from 'react-apollo';
44
import ProgressBar from '../shared/ProgressBar';
55
import { TutorialButton } from '../shared/buttons';
66
import { getTutorialbyGatsbyID } from '../../utils/queries';
7+
import { GetTutorialbyGatsbyIdQuery } from '../../graphqlTypes';
78
import { getTutorialOverviewSlug } from '../../utils/getTutorialSlug';
89
import { optionalChaining, percent } from '../../utils/helpers';
910

1011
type CourseCardProps = {
11-
tutorialTitle: string;
12-
fileAbsolutePath: string;
13-
gatsbyID: string;
12+
tutorialTitle: Maybe<string>;
13+
fileAbsolutePath: Maybe<string>;
14+
gatsbyID: Maybe<string>;
1415
};
1516

1617
const CourseCard: React.FunctionComponent<CourseCardProps> = ({
@@ -27,19 +28,23 @@ const CourseCard: React.FunctionComponent<CourseCardProps> = ({
2728
src="https://i.ibb.co/TcKwmwR/Icons.png"
2829
/>
2930
<h3>{tutorialTitle}</h3>
30-
<Query query={getTutorialbyGatsbyID} variables={{ gatsbyID: gatsbyID }}>
31+
<Query<GetTutorialbyGatsbyIdQuery>
32+
query={getTutorialbyGatsbyID}
33+
variables={{ gatsbyID: gatsbyID }}
34+
>
3135
{({ data }) => {
3236
let buttonText = 'Start Tutorial';
3337
let percentage = 0;
3438
if (
3539
optionalChaining(
3640
() =>
37-
data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
41+
data!.getTutorialbyGatsbyID!.viewerUserTutorial!
42+
.currentChapter,
3843
)
3944
) {
4045
percentage = percent(
41-
data.getTutorialbyGatsbyID.numberofChapters,
42-
data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
46+
data!.getTutorialbyGatsbyID!.numberofChapters,
47+
data!.getTutorialbyGatsbyID!.viewerUserTutorial!.currentChapter,
4348
);
4449
buttonText = 'Continue Tutorial';
4550
if (percentage === 100) {

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

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { Heading, Text, Flex, Box } from '../shared/base';
33
import CourseCard from './CourseCard';
4+
import { Mdx } from '../../graphqlTypes';
45

56
type CourseSectionProps = {
67
heading: string;
@@ -9,47 +10,45 @@ type CourseSectionProps = {
910
};
1011

1112
type QueryData = {
12-
node: Node;
13+
node: Mdx;
1314
};
1415

15-
type Node = {
16-
id: string;
17-
fileAbsolutePath: string;
18-
frontmatter: Frontmatter;
19-
};
16+
// type Node = {
17+
// id: string;
18+
// fileAbsolutePath: string;
19+
// frontmatter: Frontmatter;
20+
// };
2021

21-
type Frontmatter = {
22-
id: string;
23-
tutorialTitle: string;
24-
description: string;
25-
};
22+
// type Frontmatter = {
23+
// id: string;
24+
// tutorialTitle: string;
25+
// description: string;
26+
// };
2627

2728
const CourseSection: React.FunctionComponent<CourseSectionProps> = ({
2829
heading,
2930
body,
3031
data,
31-
}) => {
32-
return (
33-
<Flex m={[1, 1, 1]}>
34-
<Box width={[0.2, 0.2, 0.2]}>
35-
<Heading> {heading} </Heading>
36-
<Text>{body}</Text>
37-
</Box>
38-
<Box width={[0.8, 0.8, 0.8]}>
39-
<Flex alignItems="top" justifyContent="center" flexWrap="wrap">
40-
{data.map(tutorial => (
41-
<Box width={[1, 0.8, 0.4]} key={tutorial.node.id}>
42-
<CourseCard
43-
gatsbyID={tutorial.node.frontmatter.id}
44-
tutorialTitle={tutorial.node.frontmatter.tutorialTitle}
45-
fileAbsolutePath={tutorial.node.fileAbsolutePath}
46-
/>
47-
</Box>
48-
))}
49-
</Flex>
50-
</Box>
51-
</Flex>
52-
);
53-
};
32+
}) => (
33+
<Flex m={[1, 1, 1]}>
34+
<Box width={[0.2, 0.2, 0.2]}>
35+
<Heading> {heading} </Heading>
36+
<Text>{body}</Text>
37+
</Box>
38+
<Box width={[0.8, 0.8, 0.8]}>
39+
<Flex alignItems="top" justifyContent="center" flexWrap="wrap">
40+
{data.map(tutorial => (
41+
<Box width={[1, 0.8, 0.4]} key={tutorial!.node!.id}>
42+
<CourseCard
43+
gatsbyID={tutorial!.node!.frontmatter!.id}
44+
tutorialTitle={tutorial!.node!.frontmatter!.tutorialTitle}
45+
fileAbsolutePath={tutorial!.node!.fileAbsolutePath}
46+
/>
47+
</Box>
48+
))}
49+
</Flex>
50+
</Box>
51+
</Flex>
52+
);
5453

5554
export default CourseSection;

‎packages/gatsby-theme/src/graphqlTypes.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2935,9 +2935,9 @@ export type LayoutInformationQuery = {
29352935
}>;
29362936
};
29372937

2938-
export type CommunityTutorialQueryQueryVariables = {};
2938+
export type CommunityTutorialQueryVariables = {};
29392939

2940-
export type CommunityTutorialQueryQuery = {
2940+
export type CommunityTutorialQuery = {
29412941
readonly tutorials: Maybe<{
29422942
readonly edges: ReadonlyArray<{
29432943
readonly node: Pick<Mdx, 'id' | 'fileAbsolutePath'> & {
@@ -2949,9 +2949,9 @@ export type CommunityTutorialQueryQuery = {
29492949
}>;
29502950
};
29512951

2952-
export type FullStackCourseQueryQueryVariables = {};
2952+
export type FullStackCourseQueryVariables = {};
29532953

2954-
export type FullStackCourseQueryQuery = {
2954+
export type FullStackCourseQuery = {
29552955
readonly frontend: Maybe<{
29562956
readonly edges: ReadonlyArray<{
29572957
readonly node: Pick<Mdx, 'id' | 'fileAbsolutePath'> & {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ import { styled } from '../styles';
1313
import WithCurrentUser from '../utils/auth/WithCurrentUser';
1414
import TutorialListing from '../components/community/TutorialListing';
1515
import { graphql } from 'gatsby';
16-
import { CommunityTutorialQueryQuery } from 'src/graphqlTypes';
16+
import { CommunityTutorialQuery } from 'src/graphqlTypes';
1717

1818
const community: React.FunctionComponent<{
19-
data: CommunityTutorialQueryQuery;
19+
data: CommunityTutorialQuery;
2020
}> = ({ data }) => {
2121
const tutorials = data!.tutorials!.edges;
2222
return (
@@ -130,7 +130,7 @@ const community: React.FunctionComponent<{
130130
};
131131

132132
export const query = graphql`
133-
query CommunityTutorialQuery {
133+
query CommunityTutorial {
134134
tutorials: allMdx(
135135
filter: {
136136
frontmatter: { tutorialTitle: { ne: null } }

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,25 @@ import CourseSection from '../components/courses/CourseSection';
44
import { Content } from '../components/shared/styledHelpers';
55
import { Heading, Text } from '../components/shared/base';
66
import { graphql } from 'gatsby';
7+
import { FullStackCourseQuery } from 'src/graphqlTypes';
78

8-
const courses = ({ data }) => {
9+
const courses: React.FunctionComponent<{
10+
data: FullStackCourseQuery;
11+
}> = ({ data }) => {
912
const courseSectionData = [
1013
{
1114
heading: `Frontend`,
1215
body: `Implement a web frontend for a Hacker News app that talks to a GraphQL
1316
API. We provide a hosted GraphQL API for you so that you can test your
1417
app in a real world environment.`,
15-
data: data.frontend.edges,
18+
data: data!.frontend!.edges,
1619
},
1720
{
1821
heading: `Backend`,
1922
body: `Implement a GraphQL API that's backed by a database. The tutorial
2023
teach schema design and implement features like authentication,
2124
filtering, pagination and a lot more`,
22-
data: data.backend.edges,
25+
data: data!.backend!.edges,
2326
},
2427
];
2528
return (
@@ -44,7 +47,7 @@ const courses = ({ data }) => {
4447
};
4548

4649
export const query = graphql`
47-
query FullStackCourseQuery {
50+
query FullStackCourse {
4851
frontend: allMdx(
4952
filter: {
5053
frontmatter: { tutorialTitle: { ne: null } }

0 commit comments

Comments
 (0)