feat: improve test overview (#88)

- Redesigns the test overview to use the same base components as
question and LO list
- Adds delete test functionality 

Coming next: 
- Filters for tests (like for the qs and los)

Closes #49

.github/workflows/code-check.yml

@@ -46,7 +46,7 @@ jobs:
         run: pnpm generate
 
       - name: Run Prettier
-        run: pnpm prettier --check
+        run: pnpm prettier:check
 
       - name: Run Lint
         run: pnpm lint

apps/docs/tsconfig.json

@@ -10,7 +10,7 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "types": ["react"],
-    "lib": ["esnext", "dom"]
+    "lib": ["esnext", "dom"],
   },
-  "files": [".storybook/preview.tsx"]
+  "files": [".storybook/preview.tsx"],
 }

apps/e2e-web/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "sourceMap": false,
-    "types": ["cypress", "node"]
+    "types": ["cypress", "node"],
   },
-  "include": ["src/**/*.ts", "cypress.config.ts"]
+  "include": ["src/**/*.ts", "cypress.config.ts"],
 }

apps/next-app/pages/modules/[questionBank]/questions/index.page.tsx

@@ -23,7 +23,7 @@ const Page: NextPage<PageProps> = ({ questionBank }) => {
   return (
     <LayoutModule fixedHeight questionBank={questionBank} breadcrumbs={crumbs}>
       <AppHead />
-      <QuestionSearch questionBank={questionBank} />
+      <QuestionSearch questionBank={questionBank} sx={{ height: "100%" }} />
     </LayoutModule>
   );
 };

apps/next-app/pages/modules/[questionBank]/tests/index.page.tsx

@@ -1,6 +1,6 @@
 import * as fs from "node:fs/promises";
 import { AppHead } from "@chair-flight/react/components";
-import { LayoutModule, TestsOverview } from "@chair-flight/react/containers";
+import { LayoutModule, TestSearch } from "@chair-flight/react/containers";
 import { staticHandler } from "@chair-flight/trpc/server";
 import type { QuestionBankName } from "@chair-flight/base/types";
 import type { Breadcrumbs } from "@chair-flight/react/containers";
@@ -21,20 +21,17 @@ const Page: NextPage<PageProps> = ({ questionBank }) => {
   ] as Breadcrumbs;
 
   return (
-    <LayoutModule questionBank={questionBank} breadcrumbs={crumbs}>
+    <LayoutModule fixedHeight questionBank={questionBank} breadcrumbs={crumbs}>
       <AppHead />
-      <TestsOverview
-        component={"section"}
-        sx={{ mx: "auto", maxWidth: "lg", width: "100%" }}
-        questionBank={questionBank}
-      />
+      <TestSearch questionBank={questionBank} sx={{ height: "100%" }} />
     </LayoutModule>
   );
 };
 
 export const getStaticProps = staticHandler<PageProps, PageParams>(
   async ({ params, helper }) => {
     await LayoutModule.getData({ helper, params });
+    await TestSearch.getData({ helper, params });
     return { props: params };
   },
   fs,

apps/next-app/tsconfig.json

@@ -10,17 +10,17 @@
     "esModuleInterop": true,
     "plugins": [
       {
-        "name": "next"
-      }
+        "name": "next",
+      },
     ],
-    "strictNullChecks": true
+    "strictNullChecks": true,
   },
   "include": [
     "index.d.ts",
     "next-env.d.ts",
     "pages/**/*.ts",
     "pages/**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
   ],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }

libs/base/env/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../../tsconfig.base.json",
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts"],
 }

libs/base/errors/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../../tsconfig.base.json",
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts"],
 }

libs/base/types/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../../tsconfig.base.json",
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts"],
 }

libs/core/analytics/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {},
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts"],
 }

libs/core/app/src/index.ts

@@ -4,3 +4,4 @@ export * from "./questions/get-question-preview";
 export * from "./questions/get-new-variant";
 export * from "./random/random";
 export * from "./tests/create-test";
