added typing

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

View File

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

View File

@ -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) {
props.addToDo(
if (isAuth) {
addToDo(
taskName,
taskDesc,
taskType,
isImportant,
date,
props.idToken,
props.userId
idToken,
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(
mapStateToProps,
mapDispatchToProps
)(withRouter(CreateTask));
export default withRouter(
connect(mapStateToProps, mapDispatchToProps)(CreateTask)
);

View File

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

View File

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

View File

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

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 "../../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"

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;