Better Types

thetrevorharmon · Dec 12, 2019 · f316cbb · f316cbb
1 parent 8dec93d
commit f316cbb
Show file tree

Hide file tree

Showing 25 changed files with 256 additions and 377 deletions.
diff --git a/src/UI-Kit/Attribution/Attribution.tsx b/src/UI-Kit/Attribution/Attribution.tsx
@@ -2,6 +2,7 @@ import classnames from 'classnames';
 import React from 'react';
 
 import {useTheme} from '../../context/ThemeContext';
+import {ContentfulAttribution} from '../../types/Contentful';
 import {Link} from '../../UI-Kit';
 import * as styles from './Attribution.module.scss';
 

diff --git a/src/UI-Kit/FeaturedItem/FeaturedItem.tsx b/src/UI-Kit/FeaturedItem/FeaturedItem.tsx
@@ -2,6 +2,7 @@ import classnames from 'classnames';
 import * as React from 'react';
 
 import {useTheme} from '../../context/ThemeContext';
+import {ContentfulAsset} from '../../types/Contentful';
 import {BlogItem, Breakout, Icon, Image, Spacer} from '../../UI-Kit';
 import {BlogItemProps} from '../BlogItem';
 import * as styles from './FeaturedItem.module.scss';
@@ -26,7 +27,6 @@ export const FeaturedItem = ({
   ]);
 
   return (
-    // TODO: add star to bottom right corner
     <Breakout>
       <div className={classname}>
         <Spacer size="medium">

diff --git a/src/UI-Kit/Image/Image.tsx b/src/UI-Kit/Image/Image.tsx
@@ -1,33 +1,7 @@
-import classnames from 'classnames';
-import Img, {FluidObject} from 'gatsby-image';
+import Img from 'gatsby-image';
 import * as React from 'react';
 
-// TODO: manage these types better bc this sucks
-type ContentfulObjectType =
-  | 'ContentfulBlogPost'
-  | 'ContentfulLinkPost'
-  | 'ContentfulProject'
-  | 'ContentfulAboutPage';
-
-interface BaseObject {
-  internal?: {
-    content?: string;
-    contentDigest?: string;
-    description?: string;
-    fieldOwners?: string;
-    ignoreType?: string;
-    mediaType?: string;
-    owner?: string;
-    type?: ContentfulObjectType;
-  };
-}
-
-interface ContentfulAsset extends BaseObject {
-  id?: string;
-  title: string;
-  description: string;
-  fluid: FluidObject;
-}
+import {ContentfulAsset} from '../../types/Contentful';
 
 interface ImageProps {
   className?: string;

diff --git a/src/UI-Kit/LinkList/LinkList.module.scss b/src/UI-Kit/LinkList/LinkList.module.scss
diff --git a/src/UI-Kit/LinkList/LinkList.tsx b/src/UI-Kit/LinkList/LinkList.tsx
diff --git a/src/UI-Kit/LinkList/index.tsx b/src/UI-Kit/LinkList/index.tsx
diff --git a/src/UI-Kit/index.tsx b/src/UI-Kit/index.tsx
@@ -10,7 +10,6 @@ export {Icon, IconName} from './Icon';
 export {Image} from './Image';
 export {Input} from './Input';
 export {Link} from './Link';
-export {LinkList} from './LinkList';
 export {Meta, MetaProps} from './Meta';
 export {Navbar} from './Navbar';
 export {Spacer, Space} from './Spacer';

diff --git a/src/components/ProjectPreviewTile/ProjectPreviewTile.tsx b/src/components/ProjectPreviewTile/ProjectPreviewTile.tsx
@@ -2,12 +2,13 @@ import classnames from 'classnames';
 import * as React from 'react';
 
 import {useTheme} from '../../context/ThemeContext';
+import {ProjectPartial} from '../../types/Project';
 import {Header, Image, Link, Meta, Spacer} from '../../UI-Kit';
 import {Routes} from '../../utils';
 import * as styles from './ProjectPreviewTile.module.scss';
 
 interface ProjectPreviewTileProps {
-  project: ProjectPreview;
+  project: ProjectPartial;
   className?: string;
 }
 

diff --git a/src/globals.d.ts b/src/globals.d.ts
@@ -0,0 +1,48 @@
+declare module '*.scss' {
+  const content: {[className: string]: string};
+  export = content;
+}
+
+declare module '*.png' {
+  const content: any;
+  export = content;
+}
+
+declare module '*.svg' {
+  const content: React.SVGFactory;
+  export = content;
+}
+
+interface MarkdownRemark {
+  html: string;
+  excerpt?: string;
+  timeToRead?: string;
+}
+
+interface SiteMetadata {
+  title: string;
+  description: string;
+  tagline: string;
+  siteUrl: string;
+  feedUrl: string;
+  twitter: {
+    author: string;
+    site: string;
+  };
+  mailchimpFallbackUrl?: string;
+}
+
+interface PageMetadata {
+  title?: string;
+  description?: string;
+  url?: string;
+  image?: string;
+}
+
+interface allContentfulEdgesWithNode<T> {
+  edges: [
+    {
+      node: T;
+    },
+  ];
+}
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -4,19 +4,24 @@ import * as React from 'react';
 
 import {useTheme} from '../context/ThemeContext';
 import {Layout} from '../layouts';
+import {
+  ContentfulAsset,
+  ContentfulBaseObject,
+  ContentfulLongText,
+} from '../types/Contentful';
 import {Breakout, Header, Image, Space, Spacer} from '../UI-Kit';
 import {Routes} from '../utils';
 import * as styles from './about.module.scss';
 
+interface AboutPageData extends ContentfulBaseObject {
+  title: string;
+  post: ContentfulLongText;
+  featureImage: ContentfulAsset;
+}
+
 interface AboutPageProps {
   data: {
-    allContentfulAboutPage: {
-      edges: [
-        {
-          node: AboutPageData;
-        },
-      ];
-    };
+    allContentfulAboutPage: allContentfulEdgesWithNode<AboutPageData>;
   };
 }
 

diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx
@@ -3,6 +3,7 @@ import {graphql} from 'gatsby';
 import * as React from 'react';
 
 import {Layout} from '../layouts';
+import {BlogPost, isBlogPost, isLinkPost, LinkPost} from '../types/Post';
 import {
   BlogItem,
   FeaturedItem,
@@ -16,20 +17,8 @@ import {Helpers, Routes} from '../utils';
 
 interface ProjectsPageProps {
   data: {
-    allContentfulBlogPost: {
-      edges: [
-        {
-          node: BlogPost;
-        },
-      ];
-    };
-    allContentfulLinkPost: {
-      edges: [
-        {
-          node: LinkPost;
-        },
-      ];
-    };
+    allContentfulBlogPost: allContentfulEdgesWithNode<BlogPost>;
+    allContentfulLinkPost: allContentfulEdgesWithNode<LinkPost>;
   };
 }
 
@@ -61,7 +50,7 @@ export default (props: ProjectsPageProps) => {
         <Spacer size="large">
           {posts.map((post, index) => (
             <>
-              {index === 1 && post.postType === 'Blog' ? (
+              {index === 1 && isBlogPost(post) && post.heroImage != null ? (
                 // TODO: this kinda sucks. I think that having "blog" specific wrappers might be nice.
                 <FeaturedItem
                   image={post.heroImage}
@@ -93,7 +82,7 @@ export default (props: ProjectsPageProps) => {
                         post.internal &&
                         post.body.childMarkdownRemark.timeToRead
                       }
-                      isLinkPost={post.postType === 'Link'}
+                      isLinkPost={isLinkPost(post)}
                     />
                   }
                   linkHref={Routes.blogPost(post.slug)}
@@ -123,9 +112,6 @@ export const query = graphql`
           slug
           description
           date(formatString: "DD MMM YYYY")
-          internal {
-            type
-          }
           heroImage {
             ...ContentfulAsset_width750
           }
@@ -137,6 +123,9 @@ export const query = graphql`
             }
           }
           tags
+          internal {
+            type
+          }
         }
       }
     }

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -2,18 +2,14 @@ import {graphql} from 'gatsby';
 import * as React from 'react';
 
 import {Layout} from '../layouts';
+import {BlogPost, isLinkPost, LinkPost} from '../types/Post';
 import {BlogItem, Button, Header, Meta, Space, Spacer} from '../UI-Kit';
 import {Helpers, Routes, useSiteData} from '../utils';
-import * as styles from './homepage.module.scss';
 
 interface IndexPageProps {
   data: {
-    site: {
-      siteMetadata: SiteMetadata;
-    };
-    allContentfulProject: {edges: [{node: Project}]};
-    allContentfulBlogPost: {edges: [{node: BlogPost}]};
-    allContentfulLinkPost: {edges: [{node: LinkPost}]};
+    allContentfulBlogPost: allContentfulEdgesWithNode<BlogPost>;
+    allContentfulLinkPost: allContentfulEdgesWithNode<LinkPost>;
   };
 }
 
@@ -52,7 +48,7 @@ export default (props: IndexPageProps) => {
                   timeToRead={
                     post.internal && post.body.childMarkdownRemark.timeToRead
                   }
-                  isLinkPost={post.postType === 'Link'}
+                  isLinkPost={isLinkPost(post)}
                 />
               }
               linkHref={Routes.blogPost(post.slug)}
@@ -72,11 +68,6 @@ export default (props: IndexPageProps) => {
 
 export const query = graphql`
   query indexPageQuery {
-    site {
-      siteMetadata {
-        tagline
-      }
-    }
     allContentfulBlogPost(sort: {order: DESC, fields: [date]}, limit: 3) {
       edges {
         node {
@@ -92,6 +83,9 @@ export const query = graphql`
             }
           }
           tags
+          internal {
+            type
+          }
         }
       }
     }
@@ -112,6 +106,9 @@ export const query = graphql`
               timeToRead
             }
           }
+          internal {
+            type
+          }
         }
       }
     }