feat: add another query to get all states & stats

OpenBeta · Oct 23, 2023 · 4ce3d3b · 4ce3d3b
1 parent c1a43b2
commit 4ce3d3b
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 21 deletions.
diff --git a/src/app/components/DesktopHeader.tsx b/src/app/components/DesktopHeader.tsx
@@ -49,7 +49,21 @@ export const DesktopHeader: React.FC = () => {
     <GitHubStars key='gh-button' />
   )
 
-  const nav = status === 'authenticated' ? <ProfileNavButton isMobile={false} /> : unauthenticatedMenu
+  let nav
+  switch (status) {
+    case 'authenticated':
+      nav = <ProfileNavButton isMobile={false} />
+      break
+    case 'loading':
+      nav = (
+        <>
+          <div className='rounded-btn bg-base-200 opacity-20 w-16 h-10' />
+        </>
+      )
+      break
+    default:
+      nav = unauthenticatedMenu
+  }
 
   return (
     <header className='hidden lg:flex items-center justify-between'>

diff --git a/src/app/global.css b/src/app/global.css
@@ -7,6 +7,13 @@
   @apply hidden !important;
 }
 
+body,
+html {
+  height: 100%;
+  font-size: 16px;
+  @apply font-sans text-base text-base-content;
+}
+
 h1 {
     @apply text-base-content text-4xl lg:text-5xl tracking-tight mb-4;
 }

diff --git a/src/app/header.tsx b/src/app/header.tsx
@@ -14,7 +14,7 @@ export default async function Header (): Promise<any> {
 
 export const Logo: React.FC = () => {
   return (
-    <Link href='/' className='' legacyBehavior>
+    <Link href='/'>
       <OpenBetaLogo />
     </Link>
   )

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,11 +1,12 @@
+import '../../public/fonts/fonts.css'
 import './global.css'
 import Header from './header'
 import Footer from './footer'
 import { NextAuthProvider } from './components/NextAuthProvider'
 
 export const metadata = {
-  title: 'Next.js',
-  description: 'Generated by Next.js'
+  title: 'OpenBeta',
+  description: 'Free rock climbing catalog'
 }
 
 export default function RootLayout ({

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -15,23 +15,27 @@ const USAToC: React.FC = async () => {
     <div className='px-4 2xl:px-0 mx-auto max-w-5xl xl:max-w-7xl'>
       <h2>USA</h2>
       <hr className='mb-6 border-2 border-base-content' />
-      <div className='columns-2xs gap-x-8'>
+      <div className='columns-3xs gap-x-10'>
         {Array.from(toc.values()).map(state => {
-          const { name, uuid, areas } = state
+          const { name, uuid, totalClimbs, areas } = state
           return (
             <div key={name} className='mb-10 break-inside-avoid-column break-inside-avoid'>
-              <Link href={uuid == null ? '#' : `/crag/${uuid}`} className='font-semibold'>{name}</Link>
+              <Link href={`/crag/${uuid}`} className='flex items-end justify-between'>
+                <span className=' font-semibold'>{name}</span>
+                <span className='text-xs text-base-content/80'>
+                  {new Intl.NumberFormat().format(totalClimbs)}
+                </span>
+              </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 ' href={`/crag/${uuid}`} prefetch={false}>{areaName}</Link>)
+                  return (<Link key={uuid} className='text-xs hover:underline' href={`/crag/${uuid}`} prefetch={false}>{areaName}</Link>)
                 })}
               </div>
             </div>
           )
         })}
-        {/* {JSON.stringify(popularInUSA.areas, null, 2)} */}
       </div>
     </div>
   )

diff --git a/src/js/graphql/getPopularAreasUSA.ts b/src/js/graphql/getPopularAreasUSA.ts
@@ -2,14 +2,24 @@ import { gql } from '@apollo/client'
 
 import { FRAGMENT_MEDIA_WITH_TAGS } from './gql/tags'
 import { graphqlClient } from './Client'
-import { IndexResponseType, AreaType } from '../types'
+import { AreaType } from '../types'
 
 /**
- * Get high density areas in the US
+ * - Get all US states
+ * - Get high density areas in the US
  */
 const query = gql`
   ${FRAGMENT_MEDIA_WITH_TAGS}
   query UsaAreas( $filter: Filter) {
+    area(uuid: "1db1e8ba-a40e-587c-88a4-64f5ea814b8e") {
+      totalClimbs
+      uuid
+      children {
+        areaName
+        uuid
+        totalClimbs
+      }
+    }
     areas(filter: $filter, sort: { totalClimbs: -1 }) {
       id
       uuid
@@ -54,18 +64,32 @@ const query = gql`
     }
   }`
 
-export const getPopularAreasInUSA = async (): Promise<IndexResponseType> => {
-  const rs = await graphqlClient.query<IndexResponseType>({
+interface StateSimpleStatsProps {
+  /** State name */
+  areaName: string
+  uuid: string
+  totalClimbs: number
+}
+export interface USAToCProps {
+  area: {
+    uuid: string
+    children: StateSimpleStatsProps[]
+  }
+  areas: AreaType[]
+}
+
+export const getPopularAreasInUSA = async (): Promise<USAToCProps> => {
+  const rs = await graphqlClient.query<USAToCProps>({
     query,
     variables: {
       filter: {
         field_compare: [{
           field: 'totalClimbs',
-          num: 400,
+          num: 200,
           comparison: 'gt'
         }, {
           field: 'density',
-          num: 0.5,
+          num: 0.8,
           comparison: 'gt'
         }]
       }
@@ -74,11 +98,10 @@ export const getPopularAreasInUSA = async (): Promise<IndexResponseType> => {
   return rs.data
 }
 
-const US_STATES = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
-
 export interface StateDataProps {
   name: string
-  uuid?: string
+  uuid: string
+  totalClimbs: number
   areas: AreaType[]
 }
 
@@ -87,9 +110,15 @@ export const getUSATableOfContent = async (): Promise<Map<string, StateDataProps
 
   const stateMap = new Map<string, StateDataProps>()
 
-  for (const state of US_STATES) {
-    stateMap.set(state.toLowerCase(), {
-      name: state,
+  for (const state of highDensityList.area.children) {
+    const { areaName, totalClimbs, uuid } = state
+    if (process.env.NEXT_PUBLIC_TEST_AREA_IDS?.match(uuid) != null) {
+      continue
+    }
+    stateMap.set(state.areaName.toLowerCase(), {
+      name: areaName,
+      totalClimbs,
+      uuid,
       areas: []
     })
   }