From 9bf4c1fd38ae5c427bd161ebf4c9b75533b8b785 Mon Sep 17 00:00:00 2001 From: "MD. Ariful Alam" Date: Tue, 24 Aug 2021 13:22:43 +0600 Subject: [PATCH] Refactor codes --- src/App.js | 94 +++++++------- src/components/AvatarCard.js | 6 +- src/components/Blog.js | 83 ++---------- src/components/Demo.js | 225 --------------------------------- src/components/Education.js | 1 - src/components/Experience.js | 1 - src/components/LazyImage.js | 5 +- src/components/Project.js | 4 +- src/components/ThemeChanger.js | 7 +- 9 files changed, 70 insertions(+), 356 deletions(-) delete mode 100644 src/components/Demo.js diff --git a/src/App.js b/src/App.js index 7ea572e..b29be22 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ import axios from "axios"; -import { Fragment, memo, useEffect, useState } from "react"; +import { Fragment, memo, useCallback, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import AvatarCard from "./components/AvatarCard"; import ErrorPage from "./components/ErrorPage"; @@ -29,56 +29,24 @@ function App() { } }, [theme]) - useEffect(() => { - loadData(); - }, []) - - const loadData = () => { + const loadData = useCallback(() => { axios.get(`https://api.github.com/users/${config.githubUsername}`) - .then(response => { - let data = response.data; + .then(response => { + let data = response.data; - let profileData = { - avatar: data.avatar_url, - name: data.name, - bio: data.bio, - location: data.location, - company: data.company, - twitter: data.twitter_username, - } + let profileData = { + avatar: data.avatar_url, + name: data.name, + bio: data.bio, + location: data.location, + company: data.company, + twitter: data.twitter_username, + } - dispatch(setProfile(profileData)); - }) - .then(() => { - loadRepo(); - }) - .catch((error) => { - console.error('Error:', error); - - try { - setRateLimit({ - remaining: error.response.headers['x-ratelimit-remaining'], - reset: moment(new Date(error.response.headers['x-ratelimit-reset'] * 1000)).fromNow(), - }); - - if (error.response.status === 403) { - setError(403); - } else if (error.response.status === 404) { - setError(404); - } else { - setError(500); - } - } catch (error2) { - setError(500); - } - }) - .finally(() => { - dispatch(setLoading(false)); - }); - } - - const loadRepo = () => { - axios.get(`https://api.github.com/search/repositories?q=user:${config.githubUsername}+&s=stars&type=Repositories`) + dispatch(setProfile(profileData)); + }) + .then(() => { + axios.get(`https://api.github.com/search/repositories?q=user:${config.githubUsername}+&s=stars&type=Repositories`) .then(response => { let data = response.data; @@ -98,7 +66,35 @@ function App() { console.error('Error:', error2); } }); - } + }) + .catch((error) => { + console.error('Error:', error); + + try { + setRateLimit({ + remaining: error.response.headers['x-ratelimit-remaining'], + reset: moment(new Date(error.response.headers['x-ratelimit-reset'] * 1000)).fromNow(), + }); + + if (error.response.status === 403) { + setError(403); + } else if (error.response.status === 404) { + setError(404); + } else { + setError(500); + } + } catch (error2) { + setError(500); + } + }) + .finally(() => { + dispatch(setLoading(false)); + }); + }, [dispatch]) + + useEffect(() => { + loadData(); + }, [loadData]) return ( diff --git a/src/components/AvatarCard.js b/src/components/AvatarCard.js index 9562f39..883a171 100644 --- a/src/components/AvatarCard.js +++ b/src/components/AvatarCard.js @@ -11,8 +11,8 @@ const AvatarCard = () => { return (
-
-
+
+
{ loading ? ( skeleton({ @@ -39,7 +39,7 @@ const AvatarCard = () => {
- +
{ loading ? ( diff --git a/src/components/Blog.js b/src/components/Blog.js index 99d9ee4..0e8973d 100644 --- a/src/components/Blog.js +++ b/src/components/Blog.js @@ -1,6 +1,6 @@ import { getDevtoArticle, getMediumArticle } from "article-api"; import moment from "moment"; -import { Fragment, memo, useEffect, useState } from "react"; +import { memo, useEffect, useState } from "react"; import { CgHashtag } from 'react-icons/cg'; import config from "../config"; import { skeleton } from "../helpers/utils"; @@ -35,7 +35,6 @@ const Blog = () => { }, []) return ( - <>
@@ -65,25 +64,25 @@ const Blog = () => { { articles && articles.slice(0, 5).map((article, index) => ( -
- -
-
- +
+
+
+
+ {'thumbnail'}/
- - {/* */} - ) } diff --git a/src/components/Demo.js b/src/components/Demo.js deleted file mode 100644 index 5a6623b..0000000 --- a/src/components/Demo.js +++ /dev/null @@ -1,225 +0,0 @@ -import ThemeChanger from "./ThemeChanger"; - -const Demo = () => { - return ( -
-
-
-
-
-
-
-
-

Theme

-

Change Theme

-
-
- -
-
-
-
-
-
- -
-
-
-

Karolann Collins

-

Direct Interactions Liaison

-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-

Janis Johnson

-

Accounts Agent

-
-
-
-
-
-
-

Meredith Mayer

-

Data Liaison

-
-
- -
-
-
-
-
-
-

4,600

-

Page views

-
-
- - -
-
-
-
-
- -
-

- Enable Notifications -

-

- To get latest updates -

-
-
-
-
-
-

- Top 10 UI Components -

-
-
- Colors -
-
- UI Design -
-
- Creativity -
-
-

- Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente. -

-
- - -
-
-
-
-
-
-

-

- -
-
- -
-
-
-
-
- -
-
- -
-
- -
-
- - -
-
-
-
- - - - -
-
-
-
- - - - -
-
-
-
- ) -} - -export default Demo; \ No newline at end of file diff --git a/src/components/Education.js b/src/components/Education.js index a5c1485..a1f295e 100644 --- a/src/components/Education.js +++ b/src/components/Education.js @@ -1,4 +1,3 @@ -import { AiFillGithub } from "react-icons/ai"; import { useSelector } from "react-redux"; import config from "../config"; import { skeleton } from "../helpers/utils"; diff --git a/src/components/Experience.js b/src/components/Experience.js index 9d90888..7876dfd 100644 --- a/src/components/Experience.js +++ b/src/components/Experience.js @@ -1,4 +1,3 @@ -import { AiFillGithub } from "react-icons/ai"; import { useSelector } from "react-redux"; import config from "../config"; import { skeleton } from "../helpers/utils"; diff --git a/src/components/LazyImage.js b/src/components/LazyImage.js index 1d97478..f63f763 100644 --- a/src/components/LazyImage.js +++ b/src/components/LazyImage.js @@ -1,6 +1,6 @@ import { useState, Fragment, useEffect } from 'react'; -const LazyImage = ({ placeholder, src, ...rest }) => { +const LazyImage = ({ placeholder, src, alt, ...rest }) => { const [loading, setLoading] = useState(true); useEffect(() => { @@ -10,7 +10,7 @@ const LazyImage = ({ placeholder, src, ...rest }) => { imageToLoad.onload = () => { setLoading(false); } - }, []) + }, [src]) return ( @@ -18,6 +18,7 @@ const LazyImage = ({ placeholder, src, ...rest }) => { loading ? placeholder : ( {alt} ) diff --git a/src/components/Project.js b/src/components/Project.js index 287601b..c6ecdf6 100644 --- a/src/components/Project.js +++ b/src/components/Project.js @@ -23,10 +23,10 @@ const Project = () => {
-

+

{skeleton({width: 'w-full', height: 'h-4', className: 'mb-2'})} {skeleton({width: 'w-full', height: 'h-4'})} -

+
diff --git a/src/components/ThemeChanger.js b/src/components/ThemeChanger.js index 77ba505..e5c4827 100644 --- a/src/components/ThemeChanger.js +++ b/src/components/ThemeChanger.js @@ -2,7 +2,6 @@ import { useDispatch, useSelector } from 'react-redux'; import { setTheme } from '../store/slices/themeSlice'; import config from '../config'; import { skeleton } from '../helpers/utils'; -import { IoColorPaletteOutline } from 'react-icons/io5'; import { memo } from 'react'; const ThemeChanger = () => { @@ -31,7 +30,7 @@ const ThemeChanger = () => { loading ? skeleton({ width: 'w-14 md:w-28', height: 'h-10' }) : (
- + Change Theme @@ -45,12 +44,12 @@ const ThemeChanger = () => { config.themeConfig.themes.map((item, index) => (
  • changeTheme(e, item)} className={`${theme === item ? 'active' : ''}`} > - + {item === config.themeConfig.default ? 'Default' : item}