feat: weather, notebooks table and node 20 (#343)

This commit brings the following changes:

- introduces the side box with weather data
- introduces the notebooks table in home dashboard layout
- upgrades nodejs to v20
- upgrades pnpm to 8.10.0

package.json

@@ -76,6 +76,7 @@
  "lucide-react": "^0.288.0",
  "next": "13.5.6",
  "next-themes": "^0.2.1",
+ "node-fetch": "^3.3.2",
  "postcss": "8.4.31",
  "react": "18.2.0",
  "react-animate-height": "^3.2.2",
@@ -112,7 +113,7 @@
  "tsx": "^3.14.0"
  },
  "volta": {
- "node": "18.18.2",
- "pnpm": "8.9.2"
+ "node": "20.9.0",
+ "pnpm": "8.10.0"
  }
 }

src/app/(dashboard)/_components/recent-modules.tsx

@@ -1,11 +1,10 @@
 "use client";
 
 import { type IconNames } from "@/components/icon";
-import { ScrollArea } from "@/components/scroll-area";
 import { trpc } from "@/trpc/client";
 import { cn } from "@/utils/cn";
 import { Button } from "@nextui-org/react";
-import { type FC, Suspense, useState } from "react";
+import { Suspense, useState, type FC } from "react";
 import AnimateHeight from "react-animate-height";
 import { ErrorBoundary } from "react-error-boundary";
 import { ModuleCard, ModuleCardSkeleton } from "./module-card";
@@ -69,21 +68,19 @@ export const RecentModules = () => {
  </Button>
  </div>
  <AnimateHeight height={isExpanded ? "auto" : 0}>
- <ScrollArea>
- <ErrorBoundary fallback={<div>Failed to load modules</div>}>
- <Suspense
- fallback={
- <ul className="flex gap-4 overflow-x-auto pb-4 pt-2">
- {new Array(8).fill(0).map((_, i) => (
- <ModuleCardSkeleton key={i} isLoaded={false} />
- ))}
- </ul>
- }
- >
- <RecentModulesInner />
- </Suspense>
- </ErrorBoundary>
- </ScrollArea>
+ <ErrorBoundary fallback={<div>Failed to load modules</div>}>
+ <Suspense
+ fallback={
+ <ul className="flex gap-4 overflow-x-auto pb-4 pt-2">
+ {new Array(8).fill(0).map((_, i) => (
+ <ModuleCardSkeleton key={i} isLoaded={false} />
+ ))}
+ </ul>
+ }
+ >
+ <RecentModulesInner />
+ </Suspense>
+ </ErrorBoundary>
  </AnimateHeight>
  </div>
  );

