Make optional configs

This commit is contained in:
Ariful Alam 2022-03-26 18:07:14 +06:00
parent 7794d543d3
commit 263984b0a4
2 changed files with 130 additions and 29 deletions

View File

@ -11,18 +11,16 @@ import Experience from './experience';
import Education from './education';
import Project from './project';
import Blog from './blog';
import { getInitialTheme, setupHotjar } from '../helpers/utils';
import {
constructConfigWithMissingValues,
getInitialTheme,
setupHotjar,
} from '../helpers/utils';
import { HelmetProvider } from 'react-helmet-async';
import PropTypes from 'prop-types';
import '../assets/index.css';
const GitProfile = ({ config }) => {
const [theme, setTheme] = useState(
config ? getInitialTheme(config.themeConfig) : null
);
const [loading, setLoading] = useState(true);
const [profile, setProfile] = useState(null);
const [repo, setRepo] = useState(null);
const [error, setError] = useState(
typeof config === 'undefined'
? {
@ -33,6 +31,15 @@ const GitProfile = ({ config }) => {
: null
);
typeof config !== 'undefined' && constructConfigWithMissingValues(config);
const [theme, setTheme] = useState(
config ? getInitialTheme(config.themeConfig) : null
);
const [loading, setLoading] = useState(true);
const [profile, setProfile] = useState(null);
const [repo, setRepo] = useState(null);
useEffect(() => {
if (theme) {
document.documentElement.setAttribute('data-theme', theme);
@ -187,12 +194,21 @@ const GitProfile = ({ config }) => {
github={config.github}
social={config.social}
/>
<Skill loading={loading} skills={config.skills} />
<Experience
loading={loading}
experiences={config.experiences}
/>
<Education loading={loading} education={config.education} />
{typeof config.skills !== 'undefined' && (
<Skill loading={loading} skills={config.skills} />
)}
{typeof config.experiences !== 'undefined' && (
<Experience
loading={loading}
experiences={config.experiences}
/>
)}
{typeof config.education !== 'undefined' && (
<Education
loading={loading}
education={config.education}
/>
)}
</div>
</div>
<div className="lg:col-span-2 col-span-1">
@ -203,11 +219,13 @@ const GitProfile = ({ config }) => {
github={config.github}
googleAnalytics={config.googleAnalytics}
/>
<Blog
loading={loading}
googleAnalytics={config.googleAnalytics}
blog={config.blog}
/>
{typeof config.blog !== 'undefined' && (
<Blog
loading={loading}
googleAnalytics={config.googleAnalytics}
blog={config.blog}
/>
)}
</div>
</div>
</div>
@ -244,12 +262,12 @@ GitProfile.propTypes = {
config: PropTypes.shape({
github: PropTypes.shape({
username: PropTypes.string.isRequired,
sortBy: PropTypes.oneOf(['stars', 'updated']).isRequired,
limit: PropTypes.number.isRequired,
sortBy: PropTypes.oneOf(['stars', 'updated']),
limit: PropTypes.number,
exclude: PropTypes.shape({
forks: PropTypes.bool.isRequired,
projects: PropTypes.array.isRequired,
}).isRequired,
}),
}).isRequired,
social: PropTypes.shape({
linkedin: PropTypes.string,
@ -262,8 +280,8 @@ GitProfile.propTypes = {
website: PropTypes.string,
phone: PropTypes.string,
email: PropTypes.string,
}).isRequired,
skills: PropTypes.array.isRequired,
}),
skills: PropTypes.array,
experiences: PropTypes.arrayOf(
PropTypes.shape({
company: PropTypes.string,
@ -271,7 +289,7 @@ GitProfile.propTypes = {
from: PropTypes.string,
to: PropTypes.string,
})
).isRequired,
),
education: PropTypes.arrayOf(
PropTypes.shape({
institution: PropTypes.string,
@ -279,26 +297,26 @@ GitProfile.propTypes = {
from: PropTypes.string,
to: PropTypes.string,
})
).isRequired,
),
blog: PropTypes.shape({
source: PropTypes.string,
username: PropTypes.string,
limit: PropTypes.number,
}).isRequired,
}),
googleAnalytics: PropTypes.shape({
id: PropTypes.string,
}).isRequired,
}),
hotjar: PropTypes.shape({
id: PropTypes.string,
snippetVersion: PropTypes.number,
}).isRequired,
}),
themeConfig: PropTypes.shape({
default: PropTypes.string.isRequired,
disableSwitch: PropTypes.bool.isRequired,
respectPrefersColorScheme: PropTypes.bool.isRequired,
themes: PropTypes.array.isRequired,
customTheme: PropTypes.object.isRequired,
}).isRequired,
}),
}).isRequired,
};

View File

@ -97,3 +97,86 @@ export const setupHotjar = (hotjarConfig) => {
hotjar.initialize(hotjarConfig.id, snippetVersion);
}
};
export const constructConfigWithMissingValues = (config) => {
if (typeof config.github.sortBy === 'undefined') {
Object.assign(config.github, { sortBy: 'stars' });
}
if (typeof config.github.limit === 'undefined') {
Object.assign(config.github, { limit: 6 });
}
if (typeof config.github.exclude === 'undefined') {
Object.assign(config.github, { exclude: { forks: false, projects: [] } });
}
if (typeof config.themeConfig === 'undefined') {
const themeConfig = {
default: 'corporate',
disableSwitch: false,
respectPrefersColorScheme: false,
themes: [
'light',
'dark',
'cupcake',
'bumblebee',
'emerald',
'corporate',
'synthwave',
'retro',
'cyberpunk',
'valentine',
'halloween',
'garden',
'forest',
'aqua',
'lofi',
'pastel',
'fantasy',
'wireframe',
'black',
'luxury',
'dracula',
'cmyk',
'autumn',
'business',
'acid',
'lemonade',
'night',
'coffee',
'winter',
'procyon',
],
customTheme: {
procyon: {
primary: '#fc055b',
secondary: '#219aaf',
accent: '#e8d03a',
neutral: '#2A2730',
'base-100': '#E3E3ED',
'--rounded-box': '3rem',
'--rounded-btn': '3rem',
},
},
};
Object.assign(config, { themeConfig: themeConfig });
}
if (typeof config.googleAnalytics === 'undefined') {
const googleAnalytics = {
id: '',
};
Object.assign(config, { googleAnalytics: googleAnalytics });
}
if (typeof config.social === 'undefined') {
const social = {};
Object.assign(config, { social: social });
}
return config;
};