Skip to content

Commit ce8cde0

Browse files
♻️ Simplify landing page
1 parent 25d898d commit ce8cde0

File tree

2 files changed

+54
-44
lines changed

2 files changed

+54
-44
lines changed

frontend/src/components/KanbanCard/KanbanCard.css

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
display: flex;
33
flex-direction: column;
44
text-decoration: none;
5+
width: 100%;
56
}
67

78
.kanban-card__days-download {

frontend/src/pages/landing/Landing.tsx

+53-44
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { KanbanTemplate } from "@maykin-ui/admin-ui";
1+
import { AttributeData, FieldSet, KanbanTemplate } from "@maykin-ui/admin-ui";
22
import { useLoaderData } from "react-router-dom";
33

44
import { KanbanCard } from "../../components/KanbanCard/KanbanCard";
55
import {
66
DestructionList,
77
listDestructionLists,
88
} from "../../lib/api/destructionLists";
9-
import { deslugify, timeAgo } from "../../lib/string";
9+
import { timeAgo } from "../../lib/string";
1010
import "./Landing.css";
1111

1212
const STATUS_LABELS: { [key: string]: string } = {
@@ -15,70 +15,79 @@ const STATUS_LABELS: { [key: string]: string } = {
1515
completed: "Completed",
1616
};
1717

18-
const STATUSES = ["pending", "in_progress", "completed"];
18+
const STATUSES: FieldSet[] = [
19+
[
20+
STATUS_LABELS.pending,
21+
{
22+
fields: [],
23+
component: KanbanCard,
24+
},
25+
],
26+
[
27+
STATUS_LABELS.in_progress,
28+
{
29+
fields: [],
30+
component: KanbanCard,
31+
},
32+
],
33+
[
34+
STATUS_LABELS.completed,
35+
{
36+
fields: [],
37+
component: KanbanCard,
38+
},
39+
],
40+
];
1941

2042
interface LandingLoaderReturn {
2143
[key: string]: DestructionList[];
2244
}
2345

2446
export const landingLoader = async (): Promise<LandingLoaderReturn> => {
2547
const lists = await listDestructionLists();
26-
const statusMap: LandingLoaderReturn = {};
2748

2849
// Initialize statusMap with empty arrays for each status
29-
STATUSES.forEach((status) => {
30-
statusMap[status] = [];
31-
});
32-
33-
lists.forEach((list) => {
34-
if (!statusMap[list.status]) {
35-
statusMap[list.status] = [];
36-
}
37-
statusMap[list.status].push(list);
38-
});
50+
const statusMap = STATUSES.reduce((acc, val) => {
51+
const status = val[0] || "";
52+
const destructionLists = lists.filter(
53+
(l) => STATUS_LABELS[l.status] === status,
54+
);
55+
return { ...acc, [status]: destructionLists };
56+
}, {});
3957

4058
return statusMap;
4159
};
4260

4361
export const Landing = () => {
4462
const lists = useLoaderData() as LandingLoaderReturn;
4563

46-
const constructComponentList = (lists: DestructionList[]) => {
47-
const constructAssigneeNames = (
48-
assignees: DestructionList["assignees"],
49-
) => {
50-
const sortedAssignees = assignees.sort((a, b) => a.order - b.order);
51-
const getName = (assignee: DestructionList["assignees"][0]["user"]) =>
52-
// If there's a first and last name, return the full name otherwise we return the username
53-
assignee.firstName && assignee.lastName
54-
? `${assignee.firstName} ${assignee.lastName} (${assignee.role.name})`
55-
: `${assignee.username} (${assignee.role.name})`;
56-
return sortedAssignees.map((assignee) => getName(assignee.user));
57-
};
58-
59-
return lists.map((list) => ({
60-
id: list.name,
61-
content: (
62-
<KanbanCard
63-
title={list.name}
64-
days={timeAgo(list.created)}
65-
assigneeNames={constructAssigneeNames(list.assignees)}
66-
href={`/destruction-list/${list.name}`}
67-
key={list.name}
68-
/>
69-
),
70-
}));
64+
const constructAssigneeNames = (assignees: DestructionList["assignees"]) => {
65+
const sortedAssignees = assignees.sort((a, b) => a.order - b.order);
66+
const getName = (assignee: DestructionList["assignees"][0]["user"]) =>
67+
// If there's a first and last name, return the full name otherwise we return the username
68+
assignee.firstName && assignee.lastName
69+
? `${assignee.firstName} ${assignee.lastName} (${assignee.role.name})`
70+
: `${assignee.username} (${assignee.role.name})`;
71+
return sortedAssignees.map((assignee) => getName(assignee.user));
7172
};
7273

74+
const objectLists = Object.values(lists).map((lists) =>
75+
lists.map((list) => ({
76+
key: list.name,
77+
title: list.name,
78+
days: timeAgo(list.created),
79+
assigneeNames: constructAssigneeNames(list.assignees),
80+
href: `/destruction-list/${list.name}`,
81+
})),
82+
) as unknown as AttributeData[][];
83+
7384
return (
7485
<KanbanTemplate
7586
kanbanProps={{
87+
draggable: false,
7688
title: "Landing Page",
77-
componentList: STATUSES.map((status) => ({
78-
title: STATUS_LABELS[status] || deslugify(status),
79-
id: status,
80-
items: constructComponentList(lists[status] || []),
81-
})),
89+
fieldsets: STATUSES,
90+
objectLists: objectLists,
8291
}}
8392
/>
8493
);

0 commit comments

Comments
 (0)