Undo shortcut

package.json

@@ -63,5 +63,8 @@
   "peerDependencies": {
     "react": "^16.13.0",
     "react-dom": "^16.13.0"
+  },
+  "dependencies": {
+    "react-hot-keys": "^2.7.2"
   }
 }

src/components/Todo/Todo.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import {
@@ -13,6 +13,7 @@ import { Reorder } from "framer-motion";
 import { Item, TodoCompletedItem } from "./common";
 import { Form } from "./common/Todo/Form";
 import { TodoItem } from "./common/types";
+import { red } from "@material-ui/core/colors";
 
 const useStyles = makeStyles({
   accordion: {
@@ -36,17 +37,24 @@ export interface TodoAppProps {
   defaultItems?: TodoItem[];
   onChange: (items: TodoItem[]) => void;
 }
-
 function TodoApp(props: TodoAppProps) {
   const { defaultItems = [], onChange } = props;
   const [items, setItems] = useState<TodoItem[]>(defaultItems);
+  const [undo, setUndo] = useState<TodoItem[]>(defaultItems);
+  const [redo, setRedo] = useState<TodoItem[]>(defaultItems);
+
   const classes = useStyles();
   const setItemsCallback = (updatedItems: TodoItem[]) => {
+
     setItems(updatedItems);
     onChange(updatedItems);
+    setUndo(updatedItems)
   };
+
   const addItem = (item: TodoItem | TodoItem[]) => {
     const itemsCopy = [...items];
+
+
     if (Array.isArray(item)) {
       item.forEach((it) => {
         itemsCopy.unshift(it);
@@ -67,14 +75,37 @@ function TodoApp(props: TodoAppProps) {
         const item = todoItems.find((item) => item.uuid === itemKey);
         if (item) {
           currItems.push(item);
+
         }
         return currItems;
       },
       []
     );
     setItems([...updatedItems, ...completedItems]);
+
+
+  };
+  const handleKeyPress = (event: any) => {
+    if (`${event.key}` == 'z' && `${event.key.control}`) {
+
+
+      undo.splice(0, 1);
+      setItems(undo);
+    }
   };
 
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyPress);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
+
+
+
+
+
   return (
     <Container>
       <Form addItem={addItem} />
@@ -105,6 +136,7 @@ function TodoApp(props: TodoAppProps) {
           >
             <Typography> {completedItemsLength} Completed items </Typography>
           </AccordionSummary>
+
           <AccordionDetails className={classes.accordionDetails}>
             {items.map((item, index) => {
               return (
@@ -117,6 +149,7 @@ function TodoApp(props: TodoAppProps) {
               );
             })}
           </AccordionDetails>
+
         </Accordion>
       )}
     </Container>

src/components/Todo/common/Todo/Form/index.tsx

@@ -12,7 +12,7 @@ import { TodoItem } from "../../types";
 
 export interface AddProps {
   addItem: (item: TodoItem | TodoItem[]) => void;
-}
+} 
 
 const useStyles = makeStyles({
   root: {
@@ -26,15 +26,19 @@ const useStyles = makeStyles({
 
 export const Form = (props: AddProps) => {
   const classes = useStyles();
-  const { addItem } = props;
+  const { addItem } = props; 
   const [itemName, setItemName] = useState("");
 
+
+
   return (
     <Container className={classes.root}>
       <AddIcon className={classes.plusIcon} />
       <FormControl fullWidth>
         <TextField
           onPaste={(e) => {
+            console.log("past");
+
             // Stop data actually being pasted into div
             e.stopPropagation();
             e.preventDefault();
@@ -48,25 +52,27 @@ export const Form = (props: AddProps) => {
               .filter((name) => name.trim() !== "");
 
             // Do whatever with pasteddata
-            const items = pastedData.map((name) => {
+            const items = pastedData.map((name) => { 
               return { name, uuid: uuid(), isComplete: false };
             });
-            addItem(items);
+            addItem(items);  
+
           }}
-          onChange={(e) => {
+          onChange={(e) => {   
             addItem({
               name: e.target.value,
               uuid: uuid(),
               isComplete: false,
             });
-            setItemName("");
+            setItemName(""); 
           }}
           placeholder="Add item."
           value={itemName}
           className="w-10/12"
           autoFocus
-        />
+        /> 
       </FormControl>
+
     </Container>
   );
 };

src/components/Todo/common/Todo/Item/index.tsx

@@ -34,7 +34,7 @@ const useStyles = makeStyles({
   },
   closeIcon: {
     cursor: "pointer",
-     padding:"2px",
+    padding:"2px",
     '&:hover': {
       backgroundColor: "#b9b5b5",
       borderRadius: '50%', 
@@ -46,8 +46,7 @@ const useStyles = makeStyles({
     position: "relative",
     backgroundColor: "white",
   },
-});
-
+}); 
 interface Props {
   items: TodoItem[];
   itemIndex: number;
@@ -65,19 +64,19 @@ export const Item: FC<Props> = ({
   const y = useMotionValue(0);
   const boxShadow = useRaisedShadow(y);
   const classes = useStyles();
-
   const [itemText, setItemText] = useState("");
   const [draggable, setDraggable] = useState(false);
 
   useEffect(() => {
     items[itemIndex].name.length < 2 &&
       inputRef.current &&
       inputRef.current.focus();
-    setItemText(items[itemIndex].name);
+    setItemText(items[itemIndex].name); 
   }, []);
 
   if (!items[itemIndex].isComplete) {
     return (
+
       <Reorder.Item
         value={items[itemIndex]?.uuid}
         className={classes.reorderItem}
@@ -130,20 +129,21 @@ export const Item: FC<Props> = ({
               onBlur={() => {
                 setItemsCallback([...items]);
               }}
-              onKeyPress={(e) =>
+              onKeyPress={(e) =>{ 
                 e.key === "Enter" &&
                 itemIndex < 1 &&
-                addItem({ name: "", uuid: uuid(), isComplete: false })
+                addItem({ name: "", uuid: uuid(), isComplete: false })}
               }
             />
           </FormControl>
           <CloseIcon
             className={classes.closeIcon}
             onClick={() => {
+
               items.splice(itemIndex, 1);
-              setItemsCallback([...items]);
+              setItemsCallback([...items]); 
             }}
-          />
+          />   
         </Container>
       </Reorder.Item>
     );

yarn.lock

@@ -7050,6 +7050,11 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
+hotkeys-js@^3.8.1:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.10.0.tgz#2bbd13de4aa002fa916c34e3859239924311e35a"
+  integrity sha512-20xeVdOqcgTkMox0+BqFwADZP7+5dy/9CFPpAinSMh2d0s3b0Hs2V2D+lMh4Hphkf7VE9pwnOl58eP1te+REcg==
+
 html-encoding-sniffer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
@@ -10523,6 +10528,14 @@ react-helmet-async@^1.0.7:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
+react-hot-keys@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/react-hot-keys/-/react-hot-keys-2.7.2.tgz#7d2b02b7e2cf69182ea71ca01885446ebfae01d2"
+  integrity sha512-Z7eSh7SU6s52+zP+vkfFoNk0x4kgEmnwqDiyACKv53crK2AZ7FUaBLnf+vxLor3dvtId9murLmKOsrJeYgeHWw==
+  dependencies:
+    hotkeys-js "^3.8.1"
+    prop-types "^15.7.2"
+
 react-inspector@^5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-5.1.1.tgz#58476c78fde05d5055646ed8ec02030af42953c8"