Show most recent session first in list; group by day

Author: sedwards2009

frontend/package-lock.json

@@ -13,6 +13,7 @@
   "license": "MIT",
   "dependencies": {
     "classnames": "^2.3.2",
+    "just-group-by": "^2.2.0",
     "lodash": "^4.17.21",
     "raviger": "^4.1.2",
     "react": "^18.2.0",

frontend/package.json

@@ -55,16 +55,17 @@ export function Home({ modelOverview, presetOverview, sessionOverview, templateO
   return (
     <div className="top-layout">
       <div className="session-list">
-        <SessionOverviewList
-          sessionOverview={sessionOverview}
-          selectedSessionId={sessionId}
-        />
         <button
           className={classNames({"primary": !isCreatingSession})}
           disabled={isCreatingSession}
           onClick={onNewSessionClick}>
             {isCreatingSession ? "Creating session..." : "New Session" }
         </button>
+        <p></p>
+        <SessionOverviewList
+          sessionOverview={sessionOverview}
+          selectedSessionId={sessionId}
+        />
       </div>
       <div className="session-tab">
         <SessionEditor

frontend/src/home.tsx

@@ -1,36 +1,70 @@
 import classNames from "classnames";
 import { SessionOverview, SessionSummary } from "./data";
 import { navigate } from "raviger";
+import groupBy from "just-group-by";
+
 
 export interface Props {
   sessionOverview: SessionOverview;
   selectedSessionId: string | null;
 }
 
 export function SessionOverviewList({sessionOverview, selectedSessionId}: Props): JSX.Element {
-  const sessionSummaries = [...sessionOverview.sessionSummaries];
+  const groups = groupBy(sessionOverview.sessionSummaries, (summary: SessionSummary): string => {
+    return summary.creationTimestamp.substring(0, 10);
+  });
+  console.log(groups);
+
+  const groupNames = Object.getOwnPropertyNames(groups);
+  groupNames.sort().reverse();
+  return <>
+  {
+    groupNames.map((name) => formatGroup(groups[name], selectedSessionId))
+  }
+  </>;
+}
+
+function formatGroup(sessionSummaries: SessionSummary[], selectedSessionId: string | null): JSX.Element {
+  const sortedSessionSummaries = [...sessionSummaries];
   const cmp = (a: SessionSummary, b: SessionSummary) => {
-    if (a.creationTimestamp < b.creationTimestamp) {
+    if (a.creationTimestamp > b.creationTimestamp) {
       return -1;
     }
     return a.creationTimestamp === b.creationTimestamp ? 0 : 1;
   }
-  sessionSummaries.sort(cmp);
+  sortedSessionSummaries.sort(cmp);
+
+  const dateFormat = new Intl.DateTimeFormat("default", { dateStyle: "medium" });
+
+  const now = new Date();
+  const groupDay = new Date(Date.parse(sortedSessionSummaries[0].creationTimestamp));
+  const isToday = (now.getDay() === groupDay.getDay() &&
+    now.getMonth() === groupDay.getMonth() &&
+    now.getFullYear() === groupDay.getFullYear());
 
-  return <ul className="tabs">
+  return <>
     {
-      sessionSummaries.map(s => {
-        const onClick = () => {
-          navigate(`/session/${s.id}`);
-        };
-        return <li
-          key={s.id}
-          className={classNames({"tab": true, active: s.id === selectedSessionId})}
-          onClick={onClick}
-          >
-            {s.title}
-          </li>;
-      })
+      !isToday && <p className="minor">
+        {
+          dateFormat.format(Date.parse(sortedSessionSummaries[0].creationTimestamp))
+        }
+      </p>
     }
-  </ul>;
+    <ul className="tabs">
+      {
+        sortedSessionSummaries.map(s => {
+          const onClick = () => {
+            navigate(`/session/${s.id}`);
+          };
+          return <li
+            key={s.id}
+            className={classNames({"tab": true, active: s.id === selectedSessionId})}
+            onClick={onClick}
+            >
+              {s.title}
+            </li>;
+        })
+      }
+    </ul>
+  </>;
 }