update ayaa sameeyay

src/App.js

@@ -1,20 +1,28 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 // Import the "useState" and "useEffect" hooks from React
 // Soo jiido "useState" iyo "useEffect"
 
+
 // Import the "MyProfile" component
 // Soo jiido "MyProfile" component-ka
 
+import MyProfile from "./components/MyProfile";
+
 // Import the "axios" library
 // Soo jiido "axios" hoos
 
+import axios from "axios";
+
 import "./App.css";
 
 function App() {
 
   // Create 3 states, "profile", "followers", and "following"
   // Samee 3 state, "profile", "followers", iyo "following"
+  const [profile, setProfile]= useState({});
+  const [followers, setFollowers]= useState({});
+  const [following,setFollowing]= useState({});
 
 
   // API For Profile = https://api.github.com/users/<your-github-username>
@@ -23,14 +31,35 @@ function App() {
 
   // Use axios to fetch data from the API using the useEffect hook
   // Halkaan isticmaal axios adigoo kasoo jiidanaayo waxaa u baahantahay API, useEffect hook-na isticmaal
-
+  useEffect(()=>{
+    axios.get("https://api.github.com/users/hafsa-ali5353").then((response)=>{
+      setProfile(response.data);
+    }).catch((error) => {
+      console.log(error);
+
+    });},[]);
+    useEffect(()=>{
+      axios.get("https://api.github.com/users/hafsa-ali5353/followers").then((response)=>{
+        setFollowers(response.data);
+      }).catch((error) => {
+        console.log(error);
+
+      });},[]);
+
+     useEffect(()=>{
+      axios.get("https://api.github.com/users/hafsa-ali5353/following").then((response)=>{
+        setFollowing(response.data);
+      }).catch((error) => {
+        console.log(error);
+
+      });},[]);
   return (
     <div className="bg-white md:mx-auto rounded shadow-xl w-full md:w-1/2 overflow-hidden">
       <div className="h-[140px] bg-gradient-to-r from-cyan-500 to-blue-500"></div>
 
       {/* Show "MyProfile" component here and give it 3 props, "profile", "followers", and "following" */}
       {/* Halkaan soo gali "MyProfile", 3 props-na sii, "profile", "followers", iyo "following" */}
-
+<MyProfile profile={profile} followers={followers} following={following} />
     </div>
   );
 }

src/components/MyProfile.js

@@ -5,15 +5,20 @@ import React from 'react'
 
 // Import "FollowingList" and "FollowersList" components
 // Soo jiido "FollowingList" iyo "FollowersList" components-ka
+import FollowingList  from "./following/FollowingList";
+import FollowersList from "./followers/FollowersList";
 
 // Import "Route", "Routes", "Link", and "useLocation" from react-router-dom
 // Ka soo jiido "Route", "Routes", "Link", iyo "useLocation" react-router-dom-ka
-
+import {Route, Routes, Link, useLocation} from "react-router-dom";
 function MyProfile(props) {
-
+ 
     // Destructure the props you passed from App.js
     // Kala bixi props-kii lagaaga soo diray App.js
-
+
+
+   const {profile,followers,following}=props;
+
     const location = useLocation();
 
   return (
@@ -48,9 +53,16 @@ function MyProfile(props) {
 
     <div className="flex flex-col gap-3">
 
+
     {/** Use Routes and Route to show "FollowingList" and "FollowersList" components and send them their props, Make sure they both have correct path */}
     {/** Adigoo isticmaalaayo Routes iyo Route, tus "FollowingList" iyo "FollowersList", una dir props-ka ay u baahanyihiin. Hubi in "FollowersList" ay Path="/" leedahay, "FollowingList"-na ay Path="/following" leedahay */}
+    <Routes>
+    <Route path="/" element={<FollowersList followers={followers}/>}></Route>
+    <Route path="/following" element={<FollowingList following={following}/>}></Route>
+
+
 
+      </Routes>
     </div>
   </div>
   )

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-
+import {BrowserRouter} from "react-router-dom";
 // import "BrowserRouter" from "react-router-dom"
 
 import './index.css';
@@ -11,7 +11,8 @@ root.render(
   <React.StrictMode>
     {/* Wrap the "App" component with "BrowserRouter" */}
     {/* "BrowserRouter" hugi "App" */}
-
+    <BrowserRouter>
     <App />
+    </BrowserRouter>
   </React.StrictMode>
 );