- creating and updating resumes

src/components/dashboard/CreateResume.js

@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
 import { MdAdd } from "react-icons/md";
-import styles from "./CreateResume.module.css";
 import ModalContext from "../../contexts/ModalContext";
+import styles from "./CreateResume.module.css";
 
 const CreateResume = () => {
   const { createResumeModal } = useContext(ModalContext);

src/components/dashboard/ResumePreview.js

@@ -1,20 +1,28 @@
-import React, { useState } from "react";
-import { MdMoreHoriz, MdOpenInNew } from "react-icons/md";
 import { Menu, MenuItem } from "@material-ui/core";
+import moment from "moment";
+import React, { useContext, useState } from "react";
+import { MdMoreHoriz, MdOpenInNew } from "react-icons/md";
+import ModalContext from "../../contexts/ModalContext";
 import styles from "./ResumePreview.module.css";
 
-const ResumePreview = ({ title, subtitle }) => {
+const ResumePreview = ({ resume }) => {
   const [anchorEl, setAnchorEl] = useState(null);
+  const { createResumeModal } = useContext(ModalContext);
 
-  const handleClick = () => {
+  const handleOpen = () => {
     console.log("Hello, World!");
   };
 
   const handleMenuClick = (event) => {
-    event.stopPropagation();
     setAnchorEl(event.currentTarget);
   };
 
+  const handleRename = () => {
+    createResumeModal.setOpen(true);
+    createResumeModal.setData(resume);
+    setAnchorEl(null);
+  };
+
   const handleMenuClose = () => {
     setAnchorEl(null);
   };
@@ -32,7 +40,7 @@ const ResumePreview = ({ title, subtitle }) => {
           color="#fff"
           size="48"
           className="cursor-pointer"
-          onClick={handleClick}
+          onClick={handleOpen}
         />
         <MdMoreHoriz
           color="#fff"
@@ -47,6 +55,7 @@ const ResumePreview = ({ title, subtitle }) => {
           open={Boolean(anchorEl)}
           onClose={handleMenuClose}
         >
+          <MenuItem onClick={handleRename}>Rename</MenuItem>
           <MenuItem onClick={handleMenuClose}>Duplicate</MenuItem>
           <MenuItem onClick={handleMenuClose}>
             <span className="text-red-600">Delete</span>
@@ -54,8 +63,12 @@ const ResumePreview = ({ title, subtitle }) => {
         </Menu>
       </div>
       <div className={styles.meta}>
-        <p>{title}</p>
-        <span>{subtitle}</span>
+        <p>{resume.name}</p>
+        {resume.updatedAt && (
+          <span>
+            Last updated {moment(resume.updatedAt.toDate()).fromNow()}
+          </span>
+        )}
       </div>
     </div>
   );

src/components/dashboard/ResumePreview.module.css

@@ -28,7 +28,7 @@
 
 .resume > .meta {
   margin-top: 260px;
-  @apply flex flex-col items-center;
+  @apply flex flex-col text-center items-center;
 }
 
 .resume > .meta p {

src/components/shared/Button.js

@@ -3,7 +3,15 @@ import classNames from "classnames";
 import Loader from "react-loader-spinner";
 import styles from "./Button.module.css";
 
-const Button = ({ icon, title, isLoading, onClick, outline, className }) => {
+const Button = ({
+  icon,
+  title,
+  onClick,
+  outline,
+  className,
+  isLoading,
+  type = "button",
+}) => {
   const Icon = icon;
   const classes = classNames(styles.container, className, {
     [styles.outline]: outline,
@@ -12,9 +20,8 @@ const Button = ({ icon, title, isLoading, onClick, outline, className }) => {
   const handleKeyDown = () => {};
 
   return (
-    <div
-      tabIndex="0"
-      role="button"
+    <button
+      type={type}
       className={classes}
       onKeyDown={handleKeyDown}
       onClick={isLoading ? undefined : onClick}
@@ -25,7 +32,7 @@ const Button = ({ icon, title, isLoading, onClick, outline, className }) => {
       ) : (
         title
       )}
-    </div>
+    </button>
   );
 };
 

src/components/shared/Input.js

@@ -6,6 +6,7 @@ const Input = ({
   label,
   name,
   value,
+  error,
   onChange,
   placeholder,
   type = "text",
@@ -24,6 +25,7 @@ const Input = ({
           onChange={onChange}
           placeholder={placeholder}
         />
+        <p className="mt-1 text-red-600 text-sm">{error}</p>
       </label>
     </div>
   );