src/app/(dashboard)/app/_components/notebook-table.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Icon } from "@/components/icon";
+import {
+ Chip,
+ Table,
+ TableBody,
+ TableCell,
+ TableColumn,
+ TableHeader,
+ TableRow,
+} from "@nextui-org/react";
+
+const fakeData = {
+ name: "Introduction to Information Security",
+ module: "CS759",
+ lastEdited: "2 Hours ago",
+};
+
+export const NotebookTable = () => {
+ return (
+ <Table
+ isHeaderSticky
+ isVirtualized
+ fullWidth
+ removeWrapper
+ aria-label="Example static collection table"
+ >
+ <TableHeader className="border-b border-default-200">
+ <TableColumn className="border-b border-default-200 bg-background dark:border-default-50">
+ Name
+ </TableColumn>
+ <TableColumn className="border-b border-default-200 bg-background dark:border-default-50">
+ Module
+ </TableColumn>
+ <TableColumn className="border-b border-default-200 bg-background dark:border-default-50">
+ Last edited
+ </TableColumn>
+ </TableHeader>
+ <TableBody>
+ {Array.from({ length: 20 }).map((_, i) => (
+ <TableRow key={i}>
+ <TableCell className="flex items-center gap-3">
+ <Icon name="Lock" size={13} strokeWidth={2} /> {fakeData.name}
+ </TableCell>
+ <TableCell>
+ <Chip color="success" size="sm">
+ {fakeData.module}
+ </Chip>
+ </TableCell>
+ <TableCell>{fakeData.lastEdited}</TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ );
+};

src/app/(dashboard)/app/_components/weather.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { type FC } from "react";
+
+import { useCoords } from "@/hooks/useCoords";
+import { trpc } from "@/trpc/client";
+import { getFormattedWeatherDescription } from "@/utils/getFormattedWeatherDescription";
+import { Skeleton } from "@nextui-org/react";
+
+export const WeatherData: FC = () => {
+ const coords = useCoords();
+ const { data: weatherData, isLoading } = trpc.weather.getWeatherData.useQuery(
+ {
+ latitude: coords?.latitude ?? 0,
+ longitude: coords?.longitude ?? 0,
+ },
+ {
+ enabled: !!coords,
+ retry: false,
+ refetchOnMount: false,
+ refetchOnWindowFocus: false,
+ refetchOnReconnect: false,
+ },
+ );
+
+ if (isLoading) {
+ return (
+ <div>
+ <Skeleton className="mt-2 w-[258px] rounded-md">
+ <div className="h-4" />
+ </Skeleton>
+ <Skeleton className="mt-2 w-3/4 rounded-md">
+ <div className="h-4" />
+ </Skeleton>
+ </div>
+ );
+ }
+
+ if (!weatherData) return null;
+
+ return (
+ <span className="text-tiny text-default-500">
+ You can expect a 👆 high of {weatherData.main.temp_max.toFixed()}º and a
+ 👇 low of {weatherData.main.temp_min.toFixed()}º with{" "}
+ {getFormattedWeatherDescription(weatherData.weather[0]?.description)}{" "}
+ today.
+ </span>
+ );
+};

src/app/(dashboard)/app/layout.tsx

@@ -9,7 +9,7 @@ export default function AppLayout({ children }: PropsWithChildren) {
  return (
  <TRPCReactProvider headers={headers()}>
  <SideMenuProvider>
- <div className="relative flex min-h-screen w-screen overflow-hidden">
+ <div className="relative flex h-screen w-screen overflow-hidden">
  <DashboardSideMenu />
 
  <MainDashboardWrapper>{children}</MainDashboardWrapper>

src/app/(dashboard)/app/page.tsx

@@ -1,8 +1,11 @@
 import { TypographyH2 } from "@/components/TypographyH2";
 import { TypographyP } from "@/components/TypographyP";
+import { formatDate } from "@/utils/formatDate";
 import { currentUser } from "@clerk/nextjs";
 import { type Metadata } from "next";
 import { RecentModules } from "../_components/recent-modules";
+import { NotebookTable } from "./_components/notebook-table";
+import { WeatherData } from "./_components/weather";
 
 export const metadata: Metadata = {
  title: "Dashboard Home",
@@ -45,13 +48,28 @@ export default async function DashboardHome() {
  const message = `"${quote.content}" - ${quote.author}`;
 
  return (
- <div>
- <TypographyH2>{greet}</TypographyH2>
- <TypographyP className="max-w-prose opacity-75 [&:not(:first-child)]:mt-2">
- {message}
- </TypographyP>
+ <div className="grid h-full grid-cols-[1fr_auto] gap-6 overflow-hidden pb-8">
+ <div className="flex flex-col">
+ <TypographyH2>{greet}</TypographyH2>
+ <TypographyP className="max-w-prose opacity-75 [&:not(:first-child)]:mt-2">
+ {message}
+ </TypographyP>
 
- <RecentModules />
+ <RecentModules />
+
+ <h2 className="mb-2 mt-6 text-large font-semibold">Notebooks</h2>
+ <div className="relative flex h-full flex-col overflow-y-auto">
+ <div className="flex-grow-1 flex-basis-auto absolute h-full w-full flex-shrink-0 overflow-y-scroll rounded-xl border border-default-200 dark:border-default-50">
+ <NotebookTable />
+ </div>
+ </div>
+ </div>
+
+ <div className="mt-8 w-[310px] rounded-2xl border border-default-200 p-6 dark:border-default-50">
+ <span className="text-tiny text-default-500">It&apos;s</span>
+ <h3 className="font-medium text-amber-500">{formatDate(new Date())}</h3>
+ <WeatherData />
+ </div>
  </div>
  );
 }

src/env.mjs

@@ -12,6 +12,7 @@ export const env = createEnv({
  UPSTASH_REDIS_REST_URL: z.string().min(1),
  UPSTASH_REDIS_REST_TOKEN: z.string().min(1),
  CLERK_SECRET_KEY: z.string().min(1),
+ OPENWEATHER_API_KEY: z.string().min(1),
  },
  client: {
  NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
@@ -25,6 +26,7 @@ export const env = createEnv({
  process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
  UPSTASH_REDIS_REST_TOKEN: process.env.UPSTASH_REDIS_REST_TOKEN,
  UPSTASH_REDIS_REST_URL: process.env.UPSTASH_REDIS_REST_URL,
+ OPENWEATHER_API_KEY: process.env.OPENWEATHER_API_KEY,
  },
  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
 });

src/hooks/useCoords.ts

@@ -0,0 +1,18 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export const useCoords = () => {
+ const [coords, setCoords] = useState<{
+ latitude: number;
+ longitude: number;
+ } | null>(null);
+
+ useEffect(() => {
+ navigator.geolocation.getCurrentPosition((position) => {
+ setCoords(position.coords);
+ });
+ }, []);
+
+ return coords;
+};

src/server/api/root.ts

@@ -1,9 +1,11 @@
 import { feedbackRouter } from "./routers/feedback";
 import { moduleRouter } from "./routers/module";
 import { waitlistRouter } from "./routers/waitlist";
+import { weatherRouter } from "./routers/weather";
 import { createTRPCRouter } from "./trpc";
 
 export const appRouter = createTRPCRouter({
+ weather: weatherRouter,
  waitlist: waitlistRouter,
  feedback: feedbackRouter,
  module: moduleRouter,

src/server/api/routers/weather.ts

@@ -0,0 +1,43 @@
+import { TRPCError } from "@trpc/server";
+import fetch from "node-fetch";
+import { z } from "zod";
+
+import { env } from "@/env.mjs";
+
+import { createTRPCRouter, protectedProcedure } from "../trpc";
+
+type WeatherData = {
+ main: {
+ temp_max: number;
+ temp_min: number;
+ };
+ weather: {
+ description: string;
+ }[];
+};
+
+export const weatherRouter = createTRPCRouter({
+ getWeatherData: protectedProcedure
+ .input(
+ z.object({
+ latitude: z.number(),
+ longitude: z.number(),
+ }),
+ )
+ .query(async ({ input }) => {
+ const { latitude, longitude } = input;
+
+ const response = await fetch(
+ `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${env.OPENWEATHER_API_KEY}&units=metric`,
+ );
+
+ if (!response.ok) {
+ throw new TRPCError({
+ code: "INTERNAL_SERVER_ERROR",
+ message: "Failed to fetch weather data",
+ });
+ }
+
+ return response.json() as Promise<WeatherData>;
+ }),
+});

src/utils/formatDate.ts

@@ -0,0 +1,42 @@
+export function formatDate(date: Date) {
+ const daysOfWeek = [
+ "Sunday",
+ "Monday",
+ "Tuesday",
+ "Wednesday",
+ "Thursday",
+ "Friday",
+ "Saturday",
+ ];
+ const months = [
+ "January",
+ "February",
+ "March",
+ "April",
+ "May",
+ "June",
+ "July",
+ "August",
+ "September",
+ "October",
+ "November",
+ "December",
+ ];
+
+ const day = date.getDate();
+ let daySuffix = "th";
+
+ if (day === 1 || day === 21 || day === 31) {
+ daySuffix = "st";
+ } else if (day === 2 || day === 22) {
+ daySuffix = "nd";
+ } else if (day === 3 || day === 23) {
+ daySuffix = "rd";
+ }
+
+ const dayOfWeek = daysOfWeek[date.getDay()];
+ const month = months[date.getMonth()];
+ const year = date.getFullYear();
+
+ return `${dayOfWeek}, ${day}${daySuffix} of ${month} ${year}`;
+}