chore: adjust data structures

Author: maxwiseman

.env.example

@@ -12,7 +12,15 @@ DB_AUTH_TOKEN='YOUR_DB_NAME'
 # @see https://next-auth.js.org/configuration/options#secret
 AUTH_SECRET='supersecret'
 
-# Preconfigured Discord OAuth provider, works out-of-the-box
-# @see https://next-auth.js.org/providers/discord
-AUTH_DISCORD_ID=''
-AUTH_DISCORD_SECRET=''
+# Preconfigured Github OAuth provider, works out-of-the-box
+# @see https://next-auth.js.org/providers/github
+AUTH_GITHUB_ID=''
+AUTH_GITHUB_SECRET=''
+
+# Unsplash API Keys
+UNSPLASH_ACCESS_KEY=''
+UNSPLASH_SECRET_KEY=''
+
+# Upstash Redis Credentials
+REDIS_URL=''
+REDIS_TOKEN=''

apps/nextjs/src/app/(dashboard)/dashboard/@details/(..)details/[itemId]/loading.tsx renamed to apps/nextjs/src/app/(dashboard)/dashboard/@details/(..)details/[type]/[articleUrl]/loading.tsx

@@ -1,18 +1,11 @@
 import React from "react";
 
 import { NewsArticle } from "~/app/_components/details/news-article";
