huge refactor in the global state of the app + some fixes in the togg…

…ler sidebar
blopa · May 13, 2021 · dcb7e41 · dcb7e41
1 parent 985cd7d
commit dcb7e41
Show file tree

Hide file tree

Showing 57 changed files with 2,890 additions and 1,229 deletions.
diff --git a/README.MD b/README.MD
@@ -26,7 +26,7 @@ Older versions: [V1](https://github.com/blopa/Resume-Builder/blob/main/README_V1
 - Cover Letter Editor
 
 ## JSON Resume Schema
-This project uses the [jsonresume/resume-schema](https://github.com/jsonresume/resume-schema) v1.0.0, but due a need to extend some of it's features, we also added 4 new fields:
+This project uses the [jsonresume/resume-schema](https://github.com/jsonresume/resume-schema) v1.0.0, but due to a need to extend some of it's features, we also added 4 new fields:
 - `__translation__` to translate template keys.
 - `coverLetter` to add your own Cover Letter template.
 - `work[].keywords` to add keywords to your work experience.
@@ -303,11 +303,17 @@ The following `JSON` is a result of [this Google Spreadsheet](https://docs.googl
 ![ScreenShot](https://raw.githubusercontent.com/blopa/Resume-Builder/main/screenshots/v4/screenshot_3.png)
 
 ## Release Notes
+- **v4.0.3:**
+	- Add toggler for `keywords` and `highlights` on the sidebar.
+	- Bump Gatsby and plugins to 3.5.
+	- Big refactor on the global state.
+	- Data disabled from the spreadsheet can now be enabled via the sidebar.
+	- Downloaded `JSON` resume will only contain enabled data.
 - **v4.0.2:**
 	- Filter out resume templates that are not ready yet.
 	- Add download link to download the JSON data.
 	- Fix resume viewer.
-	- Add missing fields on "work" and "projects".
+	- Add missing fields on `work` and `projects`.
 	- Small layout fixes in the "Default" template.
 	- Arrays from the spreadsheet are now parsed using `';'` instead of `','`.
 - **v4.0.1:**

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "resume-builder",
-    "version": "4.0.2",
+    "version": "4.0.3",
     "description": "Resume Builder",
     "main": "index.js",
     "author": "Pablo Pirata",

diff --git a/src/components/ResumeDrawerItems/Items/Awards.jsx b/src/components/ResumeDrawerItems/Items/Awards.jsx
@@ -38,52 +38,45 @@ function Awards({ awards }) {
         });
     }, [awards, setResumeAwardsState]);
 
-    const toggleAward = useCallback((award) => () => {
+    const toggleAward = useCallback((award, index) => () => {
         const newAwards = { ...awards };
-        newAwards.value =
-            newAwards?.value.map((awd) => {
-                if (JSON.stringify(awd?.value) === JSON.stringify(award?.value)) {
-                    return {
-                        ...awd,
-                        enabled: !awd?.enabled,
-                    };
-                }
-                return awd;
-            });
+        newAwards.value[index] = {
+            ...newAwards.value[index],
+            enabled: !newAwards.value[index].enabled,
+        };
         setResumeAwardsState(newAwards);
     }, [awards, setResumeAwardsState]);
 
-    const toggleAwardsDetail = useCallback((award, propName) => () => {
+    const toggleAwardsDetail = useCallback((award, index, propName) => () => {
         const newAwards = { ...awards };
-        newAwards.value =
-            newAwards?.value.map((awd) => {
-                if (JSON.stringify(awd?.value) === JSON.stringify(award?.value)) {
-                    return {
-                        ...awd,
-                        value: {
-                            ...awd?.value,
-                            [propName]: {
-                                ...awd?.value[propName],
-                                enabled: !awd?.value[propName]?.enabled,
-                            },
-                        },
-                    };
-                }
-                return awd;
-            });
+        newAwards.value[index] = {
+            ...newAwards.value[index],
+            value: {
+                ...newAwards.value[index].value,
+                [propName]: {
+                    ...newAwards.value[index].value[propName],
+                    enabled: !newAwards.value[index].value[propName].enabled,
+                },
+            },
+        };
+
+        if (newAwards.value[index].enabled) {
+            newAwards.value[index].enabled =
+                Object.entries(newAwards.value[index].value).some((entry) => entry[1].enabled);
+        }
         setResumeAwardsState(newAwards);
     }, [awards, setResumeAwardsState]);
 
     return (
         <div className={classes.resumeDrawerItem}>
             <ItemInput
-                label="awards"
+                label={varNameToString({ awards })}
                 onChange={toggleAwards}
                 checked={awards?.enabled}
             />
             {awards?.enabled && (
                 <ul>
-                    {awards?.value.map((award) => {
+                    {awards?.value.map((award, index) => {
                         const {
                             title,
                             date,
@@ -96,7 +89,7 @@ function Awards({ awards }) {
                                 <ItemsList
                                     label={title?.value}
                                     checked={award?.enabled}
-                                    onClick={toggleAward(award)}
+                                    onClick={toggleAward(award, index)}
                                 />
                                 {award?.enabled && (
                                     <ul>
@@ -106,6 +99,7 @@ function Awards({ awards }) {
                                                 checked={title?.enabled}
                                                 onClick={toggleAwardsDetail(
                                                     award,
+                                                    index,
                                                     varNameToString({ title })
                                                 )}
                                             />
@@ -116,6 +110,7 @@ function Awards({ awards }) {
                                                 checked={date?.enabled}
                                                 onClick={toggleAwardsDetail(
                                                     award,
+                                                    index,
                                                     varNameToString({ date })
                                                 )}
                                             />
@@ -126,6 +121,7 @@ function Awards({ awards }) {
                                                 checked={awarder?.enabled}
                                                 onClick={toggleAwardsDetail(
                                                     award,
+                                                    index,
                                                     varNameToString({ awarder })
                                                 )}
                                             />
@@ -136,6 +132,7 @@ function Awards({ awards }) {
                                                 checked={summary?.enabled}
                                                 onClick={toggleAwardsDetail(
                                                     award,
+                                                    index,
                                                     varNameToString({ summary })
                                                 )}
                                             />

diff --git a/src/components/ResumeDrawerItems/Items/Basics.jsx b/src/components/ResumeDrawerItems/Items/Basics.jsx
@@ -72,18 +72,12 @@ function Basics({ basics }) {
         });
     }, [basics, setResumeBasicsState]);
 
-    const toggleBasicsProfilesDetail = useCallback((profile) => () => {
+    const toggleBasicsProfilesDetail = useCallback((profile, index) => () => {
         const newBasics = { ...basics };
-        newBasics.value.profiles.value =
-            newBasics?.value.profiles?.value.map((pro) => {
-                if (JSON.stringify(pro?.value) === JSON.stringify(profile?.value)) {
-                    return {
-                        ...pro,
-                        enabled: !pro?.enabled,
-                    };
-                }
-                return pro;
-            });
+        newBasics.value.profiles.value[index] = {
+            ...newBasics.value.profiles.value[index],
+            enabled: !newBasics.value.profiles.value[index].enabled,
+        };
         setResumeBasicsState(newBasics);
     }, [basics, setResumeBasicsState]);
 
@@ -114,7 +108,7 @@ function Basics({ basics }) {
     return (
         <div className={classes.resumeDrawerItem}>
             <ItemInput
-                label="basics"
+                label={varNameToString({ basics })}
                 onChange={toggleBasics}
                 checked={basicsEnabled}
             />
@@ -148,6 +142,7 @@ function Basics({ basics }) {
                         />
                     )}
                     <ItemsList
+                        // TODO varNameToString({ location })
                         label="location"
                         checked={locationEnabled}
                         onClick={toggleBasicsDetail(
@@ -243,15 +238,16 @@ function Basics({ basics }) {
                             )}
                             {profiles?.enabled && (
                                 <ul>
-                                    {profiles?.value.map((profile) => {
+                                    {profiles?.value.map((profile, index) => {
                                         const { network } = profile?.value || {};
                                         return (
                                             <ItemsList
                                                 label={network?.value}
                                                 key={uuid()}
                                                 checked={profile?.enabled}
                                                 onClick={toggleBasicsProfilesDetail(
-                                                    profile
+                                                    profile,
+                                                    index
                                                 )}
                                             />
                                         );

diff --git a/src/components/ResumeDrawerItems/Items/Certificates.jsx b/src/components/ResumeDrawerItems/Items/Certificates.jsx
@@ -38,74 +38,68 @@ function Certificates({ certificates }) {
         });
     }, [certificates, setResumeCertificatesState]);
 
-    const toggleAward = useCallback((award) => () => {
+    const toggleCertificate = useCallback((certificate, index) => () => {
         const newCertificates = { ...certificates };
-        newCertificates.value =
-            newCertificates?.value.map((awd) => {
-                if (JSON.stringify(awd?.value) === JSON.stringify(award?.value)) {
-                    return {
-                        ...awd,
-                        enabled: !awd?.enabled,
-                    };
-                }
-                return awd;
-            });
+        newCertificates.value[index] = {
+            ...newCertificates.value[index],
+            enabled: !newCertificates.value[index].enabled,
+        };
         setResumeCertificatesState(newCertificates);
     }, [certificates, setResumeCertificatesState]);
 
-    const toggleCertificatesDetail = useCallback((award, propName) => () => {
+    const toggleCertificatesDetail = useCallback((certificate, index, propName) => () => {
         const newCertificates = { ...certificates };
-        newCertificates.value =
-            newCertificates?.value.map((awd) => {
-                if (JSON.stringify(awd?.value) === JSON.stringify(award?.value)) {
-                    return {
-                        ...awd,
-                        value: {
-                            ...awd?.value,
-                            [propName]: {
-                                ...awd?.value[propName],
-                                enabled: !awd?.value[propName]?.enabled,
-                            },
-                        },
-                    };
-                }
-                return awd;
-            });
+        newCertificates.value[index] = {
+            ...newCertificates.value[index],
+            value: {
+                ...newCertificates.value[index].value,
+                [propName]: {
+                    ...newCertificates.value[index].value[propName],
+                    enabled: !newCertificates.value[index].value[propName].enabled,
+                },
+            },
+        };
+
+        if (newCertificates.value[index].enabled) {
+            newCertificates.value[index].enabled =
+                Object.entries(newCertificates.value[index].value).some((entry) => entry[1].enabled);
+        }
         setResumeCertificatesState(newCertificates);
     }, [certificates, setResumeCertificatesState]);
 
     return (
         <div className={classes.resumeDrawerItem}>
             <ItemInput
-                label="certificates"
+                label={varNameToString({ certificates })}
                 onChange={toggleCertificates}
                 checked={certificates?.enabled}
             />
             {certificates?.enabled && (
                 <ul>
-                    {certificates?.value.map((award) => {
+                    {certificates?.value.map((certificate, index) => {
                         const {
                             name,
                             date,
                             url,
                             issuer,
-                        } = award?.value || {};
+                        } = certificate?.value || {};
 
                         return (
                             <Fragment key={uuid()}>
                                 <ItemsList
                                     label={name?.value}
-                                    checked={award?.enabled}
-                                    onClick={toggleAward(award)}
+                                    checked={certificate?.enabled}
+                                    onClick={toggleCertificate(certificate, index)}
                                 />
-                                {award?.enabled && (
+                                {certificate?.enabled && (
                                     <ul>
                                         {name && (
                                             <ItemsList
                                                 label={varNameToString({ name })}
                                                 checked={name?.enabled}
                                                 onClick={toggleCertificatesDetail(
-                                                    award,
+                                                    certificate,
+                                                    index,
                                                     varNameToString({ name })
                                                 )}
                                             />
@@ -115,7 +109,8 @@ function Certificates({ certificates }) {
                                                 label={varNameToString({ date })}
                                                 checked={date?.enabled}
                                                 onClick={toggleCertificatesDetail(
-                                                    award,
+                                                    certificate,
+                                                    index,
                                                     varNameToString({ date })
                                                 )}
                                             />
@@ -125,7 +120,8 @@ function Certificates({ certificates }) {
                                                 label={varNameToString({ issuer })}
                                                 checked={issuer?.enabled}
                                                 onClick={toggleCertificatesDetail(
-                                                    award,
+                                                    certificate,
+                                                    index,
                                                     varNameToString({ issuer })
                                                 )}
                                             />
@@ -135,7 +131,8 @@ function Certificates({ certificates }) {
                                                 label={varNameToString({ url })}
                                                 checked={url?.enabled}
                                                 onClick={toggleCertificatesDetail(
-                                                    award,
+                                                    certificate,
+                                                    index,
                                                     varNameToString({ url })
                                                 )}
                                             />

diff --git a/src/components/ResumeDrawerItems/Items/CoverLetter.jsx b/src/components/ResumeDrawerItems/Items/CoverLetter.jsx
@@ -14,6 +14,9 @@ import setResumeCoverLetter from '../../../store/actions/setResumeCoverLetter';
 // Hooks
 import { useDispatch } from '../../../store/StoreProvider';
 
+// Utils
+import { varNameToString } from '../../../utils/utils';
+
 const useStyles = makeStyles((theme) => ({
     ...style,
 }));
@@ -44,7 +47,7 @@ function CoverLetter({ coverLetter }) {
     return (
         <div className={classes.resumeDrawerItem}>
             <ItemInput
-                label="coverLetter"
+                label={varNameToString({ coverLetter })}
                 onChange={toggleCoverLetter}
                 checked={coverLetter?.enabled}
             />

diff --git a/src/components/ResumeDrawerItems/Items/Download.jsx b/src/components/ResumeDrawerItems/Items/Download.jsx
@@ -13,6 +13,9 @@ import setEnableSourceDataDownload from '../../../store/actions/setEnableSourceD
 // Hooks
 import { useDispatch } from '../../../store/StoreProvider';
 
+// Utils
+import { varNameToString } from '../../../utils/utils';
+
 const useStyles = makeStyles((theme) => ({
     ...style,
 }));
@@ -27,7 +30,7 @@ function Download({ enableSourceDataDownload }) {
     return (
         <div className={classes.resumeDrawerItem}>
             <ItemInput
-                label="enableSourceDataDownload"
+                label={varNameToString({ enableSourceDataDownload })}
                 onChange={toggleCoverLetter}
                 checked={enableSourceDataDownload}
             />