Adding learning page algorithm

.vs/VSWorkspaceState.json

@@ -10,6 +10,6 @@
     "\\redux\\reducers",
     "\\redux\\thunks"
   ],
-  "SelectedNode": "\\components\\KanjiListSearchPanel.tsx",
+  "SelectedNode": "\\redux\\store.ts",
   "PreviewInSolutionExplorer": false
 }

App.tsx

@@ -6,8 +6,6 @@ import { Provider, useDispatch } from 'react-redux';
 import { StatusBar } from 'expo-status-bar';
 import { Keyboard, SafeAreaView, StyleSheet, TouchableWithoutFeedback} from 'react-native';
 
-import Header from './components/Header';
-import TabBar from './navigation/TabBar';
 import { InitStack } from './navigation/Startup';
 
 export default function App() {

components/GradeChip.tsx

@@ -19,8 +19,9 @@ const GradeChip = (props: gradeChipProps) => {
     }, [isSelected]);
 
     const select = () => {
-        props.onSelect("Grade "+props.grade, isSelected);
         setIsSelected(!isSelected);
+        props.onSelect("Grade " + props.grade, isSelected);
+
     }
 
     return (

components/KanjiAnswerField.tsx

@@ -2,24 +2,20 @@ import React from 'react';
 import { Animated, StyleSheet, TextInput } from 'react-native';
 import { startAnimation, stopAnimation, animatedStyles } from '../assets/animations/answerAnimation'
 
-const KanjiAnswerField = () => {
+interface kanjiAnswerFieldProps { 
+    answer: string,
+    setAnswer: React.Dispatch<React.SetStateAction<string>>
+}
 
-    const options = {
-        method: 'GET',
-        headers: {
-            'X-RapidAPI-Key': '19516a9900mshce10de76f99976bp10f192jsn8c8d82222baa',
-            'X-RapidAPI-Host': 'kanjialive-api.p.rapidapi.com'
-        }
-    }
+const KanjiAnswerField = (props: kanjiAnswerFieldProps) => {
 
-    const [answer, onChangeText] = React.useState("");
 
     return (
         <Animated.View style={[animatedStyles]}>
             <TextInput
                 style={answerFieldStyle.input}
-                onChangeText={onChangeText}
-                value={answer}
+                onChangeText={props.setAnswer}
+                value={props.answer}
                 onFocus={startAnimation}
                 onBlur={stopAnimation}
                 placeholder="Answer here"

components/KanjiCard.tsx

@@ -13,27 +13,27 @@ type KanjiProps = {
 
 const KanjiCard = (props: KanjiProps) => {
 
-    const kanjiCardStyle = useColorScheme() == 'light' ? kanjiCardStyle_light : kanjiCardStyle_dark;
-
+    var kanjiCardStyle = useColorScheme() == 'light' ? kanjiCardStyle_light : kanjiCardStyle_dark;
+    const [answerTextColor, setAnswerTextColor] = useState(kanjiCardStyle.text.color); 
+    var textAnswerStyle = StyleSheet.create({
+        text: {
+            color: answerTextColor,
+            fontWeight: "bold",
+            fontSize: "20em"
+        }
+    })
 
 
-    const options = {
-        method: 'GET',
-        headers: {
-            'X-RapidAPI-Key': '19516a9900mshce10de76f99976bp10f192jsn8c8d82222baa',
-            'X-RapidAPI-Host': 'kanjialive-api.p.rapidapi.com'
-        }
-    }
+    const nextKanji = () => allKanjis[Math.floor(Math.random() * allKanjis.length)];
 
     const [kanji, setKanji] = useState((): Kanji | null => { return null });
     const [imgXml, setImgXml] = useState('<svg></svg>');
-
+    const [hasAnswered, setHasAnswered] = useState(false);
+    const [answer, setAnswer] = React.useState("");
 
     var kanjis: KanjiListByGrade = useSelector(state => state.kanjiReducer.kanjis);
 
     const allKanjis: Kanji[] = [].concat(...Object.values(kanjis))
-    const selectedKanji = allKanjis[Math.floor(Math.random() * allKanjis.length)]
-
 
 
     const fetchXml = async () => {
@@ -44,7 +44,7 @@ const KanjiCard = (props: KanjiProps) => {
     }
 
     useEffect(() => {
-        setKanji(selectedKanji);
+        setKanji(nextKanji());
     }, []);
 
     useEffect(() => {
@@ -52,6 +52,22 @@ const KanjiCard = (props: KanjiProps) => {
         });
     }, [kanji]);
 
+    const computeAnswer = () => {
+        setAnswerTextColor(isAnswerRight() ? "green" : "red");
+        setHasAnswered(true);
+    }
+    const computeNext = () => {
+        setKanji(nextKanji());
+        setAnswer("");
+        setHasAnswered(false);
+    }
+
+    const isAnswerRight = () => {
+        const arr1 = answer.toLowerCase().split(',').map(word => word.trim()).sort();
+        const arr2 = kanji?.meaning.toLowerCase().split(',').map(word => word.trim()).sort();
+        return JSON.stringify(arr1) === JSON.stringify(arr2);
+    }
+
     return (
         <View style={kanjiCardStyle.container}>
 
@@ -62,9 +78,19 @@ const KanjiCard = (props: KanjiProps) => {
                     width="200"
                     height="200"
                 />
-            <Text style={kanjiCardStyle.text}>{kanji?.meaning}</Text>
-            <KanjiAnswerField />
-            <Button title="OK" color="#FF5C5C" />
+            {!hasAnswered && (
+                <>
+                    <Text style={kanjiCardStyle.text}>{kanji?.meaning}</Text>
+                    <KanjiAnswerField answer={answer} setAnswer={setAnswer} />
+                    <Button title="OK" color="#FF5C5C" onPress={computeAnswer} />
+                </>
+            ) || (
+                <>
+                    <Text style={textAnswerStyle.text}>{kanji?.meaning}</Text>
+                    <Text style={kanjiCardStyle.text}>{answer}</Text>
+                    <Button title="NEXT" color="#FF5C5C" onPress={computeNext}/>
+                </>
+                )}
         </View>
     );
 }; 

navigation/Startup.tsx

@@ -42,7 +42,7 @@ export default function Startup() {
         
         await (await fetchKanjis())(dispatch);
         //await new Promise(resolve => setTimeout(resolve, 5000));
-        navigator.navigate("Main");
+        navigator.replace("Main");
     }
 
     useEffect(() => {

pages/Detail.tsx

@@ -15,18 +15,22 @@ const Detail = ({route}) => {
     const fetchXml = async () => {
         const imgxml = await (await fetch(kanji.image)).text();
         setImgXml(imgxml);
-        const iconxml = await (await fetch(kanji.radical.position)).text();
-        setIconXml(iconxml);
+        if (kanji.radical.position) {
+            const iconxml = await (await fetch(kanji.radical.position))?.text();
+            setIconXml(iconxml);
+        }
     }
 
     useEffect(() => {
+        console.log(kanji)
+
         fetchXml();
     }, []);
 
 
     return (
         <View style={detailStyle.container}>
-            <View>
+            <View style={detailStyle.pronounciation}>
                 <Text style={detailStyle.text}>{kanji.onyomi}</Text>
                 <Text style={detailStyle.text}>{kanji.kunyomi}</Text>
             </View>
@@ -39,11 +43,16 @@ const Detail = ({route}) => {
             <Text style={detailStyle.tinyText}>{kanji.strokes + " strokes"}</Text>
             <Text style={detailStyle.meaningText}>{kanji.meaning}</Text>
 
-            <Text style={detailStyle.title}>Radical</Text>
-            <DetailRadical character={kanji.radical.character} icon={iconXml}/>
-
-            <Text style={detailStyle.title}>Examples</Text>
-            <DetailExamples data={kanji.examples} />
+            {kanji.radical.position && kanji.radical.character &&
+                (<>
+                    <Text style={detailStyle.title}>Radical</Text>
+                    <DetailRadical character={kanji.radical.character} icon={iconXml}/>
+                </>)}
+            {kanji.examples &&
+                (<>
+                    <Text style={detailStyle.title}>Examples</Text>
+                    <DetailExamples data={kanji.examples} />
+                </>)}
         </View>
     );
 };
@@ -59,6 +68,9 @@ const detailStyle_light = StyleSheet.create({
         height: "100%",
         width: "100%"
     },
+    pronounciation: {
+        alignItems: "center"
+    },
     svg: {
         color: "black"
     },
@@ -77,7 +89,7 @@ const detailStyle_light = StyleSheet.create({
         fontSize: 20,
         color: "#FF5C5C",
         fontWeight: "900",
-
+        textAlign: "center"
     }
 })
 
@@ -89,6 +101,9 @@ const detailStyle_dark = StyleSheet.create({
         alignItems: 'center',
         backgroundColor: "#1c1c1c",
     },
+    pronounciation: {
+        alignItems: "center"
+    },
     svg: {
         color: "white"
     },
@@ -108,6 +123,7 @@ const detailStyle_dark = StyleSheet.create({
         fontSize: 20,
         color: "#FF5C5C",
         fontWeight: "900",
+        textAlign: "center"
 
     }
 });

redux/reducers/kanjiReducer.ts

@@ -11,11 +11,9 @@ export default function kanjiReducer(state = initialState, action) {
     switch (action.type) {
         case c.SET_KANJIS:
             // @ts-ignore
-            console.log("SET KANJIS");
             return { ...state, kanjis: action.payload };
         case c.SET_SELECTED_KANJI:
             // @ts-ignore
-            console.log("SET SELECTED");
             return { ...state, selectedKanji: action.payload };
         default:
             return state;

redux/store.ts

@@ -1,4 +1,4 @@
-import { configureStore, createSerializableStateInvariantMiddleware } from '@reduxjs/toolkit'
+import { configureStore, createSerializableStateInvariantMiddleware, getDefaultMiddleware } from '@reduxjs/toolkit'
 import kanjiReducer  from './reducers/kanjiReducer';
 
 // Reference here all your application reducers
@@ -10,10 +10,10 @@ const reducer = {
 const store = configureStore(
 	{
 		reducer,
-		middleware: [createSerializableStateInvariantMiddleware({
-			ignoredActions: ["SET_KANJIS", "SET_SELECTED_KANJI"],
-			ignoreActions: true
-		})]
+		middleware: getDefaultMiddleware({
+			serializableCheck: false
+			})
+		
 	},);
 
 export default store;