add: doing hightlight

src/AppContext.js

@@ -15,11 +15,12 @@ export function useAppReducer() {
 export function useItems() {
   const { items } = useAppState();
 
+  const doing = items.filter(item => item.status === "doing");
   const pending = items.filter(item => item.status === "pending");
   const paused = items.filter(item => item.status === "paused");
   const completed = items.filter(item => item.status === "completed");
 
-  return { pending, paused, completed };
+  return { doing, pending, paused, completed };
 }
 
 const appStateReducer = (state, action) => {

src/components/Item.js

@@ -8,6 +8,7 @@ function Item({ item }) {
   let text = item.text;
   let paused = item.status === "paused";
   let completed = item.status === "completed";
+  let doing = item.status === "doing";
 
   function deleteItem() {
     dispatch({ type: "DELETE_ITEM", item });
@@ -28,12 +29,28 @@ function Item({ item }) {
     dispatch({ type: "UPDATE_ITEM", item: completedItem });
   }
 
+  function markDoingItem() {
+    const completedItem = { ...item, status: "doing" };
+    dispatch({ type: "UPDATE_ITEM", item: completedItem });
+  }
+
+  function changeToPending() {
+    const completedItem = { ...item, status: "pending" };
+    dispatch({ type: "UPDATE_ITEM", item: completedItem });
+  }
+
   return (
-    <div className={styles.item} tabIndex="0">
+    <div className={`${styles.item} ${doing ? styles.itemHightlight : ""}`} tabIndex="0">
       <div className={styles.itemName}>{text}</div>
       <div
         className={`${styles.buttons} ${completed ? styles.completedButtons : ""}`}
       >
+        {!doing && !completed && (
+          <button className={styles.doing} onClick={markDoingItem} tabIndex="0"></button>
+        )}
+        {doing && !completed && (
+          <button className={styles.down} onClick={changeToPending} tabIndex="0"></button>
+        )}
         <button className={styles.delete} onClick={deleteItem} tabIndex="0"></button>
         {!paused && !completed && (
           <button className={styles.pause} onClick={pauseItem} tabIndex="0"></button>

src/components/Item.module.scss

@@ -1,5 +1,9 @@
 @import "../styles/variables";
 
+.itemHightlight {
+  background: #8a8a1a !important;
+}
+
 .item {
   display: flex;
   align-items: center;
@@ -17,7 +21,7 @@
     margin: 20px auto;
   }
   .itemName {
-    width: calc(100% - 110px);
+    width: calc(100% - 130px);
     overflow: auto;
 
     &::-webkit-scrollbar {
@@ -40,7 +44,7 @@
   .buttons {
     display: flex;
     justify-content: space-between;
-    width: 100px;
+    width: 120px;
 
     &.completedButtons {
       justify-content: flex-end;
@@ -78,6 +82,20 @@
           background: $green;
         }
       }
+      &.doing {
+        width: 30px;
+        background: no-repeat url("../img/right-arrow.svg");
+        &:after {
+          background: $green;
+        }
+      }
+      &.down {
+        width: 30px;
+        background: no-repeat url("../img/down-arrow.svg");
+        &:after {
+          background: $green;
+        }
+      }
       &:after {
         display: block;
         content: "";

src/components/ItemList.js

@@ -18,12 +18,19 @@ import alldone from "../img/alldone.svg";
 // List of todo items
 function ItemList() {
   const dispatch = useAppReducer();
-  const { pending, paused, completed } = useItems();
+  const { doing, pending, paused, completed } = useItems();
 
   return (
     <div className="item-list">
       <Progress />
       <AddItemForm />
+      {doing.length > 0 && (
+        <>
+          {doing.map(item => {
+            return <Item item={item} key={item.key} />;
+          })}
+        </>
+      )}
       {pending.length > 0 ? (
         <>
           {pending.map(item => {

src/hooks/useReminderNotification.js

@@ -23,22 +23,28 @@ function getTimeCondition(nd) {
 }
 
 export default function useReminderNotification() {
-  const { pending, paused } = useItems();
+  const { doing, pending, paused } = useItems();
+  let currentDoing = null;
+  if (doing.length) {
+    let first = doing[0];
+    currentDoing = first.text;
+  } 
 
   useEffect(() => {
     const interval = setInterval(() => {
       let nd = new Date();
 
       // sends a notification if reminder notifications are enabled,
       // and todos are not completed
-      if (getTimeCondition(nd) && (pending.length > 0 || paused.length > 0)) {
-        let text = `Don't forget, you have ${pending.length +
-          paused.length} tasks to do today (${pending.length} incomplete, ${
+      if (getTimeCondition(nd) && (doing.length > 0 || pending.length > 0 || paused.length > 0)) {
+        let totalRemaining = pending.length + paused.length
+        let doingReminder = doing.length > 0 ? `You need to complete "${currentDoing}" and then do ${totalRemaining} remaining tasks` : "";
+        let defaultText = `Don't forget, you have ${totalRemaining} tasks to do today (${pending.length} incomplete, ${
           paused.length
         } paused for later)`;
-
+        let textInUse = doing.length > 0 ? doingReminder : defaultText;
         new Notification("todometer reminder!", {
-          body: text
+          body: textInUse
         });
       }
     }, 1000);