noham/gitprofile
1
0
Fork 0
mirror of https://github.com/NohamR/gitprofile.git synced 2026-05-25 04:17:13 +00:00
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

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);