feat: adding a toggle switch for left panel items

src/components/builder/lists/ListItem.js

@@ -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,6 +106,15 @@ const ListItem = ({
               </span>
             )}
           </div>
+          <div className={styles.toggleButton}>
+            <Switch
+              checked={toggleSwitchState}
+              onChange={handleToggleUse}
+              color="primary"
+              name="toggleSwitch"
+              className="toggle-button"
+              inputProps={{ 'aria-label': 'primary checkbox' }}
+            />
 
             <div className={styles.menu}>
               <MdMoreVert
@@ -127,6 +148,7 @@ const ListItem = ({
               </Menu>
             </div>
           </div>
+        </div>
       )}
     </Draggable>
   );

src/components/builder/lists/ListItem.module.css

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

src/contexts/ResumeContext.js

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

src/templates/blocks/Awards/AwardsA.js

@@ -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) => (
+        {data.awards.items.map(
-          <AwardItem key={x.id} item={x} language={data.metadata.language} />
+          (x) =>
-        ))}
+            isItemVisible(x) && (
+              <AwardItem
+                key={x.id}
+                item={x}
+                language={data.metadata.language}
+              />
+            ),
+        )}
       </div>
     </div>
   ) : null;

src/templates/blocks/Certifications/CertificationsA.js

@@ -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) => (
+        {data.certifications.items.map(
+          (x) =>
+            isItemVisible(x) && (
               <CertificationItem
                 key={x.id}
                 item={x}
                 language={data.metadata.language}
               />
-        ))}
+            ),
+        )}
       </div>
     </div>
   ) : null;

src/templates/blocks/Education/EducationA.js

@@ -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) => (
+        {data.education.items.map(
+          (x) =>
+            isItemVisible(x) && (
               <EducationItem
                 key={x.id}
                 item={x}
                 language={data.metadata.language}
               />
-        ))}
+            ),
+        )}
       </div>
     </div>
   ) : null;

src/templates/blocks/Hobbies/HobbiesA.js

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

src/templates/blocks/Languages/LanguagesA.js

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

src/templates/blocks/Languages/LanguagesB.js

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

src/templates/blocks/Projects/ProjectsA.js

@@ -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) => (
+        {data.projects.items.map(
-          <ProjectItem key={x.id} item={x} language={data.metadata.language} />
+          (x) =>
-        ))}
+            isItemVisible(x) && (
+              <ProjectItem
+                key={x.id}
+                item={x}
+                language={data.metadata.language}
+              />
+            ),
+        )}
       </div>
     </div>
   ) : null;

src/templates/blocks/References/ReferencesA.js

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

src/templates/blocks/References/ReferencesB.js

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

src/templates/blocks/Skills/SkillsA.js

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

src/templates/blocks/Skills/SkillsB.js

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

src/templates/blocks/Work/WorkA.js

@@ -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) => (
+        {data.work.items.map(
+          (x) =>
+            isItemVisible(x) && (
               <WorkItem key={x.id} item={x} language={data.metadata.language} />
-        ))}
+            ),
+        )}
       </div>
     </div>
   ) : null;

src/utils/index.js

@@ -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();
 };