added typing

src/components/Button.tsx

@@ -25,8 +25,8 @@ const StyledButton = styled.button`
 }
 `;
 
-const Button: React.FC<Props> = (props) => {
+const Button: React.FC<Props> = ({children, onClick}) => {
-  return <StyledButton onClick={props.onClick}>{props.children}</StyledButton>;
+  return <StyledButton onClick={onClick}>{children}</StyledButton>;
 };
 
 export default Button;

src/components/CreateTask.tsx

@@ -1,9 +1,10 @@
-import React, { ReactEventHandler, useState } from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
 import { connect } from "react-redux";
 import * as actions from "../store/actions/actions";
 import { withRouter } from "react-router-dom";
+import { RootState, TaddToDo } from "../types/types";
 import dayjs from "dayjs";
 
 const StyledTasks = styled.div`
@@ -26,7 +27,29 @@ const StyledTasks = styled.div`
   }
 `;
 
-const CreateTask = (props: any) => {
+interface CreateTaskPropTypes {
+  isAuth: boolean;
+  idToken: string;
+  userId: string;
+  addToDo: (
+    taskName: string,
+    taskDesc: string,
+    taskType: string,
+    isImportant: boolean,
+    date: string,
+    idToken: string,
+    userId: string
+  ) => void;
+  history: { push: Function };
+}
+
+const CreateTask: React.FC<CreateTaskPropTypes> = ({
+  isAuth,
+  idToken,
+  userId,
+  addToDo,
+  history,
+}: CreateTaskPropTypes) => {
   const [taskName, setTaskName] = useState<string>("");
   const [taskDesc, setTaskDesc] = useState<string>("");
   const [taskType, setTaskType] = useState<string>("bussiness");
@@ -35,27 +58,27 @@ const CreateTask = (props: any) => {
 
   const currDate = dayjs(new Date()).format("YYYY-MM-DD");
 
-  const addTaskHandler = () => {
+  const addTaskHandler = (): void => {
     const isValid = formValidator();
     if (isValid) {
-      if (props.isAuth) {
+      if (isAuth) {
-        props.addToDo(
+        addToDo(
           taskName,
           taskDesc,
           taskType,
           isImportant,
           date,
-          props.idToken,
+          idToken,
-          props.userId
+          userId
         );
         clearFormHandler();
       } else {
-        props.history.push("/login");
+        history.push("/login");
       }
     }
   };
 
-  const clearFormHandler = () => {
+  const clearFormHandler = (): void => {
     setTaskName("");
     setTaskDesc("");
     setTaskType("bussiness");
@@ -63,15 +86,17 @@ const CreateTask = (props: any) => {
     setDate("");
   };
 
-  const radioButtonsHandler = (type: string) => {
+  const radioButtonsHandler = (type: string): void => {
     setTaskType(type);
   };
 
-  const importantButtonsHandler = (e: any) => {
+  const importantButtonsHandler = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ): void => {
     if (e.target.value === "true") setIsImportant(true);
   };
 
-  const formValidator = () => {
+  const formValidator = (): true | undefined => {
     if (taskName.length > 1 && taskDesc.length > 1 && date.length > 1) {
       return true;
     } else {
@@ -83,7 +108,6 @@ const CreateTask = (props: any) => {
     <StyledTasks>
       <form>
         <h3>Create Task</h3>
-
         <div className="form-group">
           <label>Task Name</label>
           <input
@@ -94,7 +118,6 @@ const CreateTask = (props: any) => {
             onChange={(e) => setTaskName(e.target.value)}
           />
         </div>
-
         <div className="form-group">
           <label>Task Description</label>
           <textarea
@@ -105,7 +128,6 @@ const CreateTask = (props: any) => {
             onChange={(e) => setTaskDesc(e.target.value)}
           ></textarea>
         </div>
-
         <div className="form-check">
           <input
             className="form-check-input"
@@ -171,12 +193,6 @@ const CreateTask = (props: any) => {
   );
 };
 
-interface RootState {
-  isAuth: boolean;
-  idToken: string;
-  userId: string;
-}
-
 const mapStateToProps = (state: RootState) => {
   return {
     isAuth: state.isAuth,
@@ -202,7 +218,6 @@ const mapDispatchToProps = (dispatch: any) => {
   };
 };
 
-export default connect(
+export default withRouter(
-  mapStateToProps,
+  connect(mapStateToProps, mapDispatchToProps)(CreateTask)
-  mapDispatchToProps
+);
-)(withRouter(CreateTask));

src/components/Header.tsx

@@ -4,6 +4,7 @@ import { NavLink } from "react-router-dom";
 import Button from "./Button";
 import * as actions from "../store/actions/actions";
 import { connect } from "react-redux";
+import { RootState } from "../types/types";
 
 const StyledHeader = styled.div`
   height: 8%;
