- implementing hobby, language and reference sections

- dynamic template selection

src/components/builder/center/Artboard.js

@@ -6,8 +6,8 @@ import Onyx from '../../../templates/Onyx';
 import styles from './Artboard.module.css';
 
 const Artboard = () => {
-  const { blocks, colors } = useContext(TemplateContext);
-  const state = useSelector((s) => s);
+  const { selected, blocks, colors } = useContext(TemplateContext);
+  const state = useSelector((store) => store);
   const { id, name } = state;
 
   return (
@@ -18,7 +18,9 @@ const Artboard = () => {
       </Helmet>
 
       <div id="artboard" className={styles.container}>
-        <Onyx data={state} layout={blocks} colors={colors} />
+        {selected === 'Onyx' && (
+          <Onyx data={state} layout={blocks} colors={colors} />
+        )}
       </div>
     </div>
   );

src/components/builder/left/LeftNavbar.js

@@ -16,7 +16,7 @@ const LeftNavbar = () => (
 
     <div className="grid grid-cols-1 gap-8">
       {sections.map((x) => (
-        <SectionIcon key={x.id} section={x} />
+        <SectionIcon key={x.id} section={x} containerId="LeftSidebar" />
       ))}
     </div>
 

src/components/builder/left/LeftSidebar.js

@@ -1,4 +1,5 @@
-import React, { Fragment } from 'react';
+import React from 'react';
+import { Element } from 'react-scroll';
 import sections from '../../../data/leftSections';
 import LeftNavbar from './LeftNavbar';
 import styles from './LeftSidebar.module.css';
@@ -7,12 +8,12 @@ const LeftSidebar = () => (
   <div className="flex">
     <LeftNavbar />
 
-    <div className={styles.container}>
+    <div id="LeftSidebar" className={styles.container}>
       {sections.map(({ id, name, event, component: Component }) => (
-        <Fragment key={id}>
+        <Element key={id} name={id}>
           <Component id={id} name={name} event={event} />
           <hr />
-        </Fragment>
+        </Element>
       ))}
     </div>
   </div>

src/components/builder/lists/List.js

@@ -1,9 +1,9 @@
 import { get, isEmpty } from 'lodash';
-import moment from 'moment';
 import React, { useContext } from 'react';
 import { MdAdd } from 'react-icons/md';
 import ModalContext from '../../../contexts/ModalContext';
 import { useSelector } from '../../../contexts/ResumeContext';
+import { formatDateRange } from '../../../utils';
 import Button from '../../shared/Button';
 import EmptyList from './EmptyList';
 import styles from './List.module.css';
@@ -17,6 +17,7 @@ const List = ({
   subtitlePath,
   text,
   textPath,
+  hasDate,
   event,
 }) => {
   const items = useSelector((state) => get(state, path, []));
@@ -26,13 +27,6 @@ const List = ({
 
   const handleEdit = (data) => emitter.emit(event, data);
 
-  const formatDateRange = (x) =>
-    `${moment(x.startDate).format('MMMM Y')} — ${
-      moment(x.endDate).isValid()
-        ? moment(x.endDate).format('MMMM Y')
-        : 'Present'
-    }`;
-
   return (
     <div className="flex flex-col">
       <div className={styles.list}>
@@ -46,10 +40,11 @@ const List = ({
               path={path}
               title={title || get(x, titlePath, '')}
               subtitle={
-                subtitle || get(x, subtitlePath, '') || formatDateRange(x)
+                subtitle ||
+                get(x, subtitlePath, '') ||
+                (hasDate && formatDateRange(x))
               }
               text={text || get(x, textPath, '')}
-              className={styles.listItem}
               onEdit={() => handleEdit(x)}
               isFirst={i === 0}
               isLast={i === items.length - 1}

src/components/builder/lists/List.module.css

@@ -1,21 +1,3 @@
 .list {
   @apply flex flex-col border border-secondary rounded;
 }
-
-.list-item {
-  @apply flex items-center justify-between border-t border-secondary px-8 py-5;
-}
-
-.list-item:first-child {
-  @apply border-t-0;
-}
-
-.menu {
-  @apply opacity-0;
-  @apply transition-opacity duration-200 ease-in-out;
-}
-
-.list-item:hover .menu {
-  @apply opacity-100;
-  @apply transition-opacity duration-200 ease-in-out;
-}

src/components/builder/lists/ListItem.js

@@ -64,7 +64,7 @@ const ListItem = ({
   };
 
   return (
-    <div className={styles.container}>
+    <div className={styles.listItem}>
       <div className="grid">
         <span className="font-medium truncate">{title}</span>
 

src/components/builder/lists/ListItem.module.css

@@ -1,8 +1,8 @@
-.container {
+.listItem {
   @apply flex items-center justify-between border-t border-secondary px-6 py-5;
 }
 
-.container:first-child {
+.listItem:first-child {
   @apply border-t-0;
 }
 
@@ -11,7 +11,7 @@
   @apply transition-opacity duration-200 ease-in-out;
 }
 
-.container:hover .menu {
+.listItem:hover .menu {
   @apply opacity-100;
   @apply transition-opacity duration-200 ease-in-out;
 }

src/components/builder/sections/Education.js

@@ -10,6 +10,7 @@ const Education = ({ id, name, event }) => {
       <Heading>{name}</Heading>
 
       <List
+        hasDate
         path={path}
         event={event}
         titlePath="institution"

src/components/builder/sections/Hobbies.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Heading from '../../shared/Heading';
+import List from '../lists/List';
+
+const Hobbies = ({ id, name, event }) => {
+  const path = `${id}.items`;
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List path={path} event={event} titlePath="name" />
+    </section>
+  );
+};
+
+export default Hobbies;

src/components/builder/sections/Languages.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Heading from '../../shared/Heading';
+import List from '../lists/List';
+
+const Languages = ({ id, name, event }) => {
+  const path = `${id}.items`;
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List path={path} event={event} titlePath="name" subtitlePath="fluency" />
+    </section>
+  );
+};
+
+export default Languages;

src/components/builder/sections/References.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Heading from '../../shared/Heading';
+import List from '../lists/List';
+
+const References = ({ id, name, event }) => {
+  const path = `${id}.items`;
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List
+        path={path}
+        event={event}
+        titlePath="name"
+        subtitlePath="position"
+        textPath="summary"
+      />
+    </section>
+  );
+};
+
+export default References;

src/components/builder/sections/Work.js

@@ -9,7 +9,13 @@ const Work = ({ id, name, event }) => {
     <section>
       <Heading>{name}</Heading>
 
-      <List path={path} event={event} titlePath="company" textPath="summary" />
+      <List
+        hasDate
+        path={path}
+        event={event}
+        titlePath="company"
+        textPath="summary"
+      />
     </section>
   );
 };