Merge pull request #38 from blopa/feature/v408

Feature/v408

README.MD

@@ -310,6 +310,9 @@ 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.8:**
+	- Add cover letter field to the resume builder forms.
+	- Add param to the build page to go directly to a specific form.
 - **v4.0.7:**
 	- Fix builder page translations.
 	- Add more Spanish translations (Thanks Leandro).

gatsby-node.js

@@ -43,18 +43,21 @@ exports.onCreatePage = async ({ page, actions }) => {
         return;
     }
 
+    if (page.context.intl.originalPath === '/Build/') {
+        matchPath = `${pagePath}*`;
+    }
+
     if (page.context.intl.originalPath === '/ResumeViewer/') {
-        const templates = await fs.readdir(TEMPLATES_PATH);
+        if (
+            page.internalComponentName === 'ComponentResumeViewer'
+            && language !== 'en'
+        ) {
+            return;
+        }
 
+        const templates = await fs.readdir(TEMPLATES_PATH);
         templates.filter((template) => !disabledTemplates.includes(template))
             .forEach((template) => {
-                if (
-                    page.internalComponentName === 'ComponentResumeViewer'
-                && language !== 'en'
-                ) {
-                    return;
-                }
-
                 pagePath = `/view/${template}`.toLocaleLowerCase();
                 matchPath = `${pagePath}/*`;
                 myCreatePage(

package.json

@@ -1,6 +1,6 @@
 {
     "name": "resume-builder",
-    "version": "4.0.7",
+    "version": "4.0.8",
     "description": "Resume Builder",
     "main": "index.js",
     "author": "Pablo Pirata",

release-notes.md

@@ -1,4 +1,25 @@
 ## Release Notes
+- **v4.0.8:**
+  - Add cover letter field to the resume builder forms.
+  - Add param to the build page to go directly to a specific form.
+- **v4.0.7:**
+  - Fix builder page translations.
+  - Add more Spanish translations (Thanks Leandro).
+- **v4.0.6:**
+  - Create form to create a JSON resume from scratch
+  - Add theme switcher in the sidebar
+- **v4.0.5:**
+  - Fix `profiles` not being parsed correctly from the Spreadsheet
+  - Fix parsing Google Spreadsheet (but you need to publish it to the web to work)
+- **v4.0.4:**
+  - *Error 404: Release not found*
+  - Sorry I had to make this joke...
+- **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.

schema.json

@@ -1,6 +1,8 @@
 {
     "$schema": "http://json-schema.org/draft-04/schema#",
     "additionalProperties": false,
+    "title": "Resume Schema",
+    "type": "object",
     "definitions": {
         "iso8601": {
             "type": "string",
@@ -483,6 +485,10 @@
                 }
             }
         },
+        "coverLetter": {
+            "type": "string",
+            "description": "Some text with {{some}} custom {{variables}}"
+        },
         "meta": {
             "type": "object",
             "description": "The schema version and any other tooling configuration lives here",
@@ -503,7 +509,5 @@
                 }
             }
         }
-    },
-    "title": "Resume Schema",
-    "type": "object"
+    }
 }

src/components/DynamicForm.jsx

