From 379bd518bb80fd4d30a0f0b6ea39126817d47cd0 Mon Sep 17 00:00:00 2001 From: Praveen Patro Date: Sun, 12 May 2024 00:46:24 +0530 Subject: [PATCH] Added followers & following --- src/components/Introbar/Introbar.tsx | 57 +- src/components/Profilebox/Profilebox.css | 10 +- src/components/Profilebox/Profilebox.scss | 720 +++++++++++----------- src/components/Profilebox/Profilebox.tsx | 284 ++++++--- 4 files changed, 606 insertions(+), 465 deletions(-) diff --git a/src/components/Introbar/Introbar.tsx b/src/components/Introbar/Introbar.tsx index 37892ea..771bce3 100644 --- a/src/components/Introbar/Introbar.tsx +++ b/src/components/Introbar/Introbar.tsx @@ -1,4 +1,4 @@ -import { useState, useTransition } from "react"; +import { useState, useTransition } from "react"; import "./Introbar.css"; import Profilebox from "../Profilebox/Profilebox"; @@ -8,9 +8,11 @@ const Introbar = () => { const [userData, setUserData] = useState({}); const [userFound, setUserFound] = useState(null); - const [repos,setRepos] = useState([]); + const [repos, setRepos] = useState([]); + const [followers, setFollowers] = useState([]); + const [following, setFollowing] = useState([]); - const handleChange = (event:any) => { + const handleChange = (event: any) => { event.preventDefault(); startTransition(() => { fetch(`https://api.github.com/users/${userName}`) @@ -21,13 +23,23 @@ const Introbar = () => { return res.json(); }) .then((data) => { - fetch(data.repos_url) - .then((res) => res.json()) - .then((data) => { - setRepos(data); - }); + // Remove {/other_user} from the following_url + const followingUrl = data.following_url.replace("{/other_user}", ""); + + // Fetch data for repos, followers, and following + Promise.all([ + fetch(data.repos_url).then((res) => res.json()), + fetch(data.followers_url).then((res) => res.json()), + fetch(followingUrl).then((res) => res.json()), + ]).then(([reposData, followersData, followingData]) => { + setRepos(reposData); + setFollowers(followersData); + setFollowing(followingData); + }); + + // Set user data and name setUserData(data); - setUserName(data.login) + setUserName(data.login); setUserFound(true); }) .catch((error) => { @@ -49,22 +61,29 @@ const Introbar = () => { Effortless and efficient exploration !
-
- {setUserName(e.target.value)}} - type="text" - placeholder="Search for a user" - /> - -
+
+ { + setUserName(e.target.value); + }} + type="text" + placeholder="Search for a user" + /> + +
{userFound ? ( isPending ? (

Searching...

) : ( - + ) ) : userFound != null ? (

No User Found

diff --git a/src/components/Profilebox/Profilebox.css b/src/components/Profilebox/Profilebox.css index 199219a..3954a13 100644 --- a/src/components/Profilebox/Profilebox.css +++ b/src/components/Profilebox/Profilebox.css @@ -3,7 +3,9 @@ background-image: linear-gradient(rgb(0, 0, 0), rgb(43, 43, 42)); opacity: 0.8; border-radius: 20px; - box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; + box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, + rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, + rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; padding: 30px; } .databox .profilebox { @@ -103,7 +105,9 @@ } .databox .profiledetails .repobox a .repo { border-radius: 20px; - box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px; + box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, + rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, + rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px; background-color: #000000; padding: 10px 20px; } @@ -338,4 +342,4 @@ .databox .profiledetails .repobox a .repo .countdetails button { padding: 5px 5px; } -}/*# sourceMappingURL=Profilebox.css.map */ \ No newline at end of file +} /*# sourceMappingURL=Profilebox.css.map */ diff --git a/src/components/Profilebox/Profilebox.scss b/src/components/Profilebox/Profilebox.scss index 4b0ee7a..64b2a75 100644 --- a/src/components/Profilebox/Profilebox.scss +++ b/src/components/Profilebox/Profilebox.scss @@ -6,441 +6,417 @@ $poppins: "Poppins", sans-serif; $roboto: "Roboto", sans-serif; .databox { - margin: 30px; - background-image: linear-gradient(rgb(0, 0, 0), rgb(43, 43, 42)); - opacity: 0.8; - border-radius: 20px; - box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, - rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; - padding: 30px; + margin: 30px; + background-image: linear-gradient(rgb(0, 0, 0), rgb(43, 43, 42)); + opacity: 0.8; + border-radius: 20px; + box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, + rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, + rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; + padding: 30px; + + .profilebox { + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + gap: 50px; + + img { + height: 250px; + width: 250px; + border-radius: 30%; + } - .profilebox { - position: relative; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - gap: 50px; - - img { - height: 250px; - width: 250px; - border-radius: 30%; - } + h1 { + font-family: $poppins; + font-size: 3rem; + color: $secondarycolor; + } - h1 { - font-family: $poppins; - font-size: 3rem; - color: $secondarycolor; - } + h3 { + font-family: $roboto; + font-size: 1.5rem; + color: $secondarycolor; + } - h3 { - font-family: $roboto; - font-size: 1.5rem; - color: $secondarycolor; - } + h5, + .blog { + margin: 2px 0; + font-family: $poppins; + font-size: 1rem; + color: $secondarycolor; + } - h5, - .blog { - margin: 2px 0; - font-family: $poppins; - font-size: 1rem; - color: $secondarycolor; - } + p { + font-family: $roboto; + font-size: 1.4rem; + color: $secondarycolor; + word-wrap: break-word; + margin-bottom: 20px; + } - p { - font-family: $roboto; - font-size: 1.4rem; - color: $secondarycolor; - word-wrap: break-word; - margin-bottom: 20px; - } + a.infobtns { + font-size: 1rem; + color: $secondarycolor; + font-family: $poppins; + margin: 0px 20px 0px 0px; + background-color: #f30c0cce; + border-radius: 20px; + padding: 10px 15px; + } - a.infobtns { - font-size: 1rem; - color: $secondarycolor; - font-family: $poppins; - margin: 0px 20px 0px 0px; - background-color: #f30c0cce; - border-radius: 20px; - padding: 10px 15px; - } + a.profile { + position: relative; + font-family: $roboto; + font-size: 1.4rem; + color: $secondarycolor; + padding: 10px 15px; + background-color: #4814d6f1; + border-radius: 10px; + } + } - a.profile { - position: relative; - font-family: $roboto; - font-size: 1.4rem; - color: $secondarycolor; - padding: 10px 15px; - background-color: #4814d6f1; - border-radius: 10px; + .profiledetails { + position: relative; + margin-top: 30px; - } + h1 { + font-family: $poppins; + font-size: 2.5rem; + color: $secondarycolor2; + margin: 30px 0px; } - .profiledetails { - position: relative; - margin-top: 30px; + h2 { + font-family: $poppins; + font-size: 1.6rem; + line-height: 25px; + color: $secondarycolor2; + margin: 15px 40px; + + span { + font-family: $roboto; + font-size: 1.5rem; + color: $secondarycolor; + } + + a { + font-family: $roboto; + font-size: 1.5rem; + color: $secondarycolor; + text-decoration: none; + margin: 0px 10px; + } + } - h1 { + .repobox { + width: 100%; + padding: 10px 30px; + + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 20px; + + a { + flex: 30%; + .repo { + border-radius: 20px; + box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, + rgba(240, 46, 170, 0.3) -10px 10px, + rgba(240, 46, 170, 0.2) -15px 15px, + rgba(240, 46, 170, 0.1) -20px 20px, + rgba(240, 46, 170, 0.05) -25px 25px; + background-color: $maincolor; + padding: 10px 20px; + + h3 { font-family: $poppins; - font-size: 2.5rem; - color: $secondarycolor2; - margin: 30px 0px; - } + font-size: 1.2rem; + color: $secondarycolor; + } - h2 { + a { font-family: $poppins; - font-size: 1.6rem; - line-height: 25px; - color: $secondarycolor2; - margin: 15px 40px; - - span { - font-family: $roboto; - font-size: 1.5rem; - color: $secondarycolor; - } + font-size: 0.9rem; + color: $secondarycolor; + text-decoration: none; + } - a { - font-family: $roboto; - font-size: 1.5rem; - color: $secondarycolor; - text-decoration: none; - margin: 0px 10px; + p { + font-family: $poppins; + font-size: 0.7rem; + line-height: 15px; + color: $secondarycolor; + height: 15px; + overflow: hidden; + text-overflow: ellipsis; + } + + .iddata { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + gap: 10px; + + h3 { + font-family: $poppins; + font-size: 0.8rem; + color: $secondarycolor; } - } + } - .repobox { + .languages { + margin: 10px 0; width: 100%; - padding:10px 30px; - display: flex; - flex-direction: row; flex-wrap: wrap; - gap: 20px; + justify-content: space-evenly; + align-items: center; + + button { + font-family: $poppins; + font-size: 0.8rem; + color: $secondarycolor; + background-color: $maincolor2; + border-radius: 20px; + padding: 5px 10px; + } + } - a { - flex: 30%; - .repo { - border-radius: 20px; - box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px; - background-color: $maincolor; - padding: 10px 20px; - - h3{ - font-family: $poppins; - font-size: 1.2rem; - color: $secondarycolor; - } - - a{ - font-family: $poppins; - font-size: .9rem; - color: $secondarycolor; - text-decoration: none; - } - - p{ - font-family: $poppins; - font-size: .7rem; - line-height: 15px; - color: $secondarycolor; - height: 15px; - overflow: hidden; - text-overflow: ellipsis; - } - - .iddata{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - gap: 10px; - - h3{ - font-family: $poppins; - font-size: .8rem; - color: $secondarycolor; - } - } - - .languages{ - margin: 10px 0; - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: center; - - button{ - font-family: $poppins; - font-size: .8rem; - color: $secondarycolor; - background-color: $maincolor2; - border-radius: 20px; - padding: 5px 10px; - } - } - - .countdetails{ - margin: 10px 0; - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: center; - - button{ - font-family: $poppins; - font-size: .8rem; - color: $secondarycolor; - background-color: blue; - border-radius: 20px; - padding: 5px 10px; - - } - - } - - } + .countdetails { + margin: 10px 0; + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + + button { + font-family: $poppins; + font-size: 0.8rem; + color: $secondarycolor; + background-color: blue; + border-radius: 20px; + padding: 5px 10px; } + } } + } } + } } +@media screen and (max-width: 1024px) { + .databox { + margin: 10px; + padding: 15px; -@media screen and (max-width: 1024px){ - .databox { - margin: 10px; - padding: 15px; - - .profilebox{ - gap:20px; + .profilebox { + gap: 20px; + img { + height: 200px; + width: 200px; + } - img{ - height: 200px; - width: 200px; - } + h1 { + font-size: 2rem; + } - h1{ - font-size: 2rem; - } + h3 { + font-size: 1.25rem; + } - h3{ - font-size: 1.25rem; - } + p { + font-size: 1.1rem; + word-wrap: break-word; + } - p{ - font-size: 1.1rem; - word-wrap: break-word; - } + a.infobtns { + padding: 10px 10px; + } - a.infobtns{ - padding: 10px 10px; - } + a.profile { + font-size: 1.1rem; + } + } - a.profile{ - font-size: 1.1rem; - } + .profiledetails { + h1 { + font-size: 2.2rem; + margin: 0px 0px; + } + + h2 { + font-size: 1.5rem; + line-height: 20px; + margin: 15px 30px; + + span { + font-size: 1.5rem; + } + a { + margin: 0px 0px; } - - .profiledetails { + } + + .repobox { + padding: 10px 20px; + gap: 25px; - h1 { - font-size: 2.2rem; - margin: 0px 0px; + a { + flex: 30%; + .repo { + border-radius: 20px; + padding: 10px 20px; + + h3 { + font-size: 1.2rem; } - h2 { - font-size: 1.5rem; - line-height: 20px; - margin: 15px 30px; - - span { - font-size: 1.5rem; - } - - a { - margin: 0px 0px; - } + a { + font-size: 1rem; } - .repobox { - padding:10px 20px; - gap: 25px; - - a { - flex: 30%; - .repo { - border-radius: 20px; - padding: 10px 20px; - - h3{ - font-size: 1.2rem; - } - - a{ - font-size: 1rem; - } - - p{ - font-size: .8rem; - line-height: 15px; - } - - .iddata{ - gap: 10px; - - } - - .countdetails{ - gap: 10px; - - button{ - padding: 5px 5px; - - } - - } - - } - } - } + p { + font-size: 0.8rem; + line-height: 15px; + } + .iddata { + gap: 10px; + } - } + .countdetails { + gap: 10px; + button { + padding: 5px 5px; + } + } + } + } + } } - + } } -@media screen and (max-width: 768px){ +@media screen and (max-width: 768px) { + html { + font-size: 10px; + } + .databox { + margin: 10px; + padding: 15px; - html{ - font-size: 10px; + .profilebox { + gap: 30px; + flex-direction: column; + + img { + height: 200px; + width: 200px; + } + + h1 { + font-size: 2.5rem; + } + + a.blog { + font-size: 1.4rem; + } + + h3 { + font-size: 1.5rem; + margin-top: 10px; + } + + p { + font-size: 1.4rem; + margin-top: 10px; + word-wrap: break-word; + } + .info-btns { + position: relative; + margin-top: 50px; + width: 100%; + text-align: center; + } + a.infobtns { + padding: 10px 15px; + } + + a.profile { + margin-top: 20px; + font-size: 1.4rem; + } } - .databox { - margin: 10px; - padding: 15px; - .profilebox{ - gap: 30px; - flex-direction: column; - - img{ - height: 200px; - width: 200px; - } + .profiledetails { + h1 { + font-size: 2.5rem; + margin: 0px 0px; + } + + h2 { + font-size: 1.6rem; + line-height: 15px; + margin: 13px 10px; + + span { + font-size: 1.5rem; + } - h1{ - font-size: 2.5rem; - } + a { + font-size: 1.3rem; + margin: 0px 0px; + } + } + .repobox { + padding: 10px 20px; + gap: 25px; + a { + flex: 30%; + .repo { + min-width: 300px; + border-radius: 20px; + padding: 10px 20px; - a.blog{ - font-size: 1.4rem; + h3 { + font-size: 1.2rem; } - h3{ - font-size: 1.5rem; - margin-top: 10px; + a { + font-size: 1rem; } - p{ - font-size: 1.4rem; - margin-top: 10px; - word-wrap: break-word; - } - .info-btns{ - position: relative; - margin-top: 50px; - width: 100%; - text-align: center; - } - a.infobtns{ - padding: 10px 15px; + p { + font-size: 0.8rem; + line-height: 15px; } - a.profile{ - margin-top: 20px; - font-size: 1.4rem; + .iddata { + gap: 10px; } - } - - .profiledetails { - - h1 { - font-size: 2.5rem; - margin: 0px 0px; - } + .countdetails { + gap: 10px; - h2 { - font-size: 1.6rem; - line-height: 15px; - margin: 13px 10px; - - span { - font-size: 1.5rem; - } - - a { - font-size: 1.3rem; - margin: 0px 0px; - } + button { + padding: 5px 5px; + } } - - .repobox { - padding:10px 20px; - gap: 25px; - - a { - flex: 30%; - .repo { - min-width: 300px; - border-radius: 20px; - padding: 10px 20px; - - h3{ - font-size: 1.2rem; - } - - a{ - font-size: 1rem; - } - - p{ - font-size: .8rem; - line-height: 15px; - } - - .iddata{ - gap: 10px; - - } - - .countdetails{ - gap: 10px; - - button{ - padding: 5px 5px; - - } - - } - - } - } - } - - + } } - + } } - -} \ No newline at end of file + } +} diff --git a/src/components/Profilebox/Profilebox.tsx b/src/components/Profilebox/Profilebox.tsx index 3b8ea78..f871bfc 100644 --- a/src/components/Profilebox/Profilebox.tsx +++ b/src/components/Profilebox/Profilebox.tsx @@ -1,8 +1,10 @@ import "./Profilebox.css"; const Profilebox = (props: any) => { - const data=props.profileData; - const repos=props.repos; + const data = props.profileData; + const repos = props.repos; + const followers = props.followers; + const following = props.following; return ( <> @@ -18,15 +20,15 @@ const Profilebox = (props: any) => {

{data.bio}

- - Followers {data.followers} - - - Following {data.following} - - - Repository {data.public_repos} - + + Followers {data.followers} + + + Following {data.following} + + + Repository {data.public_repos} +
@@ -35,76 +37,216 @@ const Profilebox = (props: any) => {
-

Profile Details

-

- Name : {data.name}{" "} -

-

- Username : @{data.login}{" "} -

-

- User Id : {data.id}{" "} -

-

- User Type : {data.type}{" "} -

-

- Node Id : {data.node_id}{" "} -

-

- Profile Picture URL :{" "} - - {data.avatar_url} - {" "} -

-

- Date Of Joining : {data.created_at}{" "} -

-

- Last Updated At : {data.updated_at}{" "} -

-

- Location : {data.location}{" "} -

-

- Company : {data.company ? data.company : "N/A"}{" "} -

+

Profile Details

+

+ Name : {data.name}{" "} +

+

+ Username : @{data.login}{" "} +

+

+ User Id : {data.id}{" "} +

+

+ User Type : {data.type}{" "} +

+

+ Node Id : {data.node_id}{" "} +

+

+ Profile Picture URL :{" "} + + {data.avatar_url} + {" "} +

+

+ Date Of Joining : {data.created_at}{" "} +

+

+ Last Updated At : {data.updated_at}{" "} +

+

+ Location : {data.location}{" "} +

+

+ Company : {data.company ? data.company : "N/A"}{" "} +

-

Repositiories

+

Followers

- {repos.map((repo:any) => { + {followers.map((followers: any) => { + return ( + +
+ + avatar +

{followers.login}

+ + + {followers.html_url} + +
+

ID : {followers.id}

+

Node ID : {followers.node_id}

+
- return( - -
-

{repo.name}

-

{repo.description}

- {repo.homepage} -
-

ID : {repo.id}

-

Node ID : {repo.node_id}

-
- {/*

Languages

+

Counts

+ +
+ + ); + })} +
+ +

Following

+
+ {following.map((following: any) => { + return ( + +
+ + avatar +

{following.login}

+ + + + {following.html_url} + +
+

ID : {following.id}

+

Node ID : {following.node_id}

+
+ +

Counts

+ +
+ + ); + })} +
+ +

Repositories

+
+ {repos.map((repo: any) => { + return ( + +
+

{repo.name}

+

{repo.description}

+ + {repo.homepage} + +
+

ID : {repo.id}

+

Node ID : {repo.node_id}

+
+ {/*

Languages

*/} -

Counts

-
- - - - -
-

Size

-

{repo.size}

-
- ) - }) - } +

Counts

+
+ + + + +
+

Size

+

{repo.size}

+
+ + ); + })}