From 82d868ae3d4235b730072689445a8633659cb054 Mon Sep 17 00:00:00 2001 From: Zidane Hammouda Date: Mon, 17 Jan 2022 21:31:42 +0100 Subject: [PATCH 1/5] Implements Profile componenet using Hooks --- .env.example | 1 - package-lock.json | 8 ++++ src/components/profile/Profile.js | 73 ++++++++++++++----------------- 3 files changed, 42 insertions(+), 40 deletions(-) delete mode 100644 .env.example diff --git a/.env.example b/.env.example deleted file mode 100644 index b6df08a..0000000 --- a/.env.example +++ /dev/null @@ -1 +0,0 @@ -REACT_APP_GITHUB_TOKEN = YOUR_GITHUB_TOKEN_HERE \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index baf5bd4..d20bba4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3018,6 +3018,14 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz", "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==" }, + "axios": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz", + "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==", + "requires": { + "follow-redirects": "^1.14.4" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", diff --git a/src/components/profile/Profile.js b/src/components/profile/Profile.js index 4e43996..ebc6195 100644 --- a/src/components/profile/Profile.js +++ b/src/components/profile/Profile.js @@ -1,90 +1,85 @@ -import React from "react"; +import React,{useState, useEffect} from "react"; import axios from "axios"; import email from "../../assets/img/email.png"; import anonymous_avatar from "../../assets/img/anonymous.png" -export default class Profile extends React.Component { - constructor() { - super() - this.state = { - profile: {} - } - } - componentDidMount() { - axios.get(`https://api.github.com/user`) - .then((response) => { - this.setState({profile: response.data}) - }) - } +const Profile = () => { + const [profile,setProfile] = useState({}) - handleNavigateToProfile = () => { - window.location = this.state.profile.html_url + const handleNavigateToProfile = () => { + window.location = profile.html_url } - - render() { - return ( -
+ + useEffect(() => { + axios.get(`https://api.github.com/user`) + .then((response) => { + setProfile(response.data) + }) + }) + + return ( +
avatar -

- {this.state.profile.name}
- { this.state.profile.login && +

+ {profile.name}
+ { profile.login && - @{this.state.profile.login} + @{profile.login} }

- {this.state.profile.bio} + {profile.bio}
- { this.state.profile.followers && + { profile.followers && - {this.state.profile.followers} followers + {profile.followers} followers } - { this.state.profile.following && + { profile.following && . - {this.state.profile.following} following + {profile.following} following }
- {this.state.profile.email && + {profile.email && ( email - {this.state.profile.email} + {profile.email} ) } - {this.state.profile.location && + {profile.location && ( - {this.state.profile.location} + {profile.location} ) } - {this.state.profile.company && + {profile.company && ( - {this.state.profile.company} + {profile.company} ) } @@ -92,7 +87,7 @@ export default class Profile extends React.Component {
- ) - } + ) +} -} \ No newline at end of file +export default Profile \ No newline at end of file From 1dfe708998ec4fe784321974e8019695d1f89901 Mon Sep 17 00:00:00 2001 From: Zidane Hammouda Date: Mon, 17 Jan 2022 22:29:43 +0100 Subject: [PATCH 2/5] Implements RepositoriesList componenet using Hooks --- .../repositories/RepositoriesList.js | 89 +++++++++---------- 1 file changed, 43 insertions(+), 46 deletions(-) diff --git a/src/components/repositories/RepositoriesList.js b/src/components/repositories/RepositoriesList.js index d24787c..b1a37a5 100644 --- a/src/components/repositories/RepositoriesList.js +++ b/src/components/repositories/RepositoriesList.js @@ -1,60 +1,56 @@ -import React from "react"; +import React,{useState,useEffect} from "react"; import axios from "axios"; import SingleRepository from "./SingleRepository"; -export default class RepositoriesList extends React.Component { - constructor() { - super() - this.state = { - filters: { - page: 1, - per_page: 10, - visibility: "public" - }, - repos: [] - } - } - - componentDidMount() { - this.fetchRepos(); - } +const RepositoriesList = () => { + const [filters,setFilters] = useState({ + page: 1, + per_page: 10, + visibility: "public" + }) + const [repos,setRepos] = useState([]) - fetchRepos = () => { - this.setState({ repos: "loading" }) + + const fetchRepos = () => { + setRepos("loading") axios.get("https://api.github.com/user/repos", { - params: this.state.filters + params: filters }) .then((response) => { - this.setState({ repos: response.data }) + setRepos(response.data) }) .catch((error) => { console.log(error) - this.setState({ repos: [] }) + setRepos([]) }) } - handleNextPage = () => { - this.setState({ - filters: { ...this.state.filters, page: this.state.filters.page + 1} - }, () => { - this.fetchRepos(); - }) + useEffect(() => { + fetchRepos(); + // eslint-disable-next-line react-hooks/exhaustive-deps + },[filters]) + + const handleNextPage = () => { + setFilters((prev)=>({ + ...prev, + page : filters.page + 1 + })) + } - handlePrevPage = () => { - this.setState({ - filters: { ...this.state.filters, page: this.state.filters.page - 1} - }, () => { - this.fetchRepos(); - }) + const handlePrevPage = () => { + setFilters( (prev) => ({ + ...prev, + page : filters.page - 1 + })) } - render() { - return ( -
+ + return ( +

Popular Repositories:

- {this.state.repos === "loading" ? + {repos === "loading" ? (
@@ -65,7 +61,7 @@ export default class RepositoriesList extends React.Component { : ( - this.state.repos.length === 0 ? + repos.length === 0 ? (
No repositories ... @@ -75,7 +71,7 @@ export default class RepositoriesList extends React.Component { (
{ - this.state.repos.map((repo, index) => ( + repos.map((repo, index) => (
@@ -84,14 +80,14 @@ export default class RepositoriesList extends React.Component {
- ) - } -} \ No newline at end of file + ) +} + +export default RepositoriesList \ No newline at end of file From d1e7a87bc4ac0da1c62f635aa9ddb4f9ff1dff85 Mon Sep 17 00:00:00 2001 From: Zidane Hammouda Date: Mon, 17 Jan 2022 22:38:11 +0100 Subject: [PATCH 3/5] Implements SingleRepository componenet using Hooks --- .../repositories/SingleRepository.js | 50 ++++++++----------- 1 file changed, 22 insertions(+), 28 deletions(-) diff --git a/src/components/repositories/SingleRepository.js b/src/components/repositories/SingleRepository.js index e16a350..8eb21ea 100644 --- a/src/components/repositories/SingleRepository.js +++ b/src/components/repositories/SingleRepository.js @@ -1,45 +1,39 @@ -import React from "react"; +import React,{useState,useEffect} from "react"; -export default class SingleRepository extends React.Component { - constructor() { - super() - this.state = { - repo: {} - } - } - - componentDidMount() { - this.setState({ repo: this.props.repo }) - } +const SingleRepository = (props) => { + const [repo,setRepo] = useState({}) + + useEffect(() => { + setRepo(props.repo) + }) - handleNavigateToRepository = () => { - window.open(this.props.repo.html_url, '_blank'); + const handleNavigateToRepository = () => { + window.open(repo.html_url, '_blank'); } - render() { - return ( -
- {this.state.repo && + return ( +
+ {repo && (
-

{this.state.repo.name}

+

{repo.name}

- {this.state.repo.visibility} + {repo.visibility}
- {this.state.repo.description} + {repo.description}
- {this.state.repo.language && + {repo.language && (
- {this.state.repo.language} + {repo.language}
) } @@ -47,13 +41,13 @@ export default class SingleRepository extends React.Component { - {this.state.repo.stargazers_count} + {repo.stargazers_count}
- {this.state.repo.forks} + {repo.forks}
@@ -61,7 +55,7 @@ export default class SingleRepository extends React.Component { ) }
- ) - } + ) +} -} \ No newline at end of file +export default SingleRepository \ No newline at end of file From 100247810931e2f2734b26b7a9b7d3ea79b5a66c Mon Sep 17 00:00:00 2001 From: Zidane Hammouda Date: Mon, 17 Jan 2022 22:40:35 +0100 Subject: [PATCH 4/5] Implements Navbar componenet using Hooks --- src/components/layouts/Navbar.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/layouts/Navbar.js b/src/components/layouts/Navbar.js index 6867fa7..7142a14 100644 --- a/src/components/layouts/Navbar.js +++ b/src/components/layouts/Navbar.js @@ -2,16 +2,15 @@ import React from "react"; import logo from "../../assets/img/logo.svg"; -export default class Navbar extends React.Component { - render() { - return ( -
+const Navbar = () => { + return ( +
logo
- ) - } + ) +} -} \ No newline at end of file +export default Navbar \ No newline at end of file From 015a2d9b1d6d460b28fa70a9f0e269a94f0df119 Mon Sep 17 00:00:00 2001 From: Zidane Hammouda Date: Mon, 17 Jan 2022 22:42:52 +0100 Subject: [PATCH 5/5] .. --- .env.example | 1 + 1 file changed, 1 insertion(+) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..b6df08a --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +REACT_APP_GITHUB_TOKEN = YOUR_GITHUB_TOKEN_HERE \ No newline at end of file