Refactor authors loading

#292
bright · May 18, 2021 · c429c51 · c429c51
1 parent 484441d
commit c429c51
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 51 deletions.
diff --git a/src/components/subcomponents/TeamMembers.tsx b/src/components/subcomponents/TeamMembers.tsx
@@ -3,6 +3,7 @@ import React from "react"
 import styled from "styled-components"
 import { routeLinks } from '../../config/routing'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image'
+import { useAuthors } from '../../use-authors/use-authors'
 
 const TeamMember = styled.article`
   border: 1px solid rgba(0, 0, 0, 0.125);
@@ -69,45 +70,20 @@ const Container = styled.div`
   margin-bottom: 122px;
 `
 const TeamMembers = () => {
-  const {
-    allMarkdownRemark: { nodes },
-  } = useStaticQuery(graphql`
-    query {
-      allMarkdownRemark(
-        filter: { frontmatter: { ex: { ne: true }, author_id: { ne: null } } }
-        sort: { fields: frontmatter___author_id }
-      ) {
-        nodes {
-          frontmatter {
-            avatar {
-                childImageSharp {
-                    gatsbyImageData
-                }
-            }
-            author_id
-            name
-            short_name
-            slug
-            bio
-            hobby
-          }
-        }
-      }
-    }
-  `)
+  const members = useAuthors()
+
   return (
     <Container>
-      {nodes.map(v => {
-        const member = v.frontmatter
+      {members.map(member => {
         return (
-          <TeamMember key={member.author_id}>
-            <Link to={`${routeLinks.aboutUs}/${member.slug || member.author_id}`}>
+          <TeamMember key={member.authorId}>
+            <Link to={routeLinks.aboutUs(member)}>
               <figure>
                 <GatsbyImage image={getImage(member.avatar)!} alt={member.name} />
               </figure>
               <div>
                 <p>
-                  <strong>{member.short_name}</strong>
+                  <strong>{member.shortName}</strong>
                 </p>
                 <p>{member.bio}</p>
                 <p>{member?.hobby}</p>

diff --git a/src/config/routing.ts b/src/config/routing.ts
@@ -1,9 +1,17 @@
 export const routeLinks = {
-  aboutUs: '/about-us',
+  aboutUs(params?: { authorId: string } | { page: 'story' | 'values' | 'team' }) {
+    if (!params) {
+      return `/about-us/`
+    }
+    if ('authorId' in params) {
+      return `/about-us/${params.authorId}/`
+    }
+    return `/about-us/${params.page}/`
+  },
   whatWeOffer: '/what-we-offer',
   projects: '/projects',
   career: '/career',
   blog: '/blog',
   startProject: '/start-project',
-  privacyPolicy: '/privacy-policy'
-}
+  privacyPolicy: '/privacy-policy',
+}
diff --git a/src/layout/Footer.tsx b/src/layout/Footer.tsx
@@ -22,7 +22,7 @@ export const Footer = () => {
               </a>
             </div>
             <SocialIcons className='padded-right' />
-            {/* 
+            {/*
             <div
               className='clutch-widget content'
               data-url='https://widget.clutch.co'
@@ -48,7 +48,7 @@ export const Footer = () => {
               explore more
             </h6>
             <p className='content'>
-              <a href={routeLinks.aboutUs}>about us</a>
+              <a href={routeLinks.aboutUs()}>about us</a>
             </p>
             <p className='content'>
               <a href={routeLinks.whatWeOffer}>what we offer</a>

diff --git a/src/layout/TopNavigation.tsx b/src/layout/TopNavigation.tsx
@@ -15,7 +15,7 @@ export interface MenuElement {
 }
 
 const TopMenu: MenuElement[] = [
-  { link: `${routeLinks.aboutUs}/story`, title: 'why us' },
+  { link: routeLinks.aboutUs({page: 'story'}), title: 'why us' },
   { link: routeLinks.whatWeOffer, title: 'what we do' },
   { link: routeLinks.projects, title: 'case studies' },
   { link: routeLinks.career, title: 'career' },

diff --git a/src/pages/about-us/index.tsx b/src/pages/about-us/index.tsx
@@ -25,7 +25,7 @@ const AboutUsPage: React.FC = ({ children }) => (
           {tabs.map(tab => (
             <Link
               activeClassName="is-active"
-              to={`${routeLinks.aboutUs}/${tab.path}`}
+              to={routeLinks.aboutUs({page: tab.path})}
               partiallyActive
               key={tab.label}
             >

diff --git a/src/templates/AboutUsTemplate.tsx b/src/templates/AboutUsTemplate.tsx
@@ -49,7 +49,7 @@ export default function Template({
               <p dangerouslySetInnerHTML={{ __html: html }}></p>
             </div>
           </div>
-          <BackButton url={`${routeLinks.aboutUs}/team`} label="About us"/>
+          <BackButton url={routeLinks.aboutUs({page: 'team'})} label="About us"/>
         </article>
       </div>
       {/*

diff --git a/src/templates/post/AuthorData.tsx b/src/templates/post/AuthorData.tsx
@@ -13,7 +13,7 @@ export const AuthorData: React.FC<AuthorDataProps> = ({ authorId }) => {
   const [{ avatar, name, bio }] = authorId ? useAuthors({ authorId, avatarSize: { width: 64 } }) : []
 
   const LinkComponent = authorId
-    ? (props: { children?: ReactNode }) => <Link to={`${routeLinks.aboutUs}/${authorId}`}>{props.children}</Link>
+    ? (props: { children?: ReactNode }) => <Link to={routeLinks.aboutUs({ authorId })}>{props.children}</Link>
     : (props: { children?: ReactNode }) => <span>{props.children}</span>
 
   return (

diff --git a/src/use-authors/authors-frontmatter-query-result.ts b/src/use-authors/authors-frontmatter-query-result.ts
@@ -5,25 +5,25 @@ interface AuthorsFrontmatterItem {
   avatar: IGatsbyImageData
   bio: string
   name: string
+  short_name: string
+  hobby: string | undefined
   web: string | undefined
 }
 
-export interface Author {
-  authorId: string
-  name: string
-  bio: string
-  avatar: IGatsbyImageData
-}
-
 function toAuthor(frontmatter: AuthorsFrontmatterItem) {
   return {
     authorId: frontmatter.author_id,
     bio: frontmatter.bio,
+    web: frontmatter.web,
     avatar: frontmatter.avatar,
     name: frontmatter.name,
+    shortName: frontmatter.short_name,
+    hobby: frontmatter.hobby,
   }
 }
 
+export type Author = ReturnType<typeof toAuthor>
+
 export function toAuthors(queryResult: AuthorsFrontmatterQueryResult): Author[] {
   return queryResult.allMarkdownRemark.nodes.map(({ frontmatter }) => toAuthor(frontmatter))
 }

diff --git a/src/use-authors/use-authors-avatar-default.ts b/src/use-authors/use-authors-avatar-default.ts
@@ -0,0 +1,30 @@
+import { graphql, useStaticQuery } from 'gatsby'
+import { AuthorsFrontmatterQueryResult, toAuthors } from './authors-frontmatter-query-result'
+
+const useAuthorsAvatarsDefaultQuery: () => AuthorsFrontmatterQueryResult = () =>
+  useStaticQuery(graphql`
+    {
+      allMarkdownRemark(
+        filter: { frontmatter: { author_id: { ne: null } } }
+        sort: { fields: frontmatter___author_id }
+      ) {
+        nodes {
+          frontmatter {
+            author_id
+            avatar {
+              childImageSharp {
+                gatsbyImageData
+              }
+            }
+            name
+            short_name
+            slug
+            bio
+            hobby
+          }
+        }
+      }
+    }
+  `)
+
+export const useAuthorsAvatarsDefault = () => toAuthors(useAuthorsAvatarsDefaultQuery())
diff --git a/src/use-authors/use-authors.ts b/src/use-authors/use-authors.ts
@@ -1,9 +1,10 @@
 import { Author } from './authors-frontmatter-query-result'
 import { useAuthorsAvatars64 } from './use-authors-avatar-64'
+import { useAuthorsAvatarsDefault } from './use-authors-avatar-default'
 
 type UseAuthorsParams = {
   authorId?: string
-  avatarSize: { width: 64 }
+  avatarSize?: { width: 64 }
 }
 
 function toAuthorsFilter(props: UseAuthorsParams) {
@@ -13,13 +14,16 @@ function toAuthorsFilter(props: UseAuthorsParams) {
   return () => false
 }
 
-export const useAuthors = (props: UseAuthorsParams) => {
+export const useAuthors = (props: UseAuthorsParams = {}) => {
   let data: Author[]
 
-  switch (props.avatarSize.width) {
+  switch (props.avatarSize?.width) {
     case 64:
-    default:
       data = useAuthorsAvatars64()
+      break;
+    default:
+      data = useAuthorsAvatarsDefault()
+      break;
   }
 
   const authorsFilter = toAuthorsFilter(props)