From f67d331416fac79cd6e3936f68872121592bc4e3 Mon Sep 17 00:00:00 2001
From: Divlo <contact@divlo.fr>
Date: Thu, 24 Mar 2022 18:57:27 +0100
Subject: [PATCH] fix: calculate age client side so it updates "automatically"
 (not only on rebuild)

---
 components/Head.tsx                      |  4 ++--
 components/Profile/ProfileList/index.tsx | 22 ++++++++--------------
 components/Profile/index.tsx             | 10 ++--------
 pages/404.tsx                            | 16 +++++-----------
 pages/500.tsx                            | 16 +++++-----------
 pages/index.tsx                          | 17 +++++------------
 utils/getAge.ts                          | 14 ++++++++------
 utils/getDefaultDescription.ts           |  3 ---
 8 files changed, 35 insertions(+), 67 deletions(-)
 delete mode 100644 utils/getDefaultDescription.ts

diff --git a/components/Head.tsx b/components/Head.tsx
index 795551a..5c617eb 100644
--- a/components/Head.tsx
+++ b/components/Head.tsx
@@ -3,7 +3,7 @@ import NextHead from 'next/head'
 interface HeadProps {
   title?: string
   image?: string
-  description: string
+  description?: string
   url?: string
 }
 
@@ -11,7 +11,7 @@ export const Head: React.FC<HeadProps> = (props) => {
   const {
     title = 'Divlo',
     image = 'https://divlo.fr/images/icons/icon-96x96.png',
-    description,
+    description = 'Divlo - Developer Full Stack Junior • Passionate about High-Tech',
     url = 'https://divlo.fr/'
   } = props
 
diff --git a/components/Profile/ProfileList/index.tsx b/components/Profile/ProfileList/index.tsx
index 82fa3f0..f450840 100644
--- a/components/Profile/ProfileList/index.tsx
+++ b/components/Profile/ProfileList/index.tsx
@@ -1,29 +1,23 @@
 import useTranslation from 'next-translate/useTranslation'
+import { useMemo } from 'react'
 
-import {
-  DIVLO_BIRTHDAY_DAY,
-  DIVLO_BIRTHDAY_MONTH,
-  DIVLO_BIRTHDAY_YEAR
-} from 'utils/getAge'
+import { DIVLO_BIRTHDAY, DIVLO_BIRTHDAY_DATE, getAge } from 'utils/getAge'
 
 import { ProfileItem } from './ProfileItem'
 
-export interface ProfileListProps {
-  age: number
-}
-
-export const ProfileList: React.FC<ProfileListProps> = (props) => {
-  const { age } = props
+export const ProfileList: React.FC = () => {
   const { t } = useTranslation('home')
 
+  const age = useMemo(() => {
+    return getAge(DIVLO_BIRTHDAY)
+  }, [])
+
   return (
     <ul className='m-0 list-none p-0'>
       <ProfileItem title={t('home:about.full-name')} value='Théo LUDWIG' />
       <ProfileItem
         title={t('home:about.birth-date')}
-        value={`${DIVLO_BIRTHDAY_DAY}/${DIVLO_BIRTHDAY_MONTH}/${DIVLO_BIRTHDAY_YEAR} (${age} ${t(
-          'home:about.years-old'
-        )})`}
+        value={`${DIVLO_BIRTHDAY_DATE} (${age} ${t('home:about.years-old')})`}
       />
       <ProfileItem title={t('home:about.nationality')} value='Alsace, France' />
       <ProfileItem
diff --git a/components/Profile/index.tsx b/components/Profile/index.tsx
index 4b7538f..6b67572 100644
--- a/components/Profile/index.tsx
+++ b/components/Profile/index.tsx
@@ -3,19 +3,13 @@ import { ProfileInformation } from './ProfileInfo'
 import { ProfileList } from './ProfileList'
 import { ProfileLogo } from './ProfileLogo'
 
-export interface ProfileProps {
-  age: number
-}
-
-export const Profile: React.FC<ProfileProps> = (props) => {
-  const { age } = props
-
+export const Profile: React.FC = () => {
   return (
     <div className='flex flex-col items-center justify-center px-10 pt-2 md:flex-row md:pt-10'>
       <ProfileLogo />
       <div>
         <ProfileInformation />
-        <ProfileList age={age} />
+        <ProfileList />
         <ProfileDescriptionBottom />
       </div>
     </div>
diff --git a/pages/404.tsx b/pages/404.tsx
index fa88b1e..7c0bca1 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -5,20 +5,16 @@ import { ErrorPage } from 'components/ErrorPage'
 import { Head } from 'components/Head'
 import { Header } from 'components/Header'
 import { Footer, FooterProps } from 'components/Footer'
-import { getDefaultDescription } from 'utils/getDefaultDescription'
-import { DIVLO_BIRTHDAY, getAge } from 'utils/getAge'
 
-interface Error404Props extends FooterProps {
-  description: string
-}
+interface Error404Props extends FooterProps {}
 
 const Error404: NextPage<Error404Props> = (props) => {
   const { t } = useTranslation()
-  const { version, description } = props
+  const { version } = props
 
   return (
     <>
-      <Head title='404 | Divlo' description={description} />
+      <Head title='404 | Divlo' />
 
       <Header showLanguage />
       <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
@@ -29,12 +25,10 @@ const Error404: NextPage<Error404Props> = (props) => {
   )
 }
 
-export const getStaticProps: GetStaticProps<FooterProps> = async () => {
+export const getStaticProps: GetStaticProps<Error404Props> = async () => {
   const { readPackage } = await import('read-pkg')
   const { version } = await readPackage()
-  const age = getAge(DIVLO_BIRTHDAY)
-  const description = getDefaultDescription(age)
-  return { props: { version, description } }
+  return { props: { version } }
 }
 
 export default Error404
diff --git a/pages/500.tsx b/pages/500.tsx
index ef74324..f3d0a16 100644
--- a/pages/500.tsx
+++ b/pages/500.tsx
@@ -5,20 +5,16 @@ import { ErrorPage } from 'components/ErrorPage'
 import { Head } from 'components/Head'
 import { Header } from 'components/Header'
 import { Footer, FooterProps } from 'components/Footer'
-import { getDefaultDescription } from 'utils/getDefaultDescription'
-import { DIVLO_BIRTHDAY, getAge } from 'utils/getAge'
 
-interface Error500Props extends FooterProps {
-  description: string
-}
+interface Error500Props extends FooterProps {}
 
 const Error500: NextPage<Error500Props> = (props) => {
   const { t } = useTranslation()
-  const { version, description } = props
+  const { version } = props
 
   return (
     <>
-      <Head title='500 | Divlo' description={description} />
+      <Head title='500 | Divlo' />
 
       <Header showLanguage />
       <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
@@ -29,12 +25,10 @@ const Error500: NextPage<Error500Props> = (props) => {
   )
 }
 
-export const getStaticProps: GetStaticProps<FooterProps> = async () => {
+export const getStaticProps: GetStaticProps<Error500Props> = async () => {
   const { readPackage } = await import('read-pkg')
   const { version } = await readPackage()
-  const age = getAge(DIVLO_BIRTHDAY)
-  const description = getDefaultDescription(age)
-  return { props: { version, description } }
+  return { props: { version } }
 }
 
 export default Error500
diff --git a/pages/index.tsx b/pages/index.tsx
index 026c967..c8a6568 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -12,26 +12,21 @@ import { Skills } from 'components/Skills'
 import { OpenSource } from 'components/OpenSource'
 import { Header } from 'components/Header'
 import { Footer, FooterProps } from 'components/Footer'
-import { getDefaultDescription } from 'utils/getDefaultDescription'
-import { DIVLO_BIRTHDAY, getAge } from 'utils/getAge'
 
-interface HomeProps extends FooterProps {
-  description: string
-  age: number
-}
+interface HomeProps extends FooterProps {}
 
 const Home: NextPage<HomeProps> = (props) => {
   const { t } = useTranslation()
-  const { version, description, age } = props
+  const { version } = props
 
   return (
     <>
-      <Head description={description} />
+      <Head />
 
       <Header showLanguage />
       <main className='flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl'>
         <Section isMain id='about'>
-          <Profile age={age} />
+          <Profile />
           <SocialMediaList />
         </Section>
 
@@ -79,9 +74,7 @@ const Home: NextPage<HomeProps> = (props) => {
 export const getStaticProps: GetStaticProps<HomeProps> = async () => {
   const { readPackage } = await import('read-pkg')
   const { version } = await readPackage()
-  const age = getAge(DIVLO_BIRTHDAY)
-  const description = getDefaultDescription(age)
-  return { props: { version, description, age } }
+  return { props: { version } }
 }
 
 export default Home
diff --git a/utils/getAge.ts b/utils/getAge.ts
index 467cbe8..ff09051 100644
--- a/utils/getAge.ts
+++ b/utils/getAge.ts
@@ -1,9 +1,11 @@
-export const DIVLO_BIRTHDAY_DAY = '31'
-export const DIVLO_BIRTHDAY_MONTH = '03'
-export const DIVLO_BIRTHDAY_YEAR = '2003'
-export const DIVLO_BIRTHDAY = new Date(
-  `${DIVLO_BIRTHDAY_YEAR}-${DIVLO_BIRTHDAY_MONTH}-${DIVLO_BIRTHDAY_DAY}`
-)
+export const DIVLO_BIRTHDAY_DAY = '31' as const
+export const DIVLO_BIRTHDAY_MONTH = '03' as const
+export const DIVLO_BIRTHDAY_YEAR = '2003' as const
+export const DIVLO_BIRTHDAY_DATE =
+  `${DIVLO_BIRTHDAY_DAY}/${DIVLO_BIRTHDAY_MONTH}/${DIVLO_BIRTHDAY_YEAR}` as const
+export const DIVLO_BIRTHDAY_DATE_ISO_8061 =
+  `${DIVLO_BIRTHDAY_YEAR}-${DIVLO_BIRTHDAY_MONTH}-${DIVLO_BIRTHDAY_DAY}` as const
+export const DIVLO_BIRTHDAY = new Date(DIVLO_BIRTHDAY_DATE_ISO_8061)
 
 /**
  * Calculates the age of a person based on their birth date
diff --git a/utils/getDefaultDescription.ts b/utils/getDefaultDescription.ts
deleted file mode 100644
index a533c0c..0000000
--- a/utils/getDefaultDescription.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const getDefaultDescription = (age: number): string => {
-  return `I'm Divlo, I'm ${age} years old, I'm from France - Developer Full Stack Junior • Passionate about High-Tech`
-}