1import { useContext } from "react";
2
3import { useNavigate } from "react-router";
4import { AppContext } from "@/ContextProvider";
5import PageTitle from "@/components/page-title";
6import { formatDate } from "@/utils";
7
8const Activites = () => {
9 const { state } = useContext(AppContext);
10 const navigate = useNavigate();
11 const completed = state.activities
12 .filter((a) => a.isCompleted)
13 .sort((a, b) => {
14 return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
15 });
16 const pending = state.activities
17 .filter((a) => !a.isCompleted)
18 .sort((a, b) => {
19 return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
20 });
21
22 const allActivities = [...pending, ...completed].map((a) => ({
23 id: a.id,
24 title: a.title,
25 friendCount: a.friends.length,
26 totalAmount: a.totalAmount,
27 splitPerPerson: a.splitPerPerson,
28 isCompleted: a.isCompleted,
29 createdAt: formatDate(a.createdAt),
30 }));
31
32 function handleEditClick(id) {
33 navigate(`/edit/${id}`);
34 }
35 function handleShareClick(id) {
36 navigate(`/share/${id}`);
37 }
38
39 return (
40 <>
41 <PageTitle title="activities" />
42
43 <h1>activities</h1>
44
45 {allActivities.map((a, idx) => (
46 <div
47 className={`activity-card ${
48 a.isCompleted ? "activity-card-completed" : ""
49 }`}
50 key={a.id}
51 >
52 <div className="d-flex flex-grow">
53 <div>
54 <p>{idx + 1}.</p>
55 </div>
56 <div>
57 <p>
58 {a.title} - {a.friendCount} <small>+ me</small>
59 </p>
60 <p>
61 <strong>₹{a.totalAmount}</strong> -{" "}
62 <small>₹{a.splitPerPerson} per person</small>
63 </p>
64 <p className="muted">
65 <small>{a.createdAt}</small>
66 </p>
67 </div>
68 </div>
69
70 <div className="d-flex" style={{ flexDirection: "column" }}>
71 <div className="h-100 b-l" style={{ paddingLeft: "3px" }}>
72 <button
73 className="btn btn-text h-100 nohover force-initial-color"
74 aria-label={`See details of ${a.title}`}
75 onClick={() => {
76 handleEditClick(a.id);
77 }}
78 title="edit"
79 >
80 ✍edit
81 </button>
82 </div>
83 <div className="h-100 b-l b-t" style={{ paddingLeft: "3px" }}>
84 <button
85 className="btn btn-text h-100 nohover force-initial-color"
86 title="share"
87 onClick={() => {
88 handleShareClick(a.id);
89 }}
90 >
91 ⠪share
92 </button>
93 </div>
94 </div>
95 </div>
96 ))}
97 </>
98 );
99};
100
101export default Activites;