modify language tab to have both level and rating, update templates

src/assets/demo/data.json

@@ -66,7 +66,7 @@
           "major": "MS in Computer Science",
           "start": "Sep 2001",
           "end": "Aug 2002",
-          "grade": "",
+          "grade": "7.2 CGPA",
           "description": "",
           "enabled": true,
           "enable": true
@@ -77,7 +77,7 @@
           "major": "BS in Computer Science",
           "start": "Sep 1997",
           "end": "Aug 2001",
-          "grade": "",
+          "grade": "8.4 CGPA",
           "description": "",
           "enabled": true,
           "enable": true
@@ -131,8 +131,8 @@
         },
         {
           "id": "97a1a8d9-3c03-47fb-93ab-e84f864ffe17",
-          "title": "DCUCI Exam",
+          "title": "DCUCI 642-999",
-          "subtitle": "",
+          "subtitle": "Cisco Systems",
           "description": "",
           "enable": true
         }
@@ -158,25 +158,32 @@
           "id": "9d34cfcb-c9f0-4d25-ab27-cf81652dd1d0",
           "key": "English (US)",
           "value": 5,
-          "enable": true
+          "enable": true,
+          "level": "",
+          "rating": 5
         },
         {
           "id": "3511a86b-7ea9-44ac-8144-6acc7f3bd54f",
           "key": "Spanish",
           "value": 4,
-          "enable": true
+          "enable": true,
+          "rating": 4
         },
         {
           "id": "d1e17542-f7cc-473a-aa0e-978765907454",
-          "key": "French",
+          "key": "Japanese",
           "value": 4,
-          "enable": true
+          "enable": true,
+          "level": "N4",
+          "rating": 2
         },
         {
           "id": "b1e8442a-7059-4c6f-8a9c-415383133b0e",
           "key": "German",
           "value": 3,
-          "enable": true
+          "enable": true,
+          "level": "B1",
+          "rating": 0
         }
       ]
     },
@@ -244,24 +251,12 @@
       ]
     },
     "data": {
-      "languages": {
+      "languages": { "items": [null, null, null, null, { "items": [] }] }
-        "items": [
-          null,
-          null,
-          null,
-          null,
-          {
-            "items": []
-          }
-        ]
-      }
     }
   },
   "theme": {
-    "layout": "Gengar",
+    "layout": "castform",
-    "font": {
+    "font": { "family": "Montserrat" },
-      "family": "Montserrat"
-    },
     "colors": {
       "background": "#ffffff",
       "primary": "#212121",

src/components/LeftSidebar/tabs/Languages.js

@@ -1,16 +1,16 @@
-import React, { useState, useEffect, useContext } from 'react';
+import set from 'lodash/set';
+import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuidv4 } from 'uuid';
-import set from 'lodash/set';
 
-import TextField from '../../../shared/TextField';
 import AppContext from '../../../context/AppContext';
+import AddItemButton from '../../../shared/AddItemButton';
 import Checkbox from '../../../shared/Checkbox';
 import Counter from '../../../shared/Counter';
-import { addItem } from '../../../utils';
 import ItemActions from '../../../shared/ItemActions';
-import AddItemButton from '../../../shared/AddItemButton';
 import ItemHeading from '../../../shared/ItemHeading';
+import TextField from '../../../shared/TextField';
+import { addItem } from '../../../utils';
 
 const LanguagesTab = ({ data, onChange }) => {
   const context = useContext(AppContext);
@@ -86,12 +86,28 @@ const Form = ({ item, onChange, identifier = '' }) => {
         onChange={v => onChange(`${identifier}key`, v)}
       />
 
+      <TextField
+        className="mb-6"
+        label={t('languages.level.label')}
+        placeholder="B1"
+        value={item.level}
+        onChange={v => onChange(`${identifier}level`, v)}
+      />
+
       <Counter
         className="mb-6"
         label={t('languages.rating.label')}
-        value={item.value}
+        value={item.rating}
-        onDecrement={() => item.value > 1 && onChange(`${identifier}value`, item.value - 1)}
+        onDecrement={() =>
-        onIncrement={() => item.value < 5 && onChange(`${identifier}value`, item.value + 1)}
+          item.rating > 1
+            ? onChange(`${identifier}rating`, item.rating - 1)
+            : onChange(`${identifier}rating`, 0)
+        }
+        onIncrement={() =>
+          item.rating < 5
+            ? onChange(`${identifier}rating`, item.rating + 1)
+            : onChange(`${identifier}rating`, 0)
+        }
       />
     </div>
   );
@@ -103,7 +119,8 @@ const AddItem = ({ heading, dispatch }) => {
     id: uuidv4(),
     enable: true,
     key: '',
-    value: 1,
+    value: '',
+    rating: 1,
   });
 
   const onChange = (key, value) => setItem(items => set({ ...items }, key, value));
@@ -117,7 +134,8 @@ const AddItem = ({ heading, dispatch }) => {
       id: uuidv4(),
       enable: true,
       key: '',
-      value: 1,
+      value: '',
+      rating: 1,
     });
 
     setOpen(false);

src/templates/castform/Castform.js

