Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-18 02:31:56 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: adding a toggle switch for left panel items

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/builder/lists/ListItem.js
View File

@ -4,6 +4,7 @@ import { Draggable } from 'react-beautiful-dnd';
import { useTranslation } from 'react-i18next';
import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
import { MdMoreVert } from 'react-icons/md';
import Switch from '@material-ui/core/Switch';
import { useDispatch } from '../../../contexts/ResumeContext';
import styles from './ListItem.module.css';
@ -25,6 +26,7 @@ const ListItem = ({
const [anchorEl, setAnchorEl] = useState(null);
const handleClick = (event) => setAnchorEl(event.currentTarget);
const toggleSwitchState = 'isVisible' in data ? data.isVisible : true;
const handleClose = () => setAnchorEl(null);
@ -69,6 +71,16 @@ const ListItem = ({
handleClose();
};
const handleToggleUse = () => {
dispatch({
type: 'on_toggle_use_item',
payload: {
path,
value: data,
},
});
};
return (
<Draggable draggableId={data.id} index={index}>
{(dragProvided) => (
@ -94,37 +106,47 @@ const ListItem = ({
</span>
)}
</div>
<div className={styles.menu}>
<MdMoreVert
size="18px"
aria-haspopup="true"
onClick={handleClick}
className="cursor-context-menu"
<div className={styles.toggleButton}>
<Switch
checked={toggleSwitchState}
onChange={handleToggleUse}
color="primary"
name="toggleSwitch"
className="toggle-button"
inputProps={{ 'aria-label': 'primary checkbox' }}
/>
<Menu
keepMounted
anchorEl={anchorEl}
onClose={handleClose}
open={Boolean(anchorEl)}
>
<div className="flex items-center space-around">
<MenuItem disabled={isFirst} onClick={handleMoveUp}>
<IoIosArrowUp size="18px" />
<div className={styles.menu}>
<MdMoreVert
size="18px"
aria-haspopup="true"
onClick={handleClick}
className="cursor-context-menu"
/>
<Menu
keepMounted
anchorEl={anchorEl}
onClose={handleClose}
open={Boolean(anchorEl)}
>
<div className="flex items-center space-around">
<MenuItem disabled={isFirst} onClick={handleMoveUp}>
<IoIosArrowUp size="18px" />
</MenuItem>
<MenuItem disabled={isLast} onClick={handleMoveDown}>
<IoIosArrowDown size="18px" />
</MenuItem>
</div>
<MenuItem onClick={handleEdit}>
{t('shared.buttons.edit')}
</MenuItem>
<MenuItem disabled={isLast} onClick={handleMoveDown}>
<IoIosArrowDown size="18px" />
<MenuItem onClick={handleDelete}>
<span className="text-red-600 font-medium">
{t('shared.buttons.delete')}
</span>
</MenuItem>
</div>
<MenuItem onClick={handleEdit}>
{t('shared.buttons.edit')}
</MenuItem>
<MenuItem onClick={handleDelete}>
<span className="text-red-600 font-medium">
{t('shared.buttons.delete')}
</span>
</MenuItem>
</Menu>
</Menu>
</div>
</div>
</div>
)}

4
src/components/builder/lists/ListItem.module.css
View File

@ -15,3 +15,7 @@
@apply opacity-100;
@apply transition-opacity duration-200 ease-in-out;
}
.toggle-button {
@apply flex items-center justify-center
}

12
src/contexts/ResumeContext.js
View File

@ -68,6 +68,18 @@ const ResumeProvider = ({ children }) => {
debouncedUpdateResume(newState);
return newState;
case 'on_toggle_use_item':
items = get(state, payload.path);
index = findIndex(items, ['id', payload.value.id]);
if ('isVisible' in items[index]) {
items[index].isVisible = !items[index].isVisible;
} else {
items[index].isVisible = false;
}
newState = setWith(clone(state), payload.path, items, clone);
debouncedUpdateResume(newState);
return newState;
case 'on_move_item_up':
items = get(state, payload.path);
index = findIndex(items, ['id', payload.value.id]);

15
src/templates/blocks/Awards/AwardsA.js
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;

19
src/templates/blocks/Certifications/CertificationsA.js
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 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;

19
src/templates/blocks/Education/EducationA.js
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;

6
src/templates/blocks/Hobbies/HobbiesA.js
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;
};

4
src/templates/blocks/Languages/LanguagesA.js
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;

6
src/templates/blocks/Languages/LanguagesB.js
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;
};

15
src/templates/blocks/Projects/ProjectsA.js
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;

4
src/templates/blocks/References/ReferencesA.js
View File

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

4
src/templates/blocks/References/ReferencesB.js
View File

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

4
src/templates/blocks/Skills/SkillsA.js
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;

4
src/templates/blocks/Skills/SkillsB.js
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;
};

17
src/templates/blocks/Work/WorkA.js
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;

14
src/utils/index.js
View File

@ -1,5 +1,5 @@
import dayjs from 'dayjs';
import { get, isEmpty } from 'lodash';
import { get, isEmpty, clone } from 'lodash';
export const getModalText = (isEditMode, type, t) =>
isEditMode
@ -9,6 +9,18 @@ export const getModalText = (isEditMode, type, t) =>
export const safetyCheck = (section, path = 'items') =>
!!(section && section.visible === true && !isEmpty(section[path]));
export const isItemVisible = (section) =>
section && section.isVisible !== false;
// Thought about creating a generic function to filter out non-visible items
export const genericFilter = (key, data) => {
const clonedData = clone(data);
clonedData[`${key}`].items = clonedData[`${key}`].items.filter((x) =>
isItemVisible(x),
);
return data;
};
export const handleKeyUp = (event, action) => {
(event.which === 13 || event.which === 32) && action();
};

18015
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff