From e2d9b00f7d4f081c5bb8f00fe02d64d1f27f7d4c Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Tue, 28 Apr 2020 13:00:39 +0530 Subject: [PATCH 1/3] implement redordering of skills --- src/components/LeftSidebar/LeftSidebar.js | 2 +- src/components/LeftSidebar/tabs/Skills.js | 28 +++++++++++++++++++---- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/components/LeftSidebar/LeftSidebar.js b/src/components/LeftSidebar/LeftSidebar.js index d2b29bfe..2c65b5e1 100644 --- a/src/components/LeftSidebar/LeftSidebar.js +++ b/src/components/LeftSidebar/LeftSidebar.js @@ -30,7 +30,7 @@ const LeftSidebar = () => { { key: 'references', name: data.references.heading }, { key: 'extras', name: data.extras.heading }, ]; - const [currentTab, setCurrentTab] = useState(tabs[0].key); + const [currentTab, setCurrentTab] = useState(tabs[6].key); const onChange = (key, value) => { dispatch({ type: 'on_input', diff --git a/src/components/LeftSidebar/tabs/Skills.js b/src/components/LeftSidebar/tabs/Skills.js index 06d207aa..98d123d4 100644 --- a/src/components/LeftSidebar/tabs/Skills.js +++ b/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 ( -
-
+
+
onChange(identifier, v)} />
+ + + +
From 00d5a5e97918814df523575f0e6dfdbf9ebc36e6 Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Tue, 28 Apr 2020 13:49:22 +0530 Subject: [PATCH 2/3] added hobbies section, updated templates --- src/components/LeftSidebar/LeftSidebar.js | 26 ++-- src/components/LeftSidebar/tabs/Hobbies.js | 133 +++++++++++++++++++++ src/context/AppContext.js | 27 +++-- src/templates/castform/Castform.js | 20 +++- src/templates/celebi/Celebi.js | 17 ++- src/templates/gengar/Gengar.js | 16 +++ src/templates/glalie/Glalie.js | 50 ++++---- src/templates/onyx/Onyx.js | 32 ++++- src/templates/pikachu/Pikachu.js | 29 ++++- 9 files changed, 296 insertions(+), 54 deletions(-) create mode 100644 src/components/LeftSidebar/tabs/Hobbies.js diff --git a/src/components/LeftSidebar/LeftSidebar.js b/src/components/LeftSidebar/LeftSidebar.js index 2c65b5e1..227648a1 100644 --- a/src/components/LeftSidebar/LeftSidebar.js +++ b/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,11 +27,12 @@ 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 }, ]; - const [currentTab, setCurrentTab] = useState(tabs[6].key); + const [currentTab, setCurrentTab] = useState(tabs[0].key); const onChange = (key, value) => { dispatch({ type: 'on_input', @@ -45,25 +47,27 @@ const LeftSidebar = () => { const renderTabs = () => { switch (currentTab) { - case tabs[0].key: + case 'profile': return ; - case tabs[1].key: + case 'objective': return ; - case tabs[2].key: + case 'work': return ; - case tabs[3].key: + case 'education': return ; - case tabs[4].key: + case 'awards': return ; - case tabs[5].key: + case 'certifications': return ; - case tabs[6].key: + case 'skills': return ; - case tabs[7].key: + case 'hobbies': + return ; + case 'languages': return ; - case tabs[8].key: + case 'references': return ; - case tabs[9].key: + case 'extras': return ; default: return null; diff --git a/src/components/LeftSidebar/tabs/Hobbies.js b/src/components/LeftSidebar/tabs/Hobbies.js new file mode 100644 index 00000000..1ba1a614 --- /dev/null +++ b/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 ( + <> +
+
+ onChange('data.hobbies.enable', v)} + /> +
+
+ onChange('data.hobbies.heading', v)} + /> +
+
+ +
+ + {data.hobbies.items.map((x, index) => ( + + ))} + + + + ); +}; + +const Form = ({ item, onChange }) => { + return ( + 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 ( +
+ + +
+
+
+ +
+ + +
+
+
+ ); +}; + +const Item = ({ item, index, onChange, dispatch }) => { + const identifier = `data.hobbies.items[${index}]`; + + return ( +
+
+ onChange(identifier, v)} /> +
+ + + + + + +
+ ); +}; + +export default HobbiesTab; diff --git a/src/context/AppContext.js b/src/context/AppContext.js index f33686db..31cd2eac 100644 --- a/src/context/AppContext.js +++ b/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, - heading: 'Skills & Hobbies', + enable: true, + 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`, []); diff --git a/src/templates/castform/Castform.js b/src/templates/castform/Castform.js index 3ec7ef64..7ede2dff 100644 --- a/src/templates/castform/Castform.js +++ b/src/templates/castform/Castform.js @@ -93,6 +93,21 @@ const Castform = () => {
); + const HobbyItem = x => ( +
  • + {x} +
    • + ); + + const Hobbies = () => + data.hobbies && + data.hobbies.enable && ( +
    + +
      {data.hobbies.items.map(HobbyItem)}
    +
    + ); + const Objective = () => data.objective && data.objective.enable &&

    {data.objective.body}

    ; @@ -251,7 +266,7 @@ const Castform = () => { data.extras && data.extras.enable && (
    - + {data.extras.items.filter(x => x.enable).map(ExtraItem)}
    ); @@ -276,9 +291,9 @@ const Castform = () => { + -
    @@ -286,6 +301,7 @@ const Castform = () => { +
    diff --git a/src/templates/celebi/Celebi.js b/src/templates/celebi/Celebi.js index cab5d833..a6b13ea8 100644 --- a/src/templates/celebi/Celebi.js +++ b/src/templates/celebi/Celebi.js @@ -144,7 +144,21 @@ const Celebi = () => { + + ); + + const Hobbies = () => + data.hobbies.enable && ( +
    + +
      + {data.hobbies.items.map(x => ( +
    • {x}
      • ))} @@ -266,6 +280,7 @@ const Celebi = () => { + diff --git a/src/templates/gengar/Gengar.js b/src/templates/gengar/Gengar.js index 92dcfd8a..098558db 100644 --- a/src/templates/gengar/Gengar.js +++ b/src/templates/gengar/Gengar.js @@ -79,6 +79,21 @@ const Gengar = () => {
    ); + const HobbyItem = x => ( +
  • + {x} +
    • + ); + + const Hobbies = () => + data.hobbies && + data.hobbies.enable && ( +
    + +
      {data.hobbies.items.map(HobbyItem)}
    +
    + ); + const EducationItem = x => (
    @@ -285,6 +300,7 @@ const Gengar = () => { style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }} > + diff --git a/src/templates/glalie/Glalie.js b/src/templates/glalie/Glalie.js index 88919614..9cda9c83 100644 --- a/src/templates/glalie/Glalie.js +++ b/src/templates/glalie/Glalie.js @@ -31,10 +31,6 @@ const Glalie = () => {
    {data.profile.subtitle}
    ); - const Divider = () => ( -
    - ); - const ContactItem = ({ title, value }) => value && (
    @@ -47,14 +43,14 @@ const Glalie = () => { const ContactInformation = () => (

    flare @@ -191,6 +187,23 @@ const Glalie = () => {

    ); + const HobbyItem = x => ( +
  • + {x} +
    • + ); + + const Hobbies = () => + data.hobbies && + data.hobbies.enable && ( +
    + +
      + {data.hobbies.items.map(HobbyItem)} +
    +
    + ); + const LanguageItem = x => (
    {x.key}
    @@ -267,33 +280,28 @@ const Glalie = () => { >
    -
    +
    - - - - +
    -
    -
    - - - - - - -
    +
    + + + + + +
    diff --git a/src/templates/onyx/Onyx.js b/src/templates/onyx/Onyx.js index 0e63a6b2..823fd341 100644 --- a/src/templates/onyx/Onyx.js +++ b/src/templates/onyx/Onyx.js @@ -145,6 +145,28 @@ const Onyx = () => {
    ); + const HobbyItem = x => ( + + {x} + + ); + + const Hobbies = () => + data.hobbies && + data.hobbies.enable && ( +
    + +
    {data.hobbies.items.map(HobbyItem)}
    +
    + ); + const SkillItem = x => ( { data.extras.enable && (
    - +
    {data.extras.items.filter(x => x.enable).map(ExtraItem)}
    @@ -277,11 +299,15 @@ const Onyx = () => {
    - +
    - + +
    + + +
    ); }; diff --git a/src/templates/pikachu/Pikachu.js b/src/templates/pikachu/Pikachu.js index dc5fefc4..2f34c758 100644 --- a/src/templates/pikachu/Pikachu.js +++ b/src/templates/pikachu/Pikachu.js @@ -76,6 +76,24 @@ const Pikachu = () => {
    ); + const HobbyItem = x => ( + + {x} + + ); + + const Hobbies = () => + data.hobbies && + data.hobbies.enable && ( +
    + +
    {data.hobbies.items.map(HobbyItem)}
    +
    + ); + const ReferenceItem = x => (
    {x.name}
    @@ -91,7 +109,7 @@ const Pikachu = () => { data.references.enable && (
    -
    +
    {data.references.items.filter(x => x.enable).map(ReferenceItem)}
    @@ -136,7 +154,7 @@ const Pikachu = () => { data.extras.enable && (
    -
    +
    {data.extras.items.filter(x => x.enable).map(ExtraItem)}
    @@ -169,7 +187,7 @@ const Pikachu = () => { ); const EducationItem = x => ( -
    +
    {x.name}
    @@ -200,7 +218,7 @@ const Pikachu = () => { ); const AwardItem = x => ( -
    +
    {x.title}

    {x.subtitle}

    @@ -274,9 +292,9 @@ const Pikachu = () => {
    + -
    @@ -284,6 +302,7 @@ const Pikachu = () => { +
    From b1b15f426cdae06ad8bcfe007d9e7ec3253ded32 Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Tue, 28 Apr 2020 13:51:43 +0530 Subject: [PATCH 3/3] added changelog --- docs/changelog/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/changelog/README.md b/docs/changelog/README.md index b448ccc1..c5c40036 100644 --- a/docs/changelog/README.md +++ b/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