@@ -143,22 +143,28 @@ const Castform = () => {
 
   const LanguageItem = x => (
     <div key={x.id} className="flex flex-col my-2">
-      <h6 className="text-sm font-medium mb-1">{x.key}</h6>
+      <div className="flex justify-between items-center">
-      <div className="relative h-5">
+        <h6 className="text-sm font-medium mb-1">{x.key}</h6>
-        <div
+        {x.level !== '' && <div className="font-bold text-sm">{x.level}</div>}
-          className="absolute mb-1 inset-0"
-          style={{
-            backgroundColor: 'rgba(0, 0, 0, 0.25)',
-          }}
-        />
-        <div
-          className="absolute mb-1 inset-0 rounded"
-          style={{
-            width: `${x.value * 20}%`,
-            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-          }}
-        />
       </div>
+
+      {x.rating !== 0 && (
+        <div className="relative h-5">
+          <div
+            className="absolute mb-1 inset-0"
+            style={{
+              backgroundColor: 'rgba(0, 0, 0, 0.25)',
+            }}
+          />
+          <div
+            className="absolute mb-1 inset-0 rounded"
+            style={{
+              width: `${x.rating * 20}%`,
+              backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 

src/templates/celebi/Celebi.js

@@ -34,7 +34,7 @@ const Celebi = () => {
 
   const Heading = ({ title, className }) => (
     <h5
-      className={`my-2 text-lg uppercase font-semibold tracking-wider pb-1 border-b-2 border-gray-800 ${className}`}
+      className={`my-2 text-md uppercase font-semibold tracking-wider pb-1 border-b-2 border-gray-800 ${className}`}
     >
       {title}
     </h5>
@@ -177,11 +177,16 @@ const Celebi = () => {
     <div key={x.id} className="grid grid-cols-2 items-center py-2">
       <h6 className="text-xs font-medium text-left">{x.key}</h6>
       <div className="flex">
-        {Array.from(Array(x.value)).map((_, i) => (
+        {x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
-          <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
+        {x.rating !== 0 && (
-            star
+          <div className="flex">
-          </i>
+            {Array.from(Array(x.rating)).map((_, i) => (
-        ))}
+              <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
+                star
+              </i>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );

src/templates/gengar/Gengar.js

@@ -25,8 +25,9 @@ const Gengar = () => {
 
   const FullName = () => (
     <div>
-      <h1 className="text-2xl font-bold">{data.profile.firstName}</h1>
+      <h1 className="text-2xl font-bold leading-tight">{data.profile.firstName}</h1>
-      <h1 className="text-2xl font-bold">{data.profile.lastName}</h1>
+      <h1 className="text-2xl font-bold leading-tight">{data.profile.lastName}</h1>
+      <div className="text-xs font-medium mt-2">{data.profile.subtitle}</div>
     </div>
   );
 
@@ -196,11 +197,16 @@ const Gengar = () => {
     <div key={x.id} className="grid grid-cols-2 items-center py-2">
       <h6 className="text-sm font-medium">{x.key}</h6>
       <div className="flex">
-        {Array.from(Array(x.value)).map((_, i) => (
+        {x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
-          <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
+        {x.rating !== 0 && (
-            star
+          <div className="flex">
-          </i>
+            {Array.from(Array(x.rating)).map((_, i) => (
-        ))}
+              <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
+                star
+              </i>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );

src/templates/glalie/Glalie.js

@@ -195,11 +195,16 @@ const Glalie = () => {
     <div key={x.id} className="grid grid-cols-2 items-center py-2">
       <h6 className="text-xs font-medium text-left">{x.key}</h6>
       <div className="flex">
-        {Array.from(Array(x.value)).map((_, i) => (
+        {x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
-          <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
+        {x.rating !== 0 && (
-            star
+          <div className="flex">
-          </i>
+            {Array.from(Array(x.rating)).map((_, i) => (
-        ))}
+              <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
+                star
+              </i>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );

src/templates/onyx/Onyx.js

@@ -171,11 +171,16 @@ const Onyx = () => {
     <div key={x.id} className="grid grid-cols-2 items-center py-2">
       <h6 className="text-sm font-medium">{x.key}</h6>
       <div className="flex">
-        {Array.from(Array(x.value)).map((_, i) => (
+        {x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
-          <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
+        {x.rating !== 0 && (
-            star
+          <div className="flex">
-          </i>
+            {Array.from(Array(x.rating)).map((_, i) => (
-        ))}
+              <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
+                star
+              </i>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );
@@ -255,6 +260,7 @@ const Onyx = () => {
             value={data.profile.email}
             link={`mailto:${data.profile.email}`}
           />
+          <ContactItem icon="location_on" value={data.profile.address.line3} />
         </div>
       </div>
 

src/templates/pikachu/Pikachu.js

@@ -101,11 +101,16 @@ const Pikachu = () => {
     <div key={x.id} className="grid grid-cols-2 items-center py-2">
       <h6 className="text-sm font-medium">{x.key}</h6>
       <div className="flex">
-        {Array.from(Array(x.value)).map((_, i) => (
+        {x.level && <div className="font-bold text-sm mr-2">{x.level}</div>}
-          <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
+        {x.rating !== 0 && (
-            star
+          <div className="flex">
-          </i>
+            {Array.from(Array(x.rating)).map((_, i) => (
-        ))}
+              <i key={i} className="material-icons text-lg" style={{ color: theme.colors.accent }}>
+                star
+              </i>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );