header refactor

src/app/[slug]/page.tsx

@@ -1,6 +1,7 @@
 import { Metadata, ResolvingMetadata } from 'next'
 import { notFound } from 'next/navigation'
 import meta from '../../../_content/meta.json'
+import Header from '../../components/Header'
 import Project from '../../components/Project'
 import ProjectNav from '../../components/ProjectNav'
 import {
@@ -44,6 +45,7 @@ export default async function ProjectPage({ params }: Props) {
 
   return (
     <>
+      <Header isSmall />
       <Project project={project} />
       <ProjectNav projects={projects} currentSlug={params.slug} />
     </>

src/app/__tests__/layout.test.tsx

@@ -19,6 +19,6 @@ describe('app: /layout', () => {
   it('renders correctly', async () => {
     render(<Layout>Hello</Layout>)
 
-    await screen.findByText(dataLocation.now.city)
+    await screen.findByText('Hello')
   })
 })

src/app/actions.ts

@@ -5,7 +5,9 @@ import { GiphyFetch } from '@giphy/js-fetch-api'
 
 export async function getLocation() {
   try {
-    const response = await fetch('https://location.kretschmann.io')
+    const response = await fetch('https://location.kretschmann.io', {
+      cache: 'no-store'
+    })
     if (!response.ok)
       throw new Error('Network response for location was not ok.')
 

src/app/layout.tsx

@@ -3,7 +3,6 @@ import { Metadata, Viewport } from 'next'
 import Script from 'next/script'
 import meta from '../../_content/meta.json'
 import Footer from '../components/Footer'
-import Header from '../components/Header'
 import HostnameCheck from '../components/HostnameCheck'
 import ThemeSwitch from '../components/ThemeSwitch'
 import { UMAMI_SCRIPT_URL, UMAMI_WEBSITE_ID } from '../lib/umami'
@@ -66,7 +65,6 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           <HostnameCheck allowedHosts={meta.allowedHosts} />
           <ThemeSwitch />
 
-          <Header />
           <main className={styles.screen}>{children}</main>
           <Footer />
         </Providers>

src/app/page.tsx

@@ -1,14 +1,18 @@
+import Header from '../components/Header'
 import Projects from '../components/Projects'
 import Repositories from '../components/Repositories'
 import { getAllProjects } from '../lib/content'
 import { getGithubRepos } from '../lib/github'
+import { getLocation } from './actions'
 
 export default async function IndexPage() {
   const projects = await getAllProjects(['title', 'images', 'slug'])
   const repos = await getGithubRepos()
+  const location = await getLocation()
 
   return (
     <>
+      <Header location={location} />
       <Projects projects={projects} />
       <Repositories repos={repos} />
     </>

src/components/Availability/index.tsx

@@ -1,12 +1,7 @@
-'use client'
-
-import { LazyMotion, domAnimation, m, useReducedMotion } from 'framer-motion'
 import meta from '../../../_content/meta.json'
-import { getAnimationProps, moveInBottom } from '../Transitions'
 import styles from './index.module.css'
 
 export default function Availability() {
-  const shouldReduceMotion = useReducedMotion()
   const { status, available, unavailable } = meta.availability
   const className = status
     ? `${styles.availability} ${styles.available}`
@@ -14,14 +9,8 @@ export default function Availability() {
   const html = status ? available : unavailable
 
   return (
-    <LazyMotion features={domAnimation}>
-      <m.section
-        variants={moveInBottom}
-        className={className}
-        {...getAnimationProps(shouldReduceMotion)}
-      >
-        <p dangerouslySetInnerHTML={{ __html: html }} />
-      </m.section>
-    </LazyMotion>
+    <section className={className}>
+      <p dangerouslySetInnerHTML={{ __html: html }} />
+    </section>
   )
 }

src/components/Header/index.module.css

@@ -2,6 +2,7 @@
   position: relative;
   padding: calc(var(--spacer) / 2);
   padding-top: 25vh;
+  margin-bottom: calc(var(--spacer) * 2);
   min-height: calc(85vh - var(--spacer));
   max-height: 1000px;
   text-align: center;

src/components/Header/index.test.tsx

@@ -1,20 +1,17 @@
 import { render, screen } from '@testing-library/react'
 import Header from '.'
+import { dataLocation } from '../../../tests/__fixtures__/location'
 
 describe('Header', () => {
   it('renders correctly', async () => {
-    render(<Header />)
+    render(<Header location={dataLocation} />)
 
     await screen.findByText('matthias kretschmann')
-    await screen.findAllByText('Lisbon')
+    await screen.findAllByText(dataLocation.now.city)
   })
 
   it('renders small', async () => {
-    jest.mock('next/navigation', () => ({
-      usePathname: jest.fn().mockImplementation(() => '/something')
-    }))
-
-    render(<Header />)
+    render(<Header isSmall />)
 
     expect(await screen.findByTestId('header')).toHaveClass('small')
   })

src/components/Header/index.tsx

@@ -1,16 +1,17 @@
-'use client'
-
-import { usePathname } from 'next/navigation'
 import Availability from '../Availability'
 import Location from '../Location'
+import { UseLocation } from '../Location/types'
 import LogoUnit from '../LogoUnit'
 import Networks from '../Networks'
 import styles from './index.module.css'
 
-export default function Header() {
-  const pathname = usePathname()
-  const isSmall = pathname !== '/'
-
+export default function Header({
+  location,
+  isSmall
+}: {
+  location?: UseLocation
+  isSmall?: boolean
+}) {
   return (
     <header
       className={`${styles.header} ${isSmall ? styles.small : ''}`}
@@ -19,7 +20,7 @@ export default function Header() {
       <LogoUnit small={isSmall} />
       {!isSmall ? <Networks label="Networks" /> : null}
       <div className={styles.meta}>
-        {!isSmall ? <Location /> : null}
+        {location ? <Location location={location} /> : null}
         {!isSmall ? <Availability /> : null}
       </div>
     </header>

src/components/Location/index.tsx

@@ -1,67 +1,42 @@
-'use client'
-
-import { useEffect, useState } from 'react'
 import RelativeTime from '@yaireo/relative-time'
-import { LazyMotion, domAnimation, m, useReducedMotion } from 'framer-motion'
-import { getLocation } from '../../app/actions'
-import { getAnimationProps, moveInTop } from '../Transitions'
 import { Flag } from './Flag'
 import styles from './index.module.css'
 import { UseLocation } from './types'
 
-export default function Location() {
-  const shouldReduceMotion = useReducedMotion()
-  const [location, setLocation] = useState<UseLocation>()
-
+export default function Location({ location }: { location: UseLocation }) {
   const isDifferentCountry = location?.now?.country !== location?.next?.country
   const relativeTime = new RelativeTime({ locale: 'en' })
 
-  useEffect(() => {
-    async function fetchData() {
-      const location = await getLocation()
-      if (!location) return
-      setLocation(location)
-    }
-    fetchData()
-  }, [])
-
   return (
     <div className={styles.wrapper}>
       {location?.now?.city ? (
-        <LazyMotion features={domAnimation}>
-          <m.section
-            aria-label="Location"
-            variants={moveInTop}
-            className={styles.location}
-            {...getAnimationProps(shouldReduceMotion)}
-          >
-            <Flag
-              country={{
-                code: location.now.country_code,
-                name: location.now.country
-              }}
-            />
-            {location.now.city} <span>Now</span>
-            <div className={styles.next}>
-              {location?.next?.city && (
-                <>
-                  {isDifferentCountry && (
-                    <Flag
-                      country={{
-                        code: location.next.country_code,
-                        name: location.next.country
-                      }}
-                    />
-                  )}
-                  {location.next.city}{' '}
-                  <span>
-                    {relativeTime.from(new Date(location.next.date_start))}
-                  </span>
-                </>
-              )}
-            </div>
-          </m.section>
-        </LazyMotion>
+        <section aria-label="Location" className={styles.location}>
+          <Flag
+            country={{
+              code: location.now.country_code,
+              name: location.now.country
+            }}
+          />
+          {location.now.city} <span>Now</span>
+          <div className={styles.next}>
+            {location?.next?.city && (
+              <>
+                {isDifferentCountry && (
+                  <Flag
+                    country={{
+                      code: location.next.country_code,
+                      name: location.next.country
+                    }}
+                  />
+                )}
+                {location.next.city}{' '}
+                <span>
+                  {relativeTime.from(new Date(location.next.date_start))}
+                </span>
+              </>
+            )}
+          </div>
+        </section>
       ) : null}
     </div>
   )

src/components/Location/types.ts

@@ -9,5 +9,4 @@ export type Location = {
 export type UseLocation = {
   now: Location
   next: Location
-  previous: Location
 }

src/styles/layout.module.css

@@ -1,5 +1,5 @@
 .screen {
-  margin: calc(var(--spacer) * 2) auto 0 auto;
+  margin: 0 auto;
   padding-left: 5vw;
   padding-right: 5vw;
 }

tests/__fixtures__/location.ts

@@ -3,11 +3,14 @@ export const dataLocation = {
     city: 'Lisbon',
     country: 'Portugal',
     country_code: 'PT',
-    date_start: '2021-10-01'
+    date_start: '2021-10-01',
+    date_end: '2021-11-01'
   },
   next: {
     city: 'Barcelona',
     country: 'Spain',
-    date_start: '2021-10-04'
+    country_code: 'ES',
+    date_start: '2021-12-04',
+    date_end: '2021-12-09'
   }
 }

tests/jest.setup.tsx

@@ -16,12 +16,6 @@ jest.mock('../src/app/actions', () => ({
     .mockImplementation(() => giphy.data.images.original.mp4)
 }))
 
-// jest.mock('@giphy/js-fetch-api', () => ({
-//   GiphyFetch: jest.fn().mockImplementation(() => ({
-//     random: jest.fn().mockImplementation(() => Promise.resolve(giphy))
-//   }))
-// }))
-
 const unmockedFetch = global.fetch
 const unmockedEnv = process.env