chore: Using id in Skills and Hobbies

- Build skills, hobbies as an array of object with id as a unique key

src/assets/demo/data.json

@@ -142,18 +142,54 @@
       "enable": true,
       "heading": "Skills",
       "items": [
-        "Customer Service Expertise",
-        "High-Volume Call Center",
-        "Team Leader/Problem Solver",
-        "Call Center Management",
-        "Teambuilding & Training",
-        "Continuous Improvement"
+          {
+            "id": "2562d78a-3459-4370-8604-c81b00738db1",
+            "skill": "Customer Service Expertise"
+          },
+          {
+            "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/templates/castform/Castform.js

@@ -79,8 +79,8 @@ const Castform = () => {
   );
 
   const SkillItem = x => (
-    <li key={x} className="text-sm my-2">
-      {x}
+    <li key={x.id} className="text-sm my-2">
+      {x.skill}
     </li>
   );
 
@@ -94,8 +94,8 @@ const Castform = () => {
     );
 
   const HobbyItem = x => (
-    <li key={x} className="text-sm my-2">
-      {x}
+    <li key={x.id} className="text-sm my-2">
+      {x.hobby}
     </li>
   );
 

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">
-              {x}
+            <li key={x.id} className="my-2">
+              {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">
-              {x}
+            <li key={x.id} className="my-2">
+              {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">
-      {x}
+    <li key={x.id} className="text-sm py-1">
+      {x.skill}
     </li>
   );
 
@@ -80,8 +80,8 @@ const Gengar = () => {
     );
 
   const HobbyItem = x => (
-    <li key={x} className="text-sm py-1">
-      {x}
+    <li key={x.id} className="text-sm py-1">
+      {x.hobby}
     </li>
   );
 

src/templates/glalie/Glalie.js

@@ -173,8 +173,8 @@ const Glalie = () => {
     );
 
   const SkillItem = x => (
-    <li key={x} className="text-xs font-medium">
-      {x}
+    <li key={x.id} className="text-xs font-medium">
+      {x.skill}
     </li>
   );
 
@@ -188,8 +188,8 @@ const Glalie = () => {
     );
 
   const HobbyItem = x => (
-    <li key={x} className="text-xs font-medium">
-      {x}
+    <li key={x.id} className="text-xs font-medium">
+      {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>
   );