dependency bump

gregrickaby · Feb 12, 2024 · f62f88b · f62f88b
1 parent 7f1c46a
commit f62f88b
Show file tree

Hide file tree

Showing 21 changed files with 1,112 additions and 672 deletions.
diff --git a/.prettierignore b/.prettierignore
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,13 +7,23 @@
   "editor.formatOnSave": true,
   "eslint.format.enable": false,
   "eslint.run": "onSave",
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "javascript.suggest.autoImports": true,
+  "javascript.updateImportsOnFileMove.enabled": "always",
   "typescript.suggest.autoImports": true,
   "typescript.updateImportsOnFileMove.enabled": "always",
+  "[typescript]": {
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": "explicit"
+    }
+  },
   "[typescriptreact]": {
     "editor.codeActionsOnSave": {
       "source.organizeImports": "explicit"
     }
+  },
+  "[typescript][typescriptreact]": {
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": "explicit"
+    }
   }
 }
diff --git a/app/(weather)/weather.css b/app/(weather)/weather.css
@@ -53,7 +53,9 @@
        * Create a mask on top, creating the illusion of a border.
        * @see https://developer.mozilla.org/en-US/docs/Web/CSS/mask
        */
-      mask: conic-gradient(#fff 0 0) content-box, conic-gradient(#fff 0 0);
+      mask:
+        conic-gradient(#fff 0 0) content-box,
+        conic-gradient(#fff 0 0);
       mask-composite: exclude;
     }
   }

diff --git a/app/(weather)/wx-client/layout.tsx b/app/(weather)/wx-client/layout.tsx
@@ -3,9 +3,11 @@ import Search from '@/components/wx-client/Search'
 import Settings from '@/components/wx-client/Settings'
 import WeatherProvider from '@/components/wx-client/WeatherProvider'
 import config from '@/lib/config'
-import {ReactChildren} from '@/lib/types'
 import type {Metadata} from 'next'
+import {Suspense} from 'react'
 import '../weather.css'
+import Loading from './loading'
+import Page from './page'
 
 /**
  * Default metadata.
@@ -22,11 +24,13 @@ export const metadata: Metadata = {
  *
  * @see https://nextjs.org/docs/app/api-reference/file-conventions/layout
  */
-export default function WeatherLayout({children}: ReactChildren) {
+export default function WeatherLayout() {
   return (
     <WeatherProvider>
       <Search />
-      <section>{children}</section>
+      <Suspense fallback={<Loading />}>
+        <Page />
+      </Suspense>
       <Settings />
     </WeatherProvider>
   )

diff --git a/app/(weather)/wx-client/page.tsx b/app/(weather)/wx-client/page.tsx
@@ -1,10 +1,103 @@
-import DisplayWeather from '@/components/wx-client/DisplayWeather'
+'use client'
 
-export const runtime = 'edge'
+import {useWeatherContext} from '@/components/wx-client/WeatherProvider'
+import {
+  formatDate,
+  formatDistance,
+  formatSpeed,
+  formatTemp,
+  getTempColor
+} from '@/lib/functions'
 
 /**
  * The weather (client) homepage.
  */
-export default async function WxClientHome() {
-  return <DisplayWeather />
+export default function WxClientHome() {
+  // Get the unit and forecast from the weather context.
+  const {unit, weather} = useWeatherContext()
+
+  // If there is no weather data, return null.
+  if (!weather.location) {
+    return null
+  }
+
+  // Desctructure the weather object.
+  const {current, forecast, location} = weather
+  const {forecastday} = forecast
+  const {name, region, localtime_epoch, tz_id} = location
+  const {
+    temp_f,
+    condition: {text},
+    wind_mph,
+    wind_dir,
+    pressure_in,
+    humidity,
+    feelslike_f,
+    vis_miles,
+    uv
+  } = current
+  return (
+    <section
+      className="weather not-prose"
+      style={
+        {
+          '--angle': '0deg',
+          '--minTemp': getTempColor(forecastday[0]?.day?.mintemp_f),
+          '--maxTemp': getTempColor(forecastday[0]?.day?.maxtemp_f),
+          '--currentTemp': getTempColor(temp_f),
+          '--feelsLikeTemp': getTempColor(feelslike_f)
+        } as React.CSSProperties
+      }
+    >
+      <h1>Current Conditions</h1>
+      <time className="time">{formatDate(localtime_epoch, tz_id)}</time>
+
+      <div className="row">
+        <div className="column">
+          <div className="temp-box">
+            <div className="temp-range">
+              <span>{formatTemp(forecastday[0]?.day?.mintemp_f, unit)}</span>-
+              <span>{formatTemp(forecastday[0]?.day?.maxtemp_f, unit)}</span>
+            </div>
+            <span className="current-temp">{formatTemp(temp_f, unit)}</span>
+            <span>Feels Like {formatTemp(feelslike_f, unit)}</span>
+          </div>
+        </div>
+
+        <div className="column">
+          <div className="weather-table">
+            <div className="column" style={{textAlign: 'right'}}>
+              <p>Location</p>
+              <p>Sky</p>
+              <p>Wind</p>
+              <p>Pressure</p>
+              <p>Humidity</p>
+              <p>Visibility</p>
+              <p>UV Index</p>
+              <p>Sunrise</p>
+              <p>Sunset</p>
+              <p>Moon Phase</p>
+            </div>
+
+            <div className="column">
+              <p>
+                {name}, {region}
+              </p>
+              <p>{text}</p>
+              <p>
+                {formatSpeed(wind_mph, unit)} {wind_dir}
+              </p>
+              <p>{pressure_in} inHg</p>
+              <p>{humidity}%</p>
+              <p>{formatDistance(vis_miles, unit)}</p>
+              <p>{uv}</p>
+              <p>{forecastday[0]?.astro?.sunrise}</p>
+              <p>{forecastday[0]?.astro?.sunset}</p>
+              <p>{forecastday[0]?.astro?.moon_phase}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
 }
diff --git a/app/(weather)/wx-server/[location]/page.tsx b/app/(weather)/wx-server/[location]/page.tsx
@@ -1,11 +1,9 @@
 import DisplayWeather from '@/components/wx-server/DisplayWeather'
-import {getForecast} from '@/lib/functions'
+import {getForecast} from '@/lib/queries'
 import {LocationPageProps} from '@/lib/types'
 import {Metadata} from 'next'
 import {notFound} from 'next/navigation'
 
-export const runtime = 'edge'
-
 /**
  * Generate dynamic metadadta.
  *
@@ -17,6 +15,11 @@ export async function generateMetadata({
   // Get the forecast for the location.
   const forecast = await getForecast(params.location)
 
+  // No forecast? Bail...
+  if (!forecast) {
+    return {}
+  }
+
   return {
     title: `Search Results - ${forecast.address}`,
     description: `The local forecast for ${forecast.address}`
@@ -33,12 +36,12 @@ export async function generateMetadata({
  */
 export default async function SearchResults({params}: LocationPageProps) {
   // Get the forecast for the location.
-  const {weather} = await getForecast(params.location)
+  const forecast = await getForecast(params.location)
 
   // No forecast? Bail...
-  if (!weather) {
+  if (!forecast) {
     notFound()
   }
 
-  return <DisplayWeather weather={weather} />
+  return <DisplayWeather weather={forecast} />
 }
diff --git a/app/(weather)/wx-server/page.tsx b/app/(weather)/wx-server/page.tsx
@@ -1,22 +1,20 @@
 import DisplayWeather from '@/components/wx-server/DisplayWeather'
-import {getForecast} from '@/lib/functions'
+import {getForecast} from '@/lib/queries'
 import {notFound} from 'next/navigation'
 
-export const runtime = 'edge'
-
 /**
  * The weather (server) homepage.
  *
  * @see https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts
  */
 export default async function WxServerHome() {
   // Get the weather forecast.
-  const {weather} = await getForecast('Enterprise, AL')
+  const data = await getForecast('Enterprise, AL')
 
   // No forecast? Bail...
-  if (!weather) {
+  if (!data) {
     notFound()
   }
 
-  return <DisplayWeather weather={weather} />
+  return <DisplayWeather weather={data} />
 }
diff --git a/app/api/weather/route.ts b/app/api/weather/route.ts
@@ -1,5 +1,10 @@
 import {GeocodeResponse, WeatherResponse} from '@/lib/types'
 
+/**
+ * The runtime environment.
+ *
+ * @see https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes#edge-runtime
+ */
 export const runtime = 'edge'
 
 /**

diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
@@ -1,23 +1,11 @@
 import CommentForm from '@/components/blog/CommentForm'
-import {getAllPosts, getPost} from '@/lib/functions'
+import {getAllPosts, getPost} from '@/lib/queries'
 import {Metadata} from 'next'
 import Image from 'next/image'
 import {notFound} from 'next/navigation'
 
-// Set the runtime to Edge.
-// @see https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes#segment-runtime-option
-export const runtime = 'edge'
-
-// Enable dynamic routes.
-// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams
-export const dynamicParams = true
-
-// Set the revalidation period.
-// @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
-export const revalidate = 60
-
 /**
- * Generate posts for static generation.
+ * Generate the static routes at build time.
  *
  * @see https://nextjs.org/docs/app/api-reference/functions/generate-static-params
  */
@@ -31,15 +19,15 @@ export async function generateStaticParams() {
   }
 
   // Return the slugs for each post.
-  return posts.map((post: {slug: string}) => ({
-    slug: post.slug
+  return posts.map((node) => ({
+    slug: node.slug
   }))
 }
 
 /**
- * Generate dynamic metadadta.
+ * Generate the metadata for each static route at build time.
  *
- * @see https://nextjs.org/docs/app/building-your-application/optimizing/metadata#dynamic-metadata
+ * @see https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
  */
 export async function generateMetadata({
   params
@@ -64,7 +52,7 @@ export async function generateMetadata({
  * The blog post page.
  */
 export default async function Page({params}: {params: {slug: string}}) {
-  // Get the post.
+  // Get a single blog post.
   const post = await getPost(params.slug)
 
   // No post? Bail...
@@ -75,19 +63,21 @@ export default async function Page({params}: {params: {slug: string}}) {
   return (
     <article>
       <header>
-        <h2 dangerouslySetInnerHTML={{__html: post.title}} />
+        <h1 dangerouslySetInnerHTML={{__html: post.title}} />
         <p className="italic">
           By {post.author.node.name} on <time>{post.date}</time>
         </p>
       </header>
+
       <div dangerouslySetInnerHTML={{__html: post.content}} />
+
       <footer className="flex items-center justify-between gap-4 pb-4">
         <div>
           <h3>Categories</h3>
           <ul className="m-0 flex list-none gap-2 p-0">
-            {post.categories.nodes.map((category) => (
-              <li className="m-0 p-0" key={category.databaseId}>
-                {category.name}
+            {post.categories.edges.map(({node}) => (
+              <li className="m-0 p-0" key={node.databaseId}>
+                {node.name}
               </li>
             ))}
           </ul>
@@ -96,36 +86,37 @@ export default async function Page({params}: {params: {slug: string}}) {
         <div>
           <h3>Tags</h3>
           <ul className="m-0 flex list-none gap-2 p-0">
-            {post.tags.nodes.map((tag) => (
-              <li className="m-0 p-0" key={tag.databaseId}>
-                {tag.name}
+            {post.tags.edges.map(({node}) => (
+              <li className="m-0 p-0" key={node.databaseId}>
+                {node.name}
               </li>
             ))}
           </ul>
         </div>
       </footer>
+
       <section className="border-t-2">
         <h3>Comments</h3>
-        {post.comments.nodes.map((comment) => (
-          <article key={comment.databaseId}>
+        {post.comments.edges.map(({node}) => (
+          <article key={node.databaseId}>
             <header className="flex items-center gap-2">
               <Image
-                alt={comment.author.node.name}
+                alt={node.author.node.name}
                 className="m-0 rounded-full"
                 height={64}
-                src={comment.author.node.gravatarUrl}
+                src={node.author.node.avatar.url}
                 width={64}
               />
               <div className="flex flex-col gap-2">
                 <h4
                   className="m-0 p-0 leading-none"
-                  dangerouslySetInnerHTML={{__html: comment.author.node.name}}
+                  dangerouslySetInnerHTML={{__html: node.author.node.name}}
                 />
-                <time className="italic">{comment.date}</time>
+                <time className="italic">{node.date}</time>
               </div>
             </header>
 
-            <div dangerouslySetInnerHTML={{__html: comment.content}} />
+            <div dangerouslySetInnerHTML={{__html: node.content}} />
           </article>
         ))}
       </section>