This repository has been archived by the owner on Jan 20, 2024. It is now read-only.
/
mainView.tsx
124 lines (117 loc) · 4.52 KB
/
mainView.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import React from "react";
import { ThunkDispatch } from "redux-thunk";
import { connect } from "react-redux";
import { RouteComponentProps } from "react-router-dom";
import TaskList from "./components/taskList";
import { appHomePage } from "../const";
import { logout } from "../actions/auth";
import { refetchTasks, deleteTask } from "../actions/tasks";
import { AnyAction } from "../typings/actions";
import { Task } from "../typings/tasks";
import { Store } from "../typings/store";
import strings from "./assets/locales";
import "./styles/mainView.scss";
const mapStateToProps = (state: Store) => ({
tasks: state.task.tasks,
username: state.auth.username,
});
interface Props extends RouteComponentProps {
dispatch: ThunkDispatch<any, any, AnyAction>;
tasks: Task[];
username?: string;
}
interface State {
tasks: Task[];
search: string;
}
class MainView extends React.Component<Props, State> {
state = {
tasks: this.props.tasks,
search: "",
};
logout = () => this.props.dispatch(logout());
refetch = () => this.props.dispatch(refetchTasks(this.props.tasks));
prune = () => {
const danglingTasks = this.state.tasks.filter(
(task) =>
this.state.tasks.filter((child) => child.PID === task.ID)
.length === 0 && task.Completed
);
danglingTasks.forEach((task) => this.props.dispatch(deleteTask(task)));
};
updateSearch = (event: React.FormEvent<HTMLInputElement>) =>
this.setState({
search: event.currentTarget.value,
});
toNewTask = () => this.props.history.push("/task/new");
componentDidMount = () => this.refetch();
componentDidUpdate = (prevProps: Props) => {
if (prevProps.tasks !== this.props.tasks) {
this.setState({
tasks: this.props.tasks,
});
}
};
render = () => {
const { username } = this.props;
const { tasks, search } = this.state;
return (
<div className="root container">
<div className="navbar level">
<div className="headerText level-left level-item">
{`${strings.main_loggedInMsg} ${username}`}
</div>
{/* eslint-disable-next-line max-len */}
<div className="headerButtons level-right level-item level is-mobile">
<input
type="button"
className="addBtn button level-item"
value={strings.btns_addTask}
onClick={this.toNewTask}
/>
<input
type="button"
className="refetchBtn button level-item"
onClick={this.refetch}
value={strings.btns_refetch}
/>
<input
type="button"
className="pruneBtn button level-item"
onClick={this.prune}
value={strings.btns_pruneTasks}
/>
<input
type="button"
className="logoutBtn button level-item"
onClick={this.logout}
value={strings.main_logoutBtn}
/>
</div>
</div>
<div className="container">
<div className="field searchBox">
<div className="control">
<input
type="text"
className="input"
placeholder={strings.main_searchTp}
autoFocus
onChange={this.updateSearch}
/>
</div>
</div>
<TaskList tasks={tasks} search={search}></TaskList>
</div>
<div className="app_footer">
<div className="level">
<a className="level-item text link" href={appHomePage}>
{strings.app_versionString}
</a>
</div>
</div>
</div>
);
};
}
export default connect(mapStateToProps)(MainView);