Merge pull request #9 from PoCInnovation/feat/repository-page

Feat/repository page

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.env
+.*
+package-lock.js

src/app/repository/page.css

@@ -0,0 +1,81 @@
+/* page.css */
+.container {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: Arial, sans-serif;
+}
+
+.title {
+    text-align: center;
+    font-size: 2em;
+    margin-bottom: 20px;
+}
+
+.theme-toggle {
+    margin-bottom: 20px;
+    padding: 10px 20px;
+    cursor: pointer;
+}
+
+.repository-list {
+    list-style-type: none;
+    padding: 0;
+}
+
+.repository-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #f9f9f9;
+    margin: 10px 0;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s;
+}
+
+.repository-item:hover {
+    background-color: #e9e9e9;
+}
+
+.repo-details {
+    flex: 1;
+}
+
+.repo-author {
+    display: flex;
+    align-items: center;
+}
+
+.avatar {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    margin-left: 10px;
+}
+
+.version {
+    font-size: 0.9em;
+    color: #666;
+}
+
+/* Light Theme */
+.container.light {
+    background-color: #ffffff;
+    color: #000000;
+}
+
+/* Dark Theme */
+.container.dark {
+    background-color: #333333;
+    color: #ffffff;
+}
+
+.container.dark .repository-item {
+    background-color: #444444;
+}
+
+.container.dark .repository-item:hover {
+    background-color: #555555;
+}

src/app/repository/page.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { getSession } from "next-auth/react";
+import "./page.css";
+import { redirect } from "next/navigation";
+
+interface Repository {
+    id: string;
+    name: string;
+    owner?: {
+        avatar_url: string;
+        login: string;
+    };
+    version: string;
+    LastPush : string;
+    language: string;
+}
+
+const RepositoryPage: React.FC = () => {
+    const [repositories, setRepositories] = useState<Repository[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [theme, setTheme] = useState("light");
+
+    useEffect(() => {
+        const fetchRepositories = async () => {
+            try {
+                const session = await getSession();
+
+                if (!session) {
+                    setError("No valid access token found in session");
+                    setLoading(false);
+                    return;
+                }
+
+                const apiUrl = '/api/repos/repository';
+                const response = await fetch(apiUrl, {
+                    headers: {
+                        'Authorization': `Bearer ${session.accessToken}`
+                    }
+                });
+
+                if (!response.ok) {
+                    throw new Error('Failed to fetch repositories');
+                }
+
+                const data: Repository[] = await response.json();
+                setRepositories(data);
+            } catch (err) {
+                setError(err instanceof Error ? err.message : 'Unknown error');
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchRepositories().catch(console.error);
+    }, []);
+
+    useEffect(() => {
+        console.log(repositories);
+    }, [repositories]);
+
+    const toggleTheme = () => {
+        setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+    };
+
+    if (loading) {
+        return <div>Loading...</div>;
+    }
+
+    if (error) {
+        console.log(error);
+        redirect("/")
+    }
+
+    return (
+        <>
+            <div className={`container ${theme}`}>
+                <h1 className="title">Your Repositories</h1>
+                <button onClick={toggleTheme} className="theme-toggle">
+                    Switch to {theme === "light" ? "Dark" : "Light"} Theme
+                </button>
+                <ul className="repository-list">
+                    {repositories.map((repo) => (
+                        <li key={repo.id} className="repository-item">
+                            <div className="repo-details">
+                                <h2>{repo.name}</h2>
+                                <span>Language: {repo.language}</span>
+                            </div>
+                            <div className="Owner">
+                                <p className="owner">Owner: {repo.owner?.login}</p>
+                            </div>
+                            <img src={repo.owner.avatar_url} alt={repo.owner.login} className="avatar"/>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </>
+    );
+};
+
+export default RepositoryPage;