Merge pull request #142 from AmruthPillai/develop

Feature: Add Hobbies Section, Reordering Skills/Hobbies

docs/changelog/README.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 ## April 2020
 
+### April 28, 2020
+
+- Added Feature to Reorder Skills/Hobbies
+- Added Hobbies Section to Left Sidebar
+- Updated Templates to Add Hobbies
+
 ### April 23, 2020
 
 - Fix Issue with Page Controller Icon Size

src/components/LeftSidebar/LeftSidebar.js

@@ -12,6 +12,7 @@ import SkillsTab from './tabs/Skills';
 import ExtrasTab from './tabs/Extras';
 import LanguagesTab from './tabs/Languages';
 import ReferencesTab from './tabs/References';
+import HobbiesTab from './tabs/Hobbies';
 
 const LeftSidebar = () => {
   const context = useContext(AppContext);
@@ -26,6 +27,7 @@ const LeftSidebar = () => {
     { key: 'awards', name: data.awards.heading },
     { key: 'certifications', name: data.certifications.heading },
     { key: 'skills', name: data.skills.heading },
+    { key: 'hobbies', name: data.hobbies.heading },
     { key: 'languages', name: data.languages.heading },
     { key: 'references', name: data.references.heading },
     { key: 'extras', name: data.extras.heading },
@@ -45,25 +47,27 @@ const LeftSidebar = () => {
 
   const renderTabs = () => {
     switch (currentTab) {
-      case tabs[0].key:
+      case 'profile':
         return <ProfileTab data={data} onChange={onChange} />;
-      case tabs[1].key:
+      case 'objective':
         return <ObjectiveTab data={data} onChange={onChange} />;
-      case tabs[2].key:
+      case 'work':
         return <WorkTab data={data} onChange={onChange} />;
-      case tabs[3].key:
+      case 'education':
         return <EducationTab data={data} onChange={onChange} />;
-      case tabs[4].key:
+      case 'awards':
         return <AwardsTab data={data} onChange={onChange} />;
-      case tabs[5].key:
+      case 'certifications':
         return <CertificationsTab data={data} onChange={onChange} />;
-      case tabs[6].key:
+      case 'skills':
         return <SkillsTab data={data} onChange={onChange} />;
-      case tabs[7].key:
+      case 'hobbies':
+        return <HobbiesTab data={data} onChange={onChange} />;
+      case 'languages':
         return <LanguagesTab data={data} onChange={onChange} />;
-      case tabs[8].key:
+      case 'references':
         return <ReferencesTab data={data} onChange={onChange} />;
-      case tabs[9].key:
+      case 'extras':
         return <ExtrasTab data={data} onChange={onChange} />;
       default:
         return null;

src/components/LeftSidebar/tabs/Hobbies.js

@@ -0,0 +1,133 @@
+import React, { useState, useContext } from 'react';
+
+import AppContext from '../../../context/AppContext';
+import Checkbox from '../../../shared/Checkbox';
+import TextField from '../../../shared/TextField';
+import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
+import ItemHeading from '../../../shared/ItemHeading';
+
+const HobbiesTab = ({ data, onChange }) => {
+  const context = useContext(AppContext);
+  const { dispatch } = context;
+
+  return (
+    <>
+      <div className="my-6 grid grid-cols-6 items-center">
+        <div className="col-span-1">
+          <Checkbox
+            checked={data.hobbies.enable}
+            onChange={v => onChange('data.hobbies.enable', v)}
+          />
+        </div>
+        <div className="col-span-5">
+          <TextField
+            placeholder="Heading"
+            value={data.hobbies.heading}
+            onChange={v => onChange('data.hobbies.heading', v)}
+          />
+        </div>
+      </div>
+
+      <hr className="my-6" />
+
+      {data.hobbies.items.map((x, index) => (
+        <Item item={x} key={index} index={index} onChange={onChange} dispatch={dispatch} />
+      ))}
+
+      <AddItem heading={data.hobbies.heading} dispatch={dispatch} />
+    </>
+  );
+};
+
+const Form = ({ item, onChange }) => {
+  return (
+    <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}
+      onChange={e => onChange(e.target.value)}
+      type="text"
+    />
+  );
+};
+
+const AddItem = ({ heading, dispatch }) => {
+  const [isOpen, setOpen] = useState(false);
+  const [item, setItem] = useState('');
+
+  const add = () => {
+    if (item === '') return;
+
+    addItem(dispatch, 'hobbies', item);
+
+    setItem('');
+  };
+
+  return (
+    <div className="my-4 border border-gray-200 rounded p-5">
+      <ItemHeading heading={heading} setOpen={setOpen} isOpen={isOpen} />
+
+      <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} />
+          </div>
+
+          <button
+            type="button"
+            onClick={add}
+            className="col-span-1 bg-gray-600 hover:bg-gray-700 text-sm font-medium rounded"
+          >
+            <div className="flex justify-center items-center">
+              <i className="material-icons font-bold text-white text-lg">add</i>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Item = ({ item, index, onChange, dispatch }) => {
+  const identifier = `data.hobbies.items[${index}]`;
+
+  return (
+    <div className="my-4 grid grid-cols-12">
+      <div className="col-span-9">
+        <Form item={item} onChange={v => onChange(identifier, v)} />
+      </div>
+
+      <button
+        type="button"
+        onClick={() => moveItemUp(dispatch, 'hobbies', item)}
+        className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
+      >
+        <div className="flex justify-end items-center">
+          <i className="material-icons font-bold text-lg">arrow_upward</i>
+        </div>
+      </button>
+
+      <button
+        type="button"
+        onClick={() => moveItemDown(dispatch, 'hobbies', item)}
+        className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
+      >
+        <div className="flex justify-end items-center">
+          <i className="material-icons font-bold text-lg">arrow_downward</i>
+        </div>
+      </button>
+
+      <button
+        type="button"
+        onClick={() => deleteItem(dispatch, 'hobbies', item)}
+        className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
+      >
+        <div className="flex justify-end items-center">
+          <i className="material-icons font-bold text-lg">close</i>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default HobbiesTab;

src/components/LeftSidebar/tabs/Skills.js

@@ -3,7 +3,7 @@ import React, { useState, useContext } from 'react';
 import AppContext from '../../../context/AppContext';
 import Checkbox from '../../../shared/Checkbox';
 import TextField from '../../../shared/TextField';
-import { addItem, deleteItem } from '../../../utils';
+import { addItem, deleteItem, moveItemUp, moveItemDown } from '../../../utils';
 import ItemHeading from '../../../shared/ItemHeading';
 
 const SkillsTab = ({ data, onChange }) => {
@@ -92,18 +92,38 @@ const Item = ({ item, index, onChange, dispatch }) => {
   const identifier = `data.skills.items[${index}]`;
 
   return (
-    <div className="my-4 grid grid-cols-6 gap-4">
+    <div className="my-4 grid grid-cols-12">
-      <div className="col-span-5">
+      <div className="col-span-9">
         <Form item={item} onChange={v => onChange(identifier, v)} />
       </div>
 
+      <button
+        type="button"
+        onClick={() => moveItemUp(dispatch, 'skills', item)}
+        className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
+      >
+        <div className="flex justify-end items-center">
+          <i className="material-icons font-bold text-lg">arrow_upward</i>
+        </div>
+      </button>
+
+      <button
+        type="button"
+        onClick={() => moveItemDown(dispatch, 'skills', item)}
+        className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
+      >
+        <div className="flex justify-end items-center">
+          <i className="material-icons font-bold text-lg">arrow_downward</i>
+        </div>
+      </button>
+
       <button
         type="button"
         onClick={() => deleteItem(dispatch, 'skills', item)}
         className="col-span-1 text-gray-600 hover:text-red-600 text-sm font-medium"
       >
         <div className="flex justify-end items-center">
-          <i className="material-icons font-bold text-lg pr-4">close</i>
+          <i className="material-icons font-bold text-lg">close</i>
         </div>
       </button>
     </div>

src/context/AppContext.js

@@ -24,47 +24,52 @@ const initialState = {
       email: '',
     },
     objective: {
-      enable: false,
+      enable: true,
       heading: 'Objective',
       body: '',
     },
     work: {
-      enable: false,
+      enable: true,
       heading: 'Work Experience',
       items: [],
     },
     education: {
-      enable: false,
+      enable: true,
       heading: 'Education',
       items: [],
     },
     awards: {
-      enable: false,
+      enable: true,
       heading: 'Honors & Awards',
       items: [],
     },
     certifications: {
-      enable: false,
+      enable: true,
       heading: 'Certifications',
       items: [],
     },
     skills: {
-      enable: false,
+      enable: true,
-      heading: 'Skills & Hobbies',
+      heading: 'Skills',
+      items: [],
+    },
+    hobbies: {
+      enable: true,
+      heading: 'Hobbies',
       items: [],
     },
     languages: {
-      enable: false,
+      enable: true,
       heading: 'Languages',
       items: [],
     },
     references: {
-      enable: false,
+      enable: true,
       heading: 'References',
       items: [],
     },
     extras: {
-      enable: false,
+      enable: true,
       heading: 'Personal Information',
       items: [],
     },
@@ -97,7 +102,7 @@ const reducer = (state, { type, payload }) => {
       return set({ ...state }, `data.${payload.key}.items`, items);
     case 'delete_item':
       items = get({ ...state }, `data.${payload.key}.items`, []);
-      remove(items, (x) => x === payload.value);
+      remove(items, x => x === payload.value);
       return set({ ...state }, `data.${payload.key}.items`, items);
     case 'move_item_up':
       items = get({ ...state }, `data.${payload.key}.items`, []);

src/templates/castform/Castform.js

@@ -93,6 +93,21 @@ const Castform = () => {
       </div>
     );
 
+  const HobbyItem = x => (
+    <li key={x} className="text-sm my-2">
+      {x}
+    </li>
+  );
+
+  const Hobbies = () =>
+    data.hobbies &&
+    data.hobbies.enable && (
+      <div>
+        <Heading title={data.hobbies.heading} />
+        <ul className="list-none px-5">{data.hobbies.items.map(HobbyItem)}</ul>
+      </div>
+    );
+
   const Objective = () =>
     data.objective && data.objective.enable && <p className="m-5 text-sm">{data.objective.body}</p>;
 
@@ -251,7 +266,7 @@ const Castform = () => {
     data.extras &&
     data.extras.enable && (
       <div>
-        <Heading title={data.extras.heading} />
+        <Heading light title={data.extras.heading} />
         {data.extras.items.filter(x => x.enable).map(ExtraItem)}
       </div>
     );
@@ -276,9 +291,9 @@ const Castform = () => {
           <PersonalInformation />
           <ContactInformation />
           <Skills />
+          <Hobbies />
           <Languages />
           <Certifications />
-          <Extras />
         </div>
         <div className="col-span-8">
           <Objective />
@@ -286,6 +301,7 @@ const Castform = () => {
           <Education />
           <Awards />
           <References />
+          <Extras />
         </div>
       </div>
     </div>

src/templates/celebi/Celebi.js

@@ -144,7 +144,21 @@ 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} className="my-2">
+              {x}
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+
+  const Hobbies = () =>
+    data.hobbies.enable && (
+      <div className="mb-6">
+        <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>
           ))}
@@ -266,6 +280,7 @@ const Celebi = () => {
           <Photo />
           <Contact />
           <Skills />
+          <Hobbies />
           <Languages />
           <Certifications />
           <Extras />

src/templates/gengar/Gengar.js

@@ -79,6 +79,21 @@ const Gengar = () => {
       </div>
     );
 
+  const HobbyItem = x => (
+    <li key={x} className="text-sm py-1">
+      {x}
+    </li>
+  );
+
+  const Hobbies = () =>
+    data.hobbies &&
+    data.hobbies.enable && (
+      <div className="mb-6">
+        <Heading title={data.hobbies.heading} />
+        <ul>{data.hobbies.items.map(HobbyItem)}</ul>
+      </div>
+    );
+
   const EducationItem = x => (
     <div key={x.id} className="mb-3">
       <div className="flex justify-between items-center">
@@ -285,6 +300,7 @@ const Gengar = () => {
           style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
         >
           <Skills />
+          <Hobbies />
           <Languages />
           <Education />
           <Certifications />

src/templates/glalie/Glalie.js

@@ -31,10 +31,6 @@ const Glalie = () => {
     <div className="tracking-wide text-xs uppercase font-medium">{data.profile.subtitle}</div>
   );
 
-  const Divider = () => (
-    <div className="w-1/2 mx-auto my-2 border-b-2" style={{ borderColor: theme.colors.accent }} />
-  );
-
   const ContactItem = ({ title, value }) =>
     value && (
       <div className="flex flex-col">
@@ -47,14 +43,14 @@ const Glalie = () => {
 
   const ContactInformation = () => (
     <div
-      className="w-full border-2 pl-4 pr-4 pb-6"
+      className="w-full border-2 pl-4 pr-4 mb-6"
       style={{
         borderColor: theme.colors.accent,
       }}
     >
       <div
         className="inline-block relative px-4"
-        style={{ top: '-.9em', color: theme.colors.accent }}
+        style={{ top: '-.75em', color: theme.colors.accent }}
       >
         <h2 className="flex">
           <i className="material-icons">flare</i>
@@ -191,6 +187,23 @@ const Glalie = () => {
       </div>
     );
 
+  const HobbyItem = x => (
+    <li key={x} className="text-xs font-medium">
+      {x}
+    </li>
+  );
+
+  const Hobbies = () =>
+    data.hobbies &&
+    data.hobbies.enable && (
+      <div>
+        <Heading title={data.hobbies.heading} />
+        <ul className="pt-2 grid grid-cols-2 row-gap-3 text-left">
+          {data.hobbies.items.map(HobbyItem)}
+        </ul>
+      </div>
+    );
+
   const LanguageItem = x => (
     <div key={x.id} className="grid grid-cols-2 items-center py-2">
       <h6 className="text-xs font-medium text-left">{x.key}</h6>
@@ -267,33 +280,28 @@ const Glalie = () => {
     >
       <div className="grid grid-cols-12">
         <div
-          className="h-full col-span-4 p-8 grid grid-cols-1 row-gap-8 text-center"
+          className="h-full col-span-4 p-8 grid grid-cols-1 row-gap-4 text-center"
           style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
         >
-          <div className="grid grid-cols-1 row-gap-4">
+          <div className="grid grid-cols-1 gap-2">
             <Photo />
             <FullName />
             <Subtitle />
           </div>
-
-          <Divider />
           <ContactInformation />
-          <Divider />
-
           <Objective />
+          <Hobbies />
           <Languages />
           <Certifications />
         </div>
 
-        <div className="col-span-8 p-8">
+        <div className="col-span-8 p-8 grid grid-cols-1 row-gap-4">
-          <div className="grid grid-cols-1 row-gap-6">
+          <Work />
-            <Work />
+          <Education />
-            <Education />
+          <Skills />
-            <Skills />
+          <Awards />
-            <Awards />
+          <References />
-            <References />
+          <Extras />
-            <Extras />
-          </div>
         </div>
       </div>
     </div>

src/templates/onyx/Onyx.js

@@ -145,6 +145,28 @@ const Onyx = () => {
       </div>
     );
 
+  const HobbyItem = x => (
+    <span
+      key={x}
+      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}
+    </span>
+  );
+
+  const Hobbies = () =>
+    data.hobbies &&
+    data.hobbies.enable && (
+      <div>
+        <Heading title={data.hobbies.heading} />
+        <div className="mt-1 flex flex-wrap">{data.hobbies.items.map(HobbyItem)}</div>
+      </div>
+    );
+
   const SkillItem = x => (
     <span
       key={x}
@@ -227,7 +249,7 @@ const Onyx = () => {
     data.extras.enable && (
       <div>
         <Heading title={data.extras.heading} />
-        <table className="w-2/3 table-auto">
+        <table className="table-auto">
           <tbody>{data.extras.items.filter(x => x.enable).map(ExtraItem)}</tbody>
         </table>
       </div>
@@ -277,11 +299,15 @@ const Onyx = () => {
 
       <div className="grid grid-cols-2 gap-6">
         <Skills />
-        <Languages />
+        <Hobbies />
       </div>
 
       <References />
-      <Extras />
+
+      <div className="grid grid-cols-2 gap-6">
+        <Extras />
+        <Languages />
+      </div>
     </div>
   );
 };

src/templates/pikachu/Pikachu.js

@@ -76,6 +76,24 @@ const Pikachu = () => {
       </div>
     );
 
+  const HobbyItem = x => (
+    <span
+      key={x}
+      className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
+    >
+      {x}
+    </span>
+  );
+
+  const Hobbies = () =>
+    data.hobbies &&
+    data.hobbies.enable && (
+      <div>
+        <Heading title={data.hobbies.heading} />
+        <div className="flex flex-col mb-6">{data.hobbies.items.map(HobbyItem)}</div>
+      </div>
+    );
+
   const ReferenceItem = x => (
     <div key={x.id} className="flex flex-col">
       <h6 className="text-sm font-medium">{x.name}</h6>
@@ -91,7 +109,7 @@ const Pikachu = () => {
     data.references.enable && (
       <div>
         <Heading title={data.references.heading} />
-        <div className="grid grid-cols-2 gap-6">
+        <div className="grid grid-cols-2 gap-2 mb-6">
           {data.references.items.filter(x => x.enable).map(ReferenceItem)}
         </div>
       </div>
@@ -136,7 +154,7 @@ const Pikachu = () => {
     data.extras.enable && (
       <div>
         <Heading title={data.extras.heading} />
-        <div className="flex flex-col mb-6">
+        <div className="grid grid-cols-2">
           {data.extras.items.filter(x => x.enable).map(ExtraItem)}
         </div>
       </div>
@@ -169,7 +187,7 @@ const Pikachu = () => {
     );
 
   const EducationItem = x => (
-    <div key={x.id} className="mb-3">
+    <div key={x.id} className="mb-2">
       <div className="flex justify-between items-center">
         <div>
           <h6 className="font-semibold">{x.name}</h6>
@@ -200,7 +218,7 @@ const Pikachu = () => {
     );
 
   const AwardItem = x => (
-    <div key={x.id} className="mb-3">
+    <div key={x.id} className="mb-2">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -274,9 +292,9 @@ const Pikachu = () => {
           </div>
 
           <Skills />
+          <Hobbies />
           <Languages />
           <Certifications />
-          <Extras />
         </div>
 
         <div className="col-span-8">
@@ -284,6 +302,7 @@ const Pikachu = () => {
           <Education />
           <Awards />
           <References />
+          <Extras />
         </div>
       </div>
     </div>