Stub practice page

src/hooks/useExpressionData.ts

@@ -1,11 +1,26 @@
 import { useState } from "react";
 import { MockData } from "../mock";
+import {
+  Category,
+  Expression,
+  ExpressionSet,
+  ExpressionToCategory,
+  ExpressionToExpressionSet,
+} from "../model";
 
-export function useExpressionData() {
+export interface ExpressionData {
+  categories: Category[];
+  expressions: Expression[];
+  expression_sets: ExpressionSet[];
+  expression_to_category: ExpressionToCategory[];
+  expression_to_expression_set: ExpressionToExpressionSet[];
+}
+
+export function useExpressionData(): ExpressionData {
   const [state] = useState(MockData);
 
   return {
-    catefories: state.categories,
+    categories: state.categories,
     expressions: state.expressions,
     expression_sets: state.expression_sets,
     expression_to_category: state.expression_to_category,

src/pages/expression-sets/details.tsx

@@ -10,8 +10,9 @@ const ExpressionSetDetailsPage: NextPage = () => {
   const { expression_sets, expression_to_expression_set } = useExpressionData();
 
   // Fallback for expression set not found
+  const expression_set_id = Number.parseInt(query["set-id"] as string);
   const expression_set = expression_sets.find(
-    (item) => item.id === Number.parseInt(query["set-id"] as string)
+    (item) => item.id === expression_set_id
   );
   if (!expression_set)
     return (
@@ -51,7 +52,7 @@ const ExpressionSetDetailsPage: NextPage = () => {
         <p className="text-details grow">{/* TODO other details */}</p>
         <Link
           href={{
-            pathname: "expression-sets/practice",
+            pathname: "/expression-sets/practice",
             query: { "set-id": expression_set.id },
           }}
           passHref

src/pages/expression-sets/practice.tsx

@@ -0,0 +1,73 @@
+import type { NextPage } from "next";
+import { useRouter } from "next/router";
+import { ExpressionCard } from "../../components";
+import { Page } from "../../components/Page";
+import { useExpressionData } from "../../hooks/useExpressionData";
+import { sample } from "../../util/array-utils";
+import {
+  getCategoriesInExpression,
+  getExpressionsInSet,
+} from "../../util/data-utils";
+
+const ExpressionSetListPage: NextPage = () => {
+  const { query } = useRouter();
+  const {
+    expressions,
+    categories,
+    expression_sets,
+    expression_to_expression_set,
+    expression_to_category,
+  } = useExpressionData();
+
+  // Fallback for expression set not found
+  const expression_set = expression_sets.find(
+    (item) => item.id === Number.parseInt(query["set-id"] as string)
+  );
+  if (!expression_set)
+    return (
+      <Page>
+        <p className="details">Expression set not found</p>
+      </Page>
+    );
+
+  // Fallback for expression not found
+  const expression_candidates = getExpressionsInSet({
+    expression_set_id: expression_set.id,
+    expression_to_expression_set,
+    expressions,
+  });
+
+  if (expression_candidates.length === 0) {
+    return (
+      <Page>
+        <p className="details">No expressions left in this set</p>
+      </Page>
+    );
+  }
+
+  // Choose word and find categories
+  // Find categories
+  const expression = sample(expression_candidates);
+  const expression_categories = getCategoriesInExpression({
+    categories,
+    expression_id: expression.id,
+    expression_to_category,
+  });
+
+  console.log("Expressions", expressions);
+  console.log("Categories", expression_categories);
+  console.log("Expression", expression);
+
+  return (
+    <Page>
+      <ExpressionCard
+        prompt={expression.prompt}
+        categories={expression_categories.map((category) => category.name)}
+        description={expression.description}
+        show_description
+      />
+    </Page>
+  );
+};
+
+export default ExpressionSetListPage;

src/util/array-utils.ts

@@ -0,0 +1,3 @@
+export function sample<T>(array: T[]) {
+  return array[Math.floor(Math.random() * array.length)];
+}

src/util/data-utils.ts

@@ -0,0 +1,40 @@
+import {
+  Category,
+  Expression,
+  ExpressionToCategory,
+  ExpressionToExpressionSet,
+} from "../model";
+
+interface GetExpressionsInSetParams {
+  expression_set_id: number;
+  expressions: Expression[];
+  expression_to_expression_set: ExpressionToExpressionSet[];
+}
+
+export function getExpressionsInSet({
+  expression_set_id,
+  expression_to_expression_set,
+  expressions,
+}: GetExpressionsInSetParams): Expression[] {
+  const expression_ids = expression_to_expression_set
+    .filter((item) => item.expression_set_id === expression_set_id)
+    .map((item) => item.expression_id);
+  return expressions.filter((item) => expression_ids.includes(item.id));
+}
+
+interface GetCategoriesInExpressionParams {
+  expression_id: number;
+  categories: Category[];
+  expression_to_category: ExpressionToCategory[];
+}
+
+export function getCategoriesInExpression({
+  categories,
+  expression_id,
+  expression_to_category,
+}: GetCategoriesInExpressionParams) {
+  const category_ids = expression_to_category
+    .filter((item) => item.expression_id === expression_id)
+    .map((item) => item.category_id);
+  return categories.filter((item) => category_ids.includes(item.id));
+}