From 155d0f56751222a15cccd8f3591a0cf8dbc9f9e1 Mon Sep 17 00:00:00 2001
From: ayush123-4 <ayushchand1253@gmail.com>
Date: Tue, 29 Jul 2025 02:38:03 +0530
Subject: [PATCH] Profile Page

---
 src/components/Navbar.tsx             | 126 +++++++++++++++++++++---
 src/hooks/useGitHubAuth.ts            |  20 +++-
 src/pages/UserProfile/UserProfile.tsx | 136 +++++++++++++++++++++-----
 3 files changed, 243 insertions(+), 39 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 9e9c2b2..d500003 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,23 +1,32 @@
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useState } from 'react';
+import { useGitHubAuth } from '../hooks/useGitHubAuth';
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const { username, logout } = useGitHubAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
 
   return (
     <nav className="bg-gray-800 text-white shadow-lg">
       <div className="container mx-auto px-6 py-4 flex justify-between items-center">
         {/* Logo Section */}
-       <Link
-  to="/"
-  className="text-2xl font-bold hover:text-gray-300 cursor-pointer flex items-center"
->
-  <img src="/crl-icon.png" alt="CRL Icon" className="h-8 mr-2" />
-  GitHub Tracker
-</Link>
+        <Link
+          to="/"
+          className="text-2xl font-bold hover:text-gray-300 cursor-pointer flex items-center"
+        >
+          <img src="/crl-icon.png" alt="CRL Icon" className="h-8 mr-2" />
+          GitHub Tracker
+        </Link>
 
         {/* Desktop Links */}
-        <div className="hidden md:flex space-x-6">
+        <div className="hidden md:flex space-x-6 items-center">
           <Link
             to="/home"
             className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
@@ -42,10 +51,53 @@ const Navbar: React.FC = () => {
           >
             Contributors
           </Link>
-          <Link
-            to="/login"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >Login</Link>
+          {!username ? (
+            <Link
+              to="/login"
+              className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+            >Login</Link>
+          ) : (
+            <div className="relative">
+              <button
+                className="flex items-center space-x-2 focus:outline-none"
+                onClick={() => setDropdownOpen((v) => !v)}
+              >
+                <img
+                  src={`https://github.com/${username}.png`}
+                  alt="avatar"
+                  className="w-8 h-8 rounded-full border-2 border-white"
+                />
+                <span className="font-medium">{username}</span>
+                <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              {dropdownOpen && (
+                <div className="absolute right-0 mt-2 w-48 bg-white text-gray-800 rounded-lg shadow-lg z-50">
+                  <Link
+                    to={`/user/${username}`}
+                    className="block px-4 py-2 hover:bg-gray-100"
+                    onClick={() => setDropdownOpen(false)}
+                  >
+                    View Profile
+                  </Link>
+                  <Link
+                    to={`/user/${username}?edit=1`}
+                    className="block px-4 py-2 hover:bg-gray-100"
+                    onClick={() => setDropdownOpen(false)}
+                  >
+                    Edit Profile
+                  </Link>
+                  <button
+                    className="block w-full text-left px-4 py-2 hover:bg-gray-100"
+                    onClick={handleLogout}
+                  >
+                    Logout
+                  </button>
+                </div>
+              )}
+            </div>
+          )}
         </div>
 
         {/* Mobile Menu Button */}
@@ -105,6 +157,54 @@ const Navbar: React.FC = () => {
             >
               Contributors
             </Link>
+            {!username ? (
+              <Link
+                to="/login"
+                className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+                onClick={() => setIsOpen(false)}
+              >Login</Link>
+            ) : (
+              <div className="relative">
+                <button
+                  className="flex items-center space-x-2 focus:outline-none w-full px-2 py-1"
+                  onClick={() => setDropdownOpen((v) => !v)}
+                >
+                  <img
+                    src={`https://github.com/${username}.png`}
+                    alt="avatar"
+                    className="w-8 h-8 rounded-full border-2 border-white"
+                  />
+                  <span className="font-medium">{username}</span>
+                  <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                  </svg>
+                </button>
+                {dropdownOpen && (
+                  <div className="absolute right-0 mt-2 w-48 bg-white text-gray-800 rounded-lg shadow-lg z-50">
+                    <Link
+                      to={`/user/${username}`}
+                      className="block px-4 py-2 hover:bg-gray-100"
+                      onClick={() => { setDropdownOpen(false); setIsOpen(false); }}
+                    >
+                      View Profile
+                    </Link>
+                    <Link
+                      to={`/user/${username}?edit=1`}
+                      className="block px-4 py-2 hover:bg-gray-100"
+                      onClick={() => { setDropdownOpen(false); setIsOpen(false); }}
+                    >
+                      Edit Profile
+                    </Link>
+                    <button
+                      className="block w-full text-left px-4 py-2 hover:bg-gray-100"
+                      onClick={() => { handleLogout(); setIsOpen(false); }}
+                    >
+                      Logout
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
           </div>
         </div>
       )}
diff --git a/src/hooks/useGitHubAuth.ts b/src/hooks/useGitHubAuth.ts
index 4ac6139..15b0321 100644
--- a/src/hooks/useGitHubAuth.ts
+++ b/src/hooks/useGitHubAuth.ts
@@ -2,10 +2,25 @@ import { useState } from 'react';
 import { Octokit } from '@octokit/core';
 
 export const useGitHubAuth = () => {
-  const [username, setUsername] = useState('');
-  const [token, setToken] = useState('');
+  const [username, setUsernameState] = useState(() => localStorage.getItem('username') || '');
+  const [token, setTokenState] = useState(() => localStorage.getItem('token') || '');
   const [error, setError] = useState('');
 
+  const setUsername = (name: string) => {
+    setUsernameState(name);
+    localStorage.setItem('username', name);
+  };
+  const setToken = (tok: string) => {
+    setTokenState(tok);
+    localStorage.setItem('token', tok);
+  };
+  const logout = () => {
+    setUsernameState('');
+    setTokenState('');
+    localStorage.removeItem('username');
+    localStorage.removeItem('token');
+  };
+
   const getOctokit = () => {
     if (!username || !token) return null;
     return new Octokit({ auth: token });
@@ -19,5 +34,6 @@ export const useGitHubAuth = () => {
     error,
     setError,
     getOctokit,
+    logout,
   };
 };
\ No newline at end of file
diff --git a/src/pages/UserProfile/UserProfile.tsx b/src/pages/UserProfile/UserProfile.tsx
index abf9791..a55e987 100644
--- a/src/pages/UserProfile/UserProfile.tsx
+++ b/src/pages/UserProfile/UserProfile.tsx
@@ -1,5 +1,6 @@
-import { useParams } from "react-router-dom";
+import { useParams, useLocation } from "react-router-dom";
 import { useEffect, useState } from "react";
+import { useGitHubAuth } from "../../hooks/useGitHubAuth";
 
 type PR = {
   title: string;
@@ -8,50 +9,137 @@ type PR = {
 };
 
 export default function UserProfile() {
-  const { username } = useParams();
+  const { username: paramUsername } = useParams();
+  const location = useLocation();
+  const { username: loggedInUsername, token } = useGitHubAuth();
   const [profile, setProfile] = useState<any>(null);
   const [prs, setPRs] = useState<PR[]>([]);
   const [loading, setLoading] = useState(true);
+  const [editBio, setEditBio] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const isEdit = new URLSearchParams(location.search).get("edit") === "1";
+  const isOwnProfile = paramUsername === loggedInUsername;
+  const maxBioLength = 160;
 
   useEffect(() => {
     async function fetchData() {
-      if (!username) return;
-
-      const userRes = await fetch(`https://api.github.com/users/${username}`);
+      if (!paramUsername) return;
+      const userRes = await fetch(`https://api.github.com/users/${paramUsername}`);
       const userData = await userRes.json();
       setProfile(userData);
-
-      const prsRes = await fetch(`https://api.github.com/search/issues?q=author:${username}+type:pr`);
+      setEditBio(userData.bio || "");
+      const prsRes = await fetch(`https://api.github.com/search/issues?q=author:${paramUsername}+type:pr`);
       const prsData = await prsRes.json();
       setPRs(prsData.items);
       setLoading(false);
     }
-
     fetchData();
-  }, [username]);
+  }, [paramUsername]);
+
+  const handleSave = async () => {
+    if (!token) return;
+    setSaving(true);
+    await fetch("https://api.github.com/user", {
+      method: "PATCH",
+      headers: {
+        "Authorization": `token ${token}`,
+        "Accept": "application/vnd.github+json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ bio: editBio }),
+    });
+    setSaving(false);
+    window.location.href = `/user/${paramUsername}`;
+  };
 
-  if (loading) return <div className="text-center mt-10">Loading...</div>;
+  const handleCancel = () => {
+    setEditBio(profile.bio || "");
+    setEditMode(false);
+  };
+
+  if (loading) return (
+    <div className="flex justify-center items-center min-h-[60vh]">
+      <svg className="animate-spin h-10 w-10 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+    </div>
+  );
 
   return (
-    <div className="max-w-3xl mx-auto mt-10 p-4 bg-white shadow-xl rounded-xl">
+    <div className="flex flex-col items-center bg-gradient-to-br from-white to-gray-100 shadow-2xl rounded-2xl p-8 max-w-xl mx-auto mt-16">
       {profile && (
-        <div className="text-center">
-          <img src={profile.avatar_url} className="w-24 h-24 mx-auto rounded-full" />
-          <h2 className="text-2xl font-bold mt-2">{profile.login}</h2>
-          <p className="text-gray-600">{profile.bio}</p>
+        <div className="flex flex-col items-center w-full">
+          <div className="relative group">
+            <img
+              src={profile.avatar_url}
+              alt="Avatar"
+              className="w-32 h-32 rounded-full border-4 border-blue-400 shadow-lg transition-transform group-hover:scale-105"
+            />
+            {isOwnProfile && !isEdit && (
+              <span className="absolute bottom-2 right-2 bg-blue-600 text-white rounded-full p-1 shadow-lg cursor-pointer" title="Edit Profile" onClick={() => window.location.href = `/user/${paramUsername}?edit=1`}>
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M15.232 5.232l3.536 3.536M9 13l6.586-6.586a2 2 0 112.828 2.828L11.828 15.828a2 2 0 01-2.828 0L9 13zm0 0V17h4" />
+                </svg>
+              </span>
+            )}
+          </div>
+          <h2 className="text-3xl font-bold mt-4">{profile.login}</h2>
+          {isEdit && isOwnProfile ? (
+            <div className="mt-4 w-full">
+              <div className="flex items-center mb-2">
+                <span className="font-semibold text-gray-700 mr-2">Bio</span>
+                <span className="text-xs text-gray-400">({editBio.length}/{maxBioLength})</span>
+              </div>
+              <textarea
+                className="w-full border-2 border-blue-200 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-400 text-gray-800 text-base resize-none shadow"
+                rows={3}
+                maxLength={maxBioLength}
+                value={editBio}
+                onChange={e => setEditBio(e.target.value)}
+                placeholder="Edit your bio"
+              />
+              <div className="flex gap-3 mt-3">
+                <button
+                  className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow transition"
+                  onClick={handleSave}
+                  disabled={saving}
+                >
+                  {saving ? "Saving..." : "Save Bio"}
+                </button>
+                <button
+                  className="px-6 py-2 bg-gray-300 hover:bg-gray-400 text-gray-800 rounded-full shadow transition"
+                  onClick={handleCancel}
+                  disabled={saving}
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          ) : (
+            <p className="text-lg text-gray-700 mt-4 text-center max-w-md">{profile.bio || <span className="italic text-gray-400">No bio provided.</span>}</p>
+          )}
         </div>
       )}
-
-      <h3 className="text-xl font-semibold mt-6 mb-2">Pull Requests</h3>
-      <ul className="list-disc ml-6 space-y-2">
+      <h3 className="text-2xl font-semibold mt-10 mb-4 w-full text-left">Pull Requests</h3>
+      <div className="grid grid-cols-1 gap-4 w-full">
+        {prs.length === 0 && <div className="text-gray-400 italic">No pull requests found.</div>}
         {prs.map((pr, i) => (
-          <li key={i}>
-            <a href={pr.html_url} target="_blank" className="text-blue-600 hover:underline">
-              {pr.title}
-            </a>
-          </li>
+          <div key={i} className="bg-white rounded-xl shadow flex flex-col md:flex-row items-start md:items-center p-4 border border-gray-100 hover:shadow-lg transition">
+            <div className="flex-1">
+              <a href={pr.html_url} target="_blank" rel="noopener noreferrer" className="text-blue-600 font-semibold hover:underline text-lg flex items-center">
+                <svg className="w-5 h-5 mr-2 text-blue-400" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                </svg>
+                {pr.title}
+              </a>
+              <div className="text-sm text-gray-500 mt-1">{pr.repository_url.split("/").pop()}</div>
+            </div>
+            <span className="ml-0 md:ml-4 mt-2 md:mt-0 inline-block bg-green-100 text-green-700 text-xs font-semibold px-3 py-1 rounded-full">PR</span>
+          </div>
         ))}
-      </ul>
+      </div>
     </div>
   );
 }