add onDone funtion

khoirxz · Aug 1, 2022 · 9df69bd · 9df69bd
1 parent 1bc8fa0
commit 9df69bd
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "framer-motion": "^6",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",

diff --git a/src/App.js b/src/App.js
@@ -20,33 +20,36 @@ function App() {
     <Box className="App" fontFamily="Segoe UI">
       <Navbar />
       <CustomContainer>
-        <Box>
-          <Heading fontSize="20px" fontWeight="semibold">
-            Daftar kegiatanmu 📝
-          </Heading>
-        </Box>
+        <Box mx={{ base: 3, lg: 1 }}>
+          <Box>
+            <Heading fontSize="20px" fontWeight="semibold">
+              Daftar kegiatanmu 📝
+            </Heading>
+          </Box>
 
-        <Flex justifyContent="flex-end">
-          <Button onClick={onOpen} colorScheme="whatsapp">
-            Tambah
-          </Button>
-          <FormInput isOpen={isOpen} onClose={onClose} />
-        </Flex>
+          <Flex justifyContent="flex-end">
+            <Button onClick={onOpen} colorScheme="whatsapp">
+              Tambah
+            </Button>
+            <FormInput isOpen={isOpen} onClose={onClose} />
+          </Flex>
 
-        <Box>
-          {todos.length === 0 ? (
-            <Text textAlign="center">No data</Text>
-          ) : (
-            todos.map((items) => (
-              <ListItem
-                onOpen={onOpen}
-                key={items.id}
-                id={items.id}
-                title={items.title}
-                description={items.description}
-              />
-            ))
-          )}
+          <Box>
+            {todos.length === 0 ? (
+              <Text textAlign="center">No data</Text>
+            ) : (
+              todos.map((items) => (
+                <ListItem
+                  onOpen={onOpen}
+                  key={items.id}
+                  id={items.id}
+                  title={items.title}
+                  description={items.description}
+                  onComplete={items.onComplete}
+                />
+              ))
+            )}
+          </Box>
         </Box>
       </CustomContainer>
     </Box>

diff --git a/src/ContextContainer.js b/src/ContextContainer.js
@@ -6,6 +6,8 @@ export const DataListProvider = ({ children }) => {
   const [todo, setTodo] = useState({
     title: "",
     description: "",
+    onCreate: new Date().toISOString(),
+    onComplete: false,
   });
 
   const [todos, setTodos] = useState(() => {
@@ -22,6 +24,16 @@ export const DataListProvider = ({ children }) => {
     localStorage.setItem("todos", JSON.stringify(todos));
   }, [todos]);
 
+  const handleOnDone = (id) => {
+    const onDone = todos.map((items) => {
+      return items.id === id
+        ? { ...items, onComplete: items.onComplete ? false : true }
+        : items;
+    });
+
+    setTodos(onDone);
+  };
+
   const handleDelete = (id) => {
     const removeItem = todos.filter((todo) => {
       return todo.id !== id;
@@ -39,6 +51,7 @@ export const DataListProvider = ({ children }) => {
         setTodo,
         todos,
         setTodos,
+        handleOnDone,
         handleDelete,
         isEditing,
         setIsEditing,

diff --git a/src/components/Molecules/FormInput/index.js b/src/components/Molecules/FormInput/index.js
@@ -34,7 +34,7 @@ const FormInput = ({ isOpen, onClose }) => {
         setTodos(newTodos);
 
         toast({
-          title: `${todo.title} dibuat`,
+          title: `${todo.title} diedit`,
           status: "warning",
           duration: 9000,
           isClosable: true,
@@ -66,18 +66,22 @@ const FormInput = ({ isOpen, onClose }) => {
           position: "top-right",
         });
 
-        setTodo({
-          title: "",
-          description: "",
-        });
+        setTodo([]);
       }
     }
   };
 
-  console.log(todo.title);
+  console.log(todo);
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <Modal
+      isOpen={isOpen}
+      onClose={() => {
+        setTodo([]);
+        setIsEditing(false);
+        onClose();
+      }}
+    >
       <ModalOverlay />
       <ModalContent as="form" onSubmit={handSubmit}>
         <ModalHeader>Buat kegiatan ⚽</ModalHeader>

diff --git a/src/components/Molecules/ListItem/index.js b/src/components/Molecules/ListItem/index.js
@@ -10,23 +10,49 @@ import {
   MenuButton,
   MenuList,
   MenuItem,
+  Badge,
 } from "@chakra-ui/react";
-import { BiDotsHorizontalRounded } from "react-icons/bi";
+import { BiDotsHorizontalRounded, BiTime } from "react-icons/bi";
+import moment from "moment";
+
 import DataListContext from "../../../ContextContainer";
 
-const ListItem = ({ id, title, description, onOpen }) => {
-  const { handleDelete, setTodo, setIsEditing } = useContext(DataListContext);
+const ListItem = ({ id, title, description, onCreate, onOpen, onComplete }) => {
+  const { handleOnDone, handleDelete, todos, setTodo, setIsEditing } =
+    useContext(DataListContext);
 
   return (
     <Box my="10">
-      <Flex flexDir="row" justifyContent="space-between">
-        <Box>
+      <Flex flexDir="row" justifyContent="space-between" cursor="pointer">
+        <Box width="full">
           <Heading fontSize="20px" fontWeight="semibold" mb="1">
             {title}
           </Heading>
+
           <Text fontFamily="12px" fontWeight="thin" color="gray.500">
             {description}
           </Text>
+          <Flex mt="2">
+            <Badge
+              display="flex"
+              alignItems="center"
+              variant="outline"
+              p={1}
+              mr={1}
+            >
+              <BiTime size={18} style={{ marginRight: "0.5rem" }} />
+              {moment(onCreate).format("L")}
+            </Badge>
+            <Badge
+              display="flex"
+              alignItems="center"
+              variant="outline"
+              p={1}
+              colorScheme={onComplete ? "green" : "yellow"}
+            >
+              {onComplete ? "Selesai" : "Dikerjakan"}
+            </Badge>
+          </Flex>
         </Box>
 
         <Box>
@@ -38,21 +64,31 @@ const ListItem = ({ id, title, description, onOpen }) => {
             </MenuButton>
 
             <MenuList>
+              <MenuItem
+                color="green.600"
+                onClick={() => {
+                  handleOnDone(id);
+                }}
+              >
+                {onComplete ? "Batalkan" : "Selesai"}
+              </MenuItem>
+              <Divider />
               <MenuItem
                 onClick={() => {
-                  setTodo({
-                    id: id,
-                    title: title,
-                    description: description,
-                    onUpdate: new Date().toISOString(),
+                  const newData = todos.find((i) => {
+                    return i.id === id;
                   });
+                  setTodo({ ...newData, onUpdate: new Date().toISOString() });
+
                   onOpen();
                   setIsEditing(true);
                 }}
               >
                 Edit
               </MenuItem>
-              <MenuItem onClick={() => handleDelete(id)}>Delete</MenuItem>
+              <MenuItem color="red.600" onClick={() => handleDelete(id)}>
+                Delete
+              </MenuItem>
             </MenuList>
           </Menu>
         </Box>

diff --git a/src/components/Molecules/ModalComplete/index.js b/src/components/Molecules/ModalComplete/index.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const ModalComplete = () => {
+  return <div>ModalComplete</div>;
+};
+
+export default ModalComplete;
diff --git a/yarn.lock b/yarn.lock
@@ -6894,6 +6894,11 @@ mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"