@@ -40,10 +40,11 @@ const DynamicForm = ({
     formik,
     definitions,
     textAreaNames = [],
+    quantitiesObject = {},
 }) => {
     const classes = useStyles();
     const intl = useIntl();
-    const [quantitiesObject, setQuantitiesObject] = useState({});
+    const [quantitiesHashMap, setQuantitiesHashMap] = useState(quantitiesObject);
 
     const getForm = useCallback((jsonSchema, accKey = '', quantity = 1) =>
         Object.entries(jsonSchema).map(([key, value], index) => {
@@ -73,7 +74,7 @@ const DynamicForm = ({
                 }
 
                 case 'array': {
-                    const currQuantity = quantitiesObject[newAccKey] || 1;
+                    const currQuantity = quantitiesHashMap[newAccKey] || 1;
                     return (
                         <div key={key} className={classes.section}>
                             {(new Array(quantity).fill(null).map((v, i) => (
@@ -90,8 +91,8 @@ const DynamicForm = ({
                             <div className={classes.buttonWrapper}>
                                 <Button
                                     onClick={() => {
-                                        setQuantitiesObject({
-                                            ...quantitiesObject,
+                                        setQuantitiesHashMap({
+                                            ...quantitiesHashMap,
                                             [newAccKey]: currQuantity + 1,
                                         });
                                     }}
@@ -103,8 +104,8 @@ const DynamicForm = ({
                                 {currQuantity > 1 && (
                                     <Button
                                         onClick={() => {
-                                            setQuantitiesObject({
-                                                ...quantitiesObject,
+                                            setQuantitiesHashMap({
+                                                ...quantitiesHashMap,
                                                 [newAccKey]: currQuantity - 1,
                                             });
                                         }}
@@ -149,6 +150,10 @@ const DynamicForm = ({
                                 (v, i) => {
                                     const newKey = `${newAccKey}-${i}`;
                                     const isTextArea = textAreaNames.includes(key);
+                                    let lines = 4;
+                                    if (key === 'coverLetter') {
+                                        lines = 15;
+                                    }
 
                                     return (
                                         <TextField
@@ -157,7 +162,7 @@ const DynamicForm = ({
                                                 [classes.textArea]: isTextArea,
                                             })}
                                             multiline={isTextArea}
-                                            rows={isTextArea ? 3 : 1}
+                                            rows={isTextArea ? lines : 1}
                                             rowsMax={10}
                                             fullWidth
                                             id={newKey}
@@ -185,7 +190,7 @@ const DynamicForm = ({
         classes.field,
         classes.textArea,
         intl,
-        quantitiesObject,
+        quantitiesHashMap,
         definitions,
         textAreaNames,
         formik.values,

src/components/ResumeTemplates/Compact/Index.jsx

@@ -101,7 +101,7 @@ const Compact = ({
             value={templateIntl}
         >
             <div className={classes.resumeDefaultTemplate}>
-                {(coverLetter) && (
+                {coverLetter && (
                     <CoverLetter
                         coverLetterText={coverLetter}
                         coverLetterVariables={coverLetterVariables}

src/components/ResumeTemplates/Default/Index.jsx

@@ -96,13 +96,43 @@ const Default = ({
         return newIntl;
     }, [customTranslations, intl.defaultLocale, intl.locale]);
 
+    const showCoverLetterPageBreak = useMemo(
+        () => isObjectNotEmpty(basics)
+        && work?.length
+        && skills?.length
+        && education?.length
+        && awards?.length
+        && volunteer?.length
+        && publications?.length
+        && languages?.length
+        && interests?.length
+        && references?.length
+        && projects?.length
+        && certificates?.length,
+        [
+            basics,
+            work,
+            skills,
+            education,
+            awards,
+            volunteer,
+            publications,
+            languages,
+            interests,
+            references,
+            projects,
+            certificates,
+        ]
+    );
+
     return (
         <RawIntlProvider
             value={templateIntl}
         >
             <div className={classes.resumeDefaultTemplate}>
-                {(coverLetter) && (
+                {coverLetter && (
                     <CoverLetter
+                        showPageBreak={showCoverLetterPageBreak}
                         coverLetterText={coverLetter}
                         coverLetterVariables={coverLetterVariables}
                     />

src/components/ResumeTemplates/Default/Sections/CoverLetter.jsx

@@ -42,7 +42,8 @@ const useStyles = makeStyles((theme) => ({
 
 const CoverLetter = ({
     coverLetterText = '',
-    coverLetterVariables = [],
+    coverLetterVariables = {},
+    showPageBreak = true,
 }) => {
     const classes = useStyles();
     const intl = useIntl();
@@ -74,9 +75,11 @@ const CoverLetter = ({
                     __html: Mustache.render(text, variables),
                 }}
             />
-            <div className={classes.pageBreakWarning}>
-                {intl.formatMessage({ id: 'this_is_a_page_break' })}
-            </div>
+            {showPageBreak && (
+                <div className={classes.pageBreakWarning}>
+                    {intl.formatMessage({ id: 'this_is_a_page_break' })}
+                </div>
+            )}
         </Fragment>
     );
 };

src/intl/en.json

@@ -54,6 +54,7 @@
         "interests": "Interests",
         "references": "References",
         "projects": "Projects",
+        "coverLetter": "Cover letter",
         "profiles": "Profiles",
         "name": "Name",
         "label": "Label",

src/intl/es.json

@@ -54,6 +54,7 @@
         "interests": "Intereses",
         "references": "Referencias",
         "projects": "Proyectos",
+        "coverLetter": "Carta de presentación",
         "profiles": "Perfiles",
         "name": "Nombre",
         "label": "Etiqueta",

src/intl/pt-br.json

@@ -54,6 +54,7 @@
         "interests": "Interesses",
         "references": "Referências",
         "projects": "Projetos",
+        "coverLetter": "Carta de apresentação",
         "profiles": "Perfis",
         "name": "Nome",
         "label": "Rótulo",

src/pages/Build.jsx

@@ -18,7 +18,7 @@ import { useDispatch } from '../store/StoreProvider';
 
 // Utils
 import { downloadJson } from '../utils/json-parser';
-import { convertToToggleableObject } from '../utils/utils';
+import { convertToToggleableObject, generateCoverLetterObject } from '../utils/utils';
 
 // Actions
 import setToggleableJsonResume from '../store/actions/setToggleableJsonResume';
@@ -70,7 +70,7 @@ const convertFormikToJsonArray = (formikValues, stringStart, arrayKeys = []) =>
         return newAcc;
     }, []);
 
-const BuildPage = () => {
+const BuildPage = ({ params, uri, location }) => {
     const intl = useIntl();
     const classes = useStyles();
     const dispatch = useDispatch();
@@ -92,10 +92,28 @@ const BuildPage = () => {
         return schemaArray;
     }, []);
 
-    const [index, setIndex] = useState(0);
+    const paramFormValues = useMemo(
+        () => Object.fromEntries(new URLSearchParams(location.search)),
+        [location.search]
+    );
+
+    const currentIndex = useMemo(() => {
+        const key = params['*'] || '';
+        const foundIndex = splittedSchema.findIndex(
+            (value) => Object.keys(value)
+                .map((k) => k.toLowerCase())
+                .includes(key.toLowerCase())
+        );
+
+        return Math.max(foundIndex, 0);
+    }, [params, splittedSchema]);
+
+    const [index, setIndex] = useState(currentIndex);
 
     const formik = useFormik({
-        initialValues: {},
+        initialValues: {
+            ...paramFormValues,
+        },
         onSubmit: (values) => {
             // TODO
         },
@@ -125,7 +143,7 @@ const BuildPage = () => {
 
     const getResumeJsonFromFormik = useCallback(() => {
         const arrayKeys = ['highlights', 'keywords', 'courses', 'roles'];
-        const resume = {
+        return {
             basics: {
                 ...Object.entries(formik.values)
                     .filter(([k, v]) => k.startsWith('basics-0-'))
@@ -173,9 +191,8 @@ const BuildPage = () => {
             interests: convertFormikToJsonArray(formik.values, 'interests-', arrayKeys),
             references: convertFormikToJsonArray(formik.values, 'references-', arrayKeys),
             projects: convertFormikToJsonArray(formik.values, 'projects-', arrayKeys),
+            coverLetter: formik.values['coverLetter-0'] || '',
         };
-
-        return resume;
     }, [formik.values]);
 
     const handleClickDownload = useCallback(() => {
@@ -190,7 +207,10 @@ const BuildPage = () => {
 
     const handleClickBuild = useCallback(() => {
         const resume = getResumeJsonFromFormik();
-        setResumesAndForward(convertToToggleableObject(cloneDeep(resume)));
+        setResumesAndForward({
+            ...convertToToggleableObject(cloneDeep(resume)),
+            coverLetter: generateCoverLetterObject(resume.coverLetter),
+        });
     }, [getResumeJsonFromFormik, setResumesAndForward]);
 
     return (
@@ -208,7 +228,7 @@ const BuildPage = () => {
                         schema={splittedSchema[index]}
                         formik={formik}
                         definitions={schema.definitions}
-                        textAreaNames={['summary', 'description']}
+                        textAreaNames={['summary', 'description', 'coverLetter']}
                     />
                 </div>
             </Slide>

src/store/resume.json

@@ -14,6 +14,7 @@
     "interests": [],
     "references": [],
     "projects": [],
+    "certificates": [],
     "__translation__": {},
     "enableSourceDataDownload": false
 }