- implement work experience

- implement education
- show dynamic names in layout

src/components/builder/lists/List.js

@@ -1,22 +1,67 @@
-import { isEmpty } from "lodash";
-import React from "react";
+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 Button from "../../shared/Button";
 import EmptyList from "./EmptyList";
 import styles from "./List.module.css";
 
-const List = ({ items, onAdd, children }) => {
+const List = ({
+  path,
+  items,
+  title,
+  titlePath,
+  subtitle,
+  subtitlePath,
+  text,
+  textPath,
+  event,
+  listItemComponent: ListItemComponent,
+}) => {
+  const { emitter } = useContext(ModalContext);
+
+  const handleAdd = () => emitter.emit(event);
+
+  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.container}>
-        {isEmpty(items) ? <EmptyList /> : children}
+      <div className={styles.list}>
+        {isEmpty(items) ? (
+          <EmptyList />
+        ) : (
+          items.map((x, i) => (
+            <ListItemComponent
+              key={x.id}
+              data={x}
+              path={path}
+              title={title || get(x, titlePath, "")}
+              subtitle={
+                subtitle || get(x, subtitlePath, "") || formatDateRange(x)
+              }
+              text={text || get(x, textPath, "")}
+              className={styles.listItem}
+              onEdit={() => handleEdit(x)}
+              isFirst={i === 0}
+              isLast={i === items.length - 1}
+            />
+          ))
+        )}
       </div>
 
       <Button
         outline
         icon={MdAdd}
         title="Add New"
-        onClick={onAdd}
+        onClick={handleAdd}
         className="mt-8 ml-auto"
       />
     </div>