feat: adding a toggle switch for left panel items

This commit is contained in:
Anuraag Gupta
2021-02-26 02:05:51 +05:30
parent d98e591fee
commit cf47447102
17 changed files with 18168 additions and 72 deletions
+11 -4
View File
@@ -1,7 +1,7 @@
import React, { memo, useContext } from 'react';
import ReactMarkdown from 'react-markdown';
import PageContext from '../../../contexts/PageContext';
import { formatDate, safetyCheck } from '../../../utils';
import { formatDate, safetyCheck, isItemVisible } from '../../../utils';
const AwardItem = ({ item, language }) => (
<div>
@@ -29,9 +29,16 @@ const AwardsA = () => {
<div>
<Heading>{data.awards.heading}</Heading>
<div className="grid gap-4">
{data.awards.items.map((x) => (
<AwardItem key={x.id} item={x} language={data.metadata.language} />
))}
{data.awards.items.map(
(x) =>
isItemVisible(x) && (
<AwardItem
key={x.id}
item={x}
language={data.metadata.language}
/>
),
)}
</div>
</div>
) : null;
@@ -1,7 +1,7 @@
import React, { memo, useContext } from 'react';
import ReactMarkdown from 'react-markdown';
import PageContext from '../../../contexts/PageContext';
import { formatDate, safetyCheck } from '../../../utils';
import { formatDate, safetyCheck, isItemVisible } from '../../../utils';
const CertificationItem = ({ item, language }) => (
<div>
@@ -29,13 +29,16 @@ const CertificationsA = () => {
<div>
<Heading>{data.certifications.heading}</Heading>
<div className="grid gap-4">
{data.certifications.items.map((x) => (
<CertificationItem
key={x.id}
item={x}
language={data.metadata.language}
/>
))}
{data.certifications.items.map(
(x) =>
isItemVisible(x) && (
<CertificationItem
key={x.id}
item={x}
language={data.metadata.language}
/>
),
)}
</div>
</div>
) : null;
+11 -8
View File
@@ -2,7 +2,7 @@ import React, { memo, useContext } from 'react';
import { useTranslation } from 'react-i18next';
import ReactMarkdown from 'react-markdown';
import PageContext from '../../../contexts/PageContext';
import { formatDateRange, safetyCheck } from '../../../utils';
import { formatDateRange, safetyCheck, isItemVisible } from '../../../utils';
const EducationItem = ({ item, language }) => {
const { t } = useTranslation();
@@ -50,13 +50,16 @@ const EducationA = () => {
<div>
<Heading>{data.education.heading}</Heading>
<div className="grid gap-4">
{data.education.items.map((x) => (
<EducationItem
key={x.id}
item={x}
language={data.metadata.language}
/>
))}
{data.education.items.map(
(x) =>
isItemVisible(x) && (
<EducationItem
key={x.id}
item={x}
language={data.metadata.language}
/>
),
)}
</div>
</div>
) : null;
+4 -2
View File
@@ -1,6 +1,6 @@
import React, { memo, useContext } from 'react';
import PageContext from '../../../contexts/PageContext';
import { safetyCheck } from '../../../utils';
import { safetyCheck, isItemVisible } from '../../../utils';
const HobbyA = (x) => (
<div key={x.id}>
@@ -14,7 +14,9 @@ const HobbiesA = () => {
return safetyCheck(data.hobbies) ? (
<div>
<Heading>{data.hobbies.heading}</Heading>
<div className="grid gap-2">{data.hobbies.items.map(HobbyA)}</div>
<div className="grid gap-2">
{data.hobbies.items.map((x) => isItemVisible(x) && HobbyA(x))}
</div>
</div>
) : null;
};
+2 -2
View File
@@ -1,6 +1,6 @@
import React, { memo, useContext } from 'react';
import PageContext from '../../../contexts/PageContext';
import { safetyCheck } from '../../../utils';
import { safetyCheck, isItemVisible } from '../../../utils';
const LanguageItem = (x) => (
<div key={x.id} className="flex flex-col">
@@ -16,7 +16,7 @@ const LanguagesA = () => {
<div>
<Heading>{data.languages.heading}</Heading>
<div className="grid grid-cols-2 gap-2">
{data.languages.items.map(LanguageItem)}
{data.languages.items.map((x) => isItemVisible(x) && LanguageItem(x))}
</div>
</div>
) : null;
+4 -2
View File
@@ -1,6 +1,6 @@
import React, { memo, useContext } from 'react';
import PageContext from '../../../contexts/PageContext';
import { safetyCheck } from '../../../utils';
import { safetyCheck, isItemVisible } from '../../../utils';
const LanguageItem = (x) => (
<div key={x.id} className="flex flex-col">
@@ -15,7 +15,9 @@ const LanguagesB = () => {
return safetyCheck(data.languages) ? (
<div>
<Heading>{data.languages.heading}</Heading>
<div className="grid gap-2">{data.languages.items.map(LanguageItem)}</div>
<div className="grid gap-2">
{data.languages.items.map((x) => isItemVisible(x) && LanguageItem(x))}
</div>
</div>
) : null;
};
+11 -4
View File
@@ -2,7 +2,7 @@ import React, { memo, useContext } from 'react';
import { useTranslation } from 'react-i18next';
import ReactMarkdown from 'react-markdown';
import PageContext from '../../../contexts/PageContext';
import { formatDateRange, safetyCheck } from '../../../utils';
import { formatDateRange, isItemVisible, safetyCheck } from '../../../utils';
const ProjectItem = ({ item, language }) => {
const { t } = useTranslation();
@@ -49,9 +49,16 @@ const ProjectsA = () => {
<div>
<Heading>{data.projects.heading}</Heading>
<div className="grid gap-4">
{data.projects.items.map((x) => (
<ProjectItem key={x.id} item={x} language={data.metadata.language} />
))}
{data.projects.items.map(
(x) =>
isItemVisible(x) && (
<ProjectItem
key={x.id}
item={x}
language={data.metadata.language}
/>
),
)}
</div>
</div>
) : null;
@@ -1,7 +1,7 @@
import React, { memo, useContext } from 'react';
import ReactMarkdown from 'react-markdown';
import PageContext from '../../../contexts/PageContext';
import { safetyCheck } from '../../../utils';
import { isItemVisible, safetyCheck } from '../../../utils';
const ReferenceItem = (x) => (
<div key={x.id} className="flex flex-col">
@@ -22,7 +22,7 @@ const ReferencesA = () => {
<div>
<Heading>{data.references.heading}</Heading>
<div className="grid grid-cols-3 gap-4">
{data.references.items.map(ReferenceItem)}
{data.references.items.map((x) => isItemVisible(x) && ReferenceItem(x))}
</div>
</div>
) : null;
@@ -1,7 +1,7 @@
import React, { memo, useContext } from 'react';
import ReactMarkdown from 'react-markdown';
import PageContext from '../../../contexts/PageContext';
import { safetyCheck } from '../../../utils';
import { isItemVisible, safetyCheck } from '../../../utils';
const ReferenceItem = (x) => (
<div key={x.id} className="flex flex-col">
@@ -22,7 +22,7 @@ const ReferencesB = () => {
<div>
<Heading>{data.references.heading}</Heading>
<div className="grid gap-4">
{data.references.items.map(ReferenceItem)}
{data.references.items.map((x) => isItemVisible(x) && ReferenceItem(x))}
</div>
</div>
) : null;
+2 -2
View File
@@ -1,6 +1,6 @@
import React, { memo, useContext } from 'react';
import PageContext from '../../../contexts/PageContext';
import { safetyCheck } from '../../../utils';
import { safetyCheck, isItemVisible } from '../../../utils';
const SkillItem = (x) => (
<div key={x.id} className="flex flex-col">
@@ -16,7 +16,7 @@ const SkillsA = () => {
<div>
<Heading>{data.skills.heading}</Heading>
<div className="grid grid-cols-2 gap-y-2 gap-x-4">
{data.skills.items.map(SkillItem)}
{data.skills.items.map((x) => isItemVisible(x) && SkillItem(x))}
</div>
</div>
) : null;
+2 -2
View File
@@ -1,6 +1,6 @@
import React, { memo, useContext } from 'react';
import PageContext from '../../../contexts/PageContext';
import { safetyCheck } from '../../../utils';
import { safetyCheck, isItemVisible } from '../../../utils';
const SkillItem = (x) => (
<li key={x.id} className="text-sm py-1">
@@ -14,7 +14,7 @@ const SkillsA = () => {
return safetyCheck(data.skills) ? (
<div>
<Heading>{data.skills.heading}</Heading>
<ul>{data.skills.items.map(SkillItem)}</ul>
<ul>{data.skills.items.map((x) => isItemVisible(x) && SkillItem(x))}</ul>
</div>
) : null;
};
+12 -5
View File
@@ -2,7 +2,12 @@ import React, { memo, useContext } from 'react';
import { useTranslation } from 'react-i18next';
import ReactMarkdown from 'react-markdown';
import PageContext from '../../../contexts/PageContext';
import { formatDateRange, safetyCheck } from '../../../utils';
import {
formatDateRange,
safetyCheck,
isItemVisible,
genericFilter,
} from '../../../utils';
const WorkItem = ({ item, language }) => {
const { t } = useTranslation();
@@ -40,14 +45,16 @@ const WorkItem = ({ item, language }) => {
const WorkA = () => {
const { data, heading: Heading } = useContext(PageContext);
return safetyCheck(data.work) ? (
<div>
<Heading>{data.work.heading}</Heading>
<div className="grid gap-4">
{data.work.items.map((x) => (
<WorkItem key={x.id} item={x} language={data.metadata.language} />
))}
{data.work.items.map(
(x) =>
isItemVisible(x) && (
<WorkItem key={x.id} item={x} language={data.metadata.language} />
),
)}
</div>
</div>
) : null;