Merge pull request #189 from AmruthPillai/develop

Assorted Bug Fixes from Open Source Community

src/assets/demo/data.json

@@ -142,18 +142,54 @@
       "enable": true,
       "heading": "Skills",
       "items": [
-        "Customer Service Expertise",
+          {
-        "High-Volume Call Center",
+            "id": "2562d78a-3459-4370-8604-c81b00738db1",
-        "Team Leader/Problem Solver",
+            "skill": "Customer Service Expertise"
-        "Call Center Management",
+          },
-        "Teambuilding & Training",
+          {
-        "Continuous Improvement"
+            "id": "58c31587-9770-4522-a34c-f5ad92fe33e5",
+            "skill": "High-Volume Call Center"
+          },
+          {
+            "id": "7aa9a4b1-a2bb-4bcd-8711-b66c0d246971",
+            "skill": "Team Leader/Problem Solver"
+          },
+          {
+            "id": "e7fd33e8-5d77-462d-8115-5be57f52832e",
+            "skill": "Call Center Management"
+          },
+          {
+              "id": "7bad2af1-c24d-4e01-b68b-be01cfa784ce",
+              "skill": "Teambuilding & Training"
+          },
+          {
+            "id": "64fe1710-c2d1-4f53-922e-a5d751eee967",
+            "skill": "Continuous Improvement"
+          }
       ]
     },
     "hobbies": {
       "enable": true,
       "heading": "Hobbies",
-      "items": ["Poetry", "Travelling", "Beatboxing", "Sketching"]
+      "items": [
+          {
+            "id": "dd2efad7-e900-4384-bdc0-b2ab5f62bb71",
+            "hobby": "Poetry"
+
+          },
+          {
+            "id": "96023eb7-8c93-4b1d-b581-b8fc4107351a",
+            "hobby": "Travelling"
+          },
+          {
+            "id": "7e5a6168-9cbe-4fe6-b9b9-43a47d8bb15a",
+            "hobby": "Beatboxing"
+          },
+          {
+            "id": "dd7f4ffd-9c16-4dbf-8968-1165b9e30db8",
+            "hobby": "Sketching"
+          }
+      ]
     },
     "languages": {
       "enable": true,

src/components/LeftSidebar/tabs/Hobbies.js

@@ -1,4 +1,5 @@
 import React, { useState, useContext } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 
 import AppContext from '../../../context/AppContext';
 import Checkbox from '../../../shared/Checkbox';
@@ -44,7 +45,7 @@ const Form = ({ item, onChange }) => {
     <input
       className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
       placeholder="Beatboxing"
-      value={item}
+      value={item.hobby}
       onChange={e => onChange(e.target.value)}
       type="text"
     />
@@ -53,14 +54,20 @@ const Form = ({ item, onChange }) => {
 
 const AddItem = ({ heading, dispatch }) => {
   const [isOpen, setOpen] = useState(false);
-  const [item, setItem] = useState('');
+  const [item, setItem] = useState({
+      id: uuidv4(),
+      hobby: ''
+  });
 
   const add = () => {
-    if (item === '') return;
+    if (item.hobby === '') return;
 
     addItem(dispatch, 'hobbies', item);
 
-    setItem('');
+    setItem({
+        id: uuidv4(),
+        hobby: ''
+    });
   };
 
   return (
@@ -70,7 +77,7 @@ const AddItem = ({ heading, dispatch }) => {
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
         <div className="grid grid-cols-4 gap-4">
           <div className="col-span-3">
-            <Form item={item} onChange={setItem} />
+            <Form item={item} onChange={v => setItem({...item, hobby: v})} />
           </div>
 
           <button

src/components/LeftSidebar/tabs/Skills.js

@@ -1,4 +1,5 @@
 import React, { useState, useContext } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 
 import AppContext from '../../../context/AppContext';
 import Checkbox from '../../../shared/Checkbox';
@@ -31,7 +32,7 @@ const SkillsTab = ({ data, onChange }) => {
       <hr className="my-6" />
 
       {data.skills.items.map((x, index) => (
-        <Item item={x} key={index} index={index} onChange={onChange} dispatch={dispatch} />
+        <Item item={x} key={x.id} index={index} onChange={onChange} dispatch={dispatch} />
       ))}
 
       <AddItem heading={data.skills.heading} dispatch={dispatch} />
@@ -44,7 +45,7 @@ const Form = ({ item, onChange }) => {
     <input
       className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
       placeholder="Team Building &amp; Training"
-      value={item}
+      value={item.skill}
       onChange={e => onChange(e.target.value)}
       type="text"
     />
@@ -53,14 +54,20 @@ const Form = ({ item, onChange }) => {
 
 const AddItem = ({ heading, dispatch }) => {
   const [isOpen, setOpen] = useState(false);
-  const [item, setItem] = useState('');
+  const [item, setItem] = useState({
+    id: uuidv4(),
+    skill: ''
+  });
 
   const add = () => {
-    if (item === '') return;
+    if (item.skill === '') return;
 
     addItem(dispatch, 'skills', item);
 
-    setItem('');
+    setItem({
+        id: uuidv4(),
+        skill: ''
+    });
   };
 
   return (
@@ -70,7 +77,7 @@ const AddItem = ({ heading, dispatch }) => {
       <div className={`mt-6 ${isOpen ? 'block' : 'hidden'}`}>
         <div className="grid grid-cols-4 gap-4">
           <div className="col-span-3">
-            <Form item={item} onChange={setItem} />
+            <Form item={item} onChange={v => setItem({...item, skill: v})} />
           </div>
 
           <button
@@ -94,7 +101,7 @@ const Item = ({ item, index, onChange, dispatch }) => {
   return (
     <div className="my-4 grid grid-cols-12">
       <div className="col-span-9">
-        <Form item={item} onChange={v => onChange(identifier, v)} />
+        <Form item={item} onChange={v => onChange(identifier, {...item, skill: v})} />
       </div>
 
       <button

src/context/AppContext.js

@@ -103,7 +103,7 @@ const reducer = (state, { type, payload }) => {
       return set({ ...newState }, `data.${payload.key}.items`, items);
     case 'delete_item':
       items = get({ ...newState }, `data.${payload.key}.items`, []);
-      remove(items, x => x === payload.value);
+      remove(items, x => x.id === payload.value.id);
       return set({ ...newState }, `data.${payload.key}.items`, items);
     case 'move_item_up':
       items = get({ ...newState }, `data.${payload.key}.items`, []);

src/i18n/locales/fr/app/app.json

@@ -37,7 +37,7 @@
       "Si cela est important pour vous, essayez d'imprimer le CV à la place en utilisant Cmd/Ctrl + P ou le bouton d'impression ci-dessous. Le résultat peut varier car la sortie dépend du navigateur, mais il est connu qu'elle fonctionne mieux sur la dernière version de Google Chrome."
     ],
     "buttons": {
-      "cancel": "Abbrechen",
+      "cancel": "Annuler",
       "saveAsPdf": "Enregistrer en PDF"
     }
   },

src/templates/castform/Castform.js

@@ -79,8 +79,8 @@ const Castform = () => {
   );
 
   const SkillItem = x => (
-    <li key={x} className="text-sm my-2">
+    <li key={x.id} className="text-sm my-2">
-      {x}
+      {x.skill}
     </li>
   );
 
@@ -94,8 +94,8 @@ const Castform = () => {
     );
 
   const HobbyItem = x => (
-    <li key={x} className="text-sm my-2">
+    <li key={x.id} className="text-sm my-2">
-      {x}
+      {x.hobby}
     </li>
   );
 
@@ -109,7 +109,7 @@ const Castform = () => {
     );
 
   const Objective = () =>
-    data.objective && data.objective.enable && <p className="m-5 text-sm">{data.objective.body}</p>;
+    data.objective && data.objective.enable && <ReactMarkdown className="m-5 text-sm" source={data.objective.body} />;
 
   const WorkItem = x => (
     <div key={x.id} className="my-3 px-5">

src/templates/celebi/Celebi.js

@@ -144,8 +144,8 @@ const Celebi = () => {
         <Heading title="Skills" className="w-3/4 mx-auto" />
         <ul className="list-none text-sm">
           {data.skills.items.map(x => (
-            <li key={x} className="my-2">
+            <li key={x.id} className="my-2">
-              {x}
+              {x.skill}
             </li>
           ))}
         </ul>
@@ -158,8 +158,8 @@ const Celebi = () => {
         <Heading title="Hobbies" className="w-3/4 mx-auto" />
         <ul className="list-none text-sm">
           {data.hobbies.items.map(x => (
-            <li key={x} className="my-2">
+            <li key={x.id} className="my-2">
-              {x}
+              {x.hobby}
             </li>
           ))}
         </ul>

src/templates/gengar/Gengar.js

@@ -65,8 +65,8 @@ const Gengar = () => {
     );
 
   const SkillItem = x => (
-    <li key={x} className="text-sm py-1">
+    <li key={x.id} className="text-sm py-1">
-      {x}
+      {x.skill}
     </li>
   );
 
@@ -80,8 +80,8 @@ const Gengar = () => {
     );
 
   const HobbyItem = x => (
-    <li key={x} className="text-sm py-1">
+    <li key={x.id} className="text-sm py-1">
-      {x}
+      {x.hobby}
     </li>
   );
 

src/templates/glalie/Glalie.js

@@ -87,7 +87,7 @@ const Glalie = () => {
     data.objective.enable && (
       <div>
         <Heading title={data.objective.heading} />
-        <p className="text-sm text-justify">{data.objective.body}</p>
+        <ReactMarkdown className="text-sm text-justify" source={data.objective.body} />
       </div>
     );
 
@@ -173,8 +173,8 @@ const Glalie = () => {
     );
 
   const SkillItem = x => (
-    <li key={x} className="text-xs font-medium">
+    <li key={x.id} className="text-xs font-medium">
-      {x}
+      {x.skill}
     </li>
   );
 
@@ -188,8 +188,8 @@ const Glalie = () => {
     );
 
   const HobbyItem = x => (
-    <li key={x} className="text-xs font-medium">
+    <li key={x.id} className="text-xs font-medium">
-      {x}
+      {x.hobby}
     </li>
   );
 

src/templates/onyx/Onyx.js

@@ -147,14 +147,14 @@ const Onyx = () => {
 
   const HobbyItem = x => (
     <span
-      key={x}
+      key={x.id}
       className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
       style={{
         backgroundColor: theme.colors.primary,
         color: theme.colors.background,
       }}
     >
-      {x}
+      {x.hobby}
     </span>
   );
 
@@ -169,14 +169,14 @@ const Onyx = () => {
 
   const SkillItem = x => (
     <span
-      key={x}
+      key={x.id}
       className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
       style={{
         backgroundColor: theme.colors.primary,
         color: theme.colors.background,
       }}
     >
-      {x}
+      {x.skill}
     </span>
   );
 

src/templates/pikachu/Pikachu.js

@@ -60,10 +60,10 @@ const Pikachu = () => {
 
   const SkillItem = x => (
     <span
-      key={x}
+      key={x.id}
       className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
     >
-      {x}
+      {x.skill}
     </span>
   );
 
@@ -78,10 +78,10 @@ const Pikachu = () => {
 
   const HobbyItem = x => (
     <span
-      key={x}
+      key={x.id}
       className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
     >
-      {x}
+      {x.hobby}
     </span>
   );
 

src/utils/index.js

@@ -3,7 +3,7 @@ import html2canvas from 'html2canvas';
 import * as jsPDF from 'jspdf';
 
 const move = (array, element, delta) => {
-  const index = array.indexOf(element);
+  const index = array.findIndex(item => item.id === element.id);
   const newIndex = index + delta;
   if (newIndex < 0 || newIndex === array.length) return;
   const indexes = [index, newIndex].sort((a, b) => a - b);
@@ -104,12 +104,16 @@ const importJson = (event, dispatch) => {
   fr.readAsText(event.target.files[0]);
 };
 
-const saveAsPdf = (pageRef, panZoomRef, quality, type) =>
+let saveAsPdfTimer = null;
-  new Promise(resolve => {
+const saveAsPdf = (pageRef, panZoomRef, quality, type) => {
+  if(saveAsPdfTimer){
+      return;
+  }
+  return new Promise(resolve => {
     panZoomRef.current.autoCenter(1);
     panZoomRef.current.reset();
 
-    setTimeout(() => {
+    saveAsPdfTimer = setTimeout(() => {
       html2canvas(pageRef.current, {
         scale: 5,
         useCORS: true,
@@ -142,17 +146,23 @@ const saveAsPdf = (pageRef, panZoomRef, quality, type) =>
 
         doc.addImage(image, 'JPEG', marginX, marginY, canvasWidth, canvasHeight, null, 'SLOW');
         doc.save(`RxResume_${Date.now()}.pdf`);
+        saveAsPdfTimer = null;
         resolve();
       });
     }, 250);
   });
-
+}
-const saveAsMultiPagePdf = (pageRef, panZoomRef, quality) =>
+  
-  new Promise(resolve => {
+let saveAsMultiPagePdfTimer = null;
+const saveAsMultiPagePdf = (pageRef, panZoomRef, quality) => {
+  if(saveAsMultiPagePdfTimer){
+      return;
+  }
+  return new Promise(resolve => {
     panZoomRef.current.autoCenter(1);
     panZoomRef.current.reset();
 
-    setTimeout(() => {
+    saveAsMultiPagePdfTimer = setTimeout(() => {
       html2canvas(pageRef.current, {
         scale: 5,
         useCORS: true,
@@ -182,10 +192,12 @@ const saveAsMultiPagePdf = (pageRef, panZoomRef, quality) =>
         }
 
         doc.save(`RxResume_${Date.now()}.pdf`);
+        saveAsMultiPagePdfTimer = null;
         resolve();
       });
     }, 250);
   });
+}
 
 export {
   move,