From cff7a119e87cad2fcf2b1e4283a405aa0fafea8d Mon Sep 17 00:00:00 2001 From: Safia Dahir Date: Sun, 14 Sep 2025 22:02:50 -0500 Subject: [PATCH] done --- index.html | 2 +- src/App.jsx | 16 ++++++++++++---- src/components/Navbar.jsx | 3 +++ src/pages/Home.jsx | 23 ++++++++++++++++++++--- src/pages/Projects.jsx | 29 ++++++++++++++++++++++------- 5 files changed, 58 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 0c589ec..8768a46 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + GitHub Project
diff --git a/src/App.jsx b/src/App.jsx index f3deba0..1c52281 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,20 +1,28 @@ import React from 'react'; import Navbar from './components/Navbar'; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import Home from "./pages/Home"; +import Projects from "./pages/Projects"; -// TODO: Import react router dom here +// TODO: Import react router dom here = done import Footer from './components/Footer'; import './styles/App.css'; function App() { return ( +
- +
- {/* TODO: Add react router dom routes here */} - + + } /> + } /> + + =
+
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index c371cae..502de0f 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import {Link} from "react-router-dom"; // TODO: Import LINK from react router dom components import { useLocation } from 'react-router-dom' @@ -19,9 +20,11 @@ const Navbar = () => { diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index aaac8db..ef635b0 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,7 +1,8 @@ import React, { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; +import axios from "axios"; -// TODO: Import axios here +// TODO: Import axios here = done import moment from 'moment'; import { Users, Star, GitBranch, MapPin, Calendar, ExternalLink } from 'lucide-react'; @@ -13,9 +14,25 @@ const Home = () => { const [error, setError] = useState(null); // TODO: Fetch user data from GitHub API using axios and useEffect and set the user state, also handle the loading and error states - // API: https://api.github.com/users/YOUR_USERNAME - + // API: https://api.github.com/users/safiacodes +useEffect (() => { + const fetchUser = async () => { + try { + setLoading(true); + await axios + .get ("https://api.github.com/users/safiyacodes") + .then ((response)=> { + setUser(response.data); + setLoading(false); + }); + } catch (error){ + console.log(error); + setLoading(false); + } + }; + fetchUser(); +},[] ); if (loading) { return
Loading profile data...
; diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx index def4d8a..bcd5f5a 100644 --- a/src/pages/Projects.jsx +++ b/src/pages/Projects.jsx @@ -1,8 +1,5 @@ import React, { useState, useEffect } from 'react'; - -// TODO: Import axios here - - +import axios from 'axios'; import ProjectCard from '../components/ProjectCard'; import '../styles/Projects.css'; @@ -11,10 +8,28 @@ const Projects = () => { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - // TODO: Fetch repositories from GitHub API using axios and useEffect and set the repos state, also handle the loading and error states - // API: https://api.github.com/users/YOUR_GITHUB_USERNAME/repos?per_page=10&sort=updated - + // TODO: Fetch repositories from GitHub API using axios and useEffect and set the repos + // state, also handle the loading and error states + // API: https://api.github.com/users/safiacodes/repos?per_page=10&sort=updated +useEffect (() => { + const fetchUserProjects = async () => { + try { + setLoading(true); + setError(null); + const response = await axios.get("https://api.github.com/users/safiyacodes/repos?per_page=10&sort=updated"); + +setRepos(response.data || []); + } + catch (error){ + setError("Failed to load user. Please try again."); + console.error(error); + } finally { + setLoading (false); + } + }; + fetchUserProjects(); +}, []); if (loading) { return
Loading repositories...
;