-import { exampleData } from "~/app/example-data";
-
-export function generateStaticParams(): { itemId: string }[] {
-  return exampleData.map((item) => ({
-    itemId: item.id,
-  }));
-}
 
 export default async function Page({
   params,
 }: {
-  params: { itemId: string };
+  params: { articleUrl: string; type: string };
 }): Promise<React.ReactElement> {
   // const articleData = exampleData.filter(
   //   (item) => item.id === params.itemId,
@@ -21,6 +14,8 @@ export default async function Page({
   //   (res) => res.filter((item) => item.id === params.itemId)[0],
   // );
 
-  return <NewsArticle url={decodeURIComponent(params.itemId)} />;
+  if (params.type === "news")
+    return <NewsArticle url={decodeURIComponent(params.articleUrl)} />;
+  return <div>Something is not quite right</div>;
   // if (articleData?.type === "news") return <div>Article not found</div>;
 }

apps/nextjs/src/app/(dashboard)/dashboard/@details/(..)details/[itemId]/page.tsx renamed to apps/nextjs/src/app/(dashboard)/dashboard/@details/(..)details/[type]/[articleUrl]/page.tsx

@@ -1,3 +1,4 @@
+import type { DashboardItem } from "~/app/example-data";
 import { DashboardList } from "~/app/_components/dashboard-list";
 import { getRssData } from "~/app/example-data";
 
@@ -6,9 +7,22 @@ export const revalidate = 3600;
 export default async function Page(): Promise<React.ReactElement> {
   const rssData = await getRssData();
 
+  const items: DashboardItem[] | undefined = rssData.items?.map((item) => ({
+    title: item.title ?? "",
+    id: item.id,
+    contentSnippet: item.contentSnippet ?? "",
+    icon: "",
+    details: {
+      type: "news",
+      articleUrl: item.link ?? "",
+      date: item.isoDate ?? "",
+      source: rssData.title ?? "",
+    },
+  }));
+
   return (
     <div className="relative max-w-full p-2 md:p-8">
-      <DashboardList rssData={rssData} />
+      {items !== undefined ? <DashboardList items={items} /> : null}
     </div>
   );
 }

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

@@ -13,9 +13,9 @@ import { NewsArticle } from "~/app/_components/details/news-article";
 export async function generateMetadata({
   params,
 }: {
-  params: { itemId?: string };
+  params: { articleUrl?: string; type?: string };
 }): Promise<Metadata> {
-  const url = decodeURIComponent(params.itemId ?? "");
+  const url = decodeURIComponent(params.articleUrl ?? "");
   let extractedData;
   try {
     try {
@@ -60,12 +60,14 @@ export async function generateMetadata({
 export default function Page({
   params,
 }: {
-  params: { itemId: string };
+  params: { articleUrl: string; type: string };
 }): React.ReactElement {
   // const articleData = exampleData.filter(
   //   (item) => item.id === params.itemId,
   // )[0];
 
-  return <NewsArticle url={decodeURIComponent(params.itemId)} />;
+  if (params.type === "news")
+    return <NewsArticle url={decodeURIComponent(params.articleUrl)} />;
+  return <div>Something is not quite right</div>;
   // if (articleData?.type === "news") return <div>Article not found</div>;
 }

apps/nextjs/src/app/(dashboard)/details/[itemId]/loading.tsx renamed to apps/nextjs/src/app/(dashboard)/details/[type]/[articleUrl]/loading.tsx

@@ -2,22 +2,22 @@
 
 import { usePathname } from "next/navigation";
 import { LinkButton } from "@ai-inbox/ui/button";
-import { IconNews } from "@tabler/icons-react";
+import { IconMail, IconNews } from "@tabler/icons-react";
 
-import type { NewsItem } from "../example-data";
+import type { DashboardItem } from "../example-data";
 
 export function DashboardItem({
   item,
 }: {
-  item: NewsItem;
+  item: DashboardItem;
 }): React.ReactElement {
   // eslint-disable-next-line react/jsx-no-useless-fragment -- i need it to be a react node
   let icon = <></>;
-  switch (item.type) {
-    // case "email":
-    //   icon = <IconMail size={20} className="shrink-0" />;
-    //   break;
-    case "newsItem":
+  switch (item.details.type) {
+    case "email":
+      icon = <IconMail size={20} className="shrink-0" />;
+      break;
+    case "news":
       icon = <IconNews size={20} className="shrink-0" />;
       break;
     // case "other":
@@ -28,7 +28,7 @@ export function DashboardItem({
 
   return (
     <LinkButton
-      href={`/details/${item.id}`}
+      href={`/details/${item.details.type}/${item.id}`}
       variant={pathname.includes(`/details/${item.id}`) ? "secondary" : "ghost"}
       className="min-w-0 max-w-full shrink grow items-center justify-start gap-2 p-1 px-1"
     >

apps/nextjs/src/app/(dashboard)/details/[itemId]/page.tsx renamed to apps/nextjs/src/app/(dashboard)/details/[type]/[articleUrl]/page.tsx

@@ -11,14 +11,14 @@ import {
 import { Input } from "@ai-inbox/ui/input";
 import { IconFilter, IconSortAscending } from "@tabler/icons-react";
 
-import type { NewsFeed } from "../example-data";
+import type { DashboardItem as DashboardItemType } from "../example-data";
 import { DashboardItem } from "~/app/_components/dashboard-item";
 import { feeds } from "~/app/feeds";
 
 export function DashboardList({
-  rssData,
+  items,
 }: {
-  rssData: NewsFeed;
+  items: DashboardItemType[];
 }): React.ReactElement {
   const [searchString, setSearchString] = useState("");
   return (
@@ -64,8 +64,8 @@ export function DashboardList({
         </DropdownMenu>
       </div>
       <div className="flex w-full flex-col gap-2">
-        {rssData.items.map((item) =>
-          item.title?.toLowerCase().includes(searchString.toLowerCase()) ? (
+        {items.map((item) =>
+          item.title.toLowerCase().includes(searchString.toLowerCase()) ? (
             <DashboardItem key={item.id} item={item} />
           ) : null,
         )}

apps/nextjs/src/app/_components/dashboard-item.tsx

@@ -114,11 +114,32 @@ export type NewsItem = Parser.Item & {
 export type NewsFeed = Omit<Parser.Output<undefined>, "items"> & {
   id: string;
   type: "newsFeed";
-  items: NewsItem[];
+  items?: NewsItem[];
 };
 
 export type NewsSource = {
   title: string;
+  icon: string;
   url: string;
   feeds: NewsFeed[];
 };
+
+export type DashboardItem = {
+  id: string;
+  title: string;
+  contentSnippet: string;
+  icon: string;
+  details: DashboardDetails;
+};
+
+export type DashboardDetails =
+  | {
+      type: "news";
+      articleUrl: string;
+      date: Date | string;
+      source: string;
+    }
+  | {
+      type: "email";
+      id: string;
+    };

apps/nextjs/src/app/_components/dashboard-list.tsx

@@ -17,6 +17,8 @@ export const env = createEnv({
     DB_AUTH_TOKEN: z.string(),
     UNSPLASH_ACCESS_KEY: z.string(),
     UNSPLASH_SECRET_KEY: z.string(),
+    // UPSTASH_REDIS_REST_TOKEN: z.string(),
+    // UPSTASH_REDIS_REST_URL: z.string(),
   },
   /**
    * Specify your client-side environment variables schema here.

apps/nextjs/src/app/example-data.ts

@@ -3,8 +3,8 @@ import { z } from "zod";
 
 export const env = createEnv({
   server: {
-    AUTH_DISCORD_ID: z.string().min(1),
-    AUTH_DISCORD_SECRET: z.string().min(1),
+    AUTH_GITHUB_ID: z.string().min(1),
+    AUTH_GITHUB_SECRET: z.string().min(1),
     AUTH_SECRET:
       process.env.NODE_ENV === "production"
         ? z.string().min(1)