From 1a4c77d0ff8edc10222c75a4a71fdca65453c3ac Mon Sep 17 00:00:00 2001 From: Kratou Date: Fri, 28 Jan 2022 11:06:07 +0100 Subject: [PATCH 1/6] Setup --- .env.example | 1 - src/index.js | 6 +++++- src/store/index.js | 0 3 files changed, 5 insertions(+), 2 deletions(-) delete mode 100644 .env.example create mode 100644 src/store/index.js 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/src/index.js b/src/index.js index ef2edf8..aeb0418 100644 --- a/src/index.js +++ b/src/index.js @@ -3,11 +3,15 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import {Provider } from 'react-redux'; +import store from './store/index' ReactDOM.render( + - , + + , document.getElementById('root') ); diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..e69de29 From f101ba7731c6dd0abf6d3fc16cc48e1eef73ea34 Mon Sep 17 00:00:00 2001 From: Kratou Date: Fri, 28 Jan 2022 19:01:01 +0100 Subject: [PATCH 2/6] FetchProfile --- package-lock.json | 8 +++++ src/App.js | 1 - src/components/profile/Profile.js | 49 +++++++++++++++------------ src/index.js | 9 ++--- src/store/actions/navBar.action.js | 0 src/store/actions/profile.action.js | 13 +++++++ src/store/reducers/Navbar.reducer.js | 9 ----- src/store/reducers/Profile.reducer.js | 21 ++++++++++++ src/store/reducers/index.js | 4 +-- src/store/store.js | 10 +++--- 10 files changed, 82 insertions(+), 42 deletions(-) delete mode 100644 src/store/actions/navBar.action.js delete mode 100644 src/store/reducers/Navbar.reducer.js diff --git a/package-lock.json b/package-lock.json index b01162f..a4f908c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3069,6 +3069,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/App.js b/src/App.js index 07b1e5e..de71668 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,4 @@ import "./App.css"; -import reducer from './store/reducers/index' // Components import RepositoriesList from "./components/repositories/RepositoriesList"; diff --git a/src/components/profile/Profile.js b/src/components/profile/Profile.js index 089e18c..428f49f 100644 --- a/src/components/profile/Profile.js +++ b/src/components/profile/Profile.js @@ -3,37 +3,44 @@ import axios from "axios"; import email from "../../assets/img/email.png"; import anonymous_avatar from "../../assets/img/anonymous.png"; +import { useDispatch, useSelector } from "react-redux"; +import { fetchProfileData } from "../../store/actions/profile.action" function Profile() { - const [profile, setProfile] = useState({}); + //const [profile, setProfile] = useState({}); - useEffect(() => { - axios.get(`https://api.github.com/user`).then((response) => { - setProfile(response.data); - }); + const dispatch = useDispatch() + const userData = useSelector((state) => state.profile.userData) + + useEffect(() => { + dispatch(fetchProfileData()) + // axios.get(`https://api.github.com/user`).then((response) => { + // setProfile(response.data); + // }); }); const handleNavigateToProfile = () => { - window.location = profile.html_url; + window.location = Profile.html_url; }; + return (
avatar

