noham/gitprofile
1
0
Fork 0
mirror of https://github.com/NohamR/gitprofile.git synced 2026-05-26 04:17:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate from redux to context

Browse Source
This commit is contained in:
MD. Ariful Alam
2021-09-16 00:30:22 +06:00
parent d5c715e16e
commit 8f167cc940
21 changed files with 157 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/AvatarCard.js
View File

@@ -1,16 +1,17 @@
import { useSelector } from "react-redux";
import { fallbackImage, skeleton } from "../helpers/utils";
import LazyImage from "./LazyImage";
import PropTypes from 'prop-types';
import { useContext } from "react";
import { LoadingContext } from "../contexts/LoadingContext";
const AvatarCard = () => {
const profile = useSelector(state => state.profile);
const loading = useSelector(state => state.loading);
const AvatarCard = (props) => {
const [loading] = useContext(LoadingContext);
return (
<div className="card shadow-lg compact bg-base-100">
<div className="grid place-items-center py-8">
{
loading ? (
(loading || !props.profile) ? (
<div className="avatar opacity-90">
<div className="mb-8 rounded-full w-32 h-32">
{
@@ -27,8 +28,8 @@ const AvatarCard = () => {
<div className="mb-8 rounded-full w-32 h-32 ring ring-primary ring-offset-base-100 ring-offset-2">
{
<LazyImage
src={profile.avatar ? profile.avatar : fallbackImage}
alt={profile.name}
src={props.profile.avatar ? props.profile.avatar : fallbackImage}
alt={props.profile.name}
placeholder={
skeleton({
width: 'w-full',
@@ -45,16 +46,16 @@ const AvatarCard = () => {
<div className="text-center mx-auto px-8">
<h5 className="font-bold text-2xl">
{
loading ? (
(loading || !props.profile) ? (
skeleton({ width: 'w-48', height: 'h-8' })
) : <span className="opacity-70">{profile.name}</span>
) : <span className="opacity-70">{props.profile.name}</span>
}
</h5>
<div className="mt-3 text-base-content text-opacity-60">
{
loading ? (
(loading || !props.profile) ? (
skeleton({ width: 'w-48', height: 'h-5' })
) : profile.bio
) : props.profile.bio
}
</div>
</div>
@@ -63,4 +64,8 @@ const AvatarCard = () => {
)
}
AvatarCard.propTypes = {
profile: PropTypes.object
}
export default AvatarCard;