fixed github import modal and updated projects with animations

Author: Gerome-Elassaad

IMPLEMENTATION_PLAN.md

@@ -0,0 +1,63 @@
+# Implementation Plan: Fix GitHub Import Type Error
+
+This document outlines the plan to resolve the TypeScript type error occurring during the build process in the `app/api/projects/[projectId]/github-import/route.ts` file.
+
+## 1. Problem Analysis
+
+The build fails with a type error related to the `RouteContext` of the `POST` handler in the GitHub import route. The error message:
+
+```
+Type error: Type '{ __tag__: "POST"; __param_position__: "second"; __param_type__: GithubImportRouteContext; }' does not satisfy the constraint 'ParamCheck<RouteContext>'.
+The types of '__param_type__.params' are incompatible between these types.
+Type '{ projectId: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
+```
+
+This indicates that the TypeScript compiler is expecting the `params` object within the route's context to be a `Promise`, but it's being treated as a plain object `{ projectId: string; }`. This is a common issue with Next.js's type generation for dynamic routes, where the inferred types do not match the actual runtime structure.
+
+## 2. Proposed Solution
+
+The solution is to correct the type definition for the route's context to accurately reflect the structure of the `params` object. This will ensure that the TypeScript compiler understands the correct shape of the data and resolves the type mismatch.
+
+## 3. Step-by-Step Implementation
+
+1.  **Modify `GithubImportRouteContext` Type:**
+    In the file `app/api/projects/[projectId]/github-import/route.ts`, the existing `GithubImportRouteContext` interface will be updated. The current definition is correct in its structure, but it seems there's a conflict with a globally inferred `RouteContext`. To avoid this, we will rename it and ensure it's correctly applied.
+
+    The current interface is:
+    ```typescript
+    interface GithubImportRouteContext {
+      params: {
+        projectId: string;
+      };
+    }
+    ```
+
+    We will ensure this type is explicitly used in the `POST` function signature. No changes to the interface itself are needed, but we need to make sure it's being used correctly. The investigation shows the interface is defined correctly, but the error persists. This suggests the issue might be in how Next.js is interpreting the types.
+
+    A common fix for this is to simplify the function signature and let Next.js infer the types, or to be more explicit in a way that doesn't conflict with Next.js's internal types.
+
+2.  **Update the POST Function Signature:**
+    We will modify the `POST` function signature in `app/api/projects/[projectId]/github-import/route.ts` to resolve the ambiguity.
+
+    **Current Signature:**
+    ```typescript
+    export async function POST(
+      request: NextRequest,
+      context: GithubImportRouteContext
+    ) {
+    ```
+
+    **Proposed Change:**
+    We will adjust the signature to destructure the context parameter directly, which can help TypeScript resolve the types correctly.
+
+    ```typescript
+    export async function POST(
+      request: NextRequest,
+      { params }: { params: { projectId: string } }
+    ) {
+    ```
+    This change bypasses the intermediate `GithubImportRouteContext` interface and defines the expected shape of the context object directly in the function signature. This is a robust way to handle type inference issues with Next.js route handlers.
+
+## 4. Verification
+
+After applying the code change, the `npm run build` command will be executed again. The build should complete successfully without any TypeScript errors, confirming that the issue has been resolved.

app/api-docs/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import dynamic from 'next/dynamic';
+import "swagger-ui-react/swagger-ui.css";
+
+const SwaggerUI = dynamic(() => import("swagger-ui-react"), { ssr: false });
+
+const ApiDocsPage = () => {
+  return (
+    <div style={{ paddingTop: '20px' }}>
+      <SwaggerUI url="/api/openapi-spec" />
+    </div>
+  );
+};
+
+export default ApiDocsPage;

app/api/github/callback/route.ts

