ilia/profile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove context for state management

Browse Source
This commit is contained in:
Ariful Alam 2022-03-19 16:34:13 +06:00
parent b69ced8ce0
commit ab55fa68f1
13 changed files with 61 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/App.jsx
View File

@ -1,8 +1,6 @@
import axios from 'axios';
import { Fragment, useCallback, useContext, useEffect, useState } from 'react';
import { Fragment, useCallback, useEffect, useState } from 'react';
import moment from 'moment';
import { ThemeContext } from './contexts/ThemeContext';
import { LoadingContext } from './contexts/LoadingContext';
import config from './ezprofile.config';
import HeadTagEditor from './components/head-tag-editor';
import ErrorPage from './components/error-page';
@ -14,10 +12,11 @@ import Experience from './components/experience';
import Education from './components/education';
import Project from './components/project';
import Blog from './components/blog';
import { getInitialTheme } from './helpers/utils';
function App() {
const { theme } = useContext(ThemeContext);
const { setLoading } = useContext(LoadingContext);
const [theme, setTheme] = useState(getInitialTheme());
const [loading, setLoading] = useState(true);
const [profile, setProfile] = useState(null);
const [repo, setRepo] = useState(null);
const [error, setError] = useState(null);
@ -108,7 +107,7 @@ function App() {
return (
<Fragment>
<HeadTagEditor profile={profile} />
<HeadTagEditor profile={profile} theme={theme} />
<div className="fade-in h-screen">
{error ? (
<ErrorPage
@ -149,18 +148,24 @@ function App() {
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 rounded-box">
<div className="col-span-1">
<div className="grid grid-cols-1 gap-6">
{!config.themeConfig.disableSwitch && <ThemeChanger />}
<AvatarCard profile={profile} />
<Details profile={profile} />
<Skill />
<Experience />
<Education />
{!config.themeConfig.disableSwitch && (
<ThemeChanger
theme={theme}
setTheme={setTheme}
loading={loading}
/>
)}
<AvatarCard profile={profile} loading={loading} />
<Details profile={profile} loading={loading} />
<Skill loading={loading} />
<Experience loading={loading} />
<Education loading={loading} />
</div>
</div>
<div className="lg:col-span-2 col-span-1">
<div className="grid grid-cols-1 gap-6">
<Project repo={repo} />
<Blog />
<Project repo={repo} loading={loading} />
<Blog loading={loading} />
</div>
</div>
</div>

22
src/components/avatar-card/index.jsx
View File

@ -1,16 +1,12 @@
import PropTypes from 'prop-types';
import { useContext } from 'react';
import { LoadingContext } from '../../contexts/LoadingContext';
import { skeleton } from '../../helpers/utils';
import LazyImage from '../lazy-image';
const AvatarCard = (props) => {
const { loading } = useContext(LoadingContext);
const AvatarCard = ({ profile, loading }) => {
return (
<div className="card shadow-lg compact bg-base-100">
<div className="grid place-items-center py-8">
{loading || !props.profile ? (
{loading || !profile ? (
<div className="avatar opacity-90">
<div className="mb-8 rounded-full w-32 h-32">
{skeleton({
@ -25,10 +21,8 @@ const AvatarCard = (props) => {
<div className="mb-8 rounded-full w-32 h-32 ring ring-primary ring-offset-base-100 ring-offset-2">
{
<LazyImage
src={
props.profile.avatar ? props.profile.avatar : fallbackImage
}
alt={props.profile.name}
src={profile.avatar ? profile.avatar : fallbackImage}
alt={profile.name}
placeholder={skeleton({
width: 'w-full',
height: 'h-full',
@ -41,16 +35,16 @@ const AvatarCard = (props) => {
)}
<div className="text-center mx-auto px-8">
<h5 className="font-bold text-2xl">
{loading || !props.profile ? (
{loading || !profile ? (
skeleton({ width: 'w-48', height: 'h-8' })
) : (
<span className="opacity-70">{props.profile.name}</span>
<span className="opacity-70">{profile.name}</span>
)}
</h5>
<div className="mt-3 text-base-content text-opacity-60">
{loading || !props.profile
{loading || !profile
? skeleton({ width: 'w-48', height: 'h-5' })
: props.profile.bio}
: profile.bio}
</div>
</div>
</div>

6
src/components/blog/index.jsx
View File

@ -1,8 +1,7 @@
import { getDevtoArticle, getMediumArticle } from 'article-api';
import moment from 'moment';
import { Fragment, useContext, useEffect, useState } from 'react';
import { Fragment, useEffect, useState } from 'react';
import { CgHashtag } from 'react-icons/cg';
import { LoadingContext } from '../../contexts/LoadingContext';
import config from '../../ezprofile.config';
import { ga, skeleton } from '../../helpers/utils';
import LazyImage from '../lazy-image';
@ -21,9 +20,8 @@ const displaySection = () => {
}
};
const Blog = () => {
const Blog = ({loading}) => {
const [articles, setArticles] = useState(null);
const { loading } = useContext(LoadingContext);
useEffect(() => {
if (displaySection()) {

18
src/components/details/index.jsx
View File

@ -12,8 +12,6 @@ import {
FaGlobe,
} from 'react-icons/fa';
import PropTypes from 'prop-types';
import { useContext } from 'react';
import { LoadingContext } from '../../contexts/LoadingContext';
import { skeleton } from '../../helpers/utils';
import config from '../../ezprofile.config';
@ -31,9 +29,7 @@ const ListItem = ({ icon, title, value, link }) => {
);
};
const Details = (props) => {
const { loading } = useContext(LoadingContext);
const Details = ({ profile, loading }) => {
const renderSkeleton = () => {
let array = [];
for (let index = 0; index < 4; index++) {
@ -53,22 +49,22 @@ const Details = (props) => {
return (
<div className="card shadow-lg compact bg-base-100">
<div className="card-body">
{loading || !props.profile ? (
{loading || !profile ? (
renderSkeleton()
) : (
<div className="bg-base-100 text-base-content text-opacity-60">
{props.profile.location && (
{profile.location && (
<ListItem
icon={<MdLocationOn className="mr-2" />}
title="Based on"
value={props.profile.location}
value={profile.location}
/>
)}
{props.profile.company && (
{profile.company && (
<ListItem
icon={<FaBuilding className="mr-2" />}
title="Company"
value={props.profile.company}
value={profile.company}
/>
)}
<ListItem
@ -116,7 +112,7 @@ const Details = (props) => {
</div>
)}
{/* <ul className="menu bg-base-100 text-base-content text-opacity-60">
{loading || !props.profile ? (
{loading || !profile ? (
renderSkeleton()
) : (
<>

6
src/components/education/index.jsx
View File

@ -1,12 +1,8 @@
import { GoPrimitiveDot } from 'react-icons/go';
import { useContext } from 'react';
import { LoadingContext } from '../../contexts/LoadingContext';
import { skeleton } from '../../helpers/utils';
import config from '../../ezprofile.config';
const Education = () => {
const { loading } = useContext(LoadingContext);
const Education = ({ loading }) => {
const renderSkeleton = () => {
let array = [];
for (let index = 0; index < 2; index++) {

6
src/components/experience/index.jsx
View File

@ -1,12 +1,8 @@
import { GoPrimitiveDot } from 'react-icons/go';
import { useContext } from 'react';
import { LoadingContext } from '../../contexts/LoadingContext';
import { skeleton } from '../../helpers/utils';
import config from '../../ezprofile.config';
const Experience = () => {
const { loading } = useContext(LoadingContext);
const Experience = ({ loading }) => {
const renderSkeleton = () => {
let array = [];
for (let index = 0; index < 2; index++) {

40
src/components/head-tag-editor/index.jsx
View File

@ -1,16 +1,13 @@
import { Fragment, useContext } from 'react';
import { Fragment } from 'react';
import { Helmet } from 'react-helmet-async';
import PropTypes from 'prop-types';
import { ThemeContext } from '../../contexts/ThemeContext';
import config from '../../ezprofile.config';
import { isThemeDarkish } from '../../helpers/utils';
const HeadTagEditor = (props) => {
const { theme } = useContext(ThemeContext);
const HeadTagEditor = ({ profile, theme }) => {
return (
<Fragment>
{props.profile && (
{profile && (
<Helmet>
{config.googleAnalytics?.id && (
<script
@ -26,20 +23,17 @@ const HeadTagEditor = (props) => {
gtag('config', '${config.googleAnalytics.id}');`}
</script>
)}
<title>Portfolio of {props.profile.name}</title>
<title>Portfolio of {profile.name}</title>
<meta
name="theme-color"
content={isThemeDarkish(theme) ? '#000000' : '#ffffff'}
/>
<meta name="description" content={props.profile.bio} />
<meta name="description" content={profile.bio} />
<meta
itemprop="name"
content={`Portfolio of ${props.profile.name}`}
/>
<meta itemprop="description" content={props.profile.bio} />
<meta itemprop="image" content={props.profile.avatar} />
<meta itemprop="name" content={`Portfolio of ${profile.name}`} />
<meta itemprop="description" content={profile.bio} />
<meta itemprop="image" content={profile.avatar} />
<meta
property="og:url"
@ -50,20 +44,14 @@ const HeadTagEditor = (props) => {
}
/>
<meta property="og:type" content="website" />
<meta
property="og:title"
content={`Portfolio of ${props.profile.name}`}
/>
<meta property="og:description" content={props.profile.bio} />
<meta property="og:image" content={props.profile.avatar} />
<meta property="og:title" content={`Portfolio of ${profile.name}`} />
<meta property="og:description" content={profile.bio} />
<meta property="og:image" content={profile.avatar} />
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content={`Portfolio of ${props.profile.name}`}
/>
<meta name="twitter:description" content={props.profile.bio} />
<meta name="twitter:image" content={props.profile.avatar} />
<meta name="twitter:title" content={`Portfolio of ${profile.name}`} />
<meta name="twitter:description" content={profile.bio} />
<meta name="twitter:image" content={profile.avatar} />
</Helmet>
)}
</Fragment>

11
src/components/project/index.jsx
View File

@ -1,13 +1,10 @@
import { Fragment, useContext } from 'react';
import { Fragment } from 'react';
import { AiOutlineStar, AiOutlineFork } from 'react-icons/ai';
import PropTypes from 'prop-types';
import { LoadingContext } from '../../contexts/LoadingContext';
import config from '../../ezprofile.config';
import { ga, languageColor, skeleton } from '../../helpers/utils';
const Project = (props) => {
const { loading } = useContext(LoadingContext);
const Project = ({ repo, loading }) => {
const renderSkeleton = () => {
let array = [];
for (let index = 0; index < config.github.limit; index++) {
@ -55,7 +52,7 @@ const Project = (props) => {
};
const renderProjects = () => {
return props.repo.map((item, index) => (
return repo.map((item, index) => (
<div
className="card shadow-lg compact bg-base-100 cursor-pointer"
key={index}
@ -163,7 +160,7 @@ const Project = (props) => {
</div>
<div className="col-span-2">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{loading || !props.repo ? renderSkeleton() : renderProjects()}
{loading || !repo ? renderSkeleton() : renderProjects()}
</div>
</div>
</div>

6
src/components/skill/index.jsx
View File

@ -1,11 +1,7 @@
import { useContext } from 'react';
import { LoadingContext } from '../../contexts/LoadingContext';
import config from '../../ezprofile.config';
import { skeleton } from '../../helpers/utils';
const Skill = () => {
const { loading } = useContext(LoadingContext);
const Skill = ({ loading }) => {
const renderSkeleton = () => {
let array = [];
for (let index = 0; index < 12; index++) {

10
src/components/theme-changer/index.jsx
View File

@ -1,16 +1,8 @@
import { AiOutlineControl } from 'react-icons/ai';
import { useContext } from 'react';
import { ThemeContext } from '../../contexts/ThemeContext';
import { LoadingContext } from '../../contexts/LoadingContext';
import { skeleton } from '../../helpers/utils';
import config from '../../ezprofile.config';
const ThemeChanger = () => {
const { theme, setTheme } = useContext(ThemeContext);
const { loading } = useContext(LoadingContext);
console.log(theme);
const ThemeChanger = ({ theme, setTheme, loading }) => {
const changeTheme = (e, selectedTheme) => {
e.preventDefault();
document.querySelector('html').setAttribute('data-theme', selectedTheme);

15
src/contexts/LoadingContext.jsx
View File

@ -1,15 +0,0 @@
import { createContext, useState } from 'react';
const initialValue = true;
export const LoadingContext = createContext();
export const LoadingProvider = (props) => {
const [loading, setLoading] = useState(initialValue);
return (
<LoadingContext.Provider value={[loading, setLoading]}>
{props.children}
</LoadingContext.Provider>
);
};

16
src/contexts/ThemeContext.jsx
View File

@ -1,16 +0,0 @@
import { createContext, useState } from 'react';
import { getInitialTheme } from '../helpers/utils';
const initialValue = getInitialTheme();
export const ThemeContext = createContext();
export const ThemeProvider = (props) => {
const [theme, setTheme] = useState(initialValue);
return (
<ThemeContext.Provider value={[theme, setTheme]}>
{props.children}
</ThemeContext.Provider>
);
};

12
src/main.jsx
View File

@ -2,19 +2,13 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { ThemeProvider } from './contexts/ThemeContext';
import { LoadingProvider } from './contexts/LoadingContext';
import { HelmetProvider } from 'react-helmet-async';
ReactDOM.render(
<React.StrictMode>
<ThemeProvider>
<LoadingProvider>
<HelmetProvider>
<App />
</HelmetProvider>
</LoadingProvider>
</ThemeProvider>
<HelmetProvider>
<App />
</HelmetProvider>
</React.StrictMode>,
document.getElementById('root')
);