From 3a2e2a9175752055abdfe44e8dfd97e241f0b017 Mon Sep 17 00:00:00 2001
From: Viet Nguyen <3805254+vnugent@users.noreply.github.com>
Date: Sun, 29 Oct 2023 21:46:02 -0700
Subject: [PATCH] Add international toc to home page (#1002)

* feat: add international toc
* fix: logo on old nav should be a pointer
---
 src/app/components/InternationalToC.tsx    | 38 +++++++++++++++++++
 src/app/components/USAToC.tsx              | 24 +++++++-----
 src/app/components/international-data.ts   | 43 ++++++++++++++++++++++
 src/app/components/ui/SectionContainer.tsx | 15 ++++++++
 src/app/page.tsx                           |  2 +
 src/components/DesktopAppBar.tsx           |  2 +-
 6 files changed, 114 insertions(+), 10 deletions(-)
 create mode 100644 src/app/components/InternationalToC.tsx
 create mode 100644 src/app/components/international-data.ts
 create mode 100644 src/app/components/ui/SectionContainer.tsx

diff --git a/src/app/components/InternationalToC.tsx b/src/app/components/InternationalToC.tsx
new file mode 100644
index 000000000..20bc8290f
--- /dev/null
+++ b/src/app/components/InternationalToC.tsx
@@ -0,0 +1,38 @@
+import Link from 'next/link'
+import { SectionContainer } from './ui/SectionContainer'
+import { INTERNATIONAL_DATA, ToCCountry } from './international-data'
+import { ToCAreaEntry } from './USAToC'
+
+/**
+ * International table of content
+ */
+export const InternationalToC: React.FC = () => {
+  return (
+    <SectionContainer header={<h2>International</h2>}>
+      <div className='columns-3xs gap-x-10'>
+        {
+          INTERNATIONAL_DATA.map(country =>
+            <CountryCard key={country.uuid} country={country} />
+          )
+        }
+      </div>
+    </SectionContainer>
+  )
+}
+
+const CountryCard: React.FC<{ country: ToCCountry }> = ({ country }) => {
+  const { areaName, uuid, children } = country
+  return (
+    <div className='mb-10 break-inside-avoid-column break-inside-avoid'>
+      <Link href={`/crag/${uuid}`}>
+        <span className=' font-semibold'>{areaName}</span>
+      </Link>
+      <hr className='mb-2 border-1 border-base-content/60' />
+      <div className='flex flex-col'>
+        {
+          children.map(area => <ToCAreaEntry key={area.uuid} {...area} />)
+        }
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/components/USAToC.tsx b/src/app/components/USAToC.tsx
index 3a32800f8..101911fa2 100644
--- a/src/app/components/USAToC.tsx
+++ b/src/app/components/USAToC.tsx
@@ -1,16 +1,20 @@
 import Link from 'next/link'
 import { ArrowRightCircleIcon } from '@heroicons/react/24/solid'
 import { getUSATableOfContent } from '@/js/graphql/getPopularAreasUSA'
-
+import { SectionContainer } from './ui/SectionContainer'
 /**
  * USA table of content
  */
 export const USAToC: React.FC = async () => {
   const toc = await getUSATableOfContent()
   return (
-    <section className='block w-full px-4 2xl:px-0 mx-auto max-w-5xl xl:max-w-7xl'>
-      <Link href='/crag/1db1e8ba-a40e-587c-88a4-64f5ea814b8e' className='flex flex-row items-center gap-2'><h2>USA</h2><ArrowRightCircleIcon className='w-4 h-4' /></Link>
-      <hr className='mb-6 border-2 border-base-content' />
+    <SectionContainer
+      header={
+        <Link href='/crag/1db1e8ba-a40e-587c-88a4-64f5ea814b8e' className='flex flex-row items-center gap-2'>
+          <h2>USA</h2><ArrowRightCircleIcon className='w-4 h-4' />
+        </Link>
+      }
+    >
       <div className='columns-3xs gap-x-10'>
         {Array.from(toc.values()).map(state => {
           const { name, uuid, totalClimbs, areas } = state
@@ -24,15 +28,17 @@ export const USAToC: React.FC = async () => {
               </Link>
               <hr className='mb-2 border-1 border-base-content/60' />
               <div className='flex flex-col'>
-                {areas.map(area => {
-                  const { uuid, areaName } = area
-                  return (<Link key={uuid} className='text-xs hover:underline' href={`/crag/${uuid}`} prefetch={false}>{areaName}</Link>)
-                })}
+                {
+                  areas.map((area) => <ToCAreaEntry key={area.uuid} {...area} />)
+                }
               </div>
             </div>
           )
         })}
       </div>
-    </section>
+    </SectionContainer>
   )
 }
+
+export const ToCAreaEntry: React.FC<{ uuid: string, areaName: string }> =
+  ({ uuid, areaName }) => (<Link key={uuid} className='text-xs hover:underline' href={`/crag/${uuid}`} prefetch={false}>{areaName}</Link>)
diff --git a/src/app/components/international-data.ts b/src/app/components/international-data.ts
new file mode 100644
index 000000000..e8312d2fc
--- /dev/null
+++ b/src/app/components/international-data.ts
@@ -0,0 +1,43 @@
+import { AreaType } from '@/js/types'
+
+export type ToCArea = Pick<AreaType, 'uuid' | 'areaName'>
+export type ToCCountry = Pick<AreaType, 'uuid' | 'areaName'> & {
+  children: ToCArea[]
+}
+
+export const INTERNATIONAL_DATA: ToCCountry[] = [
+  {
+    areaName: 'Canada',
+    uuid: '2996145f-e1ba-5b56-9da8-30c64ccc3776',
+    children: [{
+      uuid: 'a354b580-870b-5444-9f11-2c0e78995841',
+      areaName: 'Squamish'
+    },
+    {
+      uuid: '4624f40a-b644-5256-9287-aa19002ce00f',
+      areaName: 'Powell River'
+    },
+    {
+      uuid: 'a33bf360-9bf1-5d0f-b082-9ef3a51aa231',
+      areaName: 'Skaha'
+    },
+    {
+      uuid: '26913742-ffc5-5c8f-834b-7f0cd1b58d81',
+      areaName: 'The Bugaboos'
+    },
+    {
+      uuid: 'fa6ebe07-759f-5a35-b715-c39bbb8424d2',
+      areaName: 'Lake Louise'
+    }
+    ]
+  },
+  {
+    areaName: 'South Africa',
+    uuid: '1d33c773-e381-5b8a-a13f-3dfd7991732b',
+    children: [{
+      uuid: '4ed6c976-ee02-564a-801e-20ccc10e6e26',
+      areaName: 'Rocklands'
+    }
+    ]
+  }
+]
diff --git a/src/app/components/ui/SectionContainer.tsx b/src/app/components/ui/SectionContainer.tsx
new file mode 100644
index 000000000..f3a960d88
--- /dev/null
+++ b/src/app/components/ui/SectionContainer.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from 'react'
+
+interface Props {
+  header: ReactNode
+  children: ReactNode
+}
+export const SectionContainer: React.FC<Props> = ({ header, children }) => {
+  return (
+    <section className='block w-full px-4 2xl:px-0 mx-auto max-w-5xl xl:max-w-7xl'>
+      {header}
+      <hr className='mb-6 border-2 border-base-content' />
+      {children}
+    </section>
+  )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fe0b1f495..849e01e2f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,6 +5,7 @@ import { RecentEdits, RecentEditsSkeleton } from './components/RecentEdits'
 import { FinancialContributors } from './components/FinancialContributors'
 import { RecentTags } from './components/RecentTags'
 import { USAToC } from './components/USAToC'
+import { InternationalToC } from './components/InternationalToC'
 
 /**
  * Cache duration in seconds
@@ -30,6 +31,7 @@ export default async function Home (): Promise<any> {
         </div>
       </div>
       <RecentTags />
+      <InternationalToC />
       <USAToC />
       <FinancialContributors />
     </div>
diff --git a/src/components/DesktopAppBar.tsx b/src/components/DesktopAppBar.tsx
index 51226b308..6525ddb71 100644
--- a/src/components/DesktopAppBar.tsx
+++ b/src/components/DesktopAppBar.tsx
@@ -32,7 +32,7 @@ export default function DesktopAppBar ({ showFilterBar = true }: DesktopAppBarPr
     <header className='sticky top-0 z-10'>
       <DesktopNavBar
         branding={
-          <Link href='/' legacyBehavior>
+          <Link href='/'>
             <LogoWithText className='h-[36px]' />
           </Link>
       }