@@ -5,50 +5,87 @@ export async function GET(request: NextRequest) {
   const code = url.searchParams.get('code')
   const error = url.searchParams.get('error')
   const errorDescription = url.searchParams.get('error_description')
-  const state = url.searchParams.get('state') 
+  const state = url.searchParams.get('state')
+  
+  const sanitize = (value: string | null): string => {
+    if (!value) return ''
+    return value
+      .replace(/[<>"/&']/g, (char) => {
+        const entities: Record<string, string> = {
+          '<': '&lt;',
+          '>': '&gt;',
+          '"': '&quot;',
+          '/': '&#x2F;',
+          '&': '&amp;',
+          "'": '&#x27;'
+        }
+        return entities[char] || char
+      })
+  }
+
+  const sanitizedError = sanitize(error)
+  const sanitizedErrorDescription = sanitize(errorDescription)
+  const sanitizedCode = sanitize(code)
+  const sanitizedState = sanitize(state)
 
   const html = `
     <!DOCTYPE html>
     <html>
       <head>
         <title>GitHub Authentication</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'unsafe-inline';">
       </head>
       <body>
         <script>
-          if (window.opener) {
-            if (${error ? `true` : `false`}) { 
-              window.opener.postMessage({ 
-                type: 'GITHUB_AUTH_ERROR', 
-                error: '${error}',
-                errorDescription: '${errorDescription}' 
-              }, '*');
-            } else if (${code ? `true` : `false`}) { 
-              
-              window.opener.postMessage({ 
-                type: 'GITHUB_AUTH_CALLBACK', 
-                code: '${code}',
-                state: '${state}' 
-              }, '*');
-            } else {
+          (function() {
+            'use strict';
+            
+            if (window.opener) {
+              const hasError = ${error ? 'true' : 'false'};
+              const hasCode = ${code ? 'true' : 'false'};
               
-              window.opener.postMessage({
-                type: 'GITHUB_AUTH_ERROR',
-                error: 'unknown_error',
-                errorDescription: 'No authorization code or error returned from GitHub.'
-              }, '*');
+              if (hasError) { 
+                window.opener.postMessage({ 
+                  type: 'GITHUB_AUTH_ERROR', 
+                  error: ${JSON.stringify(sanitizedError)},
+                  errorDescription: ${JSON.stringify(sanitizedErrorDescription)}
+                }, window.location.origin);
+              } else if (hasCode) { 
+                window.opener.postMessage({ 
+                  type: 'GITHUB_AUTH_CALLBACK', 
+                  code: ${JSON.stringify(sanitizedCode)},
+                  state: ${JSON.stringify(sanitizedState)}
+                }, window.location.origin);
+              } else {
+                window.opener.postMessage({
+                  type: 'GITHUB_AUTH_ERROR',
+                  error: 'unknown_error',
+                  errorDescription: 'No authorization code or error returned from GitHub.'
+                }, window.location.origin);
+              }
             }
-          }
-          
-          
-          setTimeout(() => { window.close(); }, 500);
+            
+            setTimeout(function() { 
+              window.close(); 
+            }, 1000);
+          })();
         </script>
-        <p>Processing GitHub authentication...</p>
-        <p>You can close this window if it doesn't close automatically.</p>
+        <div style="text-align: center; font-family: system-ui, sans-serif; padding: 2rem;">
+          <h2>Processing GitHub authentication...</h2>
+          <p>You can close this window if it doesn't close automatically.</p>
+        </div>
       </body>
     </html>
   `
 
   return new NextResponse(html, {
-    headers: { 'Content-Type': 'text/html' },
+    headers: { 
+      'Content-Type': 'text/html',
+      'Cache-Control': 'no-store, no-cache, must-revalidate',
+      'X-Content-Type-Options': 'nosniff',
+      'X-Frame-Options': 'DENY'
+    },
   })
 }

app/api/hello/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from 'next/server';
+import type { paths } from '@/lib/openapi.types'; // Assuming openapi.types.ts is in lib
+
+// This type would correspond to the response for GET /hello
+type HelloWorldResponse = paths['/hello']['get']['responses']['200']['content']['application/json'];
+
+export async function GET() {
+  const response: HelloWorldResponse = {
+    message: 'Hello, world!',
+  };
+  return NextResponse.json(response);
+}

app/api/openapi-spec/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+import yaml from 'js-yaml';
+
+export async function GET() {
+  try {
+    const filePath = path.join(process.cwd(), 'lib', 'openapi.yaml');
+    const fileContents = fs.readFileSync(filePath, 'utf8');
+    const spec = yaml.load(fileContents);
+    return NextResponse.json(spec);
+  } catch (error) {
+    console.error('Error loading OpenAPI spec:', error);
+    return NextResponse.json({ message: 'Error loading OpenAPI spec' }, { status: 500 });
+  }
+}