feat(client): redirect home after adding or editing an event

benji6 · Jul 1, 2024 · a035602 · a035602
1 parent d2dad4d
commit a035602
Show file tree

Hide file tree

Showing 27 changed files with 606 additions and 553 deletions.
diff --git a/client/cypress/e2e/leg-raises.cy.ts b/client/cypress/e2e/leg-raises.cy.ts
@@ -59,7 +59,7 @@ describe("leg raises", () => {
       cy.get(SELECTORS.legRaisesValueInput).type(testValue);
       const expectedTime = Math.round(Date.now() / 1e3);
       cy.get(SELECTORS.eventAddSubmitButton).click();
-      cy.location("pathname").should("equal", "/leg-raises/log");
+      cy.location("pathname").should("equal", "/");
       cy.get(SELECTORS.eventCardValue)
         .first()
         .should("have.text", `${testValue} leg raises`);
@@ -72,7 +72,7 @@ describe("leg raises", () => {
 
     it("works with 1 leg raise", () => {
       cy.get(SELECTORS.legRaisesValueInput).type("1{enter}");
-      cy.location("pathname").should("equal", "/leg-raises/log");
+      cy.location("pathname").should("equal", "/");
       cy.get(SELECTORS.eventCardValue)
         .first()
         .should("have.text", "1 leg raise");

diff --git a/client/cypress/e2e/push-ups.cy.ts b/client/cypress/e2e/push-ups.cy.ts
@@ -59,7 +59,7 @@ describe("push-ups", () => {
       cy.get(SELECTORS.pushUpsValueInput).type(testValue);
       const expectedTime = Math.round(Date.now() / 1e3);
       cy.get(SELECTORS.eventAddSubmitButton).click();
-      cy.location("pathname").should("equal", "/push-ups/log");
+      cy.location("pathname").should("equal", "/");
       cy.get(SELECTORS.eventCardValue)
         .first()
         .should("have.text", `${testValue} push-ups`);
@@ -72,7 +72,7 @@ describe("push-ups", () => {
 
     it("works with 1 push-up", () => {
       cy.get(SELECTORS.pushUpsValueInput).type("1{enter}");
-      cy.location("pathname").should("equal", "/push-ups/log");
+      cy.location("pathname").should("equal", "/");
       cy.get(SELECTORS.eventCardValue).first().should("have.text", "1 push-up");
     });
   });

diff --git a/client/cypress/e2e/run.cy.ts b/client/cypress/e2e/run.cy.ts
@@ -44,23 +44,23 @@ describe("run", () => {
 
     it("works when only provided with distance", () => {
       cy.get(SELECTORS.runMetersInput).type("1234{enter}");
-      cy.location("pathname").should("equal", "/runs/log");
+      cy.location("pathname").should("equal", "/");
       cy.get(SELECTORS.runCardDistance).first().should("have.text", "1.2 km");
     });
 
     it("works when only provided with time", () => {
       cy.get(SELECTORS.runMinutesInput).select("9");
       cy.get(SELECTORS.runSecondsInput).select("30");
       cy.get(SELECTORS.eventAddSubmitButton).click();
-      cy.location("pathname").should("equal", "/runs/log");
+      cy.location("pathname").should("equal", "/");
       cy.get(SELECTORS.runCardTime).first().should("have.text", "09:30");
     });
 
     it("works when provided with both distance and time", () => {
       cy.get(SELECTORS.runMetersInput).type("123");
       cy.get(SELECTORS.runMinutesInput).select("10");
       cy.get(SELECTORS.eventAddSubmitButton).click();
-      cy.location("pathname").should("equal", "/runs/log");
+      cy.location("pathname").should("equal", "/");
       cy.get(SELECTORS.runCardDistance).first().should("have.text", "123 m");
       cy.get(SELECTORS.runCardTime).first().should("have.text", "10:00");
     });

diff --git a/client/cypress/e2e/sit-ups.cy.ts b/client/cypress/e2e/sit-ups.cy.ts
@@ -59,7 +59,7 @@ describe("sit-ups", () => {
       cy.get(SELECTORS.sitUpsValueInput).type(testValue);
       const expectedTime = Math.round(Date.now() / 1e3);
       cy.get(SELECTORS.eventAddSubmitButton).click();
-      cy.location("pathname").should("equal", "/sit-ups/log");
+      cy.location("pathname").should("equal", "/");
       cy.get(SELECTORS.eventCardValue)
         .first()
         .should("have.text", `${testValue} sit-ups`);
@@ -72,7 +72,7 @@ describe("sit-ups", () => {
 
     it("works with 1 sit-up", () => {
       cy.get(SELECTORS.sitUpsValueInput).type("1{enter}");
-      cy.location("pathname").should("equal", "/sit-ups/log");
+      cy.location("pathname").should("equal", "/");
       cy.get(SELECTORS.eventCardValue).first().should("have.text", "1 sit-up");
     });
   });

diff --git a/client/cypress/e2e/sleep.cy.ts b/client/cypress/e2e/sleep.cy.ts
@@ -50,7 +50,7 @@ describe("sleep", () => {
       cy.get(SELECTORS.hoursSleptInput).select("8");
       cy.get(SELECTORS.minutesSleptInput).select("10");
       cy.get(SELECTORS.eventAddSubmitButton).click();
-      cy.location("pathname").should("equal", "/sleeps/log");
+      cy.location("pathname").should("equal", "/");
       cy.get(SELECTORS.sleepCardValue)
         .first()
         .should("have.text", "8 hr & 10 min");

diff --git a/client/cypress/e2e/weight.cy.ts b/client/cypress/e2e/weight.cy.ts
@@ -53,7 +53,7 @@ describe("weight", () => {
       cy.get(SELECTORS.weightValueInput).type(`${testValue}{enter}`);
       const expectedTime = Math.round(Date.now() / 1e3);
 
-      cy.location("pathname").should("equal", "/weights/log");
+      cy.location("pathname").should("equal", "/");
       cy.get(SELECTORS.eventCardValue)
         .first()
         .should("have.text", `${testValue} kg`);

diff --git a/client/src/components/pages/About/Usage/UsageTable/index.tsx b/client/src/components/pages/About/Usage/UsageTable/index.tsx
@@ -2,10 +2,10 @@ import "./style.css";
 import { ReactNode } from "react";
 
 interface Props {
-  data: [string, ReactNode][];
+  children: ReactNode;
 }
 
-export default function UsageTable({ data }: Props) {
+export default function UsageTable({ children }: Props) {
   return (
     <table className="m-usage-table">
       <thead>
@@ -14,14 +14,7 @@ export default function UsageTable({ data }: Props) {
           <th>Value</th>
         </tr>
       </thead>
-      <tbody>
-        {data.map(([k, v]) => (
-          <tr key={k}>
-            <td>{k}</td>
-            {typeof v === "object" ? v : <td>{v}</td>}
-          </tr>
-        ))}
-      </tbody>
+      <tbody>{children}</tbody>
     </table>
   );
 }
diff --git a/client/src/components/pages/About/Usage/index.tsx b/client/src/components/pages/About/Usage/index.tsx
@@ -209,68 +209,79 @@ export default function Usage() {
       )}
       <Paper>
         <h3>Miscellaneous usage stats</h3>
-        <UsageTable
-          data={[
-            [
-              "Average mood for all users over the last 7 days",
-              // eslint-disable-next-line react/jsx-key
-              <MoodCell mood={data.usage.meanMoodInLast7Days} />,
-            ],
-            [
-              "Average mood for all users over the last 30 days",
-              // eslint-disable-next-line react/jsx-key
-              <MoodCell mood={data.usage.last30Days.meanMood} />,
-            ],
-            [
-              "Total time meditated by all users over the last 30 days",
-              formatSecondsToDurationStringLong(
+        <UsageTable>
+          <tr>
+            <td>Average mood for all users over the last 7 days</td>
+            <MoodCell mood={data.usage.meanMoodInLast7Days} />
+          </tr>
+          <tr>
+            <td>Average mood for all users over the last 30 days</td>
+            <MoodCell mood={data.usage.last30Days.meanMood} />
+          </tr>
+          <tr>
+            <td>Total time meditated by all users over the last 30 days</td>
+            <td>
+              {formatSecondsToDurationStringLong(
                 data.usage.last30Days.meditationSeconds,
-              ),
-            ],
-            [
-              "Total events recorded over the last 30 days",
-              data.usage.last30Days.eventCount,
-            ],
-          ]}
-        />
+              )}
+            </td>
+          </tr>
+          <tr>
+            <td>Total events recorded over the last 30 days</td>
+            <td>{data.usage.last30Days.eventCount}</td>
+          </tr>
+        </UsageTable>
       </Paper>
       <Paper>
         <h3>Miscellaneous user stats</h3>
-        <UsageTable
-          data={[
-            [
-              "Retention of users since a month ago",
-              percentFormatter.format(data.usage.CRR),
-            ],
-            [
-              "Number of devices with push notifications enabled",
-              data.usage.totalWebPushTokens,
-            ],
-            [
-              "Users who are signed up to weekly emails",
-              data.usage.usersWithWeeklyEmails,
-            ],
-            [
-              "Active users who have logged a meditation over the last 30 days",
-              formatAsPercentageOfMaus(data.usage.meditationMAUs),
-            ],
-            [
-              "Active users who have logged a sleep over the last 30 days",
-              data.usage.sleepMAUs
+        <UsageTable>
+          <tr>
+            <td>Retention of users since a month ago</td>
+            <td>{percentFormatter.format(data.usage.CRR)}</td>
+          </tr>
+          <tr>
+            <td>Number of devices with push notifications enabled</td>
+            <td>{data.usage.totalWebPushTokens}</td>
+          </tr>
+          <tr>
+            <td>
+              Users who are signed up to weekly emails <br />
+              <small>
+                Emails will be disabled automatically after 90 days of
+                inactivity
+              </small>
+            </td>
+            <td>{data.usage.usersWithWeeklyEmails}</td>
+          </tr>
+          <tr>
+            <td>
+              Active users who have logged a meditation over the last 30 days
+            </td>
+            <td>{formatAsPercentageOfMaus(data.usage.meditationMAUs)}</td>
+          </tr>
+          <tr>
+            <td>Active users who have logged a sleep over the last 30 days</td>
+            <td>
+              {data.usage.sleepMAUs
                 ? formatAsPercentageOfMaus(data.usage.sleepMAUs)
-                : 0,
-            ],
-            [
-              "Active users who have logged a weight over the last 30 days",
-              formatAsPercentageOfMaus(data.usage.weightMAUs),
-            ],
-            [
-              "Active users who have logged their location over the last 30 days",
-              formatAsPercentageOfMaus(data.usage.locationMAUs),
-            ],
-            ["Total confirmed users", data.usage.confirmedUsers],
-          ]}
-        />
+                : 0}
+            </td>
+          </tr>
+          <tr>
+            <td>Active users who have logged a weight over the last 30 days</td>
+            <td>{formatAsPercentageOfMaus(data.usage.weightMAUs)}</td>
+          </tr>
+          <tr>
+            <td>
+              Active users who have logged their location over the last 30 days
+            </td>
+            <td>{formatAsPercentageOfMaus(data.usage.locationMAUs)}</td>
+          </tr>
+          <tr>
+            <td>Total confirmed users</td>
+            <td>{data.usage.confirmedUsers}</td>
+          </tr>
+        </UsageTable>
       </Paper>
     </Paper.Group>
   );

diff --git a/client/src/components/pages/LegRaises/AddLegRaises.tsx b/client/src/components/pages/LegRaises/AddLegRaises.tsx
@@ -6,40 +6,45 @@ import { TextField } from "eri";
 import { captureException } from "../../../sentry";
 import deviceSlice from "../../../store/deviceSlice";
 import eventsSlice from "../../../store/eventsSlice";
-import { useNavigate } from "react-router-dom";
 
 export default function AddLegRaises() {
-  const navigate = useNavigate();
   const dispatch = useDispatch();
   const [error, setError] = useState<string | undefined>();
   const geolocation = useSelector(deviceSlice.selectors.geolocation);
   const formRef = useRef<HTMLFormElement>(null);
 
-  const onSubmit = () => {
-    const formEl = formRef.current;
-    if (!formEl) return captureException(Error("Form ref is undefined"));
-    const inputEl: HTMLInputElement = formEl[FIELDS.legRaises.name];
-    const { valueAsNumber } = inputEl;
-
-    if (inputEl.validity.valueMissing) return setError(ERRORS.required);
-    if (inputEl.validity.rangeOverflow) return setError(ERRORS.rangeOverflow);
-    if (inputEl.validity.rangeUnderflow) return setError(ERRORS.rangeUnderflow);
-    if (inputEl.validity.stepMismatch) return setError(ERRORS.integer);
+  return (
+    <AddEvent
+      eventType="leg-raises"
+      ref={formRef}
+      onSubmit={(): true | void => {
+        const formEl = formRef.current;
+        if (!formEl) {
+          captureException(Error("Form ref is undefined"));
+          return;
+        }
+        const inputEl: HTMLInputElement = formEl[FIELDS.legRaises.name];
+        const { valueAsNumber } = inputEl;
 
-    dispatch(
-      eventsSlice.actions.add({
-        type: "v1/leg-raises/create",
-        createdAt: new Date().toISOString(),
-        payload: geolocation
-          ? { location: geolocation, value: valueAsNumber }
-          : { value: valueAsNumber },
-      }),
-    );
-    navigate("/leg-raises/log");
-  };
+        if (inputEl.validity.valueMissing) return setError(ERRORS.required);
+        if (inputEl.validity.rangeOverflow)
+          return setError(ERRORS.rangeOverflow);
+        if (inputEl.validity.rangeUnderflow)
+          return setError(ERRORS.rangeUnderflow);
+        if (inputEl.validity.stepMismatch) return setError(ERRORS.integer);
 
-  return (
-    <AddEvent eventType="leg-raises" ref={formRef} onSubmit={onSubmit}>
+        dispatch(
+          eventsSlice.actions.add({
+            type: "v1/leg-raises/create",
+            createdAt: new Date().toISOString(),
+            payload: geolocation
+              ? { location: geolocation, value: valueAsNumber }
+              : { value: valueAsNumber },
+          }),
+        );
+        return true;
+      }}
+    >
       <TextField {...FIELDS.legRaises} error={error} />
     </AddEvent>
   );