Use directus return types, fix project link nested type API response

src/pages/api/revalidate.ts

@@ -25,13 +25,18 @@ async function getURLs(
     const urls = ["/technology"];
 
     // Get all projects with the technology
-    const all_projects = await directus.request(readItems("project"));
-    if (all_projects != null) {
-      for (const project of all_projects) {
-        if (project.technologies?.some((t) => t.id === key))
-          urls.push(`/projects/${project.id}`);
-      }
-    }
+    const all_projects = await directus.request(readItems("project", {
+      fields: ["id", {
+        technologies: ["id"],
+      }],
+    }));
+
+    // if (all_projects != null) {
+    //   for (const project of all_projects) {
+    //     if (project.technologies?.some((t) => t.id === key))
+    //       urls.push(`/projects/${project.id}`);
+    //   }
+    // }
 
     return urls;
   }

src/pages/projects.tsx

@@ -1,19 +1,26 @@
 import AppWrapper from "@/components/AppWrapper";
-import directus, { Project } from "@/utils/directus";
+import directus from "@/utils/directus";
 import { cn } from "@/utils/helpers";
 import { readItems } from "@directus/sdk";
 import { GetStaticPropsResult, type NextPage } from "next";
 import Link from "next/link";
 
 type Props = {
-  projects: Project[];
+  projects: Awaited<ReturnType<typeof getProjects>>;
 };
 
-export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {
-  const projects = await directus.request(readItems("project"));
+async function getProjects() {
+  return await directus.request(readItems("project", {
+    fields: ["name", "shortDescription", "icon", {links: ["url"]}],
+  }));
+}
+
+export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {;
 
   return {
-    props: {projects}
+    props: {
+      projects: await getProjects(),
+    }
   }
 }
 
@@ -21,27 +28,29 @@ const ProjectsPage: NextPage<Props> = ({projects}) => {
   return (
     <AppWrapper dotsClassName="animate-bg-fast">
       <div className="max-w-500 mx-auto mt-20 grid h-full w-max grid-cols-1 gap-x-20 gap-y-7 py-2 md:grid-cols-2 lg:grid-cols-3">
-        {projects.map(({ name, shortDescription: description, links, icon }) => (
-          <Link
-            key={name}
-            className="flex relative max-w-[30rem] flex-shrink items-center opacity-75 transition-opacity hover:opacity-100 bg-black/30 hover:bg-white/5 py-2 rounded"
-            href={links[0]?.url ?? "#"}
-            target="_blank"
-            rel="noreferrer"
-            title={name}
-          >
+        {projects.map(({ name, shortDescription: description, links, icon }) => {
+          return (
+            <Link
+              key={name}
+              className="flex relative max-w-[30rem] flex-shrink items-center opacity-75 transition-opacity hover:opacity-100 bg-black/30 hover:bg-white/5 py-2 rounded"
+              href={links![0]?.url ?? "#"}
+              target="_blank"
+              rel="noreferrer"
+              title={name}
+            >
 
-            <div className="pr-5 pt-2">
-              <i className={cn(icon ?? "fa-heart", "fa-solid text-3xl text-opacity-80 saturate-0")}></i>
-            </div>
-            <div className="flex-auto overflow-hidden">
-              <div className="text-lg">{name}</div>
-              <div className="text-base font-normal opacity-70 whitespace-nowrap">
-                {description}
+              <div className="pr-5 pt-2">
+                <i className={cn(icon ?? "fa-heart", "fa-solid text-3xl text-opacity-80 saturate-0")}></i>
               </div>
-            </div>
-          </Link>
-        ))}
+              <div className="flex-auto overflow-hidden">
+                <div className="text-lg">{name}</div>
+                <div className="text-base font-normal opacity-70 whitespace-nowrap">
+                  {description}
+                </div>
+              </div>
+            </Link>
+          );
+        })}
       </div>
     </AppWrapper>
   );

src/utils/directus.ts

@@ -4,6 +4,9 @@ export interface Schema {
   metadata: Metadata;
   project: Project[];
   technology: Technology[];
+  link: Link[];
+  project_technology: ProjectTechnology[];
+  project_link: ProjectLink[];
 }
 
 export interface Technology {
@@ -12,19 +15,42 @@ export interface Technology {
   url: string | null;
 }
 
+export interface ProjectTechnology {
+  id: string;
+  project_id: string;
+  technology_id: string;
+}
+
 export interface Project {
   id: string;
+  
+  // One2Many
+  links: number[] | ProjectLink[];
+  // Many2Many
+  technologies: number[] | ProjectTechnology[];
+
   icon: string | null;
   name: string;
   description: string;
   shortDescription: string;
-  links: Link[];
+
+  featured: boolean;
   wakatimeOffset: number | null;
-  technologies: Technology[] | null;
   bannerImage: string;
 }
 
 export interface Link {
+  id: string;
+  project_id: string;
+  icon: string;
+  url: string;
+  description: string | null;
+}
+
+export interface ProjectLink {
+  id: string;
+  project_id: string;
+  sort: number;
   icon: string;
   url: string;
   description: string | null;