Improves API caching and error handling

Enhances caching mechanisms in API responses by introducing revalidation and refining cache-control headers for better performance.

Adds a loading state in the ProjectsContextProvider to prevent redundant fetch calls and ensures error handling logs are more descriptive.

Simplifies code style by removing semicolons and adjusts default state initialization to optimize user experience.

Author: oscarlund121

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

@@ -1,41 +1,42 @@
-import { NextRequest, NextResponse } from "next/server";
-import { session, userGitHubClient } from "@/composition";
-import { makeUnauthenticatedAPIErrorResponse } from "@/common";
+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];
+  owner: string
+  repository: string
+  path: [string]
 }
 
-export async function GET(
-  req: NextRequest,
-  { params }: { params: Promise<GetBlobParams> }
-) {
-  const isAuthenticated = await session.getIsAuthenticated();
+export async function GET(req: NextRequest, { params }: { params: Promise<GetBlobParams> } ) {
+  const isAuthenticated = await session.getIsAuthenticated()
   if (!isAuthenticated) {
-    return makeUnauthenticatedAPIErrorResponse();
+    return makeUnauthenticatedAPIErrorResponse()
   }
-  const { path: paramsPath, owner, repository } = await params;
-  const path = paramsPath.join("/");
+  const { path: paramsPath, owner, repository } = await params
+  const path = paramsPath.join("/")
   const item = await userGitHubClient.getRepositoryContent({
     repositoryOwner: owner,
     repositoryName: repository,
     path: path,
-    ref: req.nextUrl.searchParams.get("ref") ?? undefined,
-  });
-  const url = new URL(item.downloadURL);
+    ref: req.nextUrl.searchParams.get("ref") ?? undefined
+  })
+  const url = new URL(item.downloadURL)
   const imageRegex = /\.(jpg|jpeg|png|webp|avif|gif)$/;
-  const res = await fetch(url);
-  const file = await res.blob();
-
-  const headers = new Headers();
-  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 {
+  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`)
   }
-  return new NextResponse(file, { status: 200, headers });
+  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}`)
+  } 
+  return new NextResponse(file, { status: 200, headers })
 }

src/app/api/projects/route.ts

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

src/features/projects/domain/CachingProjectDataSource.ts

@@ -1,7 +1,7 @@
 import Project from "./Project";
 import IProjectDataSource from "./IProjectDataSource";
 import IProjectRepository from "./IProjectRepository";
-import { revalidatePath } from "next/cache";
+
 
 export default class CachingProjectDataSource implements IProjectDataSource {
   private dataSource: IProjectDataSource;

src/features/projects/view/ProjectsContextProvider.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { ProjectsContext } from "@/common";
 import { Project } from "@/features/projects/domain";
 
@@ -11,8 +11,9 @@ const ProjectsContextProvider = ({
   initialProjects?: Project[];
   children?: React.ReactNode;
 }) => {
-  const [refreshed, setRefreshed] = useState<boolean>(false);
+  const [refreshed, setRefreshed] = useState<boolean>(true);
   const [projects, setProjects] = useState<Project[]>(initialProjects || []);
+  const isLoadingRef = useRef(false);
 
   const hasProjectChanged = (value: Project[]) =>
     value.some((project, index) => {
@@ -32,6 +33,9 @@ const ProjectsContextProvider = ({
   // Trigger background refresh after initial mount
   useEffect(() => {
     const refreshProjects = () => {
+      if (isLoadingRef.current) return;
+      isLoadingRef.current = true;
+      
       fetch("/api/projects")
         .then((res) => res.json())
         .then(
@@ -40,9 +44,11 @@ const ProjectsContextProvider = ({
             hasProjectChanged(projects) &&
             setProjectsAndRefreshed(projects)
         )
-        .catch((error) => console.log("Failed to refresh projects", error));
+        .catch((error) => console.error("Failed to refresh projects", error))
+        .finally(() => {
+          isLoadingRef.current = false;
+        });
     };
-
     // Initial refresh
     refreshProjects();