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
|
import React, { useEffect } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { useDispatch } from "react-redux";
import { actions, useTypedSelector } from "./store";
import { Link } from "react-router-dom";
import humanizeDuration from "humanize-duration";
import type { Task, Habit } from "./store";
const days = [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
];
const postItColor = "yellow";
const PostIt = (props: { day: number; tasks: Task[] }) => (
<div className={`bg-${postItColor}-300 mr-2 mb-2 w-1/5 px-4 pb-4`}>
<h2 className="text-center py-4">{days[props.day]}</h2>
{props.tasks.map((task) => (
<ol key={task.label}>
<li className="py-2">
<span className={`text-${postItColor}-600 pr-2`}>
[{humanizeDuration(task.duration)}]
</span>
{task.label}
</li>
</ol>
))}
</div>
);
const App: React.FC = () => {
const dispatch = useDispatch();
const { isLoading, habits } = useTypedSelector((state) => ({
isLoading: state.isLoading,
habits: state.habits,
}));
return (
<Router>
<Switch>
<Route exact path="/">
<div className="mx-auto font-mono">
<h1 className="text-center my-8">Habits</h1>
<ol className="flex">
{habits.map((habit) => (
<PostIt key={habit.day} day={habit.day} tasks={habit.tasks} />
))}
</ol>
</div>
</Route>
</Switch>
</Router>
);
};
export default App;
|
