Enhance project caching

Implements project caching and refresh logic to optimize data retrieval and ensure up-to-date project information. Updates various components to support these enhancements, including the `ProjectsContextProvider` and `CachingProjectDataSource`.

Add revalidation logic to API endpoints to keep cached data in sync.

Author: oscarlund121

docker-compose.yaml

@@ -1,4 +1,3 @@
-version: '3.8'
 services:
   cache:
     image: redis:6.2-alpine
@@ -8,6 +7,26 @@ services:
     command: redis-server --save 20 1 --loglevel warning
     volumes: 
       - cache:/data
+
+  postgres:
+    image: postgres:16.8
+    restart: always
+    ports:
+    - '5432:5432'
+    environment:
+      - POSTGRES_USER=oscar
+      - POSTGRES_PASSWORD=passw0rd
+      - POSTGRES_DB=shape-docs
+
+  app:
+    build: .
+    ports:
+      - '3000:3000'
+    env_file:
+      - .env
+    depends_on:
+      - cache
+
 volumes:
   cache:
-    driver: local
+    driver: local

package-lock.json

@@ -1,30 +1,39 @@
-import { redirect } from "next/navigation"
-import { SessionProvider } from "next-auth/react"
-import { session, projectRepository } from "@/composition"
-import ErrorHandler from "@/common/ui/ErrorHandler"
-import SessionBarrier from "@/features/auth/view/SessionBarrier"
-import ProjectsContextProvider from "@/features/projects/view/ProjectsContextProvider"
-import { SidebarTogglableContextProvider, SplitView } from "@/features/sidebar/view"
+import { redirect } from "next/navigation";
+import { SessionProvider } from "next-auth/react";
+import { session } from "@/composition";
+import ErrorHandler from "@/common/ui/ErrorHandler";
+import SessionBarrier from "@/features/auth/view/SessionBarrier";
+import ProjectsContextProvider from "@/features/projects/view/ProjectsContextProvider";
+import { projectDataSource } from "@/composition";
+import {
+  SidebarTogglableContextProvider,
+  SplitView,
+} from "@/features/sidebar/view";
 
-export default async function Layout({ children }: { children: React.ReactNode }) {
-  const isAuthenticated = await session.getIsAuthenticated()
+export default async function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const isAuthenticated = await session.getIsAuthenticated();
   if (!isAuthenticated) {
-    return redirect("/api/auth/signin")
+    return redirect("/api/auth/signin");
   }
-  const projects = await projectRepository.get()
+
+  const projects = await projectDataSource.getProjects();
+  console.log("Loaded projects:", projects);
+
   return (
     <ErrorHandler>
       <SessionProvider>
         <SessionBarrier>
           <ProjectsContextProvider initialProjects={projects}>
             <SidebarTogglableContextProvider>
-              <SplitView>
-                {children}
-              </SplitView>
+              <SplitView>{children}</SplitView>
             </SidebarTogglableContextProvider>
           </ProjectsContextProvider>
         </SessionBarrier>
       </SessionProvider>
     </ErrorHandler>
-  )
+  );
 }

src/app/(authed)/layout.tsx

@@ -1,14 +1,16 @@
 import { NextRequest, NextResponse } from "next/server"
 import { session, userGitHubClient } from "@/composition"
 import { makeUnauthenticatedAPIErrorResponse } from "@/common"
+import { revalidatePath } from "next/cache"
+
 
 interface GetBlobParams {
   owner: string
   repository: string
   path: [string]
 }
 
-export async function GET(req: NextRequest, { params }: { params: Promise<GetBlobParams> }) {
+export async function GET(req: NextRequest, { params }: { params: Promise<GetBlobParams> } ) {
   const isAuthenticated = await session.getIsAuthenticated()
   if (!isAuthenticated) {
     return makeUnauthenticatedAPIErrorResponse()
@@ -23,14 +25,18 @@ export async function GET(req: NextRequest, { params }: { params: Promise<GetBlo
   })
   const url = new URL(item.downloadURL)
   const imageRegex = /\.(jpg|jpeg|png|webp|avif|gif)$/;
-  const file = await fetch(url).then(r => r.blob())
+  const res = await fetch(url, { next: { revalidate: 6000 } })
+  const file = await res.blob()
+  revalidatePath('/(authed)/projects')
   const headers = new Headers()
+  if (res.status !== 200    ) {
+    headers.set("Content-Type", "text/plain");
+    headers.set("Cache-Control", `max-age=3000`)
+  }
   if (new RegExp(imageRegex).exec(path)) {
     const cacheExpirationInSeconds = 60 * 60 * 24 * 30 // 30 days
     headers.set("Content-Type", "image/*");
     headers.set("Cache-Control", `max-age=${cacheExpirationInSeconds}`)
-  } else {
-    headers.set("Content-Type", "text/plain");
-  }
+  } 
   return new NextResponse(file, { status: 200, headers })
 }

src/app/api/blob/[owner]/[repository]/[...path]/route.ts

@@ -1,7 +1,15 @@
-import { NextRequest, NextResponse } from "next/server"
-import { gitHubHookHandler } from "@/composition"
+import { NextRequest, NextResponse } from "next/server";
+import { gitHubHookHandler } from "@/composition";
+import { revalidatePath } from "next/cache";
+import { projectDataSource } from "@/composition";
 
-export const POST = async (req: NextRequest): Promise<NextResponse> => {
-  await gitHubHookHandler.handle(req)
-  return NextResponse.json({ status: "OK" })
-}
+// I GitHubHookHandler eller composition
+export const POST = async (req: NextRequest) => {
+  await gitHubHookHandler.handle(req);
+
+  // Opdater projects cache når webhook modtages
+  await projectDataSource.refreshProjects();
+
+  revalidatePath("/(authed)/projects");
+  return NextResponse.json({ status: "OK" });
+};

src/app/api/hooks/github/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from "next/server"
+import { projectDataSource } from "@/composition"
+
+export async function GET() {
+  const projects = await projectDataSource.refreshProjects()
+  return NextResponse.json({ projects })
+}

src/app/api/projects/route.ts

@@ -1,4 +1,4 @@
- export class FetcherError extends Error {
+export class FetcherError extends Error {
    readonly status: number
 
    constructor(status: number, message: string) {
@@ -12,9 +12,9 @@
   input: RequestInfo,
   init?: RequestInit
 ): Promise<JSON> {
-  const res = await fetch(input, init)
+ const res = await fetch(input, init)
   if (!res.ok) {
     throw new FetcherError(res.status, "An error occurred while fetching the data.")
   }
   return res.json()
-}
+}

src/common/utils/fetcher.ts

@@ -230,4 +230,4 @@ export const gitHubHookHandler = new GitHubHookHandler({
       })
     })
   })
-})
+})

src/composition.ts

@@ -75,4 +75,4 @@ const ElementsAPI = ({
     })
 }
 
-export default Stoplight
+export default Stoplight

src/features/docs/view/Stoplight.tsx

@@ -62,4 +62,4 @@ const Swagger = ({ url }: { url: string }) => {
   )
 }
 
-export default Swagger
+export default Swagger