Creating shared component for displaying number of hints used per str…

…ategy
Sudokuru · Oct 31, 2024 · c0443c2 · c0443c2
1 parent 1aafd50
commit c0443c2
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 47 deletions.
diff --git a/app/Components/NumHintsUsedPerStrategy.tsx b/app/Components/NumHintsUsedPerStrategy.tsx
@@ -0,0 +1,46 @@
+import Statistic from "./Statistics/Statistic";
+import { formatOneLessonName } from "../Functions/learnedLessons";
+import React from "react";
+import { SudokuStrategy } from "sudokuru";
+
+interface NumHintsUsedPerStrategyProps {
+  numHintsUsedPerStrategy: {
+    hintStrategy: SudokuStrategy;
+    numHintsUsed: number;
+  }[];
+}
+
+/**
+ * Renders a list of JSX Statistic components displaying the number of hints used per strategy.
+ *
+ * @param numHintsUsedPerStrategy - Array of objects detailing hints used for each strategy,
+ * sorted by most hints used.
+ * @returns An array of JSX elements representing the number of hints used per strategy.
+ */
+export const NumHintsUsedPerStrategy = (
+  props: NumHintsUsedPerStrategyProps
+) => {
+  // sort by most number of hints
+  const numHintsUsedPerStrategyClone = [...props.numHintsUsedPerStrategy].sort(
+    (a, b) => {
+      return b.numHintsUsed - a.numHintsUsed;
+    }
+  );
+
+  // Generates the JSX elements for the number of hints used per strategy
+  const strategyHints: React.JSX.Element[] = [];
+  for (const strategyHint of numHintsUsedPerStrategyClone) {
+    strategyHints.push(
+      <Statistic
+        statisticName={
+          "  " + formatOneLessonName(strategyHint.hintStrategy) + ": "
+        }
+        statisticValue={strategyHint.numHintsUsed}
+        testID={"hintsUsed" + strategyHint.hintStrategy}
+        key={strategyHint.hintStrategy}
+      />
+    );
+  }
+
+  return strategyHints;
+};
diff --git a/app/Components/Statistics/TotalStatistics.tsx b/app/Components/Statistics/TotalStatistics.tsx
@@ -5,7 +5,7 @@ import Statistic from "./Statistic";
 import { formatTime } from "../SudokuBoard/Functions/BoardFunctions";
 import { SudokuStrategy } from "sudokuru";
 import React from "react";
-import { formatOneLessonName } from "../../Functions/learnedLessons";
+import { NumHintsUsedPerStrategy } from "../NumHintsUsedPerStrategy";
 
 export interface TotalStatisticsProps {
   totalScore: number;
@@ -27,28 +27,6 @@ const TotalStatistics = (props: TotalStatisticsProps) => {
 
   const theme = useTheme();
 
-  // sort by most number of hints
-  const numHintsUsedPerStrategy = [...props.numHintsUsedPerStrategy].sort(
-    (a, b) => {
-      return b.numHintsUsed - a.numHintsUsed;
-    }
-  );
-
-  // Generates the JSX elements for the number of hints used per strategy
-  const strategyHints: React.JSX.Element[] = [];
-  for (const strategyHint of numHintsUsedPerStrategy) {
-    strategyHints.push(
-      <Statistic
-        statisticName={
-          "  " + formatOneLessonName(strategyHint.hintStrategy) + ": "
-        }
-        statisticValue={strategyHint.numHintsUsed}
-        testID={"hintsUsed" + strategyHint.hintStrategy}
-        key={strategyHint.hintStrategy}
-      />
-    );
-  }
-
   return (
     <View
       style={{
@@ -103,7 +81,9 @@ const TotalStatistics = (props: TotalStatisticsProps) => {
           statisticValue={props.numHintsUsed}
           testID="numHintsUsed"
         />
-        {strategyHints}
+        <NumHintsUsedPerStrategy
+          numHintsUsedPerStrategy={props.numHintsUsedPerStrategy}
+        />
       </View>
     </View>
   );

diff --git a/app/Components/SudokuBoard/Components/EndGameModal.tsx b/app/Components/SudokuBoard/Components/EndGameModal.tsx
@@ -1,13 +1,13 @@
 import { View } from "react-native";
-import { Button, Text, useTheme } from "react-native-paper";
+import { Button, Text } from "react-native-paper";
 import { useWindowDimensions } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import Statistic from "../../Statistics/Statistic";
 import { formatTime } from "../Functions/BoardFunctions";
 import React from "react";
 import { SudokuStrategy } from "sudokuru";
 import { ScrollView } from "react-native-gesture-handler";
-import { formatOneLessonName } from "../../../Functions/learnedLessons";
+import { NumHintsUsedPerStrategy } from "../../NumHintsUsedPerStrategy";
 
 interface EndGameModalProps {
   time: number;
@@ -25,28 +25,8 @@ const EndGameModal = (props: EndGameModalProps) => {
   const size = useWindowDimensions();
   const reSize = Math.min(size.width, size.height);
 
-  const theme = useTheme();
   const navigation: any = useNavigation();
 
-  // sort by most number of hints
-  const sortedHints = [...props.numHintsUsedPerStrategy].sort(
-    (a, b) => b.numHintsUsed - a.numHintsUsed
-  );
-
-  const strategyHints: React.JSX.Element[] = [];
-  for (const strategyHint of sortedHints) {
-    strategyHints.push(
-      <Statistic
-        statisticName={
-          "  " + formatOneLessonName(strategyHint.hintStrategy) + ": "
-        }
-        statisticValue={strategyHint.numHintsUsed}
-        testID={"hintsUsed" + strategyHint.hintStrategy}
-        key={strategyHint.hintStrategy}
-      />
-    );
-  }
-
   return (
     <ScrollView
       contentContainerStyle={{
@@ -91,7 +71,9 @@ const EndGameModal = (props: EndGameModalProps) => {
           statisticValue={props.numHintsUsed}
           testID="numHintsUsed"
         />
-        {strategyHints}
+        <NumHintsUsedPerStrategy
+          numHintsUsedPerStrategy={props.numHintsUsedPerStrategy}
+        />
       </View>
       <Button
         mode="contained"