add grammar search

Author: mmtftr

.gitignore

@@ -42,13 +42,50 @@ yarn-error.*
 # typescript
 *.tsbuildinfo
 
-# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
-# The following patterns were generated by expo-cli
-
-expo-env.d.ts
-# @end expo-cli
 
 scripts/data
 
 # ignore ios
 ios/
+
+# @generated expo-cli sync-8d4afeec25ea8a192358fae2f8e2fc766bdce4ec
+# The following patterns were generated by expo-cli
+
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+expo-env.d.ts
+# @end expo-cli

.yarn/install-state.gz

@@ -12,26 +12,35 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "dev.mmtf.jlpt-practice",
       "infoPlist": {
-        "LSApplicationQueriesSchemes": ["shirabelookup"]
+        "LSApplicationQueriesSchemes": [
+          "shirabelookup"
+        ]
       }
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "package": "com.anonymous.jlptpractice"
     },
     "web": {
       "bundler": "metro",
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
-    "plugins": ["expo-router", "expo-build-properties", "expo-font"],
+    "plugins": [
+      "expo-router",
+      "expo-build-properties",
+      "expo-font"
+    ],
     "experiments": {
       "typedRoutes": true
     }

app.json

@@ -1,11 +1,12 @@
-import { ScrollView, XStack } from "tamagui";
+import { Input, ScrollView, useMedia, XStack } from "tamagui";
 import { useRouter } from "expo-router";
 
 import { ListItem, Text } from "tamagui";
 import { useRoute } from "@react-navigation/native";
 import Details from "../../scripts/data/grammar_details.json";
-import { BookKey, ChevronRight } from "@tamagui/lucide-icons";
+import { BookKey, ChevronRight, Search } from "@tamagui/lucide-icons";
 import { FlatList } from "react-native";
+import { useMemo, useState } from "react";
 
 const LevelComp = ({ level }: { level: string }) => {
   return (
@@ -19,27 +20,47 @@ const LevelComp = ({ level }: { level: string }) => {
 };
 export default function () {
   const r = useRouter();
+  const [search, setSearch] = useState("");
+
+  const results = useMemo(
+    () =>
+      search === ""
+        ? Details
+        : Details.filter(
+            (d) =>
+              d.main_grammar.includes(search) ||
+              d.meaning?.actual?.toLowerCase()?.includes(search) ||
+              d.jlpt_level?.toLowerCase()?.includes(search)
+          ),
+    [search]
+  );
   return (
-    <FlatList
-      data={Details}
-      getItemLayout={(data, index) => ({
-        length: 65,
-        offset: 65 * index,
-        index,
-      })}
-      renderItem={({ item }) => (
-        <ListItem
-          hoverTheme
-          pressTheme
-          title={item.main_grammar}
-          subTitle={item.meaning.actual}
-          icon={BookKey}
-          iconAfter={<LevelComp level={item.jlpt_level} />}
-          onPress={() => {
-            r.push(`/grammar/${item.id}`);
-          }}
-        />
-      )}
-    />
+    <>
+      <XStack ai="center" px="$3" gap="$2" py="$2">
+        <Search />
+        <Input flex={1} onChangeText={(r) => setSearch(r.toLowerCase())} />
+      </XStack>
+      <FlatList
+        data={results}
+        getItemLayout={(data, index) => ({
+          length: 65,
+          offset: 65 * index,
+          index,
+        })}
+        renderItem={({ item }) => (
+          <ListItem
+            hoverTheme
+            pressTheme
+            title={item.main_grammar}
+            subTitle={item.meaning.actual}
+            icon={BookKey}
+            iconAfter={<LevelComp level={item.jlpt_level} />}
+            onPress={() => {
+              r.push(`/grammar/${item.id}`);
+            }}
+          />
+        )}
+      />
+    </>
   );
 }

app/(tabs)/grammar.tsx

@@ -3,10 +3,6 @@ import { useEffect } from "react";
 import { Heading, Paragraph, YStack } from "tamagui";
 
 export default function Home() {
-  const r = useRouter();
-  useEffect(() => {
-    setImmediate(() => r.push("/grammar/725"));
-  }, []);
   return (
     <YStack gap="$4" padding="$8">
       <Heading>Welcome</Heading>

app/(tabs)/index.tsx

@@ -1,6 +1,8 @@
 import {
   getAnswersToday,
+  getQuestionSeenStats,
   Question,
+  QuestionAnswer,
   QuestionWithAnswers,
 } from "@/services/questions";
 import React, { useEffect, useMemo } from "react";
@@ -15,14 +17,15 @@ import {
   useMedia,
   Paragraph,
   Button,
+  ScrollView,
 } from "tamagui";
 import { answersTodayStore, settingsStore } from "@/services/store";
 import { MultipleSelectBox, SelectBox } from "../../components/SelectBox";
-import { PieChart } from "@/components/PieChart";
 import { useRouter } from "expo-router";
 import { Alert } from "react-native";
 import { resetAndReseed } from "../../components/SeedProvider";
 import { Delete } from "@tamagui/lucide-icons";
+import { Statistics } from "@/components/Statistics";
 
 const levelItems: { name: Question["level"] }[] = [
   { name: "N1" },
@@ -88,96 +91,49 @@ const CategoryFilter = () => {
 };
 
 const SettingsTab: React.FC = () => {
-  const theme = useTheme();
-  const numberOfQuestionsSolvedToday = answersTodayStore((s) => s.data.val);
-  const [answers, setAnswers] = React.useState<
-    Awaited<ReturnType<typeof getAnswersToday>>
-  >([]);
+  const numberOfAnswersToday = answersTodayStore((s) => s.data.val);
+  const [answers, setAnswers] = React.useState<QuestionAnswer[]>([]);
   useEffect(() => {
     getAnswersToday().then((answers) => {
       answersTodayStore.getState().update((state) => {
         state.val = answers.length;
       });
       setAnswers(answers);
     });
-  }, [numberOfQuestionsSolvedToday]);
+  }, [numberOfAnswersToday]);
 
-  const correctCount = useMemo(
-    () =>
-      answers.filter((s) => s.questions.correctAnswer === s.answers.answer)
-        .length,
-    [answers]
-  );
-  const incorrectCount = answers.length - correctCount;
-  const router = useRouter();
+  const [seenStats, setSeenStats] =
+    React.useState<Awaited<ReturnType<typeof getQuestionSeenStats> | null>>(
+      null
+    );
+
+  const { categoryFilter, levelFilter } = settingsStore((state) => state.data);
+
+  useEffect(() => {
+    getQuestionSeenStats({
+      categoryFilter: categoryFilter.length ? categoryFilter : undefined,
+      levelFilter: levelFilter.length ? levelFilter : undefined,
+    }).then((seenStats) => {
+      setSeenStats(seenStats);
+    });
+  }, [numberOfAnswersToday, categoryFilter, levelFilter]);
 
   return (
-    <YStack padding="$8" gap="$4">
-      <Heading>Settings</Heading>
-      <YStack gap="$2">
-        <CategoryFilter />
-        <LevelFilter />
-      </YStack>
-      <Heading>Statistics</Heading>
-      <Text>
-        Number of questions solved today: {numberOfQuestionsSolvedToday}
-      </Text>
-      {numberOfQuestionsSolvedToday > 0 && (
-        <YStack gap="$4">
-          <XStack gap="$4">
-            <View w="50%" aspectRatio={1}>
-              <PieChart
-                data={[
-                  {
-                    value: correctCount,
-                    color: theme.green11.get(),
-                  },
-                  {
-                    value: incorrectCount,
-                    color: theme.red11.get(),
-                  },
-                ]}
-              />
-            </View>
-            <YStack gap="$2">
-              <Paragraph>
-                Correct: {correctCount} (
-                {((correctCount / (answers.length || 1)) * 100).toFixed(2)}%)
-              </Paragraph>
-              <Paragraph>
-                Incorrect: {incorrectCount} (
-                {((incorrectCount / (answers.length || 1)) * 100).toFixed(2)}%)
-              </Paragraph>
-            </YStack>
-          </XStack>
-          <Button onPress={() => router.push("/review")}>Review</Button>
+    <ScrollView>
+      <YStack padding="$8" gap="$4">
+        <Heading>Settings</Heading>
+        <YStack gap="$2">
+          <CategoryFilter />
+          <LevelFilter />
         </YStack>
-      )}
-      <Button
-        marginEnd="$2"
-        icon={Delete}
-        variant="outlined"
-        color="red"
-        theme="red_active"
-        size="$2"
-        onPress={() => {
-          Alert.alert("Are You Sure?", "This may delete some questions", [
-            {
-              text: "Cancel",
-              style: "cancel",
-            },
-            {
-              text: "Reset",
-              onPress: () => {
-                resetAndReseed();
-              },
-            },
-          ]);
-        }}
-      >
-        Reset Questions
-      </Button>
-    </YStack>
+        <Heading>Statistics</Heading>
+        <Statistics
+          numberOfQuestionsSolvedToday={numberOfAnswersToday}
+          answers={answers}
+          seenStats={seenStats}
+        />
+      </YStack>
+    </ScrollView>
   );
 };
 

app/(tabs)/settings.tsx

@@ -0,0 +1,50 @@
+import { BookKey, ChevronRight } from "@tamagui/lucide-icons";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import React, { useMemo } from "react";
+import { FlatList } from "react-native";
+import { ListItem, XStack, Text } from "tamagui";
+import Details from "../../scripts/data/grammar_details.json";
+
+const LevelComp = ({ level }: { level: string }) => {
+  return (
+    <XStack gap="$2" ai="center">
+      <XStack px="$2" py="$1" br="$4" bg={"$gray4"}>
+        <Text color="$gray9">{level}</Text>
+      </XStack>
+      <ChevronRight />
+    </XStack>
+  );
+};
+export default function () {
+  const params = useLocalSearchParams();
+  const filtered = useMemo(() => {
+    if (params.grammars && Array.isArray(params.grammars)) {
+      return Details.filter((d) => params.grammars?.includes(d.main_grammar));
+    }
+    return [];
+  }, [params.grammars]);
+  const r = useRouter();
+  return (
+    <FlatList
+      data={Details}
+      getItemLayout={(data, index) => ({
+        length: 65,
+        offset: 65 * index,
+        index,
+      })}
+      renderItem={({ item }) => (
+        <ListItem
+          hoverTheme
+          pressTheme
+          title={item.main_grammar}
+          subTitle={item.meaning.actual}
+          icon={BookKey}
+          iconAfter={<LevelComp level={item.jlpt_level} />}
+          onPress={() => {
+            r.push(`/grammar/${item.id}`);
+          }}
+        />
+      )}
+    />
+  );
+}