feat: add new task working with backend

santi4o · Mar 18, 2023 · b0f7956 · b0f7956
1 parent ca30a59
commit b0f7956
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 16 deletions.
diff --git a/src/components/NewTaskModal.jsx b/src/components/NewTaskModal.jsx
@@ -4,32 +4,68 @@ import Modal from "./shared/Modal";
 import InputTextFloatingLabel from "./shared/InputTextFloatingLabel";
 import InputSelect from "./shared/InputSelect";
 import Button from "./shared/Button";
-import { useState, useRef } from "react";
+import { useState, useRef, useContext } from "react";
 import { PRIORITIES } from "../config/priorities";
+import TasksContext from "../store/tasks-context";
+import LayoutContext from "../store/layout-context";
 
 function NewTaskForm() {
   const [dueDate, setDueDate] = useState({
     startDate: null,
     endDate: null,
   });
 
-  const nameInputRef = useRef();
+  const [clickedAdd, setClickedAdd] = useState(false);
+
   const prioritySelectRef = useRef();
+  const nameInputRef = useRef();
+
+  const tasksContext = useContext(TasksContext);
+  const layoutContext = useContext(LayoutContext);
 
   function handleDueDateChange(newValue) {
-    console.log("newValue:", newValue);
     setDueDate(newValue);
   }
 
+  function handleNameChange() {
+    if (!clickedAdd) {
+      return;
+    } else if (nameInputRef.current.value) {
+      nameInputRef.current.className =
+        "block rounded-md w-full py-2.5 pr-2 text-sm text-gray-900 bg-gray-50 border border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-black focus:border-black placeholder-transparent focus:placeholder-gray-500 peer";
+    } else {
+      nameInputRef.current.className =
+        "block rounded-md w-full py-2.5 pr-2 text-sm text-gray-900 bg-gray-50 border border-red-500 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-red-500 focus:border-red-500 placeholder-transparent focus:placeholder-gray-500 peer";
+    }
+  }
+
   function handleAddTask() {
-    console.log(nameInputRef.current.value);
-    console.log(prioritySelectRef.current.value);
-    console.log(dueDate);
+    if (!nameInputRef.current.value) {
+      nameInputRef.current.focus();
+      nameInputRef.current.className =
+        "block rounded-md w-full py-2.5 pr-2 text-sm text-gray-900 bg-gray-50 border border-red-500 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-red-500 focus:border-red-500 placeholder-transparent focus:placeholder-gray-500 peer";
+
+      setClickedAdd(true);
+      return;
+    }
+    tasksContext.addTask({
+      text: nameInputRef.current.value,
+      priority: prioritySelectRef.current.value,
+      dueDate: dueDate.startDate
+        ? new Date(dueDate.startDate).toISOString().replace("Z", "CST")
+        : null,
+    });
+    layoutContext.setShowNewTaskModal(false);
   }
 
   return (
     <div className="flex flex-col">
-      <InputTextFloatingLabel myRef={nameInputRef} label="Name" placeholder="A magic To-Do 🌟" />
+      <InputTextFloatingLabel
+        myRef={nameInputRef}
+        onChange={handleNameChange}
+        label="Name"
+        placeholder="A magic To-Do 🌟"
+      />
       <div className="flex mt-4 items-end justify-start">
         <div className="flex flex-col mr-2">
           <InputSelect
@@ -68,14 +104,11 @@ function NewTaskForm() {
 }
 
 export default function NewTaskModal() {
-  function handleSave() {
-    console.log("this task will be saved, i promise");
-  }
   return (
     <>
       {ReactDOM.createPortal(
         <Modal title="Add new To-Do">
-          <NewTaskForm onSave={handleSave} />
+          <NewTaskForm />
         </Modal>,
         document.getElementById("modal-root")
       )}

diff --git a/src/components/shared/InputTextFloatingLabel.jsx b/src/components/shared/InputTextFloatingLabel.jsx
@@ -2,7 +2,8 @@ export default function InputTextFloatingLabel({
   label,
   placeholder,
   iconPath,
-  myRef
+  myRef,
+  onChange
 }) {
   return (
     <div className="relative z-0 group">
@@ -25,6 +26,7 @@ export default function InputTextFloatingLabel({
         name="floating-label-input"
         id="floating-label-input"
         ref={myRef}
+        onChange={onChange}
         className={
           (iconPath ? "pl-10 " : " ") +
           "block rounded-md w-full py-2.5 pr-2 text-sm text-gray-900 bg-gray-50 border border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-black focus:border-black placeholder-transparent focus:placeholder-gray-500 peer"

diff --git a/src/store/TasksProvider.jsx b/src/store/TasksProvider.jsx
@@ -78,13 +78,20 @@ export default function TasksProvider({ children }) {
     2: "DESC",
   };
 
-  function addTaskHandler(task) {}
   function removeTaskHandler(id) {}
   function updateTaskHandler(id) {}
 
   useEffect(() => {
+    fetchData();
+  }, [
+    tasksState.sorting,
+    tasksState.page,
+    tasksState.filters,
+  ]);
+
+  function fetchData() {
     console.log("fetching data...");
-    console.log(tasksState.filters);
+    // console.log(tasksState.filters);
     let sortingQueryParams = "&sorting=";
 
     tasksContext.sorting.forEach((by, i) => {
@@ -122,7 +129,7 @@ export default function TasksProvider({ children }) {
           totalPages: data.totalPages,
         });
       });
-  }, [tasksState.sorting, tasksState.page, tasksState.filters]);
+  }
 
   function handlePageChange(page) {
     if (page < 0 || page >= tasksState.totalPages) {
@@ -141,13 +148,33 @@ export default function TasksProvider({ children }) {
     dispatchTasksAction({ type: "UPDATE_FILTERS", filters });
   }
 
+  function handleAddTask(task) {
+    let urlReq = "http://localhost:8080/todos";
+    // console.log(task.dueDate);
+    fetch(urlReq, {
+      method: "POST",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(task),
+    })
+      .then((response) => {
+        return response.json();
+      })
+      .then((data) => {
+        // console.log(data);
+        fetchData();
+      });
+  }
+
   const tasksContext = {
     list: tasksState.list,
     page: tasksState.page,
     totalPages: tasksState.totalPages,
     sorting: tasksState.sorting,
     filters: tasksState.filters,
-    addTask: addTaskHandler,
+    addTask: handleAddTask,
     removeTask: removeTaskHandler,
     updateTask: updateTaskHandler,
     changePage: handlePageChange,