- {profile.name}
- {profile.login && ( - @{profile.login} + {userData.name}
+ {userData.login && ( + @{userData.login} )}

- {profile.bio} + {userData.bio}
- {profile.followers && ( + {userData.followers && ( - {profile.followers} followers + {userData.followers} followers )} - {profile.following && ( + {userData.following && ( . - {profile.following} following + {userData.following} following )}
- {profile.email && ( + {userData.email && ( email - {profile.email} + {userData.email} )} - {profile.location && ( + {userData.location && ( - {profile.location} + {userData.location} )} - {profile.company && ( + {userData.company && ( - {profile.company} + {userData.company} )}
diff --git a/src/index.js b/src/index.js index be70ae8..b8745b1 100644 --- a/src/index.js +++ b/src/index.js @@ -3,15 +3,16 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; -import {Provider } from 'react-redux'; +import { Provider } from 'react-redux'; import store from './store/store' ReactDOM.render( - + + - - , + + , document.getElementById('root') ); diff --git a/src/store/actions/navBar.action.js b/src/store/actions/navBar.action.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/store/actions/profile.action.js b/src/store/actions/profile.action.js index e69de29..e182d5b 100644 --- a/src/store/actions/profile.action.js +++ b/src/store/actions/profile.action.js @@ -0,0 +1,13 @@ +import { createAsyncThunk } from "@reduxjs/toolkit"; +import axios from 'axios' + + +const fetchProfileData = createAsyncThunk( + 'profile/fetchProfileData', + async () => { + const res = await axios.get('https://api.github.com/user') + return res.data + } +) + +export { fetchProfileData } \ No newline at end of file diff --git a/src/store/reducers/Navbar.reducer.js b/src/store/reducers/Navbar.reducer.js deleted file mode 100644 index 1edb8f9..0000000 --- a/src/store/reducers/Navbar.reducer.js +++ /dev/null @@ -1,9 +0,0 @@ -import Navbar from "../../components/layouts/Navbar"; - -const initialState = { - Navbar : Navbar -} - -export default navBarReducer(state = initialState,action){ - -} \ No newline at end of file diff --git a/src/store/reducers/Profile.reducer.js b/src/store/reducers/Profile.reducer.js index e69de29..29d1b9f 100644 --- a/src/store/reducers/Profile.reducer.js +++ b/src/store/reducers/Profile.reducer.js @@ -0,0 +1,21 @@ +import { createSlice } from "@reduxjs/toolkit"; +import { fetchProfileData } from "../actions/profile.action"; + +const initialState = { + userData : {} +} + +const profileSlice = createSlice({ + name: "profile", + initialState, + reducers : {} + , + extraReducers: (builder) => { + builder.addCase(fetchProfileData.fulfilled, (state,action) => { + state.userData = action.payload; + }) + } +}); + +export default profileSlice.reducer + diff --git a/src/store/reducers/index.js b/src/store/reducers/index.js index 3957331..63bbfa2 100644 --- a/src/store/reducers/index.js +++ b/src/store/reducers/index.js @@ -1,12 +1,10 @@ import { combineReducers } from "@reduxjs/toolkit" -import Navbar from './Navbar.reducer' import Profile from './Profile.reducer' const rootReducer = combineReducers( { - nav :Navbar, - profile :Profile + profile : Profile }) export default rootReducer; \ No newline at end of file diff --git a/src/store/store.js b/src/store/store.js index d2a0083..0a7a795 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -1,6 +1,8 @@ import { configureStore } from '@reduxjs/toolkit' -import reducer from './reducers/index' +import rootReducer from './reducers/index' -export default configureStore({ - reducer: {}, -}) \ No newline at end of file +const store = configureStore({ + reducer :rootReducer +}); + +export default store \ No newline at end of file From 966ed274c6220d54528211a4e3bf05528e8b573b Mon Sep 17 00:00:00 2001 From: Kratou Date: Fri, 28 Jan 2022 23:09:29 +0100 Subject: [PATCH 3/6] Repositories Reducer --- src/components/profile/Profile.js | 2 +- .../repositories/RepositoriesList.js | 47 ++++++++++--------- src/store/actions/repos.actions.js | 13 +++++ src/store/reducers/index.js | 4 +- src/store/reducers/repos.reducer.js | 21 +++++++++ 5 files changed, 64 insertions(+), 23 deletions(-) create mode 100644 src/store/actions/repos.actions.js create mode 100644 src/store/reducers/repos.reducer.js diff --git a/src/components/profile/Profile.js b/src/components/profile/Profile.js index 428f49f..b32f30e 100644 --- a/src/components/profile/Profile.js +++ b/src/components/profile/Profile.js @@ -17,7 +17,7 @@ function Profile() { // axios.get(`https://api.github.com/user`).then((response) => { // setProfile(response.data); // }); - }); + }, []); const handleNavigateToProfile = () => { window.location = Profile.html_url; diff --git a/src/components/repositories/RepositoriesList.js b/src/components/repositories/RepositoriesList.js index 2893d0f..9a3fe2f 100644 --- a/src/components/repositories/RepositoriesList.js +++ b/src/components/repositories/RepositoriesList.js @@ -1,6 +1,8 @@ import React, { useEffect, useState } from "react"; import axios from "axios"; import SingleRepository from "./SingleRepository"; +import { useDispatch, useSelector } from "react-redux"; +import { fetchRepos } from "../../store/actions/repos.actions"; function RepositoriesList() { const initialFilters = { @@ -10,27 +12,30 @@ function RepositoriesList() { }; const [filters, setFilters] = useState(initialFilters); - const [repos, setRepos] = useState([]); + //const [repos, setRepos] = useState([]); + const dispatch = useDispatch() + const reposData = useSelector((state) => state.repos.reposData) ; useEffect(() => { - fetchRepos(); + dispatch(fetchRepos()); + console.log(reposData) // eslint-disable-next-line }, []); - const fetchRepos = () => { - setRepos("loading"); - axios - .get("https://api.github.com/user/repos", { - params: filters, - }) - .then((response) => { - setRepos(response.data); - }) - .catch((error) => { - console.log(error); - setRepos([]); - }); - }; + // const fetchRepos = () => { + // setRepos("loading"); + // axios + // .get("https://api.github.com/user/repos", { + // params: filters, + // }) + // .then((response) => { + // setRepos(response.data); + // }) + // .catch((error) => { + // console.log(error); + // setRepos([]); + // }); + // }; const handleNextPage = () => { setFilters( @@ -58,21 +63,21 @@ function RepositoriesList() {

Popular Repositories:

- {repos === "loading" ? ( + {reposData === "loading" ? (
Loading ...
- ) : repos.length === 0 ? ( + ) : reposData.length === 0 ? (
No repositories ...
) : (
- {repos.map((repo, index) => ( -
+ { reposData.map((repo,index) => +
- ))} + )}