@@ -41,7 +42,7 @@ interface Props {
 
 const Header: React.FC<Props> = (props: Props) => {
 
-  const logoutHandler = ()=>{
+  const logoutHandler = (): void=>{
     props.isAuth && props.logout();
   }
 
@@ -67,10 +68,6 @@ const Header: React.FC<Props> = (props: Props) => {
   );
 };
 
-interface RootState {
-  isAuth: boolean;
-}
-
 const mapStateToProps = (state: RootState) => {
   return {
     isAuth: state.isAuth,

src/components/Login.tsx

@@ -4,6 +4,7 @@ import styled from "styled-components";
 import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
 import * as actions from "../store/actions/actions";
 import { Redirect } from "react-router-dom";
+import { RootState } from "../types/types";
 
 const StyledForm = styled.div`
   width: 100%;
@@ -89,11 +90,6 @@ const Login = (props: any) => {
   );
 };
 
-interface RootState {
-  isAuth: boolean;
-  redirectTo: string;
-}
-
 const mapStateToProps = (state: RootState) => {
   return {
     isAuth: state.isAuth,

src/components/SideDrawer.tsx

@@ -57,73 +57,53 @@ interface Props {
   close: () => void;
 }
 
-const SideDrawer = (props: Props) => {
+const SideDrawer: React.FC<Props> = ({ close }: Props) => (
-  return (
   <StyledSidedrawer>
     <ul>
       <li>
-          <NavLink to={process.env.PUBLIC_URL + "/all"} onClick={props.close}>
+        <NavLink to={process.env.PUBLIC_URL + "/all"} onClick={close}>
           <i className="fas fa-box-open"></i>
           <span>All</span>
         </NavLink>
       </li>
       <li>
-          <NavLink
+        <NavLink to={process.env.PUBLIC_URL + "/finished"} onClick={close}>
-            to={process.env.PUBLIC_URL + "/finished"}
-            onClick={props.close}
-          >
           <i className="fas fa-hourglass-end"></i>
           <span>Finished</span>
         </NavLink>
       </li>
       <li>
-          <NavLink
+        <NavLink to={process.env.PUBLIC_URL + "/current"} onClick={close}>
-            to={process.env.PUBLIC_URL + "/current"}
-            onClick={props.close}
-          >
           <i className="fas fa-stopwatch"></i>
           <span>On going</span>
         </NavLink>
       </li>
       <li>
-          <NavLink
+        <NavLink to={process.env.PUBLIC_URL + "/bussiness"} onClick={close}>
-            to={process.env.PUBLIC_URL + "/bussiness"}
-            onClick={props.close}
-          >
           <i className="fas fa-briefcase"></i>
           <span>Bussiness</span>
         </NavLink>
       </li>
       <li>
-          <NavLink
+        <NavLink to={process.env.PUBLIC_URL + "/personal"} onClick={close}>
-            to={process.env.PUBLIC_URL + "/personal"}
-            onClick={props.close}
-          >
           <i className="fas fa-lock"></i>
           <span>Personal</span>
         </NavLink>
       </li>
       <li>
-          <NavLink
+        <NavLink to={process.env.PUBLIC_URL + "/important"} onClick={close}>
-            to={process.env.PUBLIC_URL + "/important"}
-            onClick={props.close}
-          >
           <i className="fas fa-flag"></i>
           <span>Important</span>
         </NavLink>
       </li>
       <li>
-          <NavLink
+        <NavLink to={process.env.PUBLIC_URL + "/canceled"} onClick={close}>
-            to={process.env.PUBLIC_URL + "/canceled"}
-            onClick={props.close}
-          >
           <i className="fas fa-ban"></i>
           <span>Canceled</span>
         </NavLink>
       </li>
     </ul>
   </StyledSidedrawer>
-  );
+);
-};
 
 export default SideDrawer;

src/components/TodoList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import * as actions from "../store/actions/actions";
 import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
 import { connect } from "react-redux";
@@ -34,7 +34,7 @@ const TodoList = (props: any) => {
     props.isAuth && props.loadToDos(props.userId, props.idToken);
   }, []);
 
-  const taskType = props.match.path.substring(1);
+  const taskType = props.match.path.substring(1).toLowerCase();
 
   const finishTaskHandler = (hash: string, idToken: string) =>
     props.finishToDo(hash, idToken, props.todos);
@@ -82,7 +82,7 @@ const TodoList = (props: any) => {
             </div>
           </div>
         );
-      } else if (taskType === "all" && todo.isFinished === false) {
+      } else if (taskType === "all") {
         return (
           <div
             className="card bg-light"
@@ -242,7 +242,7 @@ const TodoList = (props: any) => {
         todo.isFinished === false &&
         (dayjs(new Date()).diff(todo.date) < 0 ||
           dayjs(new Date()).format("YYYY-MM-DD") === todo.date) &&
-        taskType === "current"
+        taskType === "current" && todo.isCanceled === false
       ) {
         return (
           <div
@@ -293,7 +293,7 @@ const TodoList = (props: any) => {
             </div>
           </div>
         );
-      } else if (todo.isCanceled === true && taskType === "Canceled") {
+      } else if (todo.isCanceled === true && taskType === "canceled") {
         return (
           <div
             className="card bg-light"

src/types/types.ts

@@ -0,0 +1,45 @@
+export interface RootState {
+  isAuth: boolean;
+  idToken: string;
+  userId: string;
+  redirectTo: string;
+  todos: Array<ToDoDTO>;
+  isLoading: boolean;
+}
+
+export interface dispatchToProps {
+  loadToDos: Function;
+  finishToDo: Function;
+  deleteToDo: Function;
+  cancelToDo: Function;
+}
+
+export interface ToDoDTO {
+  hash: string;
+  taskName: string;
+  taskDesc: string;
+  taskType: taskType;
+  isImportant: boolean;
+  date: string;
+  userId: string;
+  isFinished: boolean;
+  isCanceled: boolean;
+}
+
+type taskType = "bussiness" | "personal";
+
+export type TaddToDo = {
+  name: string;
+  desc: string;
+  type: string;
+  important: boolean;
+  date: string;
+  token: string;
+  userId: string;
+};
+
+type ActionAddToDo = {
+  type: "ADD_SUCCESS" | "ADD_FAIL";
+  error?: string;
+};
+export type Actions = ActionAddToDo;