s449311/todo-list
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added typing

Browse Source
This commit is contained in:
Tomasz Kasprowicz 2020-12-26 16:07:07 +01:00
parent 4a0d62d419
commit 6a012686ce
7 changed files with 143 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Button.tsx
View File

@ -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; export default Button;

65
src/components/CreateTask.tsx
View File

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

7
src/components/Header.tsx
View File

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

6
src/components/Login.tsx
View File

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

116
src/components/SideDrawer.tsx
View File

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

10
src/components/TodoList.tsx
View File

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

45
src/types/types.ts Normal file
View File

@ -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;