Add resume item functionality, fix #76 and #78

src/components/Item.js

@@ -2,7 +2,7 @@ import React from "react";
 import { useAppReducer } from "../AppContext";
 import styles from "./Item.module.scss";
 
-// Individial todo item
+// Individual todo item
 function Item({ item }) {
   const dispatch = useAppReducer();
   let text = item.text;
@@ -18,22 +18,33 @@ function Item({ item }) {
     dispatch({ type: "UPDATE_ITEM", item: pausedItem });
   }
 
+  function resumeItem() {
+    const pendingItem = { ...item, status: "pending" };
+    dispatch({ type: "UPDATE_ITEM", item: pendingItem });
+  }
+
   function completeItem() {
     const completedItem = { ...item, status: "completed" };
     dispatch({ type: "UPDATE_ITEM", item: completedItem });
   }
 
   return (
-    <div
-      className={`${styles.item} ${paused ? styles.pausedItem : ""}`}
-      tabIndex="0"
-    >
+    <div className={styles.item} tabIndex="0">
       <div className={styles.itemName}>{text}</div>
-      <div className={styles.buttons}>
+      <div
+        className={`${styles.buttons} ${completed ? styles.completedButtons : ""}`}
+      >
         <button className={styles.delete} onClick={deleteItem} tabIndex="0"></button>
         {!paused && !completed && (
           <button className={styles.pause} onClick={pauseItem} tabIndex="0"></button>
         )}
+        {paused && !completed && (
+          <button
+            className={styles.resume}
+            onClick={resumeItem}
+            tabIndex="0"
+          ></button>
+        )}
         {!completed && (
           <button
             className={styles.complete}

src/components/Item.module.scss

@@ -16,11 +16,6 @@
   @media (max-width: 600px) {
     margin: 20px auto;
   }
-  &.pausedItem {
-    .itemName {
-      width: calc(100% - 80px);
-    }
-  }
   .itemName {
     width: calc(100% - 110px);
     overflow: auto;
@@ -42,51 +37,67 @@
       border-radius: 3px;
     }
   }
-  .buttons button {
-    position: relative;
-    margin: 0 0 0 10px;
-    height: 24px;
-    border: none;
-    &.delete {
-      width: 24px;
-      background: no-repeat url("../img/x.svg");
-      &:after {
-        background: $red;
-      }
+  .buttons {
+    display: flex;
+    justify-content: space-between;
+    width: 100px;
+
+    &.completedButtons {
+      justify-content: flex-end;
     }
-    &.pause {
-      width: 24px;
-      background: no-repeat url("../img/pause.svg");
-      &:after {
-        background: $yellow;
+
+    button {
+      position: relative;
+      height: 24px;
+      border: none;
+      &.delete {
+        width: 24px;
+        background: no-repeat url("../img/x.svg");
+        &:after {
+          background: $red;
+        }
       }
-    }
-    &.complete {
-      width: 30px;
-      background: no-repeat url("../img/check.svg");
-      &:after {
-        background: $green;
+      &.pause {
+        width: 24px;
+        background: no-repeat url("../img/pause.svg");
+        &:after {
+          background: $yellow;
+        }
+      }
+      &.resume {
+        width: 24px;
+        background: no-repeat url("../img/resume.svg");
+        &:after {
+          background: $yellow;
+        }
+      }
+      &.complete {
+        width: 30px;
+        background: no-repeat url("../img/check.svg");
+        &:after {
+          background: $green;
+        }
       }
-    }
-    &:after {
-      display: block;
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      border-radius: 100%;
-      width: 0;
-      height: 0;
-    }
-    &:focus {
-      outline: 1px solid $item-color;
       &:after {
+        display: block;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        width: 0;
+        height: 0;
+      }
+      &:focus {
+        outline: 1px solid $item-color;
+        &:after {
+          animation: click 0.5s;
+        }
+      }
+      &:hover:after {
         animation: click 0.5s;
       }
     }
-    &:hover:after {
-      animation: click 0.5s;
-    }
   }
 }