From 47539a1897c3f2db81c00db14a804e588cc9cdff Mon Sep 17 00:00:00 2001
From: JohanGrims <johan.grimsehl@gmail.com>
Date: Fri, 8 Nov 2024 22:00:27 +0100
Subject: [PATCH] refactor(votes): sort votes by start time and include
 start/end times in state management

---
 src/App.jsx                         |  86 +++++++++++++--------
 src/admin/Overview.jsx              |  52 +++++++------
 src/admin/navigation/DrawerList.jsx | 114 ++++++++++++++++++----------
 3 files changed, 155 insertions(+), 97 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index f288602..de41488 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -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
@@ -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>
@@ -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>
@@ -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 };
diff --git a/src/admin/Overview.jsx b/src/admin/Overview.jsx
index 234623e..5957fab 100644
--- a/src/admin/Overview.jsx
+++ b/src/admin/Overview.jsx
@@ -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" }}
diff --git a/src/admin/navigation/DrawerList.jsx b/src/admin/navigation/DrawerList.jsx
index 84d6322..a7b6f52 100644
--- a/src/admin/navigation/DrawerList.jsx
+++ b/src/admin/navigation/DrawerList.jsx
@@ -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,
+              },
             ]);
           }
         });
@@ -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>
@@ -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>
@@ -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>