From 6616f0fede6fa710bcf925222b14068308019f3e Mon Sep 17 00:00:00 2001 From: Trailblazer09 Date: Sun, 27 Jul 2025 19:53:10 +0530 Subject: [PATCH 1/2] fixed: theme switch bug for login & contributors pages respectively --- src/App.tsx | 2 +- src/components/Navbar.tsx | 2 +- src/{ => context}/ThemeContext.tsx | 0 src/hooks/useTheme.ts | 31 ------ src/main.tsx | 2 +- src/pages/Contact/Contact.tsx | 4 +- src/pages/Contributors/Contributors.tsx | 113 +++++++--------------- src/pages/Home/Home.tsx | 104 ++++++++++---------- src/pages/Login/Login.tsx | 120 ++++++++++++------------ 9 files changed, 151 insertions(+), 227 deletions(-) rename src/{ => context}/ThemeContext.tsx (100%) delete mode 100644 src/hooks/useTheme.ts diff --git a/src/App.tsx b/src/App.tsx index e4c1995..4fcc2b4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,7 +3,7 @@ import Footer from "./components/Footer"; import ScrollProgressBar from "./components/ScrollProgressBar"; import { Toaster } from "react-hot-toast"; import Router from "./Routes/Router"; -import ThemeWrapper from "./ThemeContext"; // ✅ import your wrapper +import ThemeWrapper from "./context/ThemeContext"; // ✅ import your wrapper function App() { return ( diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index bf67ba3..6b5c903 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,6 +1,6 @@ import { Link } from "react-router-dom"; import { useState, useContext } from "react"; -import { ThemeContext } from "../ThemeContext"; +import { ThemeContext } from "../context/ThemeContext"; const Navbar: React.FC = () => { const [isOpen, setIsOpen] = useState(false); diff --git a/src/ThemeContext.tsx b/src/context/ThemeContext.tsx similarity index 100% rename from src/ThemeContext.tsx rename to src/context/ThemeContext.tsx diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts deleted file mode 100644 index af536f4..0000000 --- a/src/hooks/useTheme.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { useEffect, useState } from "react"; - -type ThemeMode = "light" | "dark"; - -const getInitialTheme = (): ThemeMode => { - const stored = localStorage.getItem("theme"); - if (stored === "light" || stored === "dark") { - return stored; - } - return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; -}; - -export const useTheme = () => { - const [theme, setTheme] = useState(getInitialTheme); - - useEffect(() => { - const root = document.documentElement; - - if (theme === "dark") { - root.classList.add("dark"); - root.classList.remove("light"); - } else { - root.classList.add("light"); - root.classList.remove("dark"); - } - - localStorage.setItem("theme", theme); - }, [theme]); - - return { theme, setTheme } -} diff --git a/src/main.tsx b/src/main.tsx index 699b94e..4c5b79d 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,7 +3,7 @@ import { createRoot } from "react-dom/client"; import App from "./App.tsx"; import "./index.css"; import { BrowserRouter } from "react-router-dom"; -import ThemeWrapper from "./ThemeContext.tsx"; +import ThemeWrapper from "./context/ThemeContext.tsx"; createRoot(document.getElementById("root")!).render( diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx index 41dbd42..8515032 100644 --- a/src/pages/Contact/Contact.tsx +++ b/src/pages/Contact/Contact.tsx @@ -1,7 +1,7 @@ import { useState, useContext } from "react"; import { Github, Mail, Phone, Send, X, CheckCircle } from "lucide-react"; -import { ThemeContext } from "../../ThemeContext"; -import type { ThemeContextType } from "../../ThemeContext"; +import { ThemeContext } from "../../context/ThemeContext"; +import type { ThemeContextType } from "../../context/ThemeContext"; function Contact() { const [showPopup, setShowPopup] = useState(false); diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx index 4ccec97..a9fd8c3 100644 --- a/src/pages/Contributors/Contributors.tsx +++ b/src/pages/Contributors/Contributors.tsx @@ -13,9 +13,6 @@ import { } from "@mui/material"; import { FaGithub } from "react-icons/fa"; // GitHub Icon import axios from "axios"; -import { Link } from "react-router-dom"; -import { useTheme } from "../../hooks/useTheme"; - interface Contributor { id: number; login: string; @@ -23,43 +20,29 @@ interface Contributor { contributions: number; html_url: string; } - const ContributorsPage = () => { const [contributors, setContributors] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - const { theme } = useTheme(); - - // Theme-based colors - const bgColor = theme === "dark" ? "#1f1f1f" : "#FFFFFF"; - const textColor = theme === "dark" ? "#FFFFFF" : "#333333"; - const cardBg = theme === "dark" ? "#2a2a2a" : "#FFFFFF"; - const borderColor = theme === "dark" ? "#444444" : "#E0E0E0"; - const hoverBorder = theme === "dark" ? "#666666" : "#C0C0C0"; - + // Fetch contributors data from GitHub API useEffect(() => { const fetchContributors = async () => { try { const response = await axios.get( "https://api.github.com/repos/mehul-m-prajapati/github_tracker/contributors", - { withCredentials: false } + { + withCredentials: false, + } ); setContributors(response.data); } catch (err) { - setError("Failed to fetch contributors. Please try again later."); + setError("Failed to fetch contributors. Please try again later." + err); } finally { setLoading(false); } }; - fetchContributors(); }, []); - - // To trigger re-render on theme change (optional) - useEffect(() => { - setContributors((prev) => [...prev]); - }, [theme]); - if (loading) { return ( @@ -67,7 +50,6 @@ const ContributorsPage = () => { ); } - if (error) { return ( @@ -75,70 +57,47 @@ const ContributorsPage = () => { ); } - return ( - - - 🤝 GitHub Contributors - - - - {contributors.map((contributor) => ( - - +
+ + + 🤝 GitHub Contributors + + + {contributors.map((contributor) => ( + - + {contributor.login} - + {contributor.contributions} Contributions - - Thank you for your valuable contributions! + + Thank you for your valuable contributions to our community!
); }; diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 613a32e..7645397 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -81,7 +81,7 @@ const Home: React.FC = () => { if (["open", "closed", "merged"].includes(filterType)) { filtered = filtered.filter((item) => filterType === "merged" - ? !!item.pull_request?.merged_at + ? item.pull_request?.merged_at : item.state === filterType ); } @@ -190,14 +190,14 @@ const Home: React.FC = () => { - setTab(newValue)} sx={{ flex: 1 }}> + setTab(v)} sx={{ flex: 1 }}> @@ -240,57 +240,59 @@ const Home: React.FC = () => { ) : ( - - - - - - Title - Repository - State - Created - - - - {displayData.map((item: GitHubItem) => ( - - - - {item.title} - - - - {item.repository_url.split("/").slice(-1)[0]} - - - {item.pull_request?.merged_at ? "merged" : item.state} - - - {formatDate(item.created_at)} - + + + +
+ + + Title + Repository + State + Created - ))} - -
- - + + + {displayData.map((item: GitHubItem) => ( + + + + {item.title} + + + + {item.repository_url.split("/").slice(-1)[0]} + + + {item.pull_request?.merged_at ? "merged" : item.state} + + + {formatDate(item.created_at)} + + + ))} + + + + + )} ); }; -export default Home; +export default Home; \ No newline at end of file diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx index 9cd94dd..5cdc342 100644 --- a/src/pages/Login/Login.tsx +++ b/src/pages/Login/Login.tsx @@ -1,6 +1,8 @@ -import React, { useState, ChangeEvent, FormEvent } from "react"; +import React, { useState, ChangeEvent, FormEvent, useContext } from "react"; import axios from "axios"; import { useNavigate } from "react-router-dom"; +import { ThemeContext } from "../../context/ThemeContext"; +import type { ThemeContextType } from "../../context/ThemeContext"; const backendUrl = import.meta.env.VITE_BACKEND_URL; @@ -15,6 +17,8 @@ const Login: React.FC = () => { const [isLoading, setIsLoading] = useState(false); const navigate = useNavigate(); + const themeContext = useContext(ThemeContext) as ThemeContextType; + const { mode } = themeContext; const handleChange = (e: ChangeEvent) => { const { name, value } = e.target; @@ -40,39 +44,48 @@ const Login: React.FC = () => { }; return ( -
- {/* Enhanced animated background elements */} +
+ {/* Animated background elements */}
-
-
-
-
+
+
+
+
- {/* Enhanced GitHub Logo/Icon */} + {/* Branding */}
- Logo -
+ Logo +
-

+

GitHubTracker

-

Track your GitHub journey

+

+ Track your GitHub journey +

- {/* Login Form */} -
-

Welcome Back

+ {/* Form Card */} +
+

+ Welcome Back +

-
- - - -
{ onChange={handleChange} autoComplete="username" required - className="w-full pl-10 pr-4 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 backdrop-blur-sm" + className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${ + mode === "dark" + ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500" + : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400" + }`} />
-
- - - -
{ value={formData.password} onChange={handleChange} required - className="w-full pl-10 pr-4 py-4 bg-white/5 border border-white/10 rounded-2xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 backdrop-blur-sm" + className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${ + mode === "dark" + ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500" + : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400" + }`} />
- {/* Message Display */} + {/* Message */} {message && (
{message}
)} - {/* Additional Links */} -
- - Forgot your password? - + {/* Footer Text */} +
+

+ Don't have an account? + + Sign up here + +

- - {/* Footer */} -
-

- Don't have an account? - - Sign up here - -

-
- {/* Additional background coverage */} -
+
); }; -export default Login; +export default Login; \ No newline at end of file From 8e36ab8dbc1fa345d7bf20d268c9e297869e1c6c Mon Sep 17 00:00:00 2001 From: Mehul Date: Tue, 29 Jul 2025 12:35:51 +0530 Subject: [PATCH 2/2] revert link --- src/pages/Contributors/Contributors.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx index a9fd8c3..5d4e8f3 100644 --- a/src/pages/Contributors/Contributors.tsx +++ b/src/pages/Contributors/Contributors.tsx @@ -11,8 +11,11 @@ import { CircularProgress, Alert, } from "@mui/material"; -import { FaGithub } from "react-icons/fa"; // GitHub Icon -import axios from "axios"; +import { FaGithub } from "react-icons/fa"; +import axios from "axios" +import { Link } from "react-router-dom"; + + interface Contributor { id: number; login: string; @@ -20,6 +23,8 @@ interface Contributor { contributions: number; html_url: string; } + + const ContributorsPage = () => { const [contributors, setContributors] = useState([]); const [loading, setLoading] = useState(true); @@ -66,6 +71,11 @@ const ContributorsPage = () => { {contributors.map((contributor) => ( + + { + ))}