Merge pull request #643 from brianlovin/refactor-project-structure

Refactor project structure

src/components/Bookmarks/AddBookmark.tsx

@@ -23,7 +23,6 @@ export default function AddBookmark() {
     },
     onError({ message }) {
       const clean = message.replace('GraphQL error:', '')
-      console.warn(clean)
       setError(clean)
       setUrl('')
     },

src/components/Bookmarks/index.tsx

@@ -34,7 +34,6 @@ function BookmarkListItem(props: ListItemProps) {
     },
     onError({ message }) {
       const clean = message.replace('GraphQL error:', '')
-      console.warn(clean)
       setError(clean)
     },
   })

src/components/DesignDetailMedia/index.tsx

@@ -1,10 +1,16 @@
 import React, { useState } from 'react'
 import VisibilitySensor from 'react-visibility-sensor'
-import { DesignDetail } from '~/types'
 import Markdown from '~/components/MarkdownRenderer'
 import { DetailContainer, DetailTitle, MediaContainer, Video } from './style'
 
-type Props = {
+export interface DesignDetail {
+  title: string
+  description: string
+  media: Array<string>
+  orientation?: 'landscape'
+}
+
+interface Props {
   detail: DesignDetail
 }
 

src/components/DesignDetailView/index.tsx

@@ -1,19 +1,19 @@
 import React from 'react'
 import Link from 'next/link'
-import { getDateObject } from '~/lib/getDateObject'
 import {
   H3,
   Subheading,
   LargeSubheading,
   A,
   Rarr,
 } from '~/components/Typography'
-import { DesignDetailsPost } from '~/types'
 import DesignDetailsGrid from '~/components/DesignDetailsGrid'
 import DesignDetailMedia from '~/components/DesignDetailMedia'
 import Markdown from '~/components/MarkdownRenderer'
 import Picture from '../Picture'
 import Grid from '../Grid'
+import { format } from 'timeago.js'
+import { DesignDetailsPost } from '~/pages/design-details/[slug]'
 
 interface Props {
   post: DesignDetailsPost
@@ -22,9 +22,9 @@ interface Props {
 export default function DesignDetailView(props: Props) {
   const { post } = props
 
-  const { month, year, day } = getDateObject(post.createdAt)
-  const datestring = `${month} ${day}, ${year}`
-  const subheading = `${datestring} · ${post.details.length} details`
+  const subheading = `Posted ${format(post.createdAt)} · ${
+    post.details.length
+  } details`
 
   return (
     <Grid

src/components/DesignDetailsCard/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import ReactVisibilitySensor from 'react-visibility-sensor'
 import Link from 'next/link'
-import { DesignDetailsPost } from '~/types'
 import {
   Title,
   Container,
@@ -13,8 +12,9 @@ import {
   Circle,
 } from './style'
 import Picture from '~/components/Picture'
+import { DesignDetailsPost } from '~/pages/design-details/[slug]'
 
-type Props = {
+interface Props {
   post: DesignDetailsPost
 }
 

src/components/SubscriptionButtons/index.tsx

@@ -1,8 +1,30 @@
 import * as React from 'react'
-import { ConfigPodcast } from '~/types'
 import { SubscriptionsContainer, SubscriptionAvatar } from './style'
 
-type Props = {
+interface ConfigPodcast {
+  id: number
+  name: string
+  slug: string
+  description: string
+  simplecastId: number
+  artworkUrl: string
+  iTunesUrl: string
+  overcastUrl: string
+  pocketCastsUrl: string
+  rssFeedUrl: string
+  googlePodcastsUrl: string
+  castroUrl: string
+  breakerUrl: string
+  spotifyUrl: string
+  applePodcastId: string
+  twitterUsername: string
+  colors: {
+    text: string
+    button: string
+  }
+}
+
+interface Props {
   podcast: ConfigPodcast
 }
 

src/components/withApollo/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { ApolloProvider } from '@apollo/client'
-import { initApolloClient } from '~/graphql/api'
+import { initApolloClient } from '~/graphql/services/apollo'
 
 /*
   This wrapper helps to provide Apollo functionality during SSR, while rehydrating

src/graphql/resolvers/index.ts

@@ -1,32 +1,7 @@
-import { getBookmarks } from '~/graphql/resolvers/bookmarks'
-import { getPosts, getPost } from '~/graphql/resolvers/overthought'
-import { getEpisodes } from '~/graphql/resolvers/podcast'
-import { getRepos } from '~/graphql/resolvers/repos'
-import { isMe } from '~/graphql/resolvers/isMe'
-import { login, logout } from '~/graphql/resolvers/mutations/auth'
-import {
-  addBookmark,
-  editBookmark,
-  deleteBookmark,
-  addBookmarkReaction,
-} from '~/graphql/resolvers/mutations/bookmarks'
-import { requiresMe } from '~/graphql/authorization'
+import Query from '~/graphql/resolvers/queries'
+import Mutation from '~/graphql/resolvers/mutations'
 
 export default {
-  Query: {
-    bookmarks: getBookmarks,
-    episodes: getEpisodes,
-    posts: getPosts,
-    post: getPost,
-    repos: getRepos,
-    isMe: isMe,
-  },
-  Mutation: {
-    login: login,
-    logout: logout,
-    addBookmark: requiresMe(addBookmark),
-    editBookmark: requiresMe(editBookmark),
-    deleteBookmark: requiresMe(deleteBookmark),
-    addBookmarkReaction: addBookmarkReaction,
-  },
+  Query,
+  Mutation,
 }

src/graphql/resolvers/mutations/bookmarks.ts → src/graphql/resolvers/mutations/bookmarks/index.ts

@@ -1,6 +1,6 @@
 import { URL } from 'url'
 import { UserInputError } from 'apollo-server-micro'
-import firebase from '~/graphql/api/firebase'
+import firebase from '~/graphql/services/firebase'
 import getBookmarkMetaData from './getBookmarkMetaData'
 
 function isValidUrl(string) {

src/graphql/resolvers/mutations/index.ts

@@ -0,0 +1,17 @@
+import { login, logout } from '~/graphql/resolvers/mutations/auth'
+import {
+  addBookmark,
+  editBookmark,
+  deleteBookmark,
+  addBookmarkReaction,
+} from '~/graphql/resolvers/mutations/bookmarks'
+import { requiresMe } from '~/graphql/helpers/requiresMe'
+
+export default {
+  login: login,
+  logout: logout,
+  addBookmark: requiresMe(addBookmark),
+  editBookmark: requiresMe(editBookmark),
+  deleteBookmark: requiresMe(deleteBookmark),
+  addBookmarkReaction: addBookmarkReaction,
+}

src/graphql/resolvers/bookmarks/index.ts → src/graphql/resolvers/queries/bookmarks/index.ts

@@ -1,4 +1,4 @@
-import firebase from '~/graphql/api/firebase'
+import firebase from '~/graphql/services/firebase'
 
 export async function getBookmarks() {
   const data = []

src/graphql/resolvers/queries/index.ts

@@ -0,0 +1,14 @@
+import { getBookmarks } from '~/graphql/resolvers/queries/bookmarks'
+import { getPosts, getPost } from '~/graphql/resolvers/queries/overthought'
+import { getEpisodes } from '~/graphql/resolvers/queries/podcast'
+import { getRepos } from '~/graphql/resolvers/queries/repos'
+import { isMe } from '~/graphql/resolvers/queries/isMe'
+
+export default {
+  bookmarks: getBookmarks,
+  episodes: getEpisodes,
+  posts: getPosts,
+  post: getPost,
+  repos: getRepos,
+  isMe: isMe,
+}

src/graphql/resolvers/overthought/index.ts → src/graphql/resolvers/queries/overthought/index.ts

@@ -1,4 +1,4 @@
-import { ghost } from '~/graphql/api/ghost'
+import { ghost } from '~/graphql/services/ghost'
 
 export async function getPosts(_, { first = 'all' }) {
   return await ghost.posts

src/pages/api/bookmarks/add.ts

@@ -2,7 +2,7 @@ import twilio from 'twilio'
 const MessagingResponse = twilio.twiml.MessagingResponse
 import { URL } from 'url'
 
-import db from '~/graphql/api/firebase'
+import db from '~/graphql/services/firebase'
 
 const stringIsAValidUrl = (s) => {
   try {

src/pages/api/graphql/index.ts

@@ -2,7 +2,7 @@ import { ApolloServer } from 'apollo-server-micro'
 import typeDefs from '~/graphql/typeDefs'
 import resolvers from '~/graphql/resolvers'
 import context from '~/graphql/context'
-import withCookies from '~/graphql/api/withCookies'
+import withCookies from '~/graphql/helpers/withCookies'
 
 const apolloServer = new ApolloServer({
   typeDefs,

src/pages/bookmarks.tsx

@@ -7,7 +7,7 @@ import BookmarksList from '~/components/Bookmarks'
 import { GET_BOOKMARKS } from '~/graphql/queries'
 import { useAuth } from '~/hooks/useAuth'
 import AddBookmark from '~/components/Bookmarks/AddBookmark'
-import { initApolloClient } from '~/graphql/api'
+import { initApolloClient } from '~/graphql/services/apollo'
 import { withApollo } from '~/components/withApollo'
 import Grid from '~/components/Grid'
 
@@ -51,6 +51,8 @@ export async function getStaticProps() {
   */
   const apolloStaticCache = client.cache.extract()
   return {
+    // because this data is slightly more dynamic, update it every hour
+    unstable_revalidate: 60 * 60,
     props: {
       apolloStaticCache,
     },

src/pages/design-details/[slug].tsx

@@ -4,11 +4,20 @@ import { NextSeo } from 'next-seo'
 import Page, { SectionHeading } from '~/components/Page'
 import { H1, Subheading } from '~/components/Typography'
 import designDetailsPosts from '~/data/appDissections'
-import { DesignDetailsPost } from '~/types'
 import DesignDetailView from '~/components/DesignDetailView'
 import DesignDetailsGrid from '~/components/DesignDetailsGrid'
+import { DesignDetail as PostType } from '~/components/DesignDetailMedia'
 
-type Props = {
+export interface DesignDetailsPost {
+  slug: string
+  title: string
+  description: string
+  createdAt: string
+  details: Array<PostType>
+  tint: string
+}
+
+interface Props {
   post: DesignDetailsPost
 }
 

src/pages/index.tsx

@@ -8,7 +8,7 @@ import PodcastEpisodesList from '~/components/PodcastEpisodesList'
 import FigmaPlugins from '~/components/FigmaPlugins'
 import { GET_HOME } from '~/graphql/queries'
 import { Post, Episode, Repo } from '~/graphql/types.generated'
-import { initApolloClient } from '~/graphql/api'
+import { initApolloClient } from '~/graphql/services/apollo'
 import Grid from '~/components/Grid'
 
 interface Props {
@@ -278,6 +278,8 @@ export async function getStaticProps() {
   const client = await initApolloClient({})
   const { data } = await client.query({ query: GET_HOME })
   return {
+    // because this data is slightly more dynamic, update it every hour
+    unstable_revalidate: 60 * 60,
     props: {
       data,
       apolloStaticCache: client.cache.extract(),

src/pages/overthought/[slug].tsx

@@ -4,7 +4,7 @@ import { GET_POST, GET_POSTS } from '~/graphql/queries'
 import Page from '~/components/Page'
 import PostContainer from '~/components/Overthought/Post'
 import NotFound from '~/components/Overthought/NotFound'
-import { initApolloClient } from '~/graphql/api'
+import { initApolloClient } from '~/graphql/services/apollo'
 
 interface Props {
   slug: string
@@ -48,6 +48,8 @@ export async function getStaticProps({ params: { slug } }) {
   })
 
   return {
+    // because this data is slightly more dynamic, update it every hour
+    unstable_revalidate: 60 * 60,
     props: {
       slug,
       data: {

src/pages/overthought/index.tsx

@@ -6,7 +6,7 @@ import OverthoughtSubscribeBox from '~/components/Overthought/Subscribe'
 import SEO from '~/components/Overthought/SEO'
 import OverthoughtList from '~/components/Overthought/List'
 import { GET_POSTS } from '~/graphql/queries'
-import { initApolloClient } from '~/graphql/api'
+import { initApolloClient } from '~/graphql/services/apollo'
 import Grid from '~/components/Grid'
 
 interface Props {
@@ -45,6 +45,8 @@ export async function getStaticProps() {
   const client = await initApolloClient({})
   const { data } = await client.query({ query: GET_POSTS })
   return {
+    // because this data is slightly more dynamic, update it every hour
+    unstable_revalidate: 60 * 60,
     props: {
       data,
     },