fix profile page props

Author: Allicolyer

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

@@ -86,7 +86,7 @@ const TutorialLayout: React.FunctionComponent<TutorialLayoutProps> = ({
       <a href={nextChapterPath}>
         <ChapterMutation
           gatsbyID={gatsbyID}
-          currentChapter={currentChapterIndex + 1}
+          chapter={currentChapterIndex + 1}
         />
       </a>
     </Layout>

packages/gatsby-theme/src/components/tutorial/AuthorsProgressBox.tsx

@@ -3,6 +3,7 @@ import AuthorList from './AuthorList';
 import { authors } from '../../utils/sampleData';
 import ProgressBar from '../shared/ProgressBar';
 import { getTutorialbyGatsbyID } from '../../utils/queries';
+import { GetTutorialbyGatsbyIdQuery } from '../../graphqlTypes';
 import { Query } from 'react-apollo';
 import {
   GithubButton,
@@ -13,20 +14,23 @@ import { Flex, Box } from '../shared/base';
 import { optionalChaining, percent } from '../../utils/helpers';
 
 const AuthorsProgressBox = ({ gatsbyID, chapterPaths }) => (
-  <Query query={getTutorialbyGatsbyID} variables={{ gatsbyID: gatsbyID }}>
+  <Query<GetTutorialbyGatsbyIdQuery>
+    query={getTutorialbyGatsbyID}
+    variables={{ gatsbyID: gatsbyID }}
+  >
     {({ data }) => {
       let buttonText = 'Start Tutorial';
       let percentage = 0;
       let currentChapter =
         optionalChaining(
-          () => data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
+          () => data!.getTutorialbyGatsbyID!.viewerUserTutorial!.currentChapter,
         ) || 0;
       //This link you to the next chapter you have not done
       let currentChapterPath = chapterPaths[0];
       if (currentChapter) {
         percentage = percent(
-          data.getTutorialbyGatsbyID.numberofChapters,
-          data.getTutorialbyGatsbyID.viewerUserTutorial.currentChapter,
+          data!.getTutorialbyGatsbyID!.numberofChapters,
+          data!.getTutorialbyGatsbyID!.viewerUserTutorial!.currentChapter,
         );
         buttonText = 'Continue Tutorial';
 

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

@@ -1,24 +1,22 @@
 import * as React from 'react';
 import { upsertCurrentChapter } from '../../utils/queries';
+import {
+  UpsertCurrentChapterMutation,
+  UpsertCurrentChapterMutationVariables,
+} from '../../graphqlTypes';
 import { Mutation } from 'react-apollo';
 import { loginUser } from '../../utils/auth';
 import { handleMutationResponse, ApiErrors } from '../../utils/errorHandling';
 import { Button } from '../shared/base';
 
-type ChapterMutationProps = {
-  gatsbyID: any;
-  currentChapter: any;
-};
-
-const ChapterMutation: React.FunctionComponent<ChapterMutationProps> = ({
-  gatsbyID,
-  currentChapter,
-}) => (
-  <Mutation
+const ChapterMutation: React.FunctionComponent<
+  UpsertCurrentChapterMutationVariables
+> = ({ gatsbyID, chapter }) => (
+  <Mutation<UpsertCurrentChapterMutation>
     mutation={upsertCurrentChapter}
     variables={{
       gatsbyID: gatsbyID,
-      chapter: currentChapter,
+      chapter: chapter,
     }}
   >
     {currentChapter => {

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

@@ -6,7 +6,7 @@ import { SpectrumButton } from '../shared/buttons';
 
 type SidebarProps = {
   tutorialTitle: string;
-  chapters: Chapter;
+  chapters: Chapter[];
 };
 type Chapter = {
   chapterTitle: string;

packages/gatsby-theme/src/pages/profile.tsx

@@ -5,18 +5,19 @@ import { logoutUser } from '../utils/auth';
 import { navigate } from 'gatsby';
 import { Query } from 'react-apollo';
 import { PROFILE_QUERY } from '../utils/queries';
+import { ProfileQueryQuery, User, Maybe, Tutorial } from '../graphqlTypes';
 import { optionalChaining } from '../utils/helpers';
 import { CenteredLoader } from '../components/shared/Loader';
 
 const Profile = () => {
   return (
-    <Query query={PROFILE_QUERY}>
+    <Query<ProfileQueryQuery> query={PROFILE_QUERY}>
       {({ data, loading }) => {
         if (loading) {
           return <CenteredLoader />;
         }
         if (optionalChaining(() => data!.viewer!.user)) {
-          return <ProfilePage user={data.viewer.user} />;
+          return <ProfilePage user={data!.viewer!.user} />;
         }
         navigate('/signup/');
         return null;
@@ -26,26 +27,23 @@ const Profile = () => {
 };
 
 type ProfileProps = {
-  user: User;
-};
-
-type User = {
-  id: string;
-  avatarUrl: string;
-  name: string;
-  githubHandle: string;
-  bio: string;
-  upvoted: [Tutorials];
-  bookmarked: [Tutorials];
-};
-
-type Tutorials = {
-  tutorial: Tutorial;
-};
-
-type Tutorial = {
-  id: 'string';
-  name: 'string';
+  user: Pick<User, 'id' | 'name' | 'githubHandle' | 'avatarUrl' | 'bio'> & {
+    readonly upvoted: Maybe<
+      ReadonlyArray<{
+        readonly tutorial: Maybe<Pick<Tutorial, 'id' | 'name'>>;
+      }>
+    >;
+    readonly bookmarked: Maybe<
+      ReadonlyArray<{
+        readonly tutorial: Maybe<Pick<Tutorial, 'id' | 'name'>>;
+      }>
+    >;
+    readonly progress: Maybe<
+      ReadonlyArray<{
+        readonly tutorial: Maybe<Pick<Tutorial, 'id' | 'name'>>;
+      }>
+    >;
+  };
 };
 
 const ProfilePage: React.FunctionComponent<ProfileProps> = ({ user }) => {
@@ -68,7 +66,7 @@ const ProfilePage: React.FunctionComponent<ProfileProps> = ({ user }) => {
       <button onClick={() => logoutUser()}> Log out </button>
       <Heading> Upvoted Tutorials </Heading>
       <ul>
-        {user.upvoted.map(
+        {user!.upvoted!.map(
           a =>
             a.tutorial && (
               <li key={a.tutorial.id}>
@@ -79,7 +77,7 @@ const ProfilePage: React.FunctionComponent<ProfileProps> = ({ user }) => {
       </ul>
       <Heading> Bookmarked Tutorials </Heading>
       <ul>
-        {user.bookmarked.map(
+        {user!.bookmarked!.map(
           a =>
             a.tutorial && (
               <li key={a.tutorial.id}>
@@ -88,9 +86,10 @@ const ProfilePage: React.FunctionComponent<ProfileProps> = ({ user }) => {
             ),
         )}
       </ul>
+
       <Heading> In Progress Tutorials </Heading>
       <ul>
-        {user.progress.map(
+        {user!.progress!.map(
           a =>
             a.tutorial && (
               <li key={a.tutorial.id}>