- implement certifications section

src/components/builder/lists/List.js

@@ -6,6 +6,7 @@ import ModalContext from "../../../contexts/ModalContext";
 import Button from "../../shared/Button";
 import EmptyList from "./EmptyList";
 import styles from "./List.module.css";
+import ListItem from "./ListItem";
 
 const List = ({
   path,
@@ -17,7 +18,6 @@ const List = ({
   text,
   textPath,
   event,
-  listItemComponent: ListItemComponent,
 }) => {
   const { emitter } = useContext(ModalContext);
 
@@ -39,7 +39,7 @@ const List = ({
           <EmptyList />
         ) : (
           items.map((x, i) => (
-            <ListItemComponent
+            <ListItem
               key={x.id}
               data={x}
               path={path}

src/components/builder/lists/ListItem.js

@@ -2,10 +2,10 @@ import { Menu, MenuItem } from "@material-ui/core";
 import React, { useContext, useState } from "react";
 import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
 import { MdMoreVert } from "react-icons/md";
-import ResumeContext from "../../../../contexts/ResumeContext";
-import styles from "./TripleFieldListItem.module.css";
+import ResumeContext from "../../../contexts/ResumeContext";
+import styles from "./ListItem.module.css";
 
-const TripleFieldListItem = ({
+const ListItem = ({
   title,
   subtitle,
   text,
@@ -67,9 +67,14 @@ const TripleFieldListItem = ({
     <div className={styles.container}>
       <div className="grid">
         <span className="font-medium truncate">{title}</span>
-        <span className="mt-1 text-sm opacity-75 truncate">{subtitle}</span>
 
-        <span className="w-4/5 mt-5 text-sm opacity-75 truncate">{text}</span>
+        {subtitle && (
+          <span className="mt-1 text-sm opacity-75 truncate">{subtitle}</span>
+        )}
+
+        {text && (
+          <span className="w-4/5 mt-5 text-sm opacity-75 truncate">{text}</span>
+        )}
       </div>
 
       <div className={styles.menu}>
@@ -103,4 +108,4 @@ const TripleFieldListItem = ({
   );
 };
 
-export default TripleFieldListItem;
+export default ListItem;

src/components/builder/lists/double/DoubleFieldListItem.js

@@ -1,103 +0,0 @@
-import { Menu, MenuItem } from "@material-ui/core";
-import React, { useContext, useState } from "react";
-import { IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
-import { MdMoreVert } from "react-icons/md";
-import ResumeContext from "../../../../contexts/ResumeContext";
-import styles from "./DoubleFieldListItem.module.css";
-
-const DoubleFieldListItem = ({
-  title,
-  subtitle,
-  path,
-  data,
-  isFirst,
-  isLast,
-  onEdit,
-}) => {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const { dispatch } = useContext(ResumeContext);
-
-  const handleClick = (event) => setAnchorEl(event.currentTarget);
-
-  const handleClose = () => setAnchorEl(null);
-
-  const handleEdit = () => {
-    onEdit();
-    handleClose();
-  };
-
-  const handleMoveUp = () => {
-    dispatch({
-      type: "on_move_item_up",
-      payload: {
-        path,
-        value: data,
-      },
-    });
-
-    handleClose();
-  };
-
-  const handleMoveDown = () => {
-    dispatch({
-      type: "on_move_item_down",
-      payload: {
-        path,
-        value: data,
-      },
-    });
-
-    handleClose();
-  };
-
-  const handleDelete = () => {
-    dispatch({
-      type: "on_delete_item",
-      payload: {
-        path,
-        value: data,
-      },
-    });
-
-    handleClose();
-  };
-
-  return (
-    <div className={styles.container}>
-      <div className="flex flex-col">
-        <span className="font-medium truncate">{title}</span>
-        <span className="mt-1 text-sm opacity-75 truncate">{subtitle}</span>
-      </div>
-
-      <div className={styles.menu}>
-        <MdMoreVert
-          size="18px"
-          aria-haspopup="true"
-          onClick={handleClick}
-          className="cursor-pointer"
-        />
-        <Menu
-          keepMounted
-          anchorEl={anchorEl}
-          onClose={handleClose}
-          open={Boolean(anchorEl)}
-        >
-          <div className="flex items-center space-around">
-            <MenuItem disabled={isFirst} onClick={handleMoveUp}>
-              <IoIosArrowUp size="18px" />
-            </MenuItem>
-            <MenuItem disabled={isLast} onClick={handleMoveDown}>
-              <IoIosArrowDown size="18px" />
-            </MenuItem>
-          </div>
-          <MenuItem onClick={handleEdit}>Edit</MenuItem>
-          <MenuItem onClick={handleDelete}>
-            <span className="text-red-600 font-medium">Delete</span>
-          </MenuItem>
-        </Menu>
-      </div>
-    </div>
-  );
-};
-
-export default DoubleFieldListItem;

src/components/builder/lists/triple/TripleFieldListItem.module.css

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

src/components/builder/sections/Awards.js

@@ -2,7 +2,6 @@ import { get } from "lodash";
 import React from "react";
 import Heading from "../../shared/Heading";
 import List from "../lists/List";
-import TripleFieldListItem from "../lists/triple/TripleFieldListItem";
 
 const Awards = ({ id, name, event, state }) => {
   const path = `${id}.items`;
@@ -19,7 +18,6 @@ const Awards = ({ id, name, event, state }) => {
         titlePath="title"
         subtitlePath="awarder"
         textPath="summary"
-        listItemComponent={TripleFieldListItem}
       />
     </section>
   );

src/components/builder/sections/Certifications.js

@@ -0,0 +1,26 @@
+import { get } from "lodash";
+import React from "react";
+import Heading from "../../shared/Heading";
+import List from "../lists/List";
+
+const Certifications = ({ id, name, event, state }) => {
+  const path = `${id}.items`;
+  const items = get(state, path, []);
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List
+        path={path}
+        items={items}
+        event={event}
+        titlePath="title"
+        subtitlePath="issuer"
+        textPath="summary"
+      />
+    </section>
+  );
+};
+
+export default Certifications;

src/components/builder/sections/Education.js

@@ -2,7 +2,6 @@ import { get } from "lodash";
 import React from "react";
 import Heading from "../../shared/Heading";
 import List from "../lists/List";
-import TripleFieldListItem from "../lists/triple/TripleFieldListItem";
 
 const Education = ({ id, name, event, state }) => {
   const path = `${id}.items`;
@@ -18,7 +17,6 @@ const Education = ({ id, name, event, state }) => {
         event={event}
         titlePath="institution"
         textPath="field"
-        listItemComponent={TripleFieldListItem}
       />
     </section>
   );

src/components/builder/sections/Social.js

@@ -1,7 +1,6 @@
 import { get } from "lodash";
 import React from "react";
 import Heading from "../../shared/Heading";
-import DoubleFieldListItem from "../lists/double/DoubleFieldListItem";
 import List from "../lists/List";
 
 const Social = ({ id, name, event, state }) => {
@@ -18,7 +17,6 @@ const Social = ({ id, name, event, state }) => {
         event={event}
         titlePath="network"
         subtitlePath="username"
-        listItemComponent={DoubleFieldListItem}
       />
     </section>
   );

src/components/builder/sections/Work.js

@@ -2,7 +2,6 @@ import { get } from "lodash";
 import React from "react";
 import Heading from "../../shared/Heading";
 import List from "../lists/List";
-import TripleFieldListItem from "../lists/triple/TripleFieldListItem";
 
 const Work = ({ id, name, event, state }) => {
   const path = `${id}.items`;
@@ -18,7 +17,6 @@ const Work = ({ id, name, event, state }) => {
         event={event}
         titlePath="company"
         textPath="summary"
-        listItemComponent={TripleFieldListItem}
       />
     </section>
   );