feat: button to clear last session results

Lemmmy · Oct 14, 2023 · 241f821 · 241f821
1 parent ea3f389
commit 241f821
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 6 deletions.
diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx
@@ -12,7 +12,7 @@ import { SimpleCard } from "@comp/SimpleCard.tsx";
 
 import { useAppSelector } from "@store";
 
-import { SessionResultsAlert } from "@pages/session/results/SessionResultsAlert";
+import { LastSessionSummary } from "@pages/session/results/LastSessionSummary.tsx";
 import { showSessionAbandonModal } from "@pages/session/modals/SessionAbandonModal";
 
 import { SummaryCard } from "./summary/SummaryCard";
@@ -131,7 +131,7 @@ function DashboardPage(): JSX.Element {
   </PageLayout>;
 
   return <>
-    {showLastSessionSummary && <SessionResultsAlert />}
+    {showLastSessionSummary && <LastSessionSummary />}
     {page}
   </>;
 }

diff --git a/src/pages/session/results/HeaderTitle.tsx b/src/pages/session/results/HeaderTitle.tsx
@@ -2,8 +2,13 @@
 // This file is part of KanjiSchool under AGPL-3.0.
 // Full details: https://github.com/Lemmmy/KanjiSchool/blob/master/LICENSE
 
-import React from "react";
-import { theme } from "antd";
+import React, { useCallback } from "react";
+import { theme, Tooltip } from "antd";
+import { CloseOutlined } from "@ant-design/icons";
+
+import { useDispatch } from "react-redux";
+import { clearLastResults } from "@store/slices/sessionSlice.ts";
+
 import { SessionType } from "@session";
 
 import dayjs from "dayjs";
@@ -25,8 +30,24 @@ const TYPE_NAMES: Record<SessionType, string> = {
 
 export const HeaderTitle = React.memo(({ type, completedAt, total }: Props) => {
   const { token } = useToken();
+  const dispatch = useDispatch();
+
+  const clear = useCallback(() => {
+    dispatch(clearLastResults()); // LastResultSave will save this to local storage
+  }, [dispatch]);
 
   return <>
+    {/* Close button */}
+    <Tooltip title={`Clear last ${TYPE_NAMES[type]} summary`} placement="bottom">
+      <div
+        className="float-right w-[48px] h-[48px] rounded flex items-center justify-center
+          hover:bg-white/5 light:hover:bg-black/5"
+        onClick={clear}
+      >
+        <CloseOutlined className="text-desc" />
+      </div>
+    </Tooltip>
+
     {/* Summary type */}
     <span className="font-medium" style={{ color: token.colorTextHeading, fontSize: token.fontSizeHeading5 }}>
       Last {TYPE_NAMES[type]} summary

diff --git a/...s/session/results/SessionResultsAlert.tsx → ...es/session/results/LastSessionSummary.tsx b/...s/session/results/SessionResultsAlert.tsx → ...es/session/results/LastSessionSummary.tsx
@@ -16,12 +16,12 @@ import { useAnswersPanel } from "./AnswersPanel";
 import { lsSetBoolean, useBooleanSetting } from "@utils";
 
 import Debug from "debug";
-const debug = Debug("kanjischool:session-results-alert");
+const debug = Debug("kanjischool:last-session-summary");
 
 const DEFAULT_EXPAND = ["correct", "incorrect"];
 const DEFAULT_COLLAPSE: string[] = [];
 
-export function SessionResultsAlert(): JSX.Element | null {
+export function LastSessionSummary(): JSX.Element | null {
   const dispatch = useDispatch();
 
   const [showing, setShowing] = useState(false);

diff --git a/src/store/slices/sessionSlice.ts b/src/store/slices/sessionSlice.ts
@@ -319,6 +319,11 @@ const sessionSlice = createSlice({
       s.lastResultsViewed = payload;
     },
 
+    clearLastResults(s) {
+      s.lastResults = undefined;
+      s.lastResultsViewed = true;
+    },
+
     studyQueueSetCollapsed(s, { payload }: PayloadAction<boolean>) {
       s.studyQueueCollapsed = payload;
     },
@@ -361,6 +366,7 @@ export const {
   startLessonReviewNow,
   endSession,
   setResultsViewed,
+  clearLastResults,
   studyQueueSetCollapsed,
   studyQueueAdd,
   studyQueueRemove,