Skip to content

Commit

Permalink
Merge pull request #24 from JohanGrims:optimization-sort-by-date
Browse files Browse the repository at this point in the history 
refactor(votes): sort votes by start time and include start/end times in state management
  • Loading branch information
@JohanGrims
JohanGrims authored Nov 8, 2024
2 parents 6c58de6 + 47539a1 commit 4ba2fc0
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 97 deletions.
86 changes: 55 additions & 31 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,20 @@ function App() {
{activeVotes.length < 1 && (
<mdui-list-item disabled>Keine Wahlen</mdui-list-item>
)}
{activeVotes.map((vote) => (
<mdui-list-item
key={vote.id}
href={`/${vote.id}`}
rounded
end-icon="arrow_forward"
>
{vote.title}
</mdui-list-item>
))}
{activeVotes
.sort((a, b) => {
return b.startTime.seconds - a.startTime.seconds;
})
.map((vote) => (
<mdui-list-item
key={vote.id}
href={`/${vote.id}`}
rounded
end-icon="arrow_forward"
>
{vote.title}
</mdui-list-item>
))}
<mdui-collapse>
<mdui-collapse-item value="scheduled-votes">
<mdui-list-item
Expand All @@ -53,15 +57,19 @@ function App() {
{scheduledVotes.length === 0 && (
<mdui-list-item disabled>Keine Wahlen</mdui-list-item>
)}
{scheduledVotes.map((e) => (
<mdui-list-item
rounded
href={`/${e.id}`}
end-icon="arrow_forward"
>
{e.title}
</mdui-list-item>
))}
{scheduledVotes
.sort((a, b) => {
return b.startTime.seconds - a.startTime.seconds;
})
.map((e) => (
<mdui-list-item
rounded
href={`/${e.id}`}
end-icon="arrow_forward"
>
{e.title}
</mdui-list-item>
))}
</>
</div>
</mdui-collapse-item>
Expand All @@ -80,15 +88,19 @@ function App() {
{expiredVotes.length === 0 && (
<mdui-list-item disabled>Keine Wahlen</mdui-list-item>
)}
{expiredVotes.map((e) => (
<mdui-list-item
rounded
href={`/${e.id}`}
end-icon="arrow_forward"
>
{e.title}
</mdui-list-item>
))}
{expiredVotes
.sort((a, b) => {
return b.startTime.seconds - a.startTime.seconds;
})
.map((e) => (
<mdui-list-item
rounded
href={`/${e.id}`}
end-icon="arrow_forward"
>
{e.title}
</mdui-list-item>
))}
</>
</div>
</mdui-collapse-item>
Expand Down Expand Up @@ -116,13 +128,25 @@ export async function loader() {

if (now.isAfter(startTime)) {
if (data.active && now.isBefore(endTime)) {
activeVotes.push({ id: e.id, title: data.title });
activeVotes.push({
id: e.id,
title: data.title,
startTime: data.startTime,
});
} else {
expiredVotes.push({ id: e.id, title: data.title });
expiredVotes.push({
id: e.id,
title: data.title,
startTime: data.startTime,
});
}
return;
}
scheduledVotes.push({ id: e.id, title: data.title });
scheduledVotes.push({
id: e.id,
title: data.title,
startTime: data.startTime,
});
});

return { activeVotes, expiredVotes, scheduledVotes };
Expand Down
52 changes: 28 additions & 24 deletions src/admin/Overview.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,31 +43,35 @@ export default function Overview() {
gap: "20px",
}}
>
{votes.map((vote) => {
const now = moment();
const startTime = moment.unix(vote.startTime.seconds);
const endTime = moment.unix(vote.endTime.seconds);
const isActive =
vote.active && endTime.isAfter(now) && startTime.isBefore(now);
{votes
.sort((a, b) => {
return b.startTime.seconds - a.startTime.seconds;
})
.map((vote) => {
const now = moment();
const startTime = moment.unix(vote.startTime.seconds);
const endTime = moment.unix(vote.endTime.seconds);
const isActive =
vote.active && endTime.isAfter(now) && startTime.isBefore(now);

return (
<mdui-card
key={vote.id}
variant="filled"
style={{ padding: "20px" }}
clickable
onClick={() => navigate(`/admin/${vote.id}`)}
>
<h3>{vote.title}</h3>
<p>
<mdui-icon
style={{ fontSize: "50px" }}
name={isActive ? "event_available" : "done_all"}
></mdui-icon>
</p>
</mdui-card>
);
})}
return (
<mdui-card
key={vote.id}
variant="filled"
style={{ padding: "20px" }}
clickable
onClick={() => navigate(`/admin/${vote.id}`)}
>
<h3>{vote.title}</h3>
<p>
<mdui-icon
style={{ fontSize: "50px" }}
name={isActive ? "event_available" : "done_all"}
></mdui-icon>
</p>
</mdui-card>
);
})}
<mdui-card
variant="outlined"
style={{ padding: "20px" }}
Expand Down
114 changes: 72 additions & 42 deletions src/admin/navigation/DrawerList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,18 +31,36 @@ export default function DrawerList() {
if (data.startTime.seconds * 1000 > Date.now()) {
setScheduledVotes((scheduledVotes) => [
...scheduledVotes,
{ id: e.id, title: data.title, version: data.version },
{
id: e.id,
title: data.title,
version: data.version,
startTime: data.startTime,
endTime: data.endTime,
},
]);
} else {
setActiveVotes((activeVotes) => [
...activeVotes,
{ id: e.id, title: data.title, version: data.version },
{
id: e.id,
title: data.title,
version: data.version,
startTime: data.startTime,
endTime: data.endTime,
},
]);
}
} else {
setExpiredVotes((expiredVotes) => [
...expiredVotes,
{ id: e.id, title: data.title, version: data.version },
{
id: e.id,
title: data.title,
version: data.version,
startTime: data.startTime,
endTime: data.endTime,
},
]);
}
});
Expand Down Expand Up @@ -124,19 +142,23 @@ export default function DrawerList() {
{activeVotes.length === 0 && (
<mdui-list-item disabled>Keine Wahlen</mdui-list-item>
)}
{activeVotes.map((e) => (
<mdui-tooltip
variant="rich"
headline="Wahl bearbeiten"
content="Bearbeiten Sie die Wahl, setzen Sie die Einstellungen und weisen Sie Schüler zu."
>
<DrawerItem
active={active === e.id}
title={e.title}
onCLick={() => navigate(`/admin/${e.id}`)}
/>
</mdui-tooltip>
))}
{activeVotes
.sort((a, b) => {
return b.startTime.seconds - a.startTime.seconds;
})
.map((e) => (
<mdui-tooltip
variant="rich"
headline="Wahl bearbeiten"
content="Bearbeiten Sie die Wahl, setzen Sie die Einstellungen und weisen Sie Schüler zu."
>
<DrawerItem
active={active === e.id}
title={e.title}
onCLick={() => navigate(`/admin/${e.id}`)}
/>
</mdui-tooltip>
))}
</>
)}
</div>
Expand All @@ -159,19 +181,23 @@ export default function DrawerList() {
{scheduledVotes.length === 0 && (
<mdui-list-item disabled>Keine Wahlen</mdui-list-item>
)}
{scheduledVotes.map((e) => (
<mdui-tooltip
variant="rich"
headline="Wahl bearbeiten"
content="Bearbeiten Sie die Wahl, setzen Sie die Einstellungen und weisen Sie Schüler zu."
>
<DrawerItem
active={active === e.id}
title={e.title}
onCLick={() => navigate(`/admin/${e.id}`)}
/>
</mdui-tooltip>
))}
{scheduledVotes
.sort((a, b) => {
return b.startTime.seconds - a.startTime.seconds;
})
.map((e) => (
<mdui-tooltip
variant="rich"
headline="Wahl bearbeiten"
content="Bearbeiten Sie die Wahl, setzen Sie die Einstellungen und weisen Sie Schüler zu."
>
<DrawerItem
active={active === e.id}
title={e.title}
onCLick={() => navigate(`/admin/${e.id}`)}
/>
</mdui-tooltip>
))}
</>
)}
</div>
Expand All @@ -194,19 +220,23 @@ export default function DrawerList() {
{expiredVotes.length === 0 && (
<mdui-list-item disabled>Keine Wahlen</mdui-list-item>
)}
{expiredVotes.map((e) => (
<mdui-tooltip
variant="rich"
headline="Wahl bearbeiten"
content="Bearbeiten Sie die Wahl, setzen Sie die Einstellungen und weisen Sie Schüler zu."
>
<DrawerItem
active={active === e.id}
title={e.title}
onCLick={() => navigate(`/admin/${e.id}`)}
/>
</mdui-tooltip>
))}
{expiredVotes
.sort((a, b) => {
return b.startTime.seconds - a.startTime.seconds;
})
.map((e) => (
<mdui-tooltip
variant="rich"
headline="Wahl bearbeiten"
content="Bearbeiten Sie die Wahl, setzen Sie die Einstellungen und weisen Sie Schüler zu."
>
<DrawerItem
active={active === e.id}
title={e.title}
onCLick={() => navigate(`/admin/${e.id}`)}
/>
</mdui-tooltip>
))}
</>
)}
</div>
Expand Down

0 comments on commit 4ba2fc0

Please sign in to comment.