+export * from "./tests/process-test";

libs/core/app/src/tests/process-test.tsx

@@ -0,0 +1,49 @@
+import { DateTime, Duration } from "luxon";
+import type { Test } from "@chair-flight/base/types";
+
+const getClockTime = (milliseconds: number) => {
+  const duration = Duration.fromMillis(milliseconds);
+  console.log(milliseconds, duration);
+  return duration.toFormat("hh:mm");
+};
+
+/**
+ * returns a bunch of derivative information from data in Test.
+ */
+export const processTest = (test: Test) => {
+  const correctAnswers = test.questions.reduce(
+    (s, q) => s + (q.selectedOptionId === q.correctOptionId ? 1 : 0),
+    0,
+  );
+
+  const rawScore = (correctAnswers / test.questions.length) * 100;
+  const score = Math.round(Math.min(100, Math.max(0, rawScore)));
+
+  const color = ((): "warning" | "success" | "danger" | "primary" => {
+    if (test.status === "created") return "primary";
+    if (test.status === "started") return "warning";
+    if (score >= 75) return "success";
+    return "danger";
+  })();
+
+  const timeLeft = (() => {
+    if (test.status === "finished") return "-";
+    if (test.mode === "study") return "-";
+    const tLeft = test.durationInMs - test.timeSpentInMs;
+    return getClockTime(tLeft);
+  })();
+
+  const timeSpent = getClockTime(test.timeSpentInMs);
+
+  const timeStarted =
+    test.startedAtEpochMs &&
+    DateTime.fromMillis(test.startedAtEpochMs).toFormat("DDD");
+
+  return {
+    color,
+    score,
+    timeSpent,
+    timeLeft,
+    timeStarted,
+  };
+};

libs/core/app/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "../../../tsconfig.base.json",
   "include": ["src/**/*.ts"],
-  "exclude": ["src/**/*.test.*"]
+  "exclude": ["src/**/*.test.*"],
 }

libs/core/github/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "types": ["node"]
+    "types": ["node"],
   },
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts"],
 }

libs/core/question-bank/tsconfig.json

@@ -2,6 +2,6 @@
   "extends": "../../../tsconfig.base.json",
   "include": ["src/**/*.ts", "executors/**/*.mts", "executors/**/*.ts"],
   "compilerOptions": {
-    "types": ["vitest/globals", "@testing-library/jest-dom"]
-  }
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
+  },
 }

libs/core/schemas/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../../tsconfig.base.json",
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts"],
 }

libs/react/analytics/tsconfig.json

@@ -3,6 +3,6 @@
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"],
   "compilerOptions": {
-    "lib": ["dom"]
-  }
+    "lib": ["dom"],
+  },
 }

libs/react/components/src/index.ts

@@ -26,8 +26,8 @@ export * from "./question-navigation";
 export * from "./question-variant-preview";
 export * from "./search-filters";
 export * from "./search-query";
+export * from "./search-list";
 export * from "./sidebar";
-export * from "./test-preview";
 export * from "./test-question-result";
 export * from "./theme";
 export * from "./toaster";

libs/react/components/src/nested-checkbox-select/nested-checkbox-select.stories.tsx

@@ -17,11 +17,10 @@ export const Playground: Story = {
         items={items}
         onChange={(...val) => {
           args.onChange?.(...val);
-          setItems(
-            (oldItems) =>
-              oldItems?.map((oldItem) => {
-                return oldItem.id === val[0].id ? val[0] : oldItem;
-              }),
+          setItems((oldItems) =>
+            oldItems?.map((oldItem) => {
+              return oldItem.id === val[0].id ? val[0] : oldItem;
+            }),
           );
         }}
       />

libs/react/components/src/question-list/question-list.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof QuestionList> = {
     loading: false,
     error: false,
     forceMode: undefined,
-    questions: [
+    items: [
       {
         id: "gdjhd",
         questionId: "26mpt",