various improvements, add grammar_details

Author: mmtftr

.gitignore

@@ -43,7 +43,8 @@ yarn-error.*
 *.tsbuildinfo
 
 
-scripts/data
+scripts/data/*
+!scripts/data/grammar_details.json
 
 # ignore ios
 ios/

.yarn/install-state.gz

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.1.cjs
+yarnPath: .yarn/releases/yarn-4.3.0.cjs

.yarn/releases/yarn-4.1.1.cjs .yarn/releases/yarn-4.3.0.cjs

@@ -8,41 +8,42 @@
     "scheme": "myapp",
     "userInterfaceStyle": "automatic",
     "splash": {
-      "image": "./assets/images/splash.png",
-      "resizeMode": "contain",
+      "image": "./assets/images/splash-jellip.png",
+      "resizeMode": "cover",
       "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"
+      "package": "dev.mmtf.jlpt-practice"
     },
     "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
-    }
+    },
+    "extra": {
+      "router": {
+        "origin": false
+      },
+      "eas": {
+        "projectId": "dff87a81-66f6-4afb-aed0-ac90289b3417"
+      }
+    },
+    "owner": "mmdf"
   }
 }

.yarnrc.yml

@@ -1,66 +1 @@
-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, Search } from "@tamagui/lucide-icons";
-import { FlatList } from "react-native";
-import { useMemo, useState } from "react";
-
-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 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 (
-    <>
-      <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}`);
-            }}
-          />
-        )}
-      />
-    </>
-  );
-}
+export { default } from "../grammar/list";

app.json

@@ -1,14 +1,14 @@
-import { AnimatePresence, Heading, Paragraph, View, YStack } from "tamagui";
-import { useCallback, useEffect, useState } from "react";
+import { QuestionView } from "@/components/QuestionView";
 import {
   getRandomQuestion,
   QuestionWithAnswers,
   submitAnswer,
 } from "@/services/questions";
+import { settingsStore } from "@/services/store";
 import { useToastController } from "@tamagui/toast";
+import { useCallback, useEffect, useState } from "react";
+import { AnimatePresence, Heading, Paragraph, View, YStack } from "tamagui";
 import * as zod from "zod";
-import { QuestionView } from "@/components/QuestionView";
-import { settingsStore } from "@/services/store";
 import { usePermuteAnswers } from "../../components/usePermuteAnswers";
 
 const questionSchema = zod.object({
@@ -24,21 +24,22 @@ function QuestionManager() {
   const [solvedId, setSolvedId] = useState(0);
   const [answer, setAnswer] = useState<null | number>(null);
   const [questionBase, setQuestion] = useState<QuestionWithAnswers | null>(
-    null,
+    null
   );
   const [loading, setLoading] = useState(false);
   const toast = useToastController();
 
   const [categoryFilter, levelFilter] = settingsStore((state) => [
     state.data.categoryFilter,
-    state.data.levelFilter,
+    state.data.questionLevelFilter,
   ]);
 
   const fetchQuestion = useCallback(
     async function () {
       setLoading(true);
       try {
-        const { categoryFilter, levelFilter } = settingsStore.getState().data;
+        const { categoryFilter, questionLevelFilter: levelFilter } =
+          settingsStore.getState().data;
         const question = await getRandomQuestion({
           categoryFilter: categoryFilter.length ? categoryFilter : undefined,
           levelFilter: levelFilter.length ? levelFilter : undefined,
@@ -67,7 +68,7 @@ function QuestionManager() {
         setLoading(false);
       }
     },
-    [setQuestion],
+    [setQuestion]
   );
 
   useEffect(() => {
@@ -104,7 +105,7 @@ function QuestionManager() {
           bottom={0}
           animation="fast"
           paddingHorizontal="$8"
-          key={solvedId} // animate out even if it's the same question
+          key={solvedId}
           exitStyle={{ transform: [{ translateX: 200 }], opacity: 0 }}
           enterStyle={{ transform: [{ translateX: -200 }], opacity: 0 }}
           transform={[{ translateX: 0 }]}

app/(tabs)/grammar.tsx

@@ -1,31 +1,15 @@
+import { Statistics } from "@/components/Statistics";
 import {
   getAnswersToday,
   getQuestionSeenStats,
   Question,
   QuestionAnswer,
   QuestionWithAnswers,
 } from "@/services/questions";
-import React, { useEffect, useMemo } from "react";
-import {
-  YStack,
-  Heading,
-  Text,
-  XStack,
-  Label,
-  useTheme,
-  View,
-  useMedia,
-  Paragraph,
-  Button,
-  ScrollView,
-} from "tamagui";
 import { answersTodayStore, settingsStore } from "@/services/store";
-import { MultipleSelectBox, SelectBox } from "../../components/SelectBox";
-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";
+import React, { useEffect } from "react";
+import { H5, Heading, Label, ScrollView, XStack, YStack } from "tamagui";
+import { MultipleSelectBox } from "../../components/SelectBox";
 
 const levelItems: { name: Question["level"] }[] = [
   { name: "N1" },
@@ -34,13 +18,19 @@ const levelItems: { name: Question["level"] }[] = [
   { name: "N4" },
   { name: "N5" },
 ];
-const LevelFilter = () => {
-  const filters = settingsStore((state) => state.data.levelFilter);
-  const [val, setVal] = React.useState<QuestionWithAnswers["level"][]>(filters);
+const LevelFilter = ({
+  settingKey: settingsKey,
+}: {
+  settingKey: "questionLevelFilter" | "grammarLevelFilter";
+}) => {
+  const filters = settingsStore((state) => state.data[settingsKey]);
+  const [val, setVal] = React.useState<QuestionWithAnswers["level"][]>(
+    filters || []
+  );
   const name = "Level Filter";
   useEffect(() => {
     settingsStore.getState().update((state) => {
-      state.levelFilter = val;
+      state[settingsKey] = val;
     });
   }, [val]);
 
@@ -107,7 +97,9 @@ const SettingsTab: React.FC = () => {
       null
     );
 
-  const { categoryFilter, levelFilter } = settingsStore((state) => state.data);
+  const { categoryFilter, questionLevelFilter: levelFilter } = settingsStore(
+    (state) => state.data
+  );
 
   useEffect(() => {
     getQuestionSeenStats({
@@ -123,8 +115,13 @@ const SettingsTab: React.FC = () => {
       <YStack padding="$8" gap="$4">
         <Heading>Settings</Heading>
         <YStack gap="$2">
+          <H5>Question Filters</H5>
           <CategoryFilter />
-          <LevelFilter />
+          <LevelFilter settingKey="questionLevelFilter" />
+        </YStack>
+        <YStack gap="$2">
+          <H5>Grammar Filters</H5>
+          <LevelFilter settingKey="grammarLevelFilter" />
         </YStack>
         <Heading>Statistics</Heading>
         <Statistics

app/(tabs)/question.tsx

@@ -3,26 +3,23 @@ import {
   DarkTheme,
   DefaultTheme,
   ThemeProvider,
-  useRoute,
 } from "@react-navigation/native";
 import { useFonts } from "expo-font";
-import { Stack, useRouter } from "expo-router";
+import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { useEffect } from "react";
 
-import { useColorScheme } from "react-native";
-import MigrationProvider from "../components/MigrationProvider";
-import { TamaguiProvider, Theme, YStack } from "tamagui";
+import { tamaguiConfig } from "@/constants/tamagui";
 import {
   Toast,
   ToastProvider,
   ToastViewport,
   useToastState,
 } from "@tamagui/toast";
-import { tamaguiConfig } from "@/constants/tamagui";
-import { useRehydrate } from "@colorfy-software/zfy";
-import { stores } from "@/services/store";
+import { useColorScheme } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { TamaguiProvider, YStack } from "tamagui";
+import MigrationProvider from "../components/MigrationProvider";
 
 export {
   // Catch any errors thrown by the Layout component.
@@ -115,7 +112,11 @@ function RootLayoutNav() {
                 name="grammar/[id]"
                 options={{ title: "Grammar" }}
               />
-              <Stack.Screen name="review" options={{ presentation: "modal" }} />
+              <Stack.Screen
+                name="grammar/list"
+                options={{ title: "Grammar List" }}
+              />
+              <Stack.Screen name="review" options={{ title: "Review" }} />
             </Stack>
           </MigrationProvider>
         </ToastProvider>