fixed paths in todo list

src/components/TodoList.tsx

@@ -22,7 +22,7 @@ const TodosStyled = styled.div`
   height: 92%;
   overflow: scroll;
   justify-content: center;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
   .description {
     height: 100px;
     overflow: scroll;
@@ -34,7 +34,7 @@ const TodoList = (props: any) => {
     props.isAuth && props.loadToDos(props.userId, props.idToken);
   }, []);
 
-  const taskType = props.match.path.substring(1).toLowerCase();
+  const taskType = props.match.path.substring(11).toLowerCase();
 
   const finishTaskHandler = (hash: string, idToken: string) =>
     props.finishToDo(hash, idToken, props.todos);
@@ -48,41 +48,7 @@ const TodoList = (props: any) => {
   let cards = [];
   if (props.isLoading === false && props.isAuth === true) {
     cards = props.todos.map((todo: TODOtype) => {
-      if (taskType === "finished" && todo.isFinished === true) {
+     if (taskType === "all") {
-        return (
-          <div
-            className="card bg-light"
-            style={{ height: "min-content" }}
-            key={todo.hash}
-          >
-            <div className="card-header">End Date: {todo.date}</div>
-            <div className="card-body">
-              <h5 className="card-title">Title: {todo.taskName}</h5>
-              <p className="card-text description">
-                Description: {todo.taskDesc}
-              </p>
-              <hr />
-              <p className="card-text">
-                Important:{" "}
-                {todo.isImportant ? (
-                  <input type="checkbox" readOnly checked />
-                ) : (
-                  <input type="checkbox" readOnly checked={false} />
-                )}
-              </p>
-              <hr />
-              <p className="card-text">type: {todo.taskType}</p>
-              <button
-                type="button"
-                className="btn btn-danger"
-                onClick={() => deleteTaskHandler(todo.hash, props.idToken)}
-              >
-                Delete <i className="fas fa-trash"></i>
-              </button>
-            </div>
-          </div>
-        );
-      } else if (taskType === "all") {
         return (
           <div
             className="card bg-light"
@@ -134,6 +100,41 @@ const TodoList = (props: any) => {
             </div>
           </div>
         );
+      }
+      else if (taskType === "finished" && todo.isFinished === true) {
+        return (
+          <div
+            className="card bg-light"
+            style={{ height: "min-content" }}
+            key={todo.hash}
+          >
+            <div className="card-header">End Date: {todo.date}</div>
+            <div className="card-body">
+              <h5 className="card-title">Title: {todo.taskName}</h5>
+              <p className="card-text description">
+                Description: {todo.taskDesc}
+              </p>
+              <hr />
+              <p className="card-text">
+                Important:{" "}
+                {todo.isImportant ? (
+                  <input type="checkbox" readOnly checked />
+                ) : (
+                  <input type="checkbox" readOnly checked={false} />
+                )}
+              </p>
+              <hr />
+              <p className="card-text">type: {todo.taskType}</p>
+              <button
+                type="button"
+                className="btn btn-danger"
+                onClick={() => deleteTaskHandler(todo.hash, props.idToken)}
+              >
+                Delete <i className="fas fa-trash"></i>
+              </button>
+            </div>
+          </div>
+        );
       } else if (todo.taskType === taskType && todo.isFinished === false) {
         return (
           <div

src/store/reducers/reducer.ts

@@ -1,5 +1,4 @@
 import * as actionType from "../actions/actionTypes";
-import produce from "immer";
 
 const initialState = {
   isLoading: true,