Adding component LearnihonPage with children props

.vs/VSWorkspaceState.json

@@ -3,14 +3,9 @@
     "",
     "\\assets",
     "\\components",
-    "\\model",
     "\\navigation",
-    "\\pages",
+    "\\pages"
-    "\\redux",
-    "\\redux\\actions",
-    "\\redux\\reducers",
-    "\\redux\\thunks"
   ],
-  "SelectedNode": "\\components\\KanjiPlaygroundList.tsx",
+  "SelectedNode": "\\pages\\List.tsx",
   "PreviewInSolutionExplorer": false
 }

app.json

@@ -4,10 +4,10 @@
     "slug": "Learnihon",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./src/assets/icon.png",
+    "icon": "./assets/icon.png",
     "userInterfaceStyle": "automatic",
     "splash": {
-      "image": "./src/assets/splash.png",
+      "image": "./assets/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
@@ -22,12 +22,12 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./src/assets/adaptive-icon.png",
+        "foregroundImage": "./assets/icon.png",
-        "backgroundColor": "#FFFFFF",
+        "backgroundColor": "#FFFFFF"
       }
     },
     "web": {
-      "favicon": "./src/assets/favicon.png"
+      "favicon": "./assets/favicon.png"
     }
   }
 }

components/DrawingCanva.tsx

@@ -11,11 +11,7 @@ import { KanjiMapper } from '../model/kanjiMapper';
 import { Eye, EyeOff } from "react-native-feather";
 import { learnihonColors } from '../assets/colors';
 
-type DrawingCanvaProps = {
+const DrawingCanva = () => {
-    backgroundImage: string;
-} 
-
-const DrawingCanva = (props: DrawingCanvaProps) => {
 
     const style = useColorScheme()  == 'light' ? style_light : style_dark;
 

components/KanjiList.tsx

@@ -27,21 +27,21 @@ const KanjiList = () => {
     };
 
     return (
-        <View>
+        <View style={kanjiListStyle.container}>
             <GradeChipList onSelect={updateSelectedItems} />
 
             {selectedItems.length ?
             (<SectionList
-                sections={selectedItems}
+                    sections={selectedItems}
-                windowSize={50}
+                    windowSize={50}
-                renderItem={
+                    renderItem={
-                    ({ item }) => <KanjiListCell kanji={item} />
+                        ({ item }) => <KanjiListCell kanji={item} />
-                }
+                    }
-                renderSectionHeader={({ section }) => (
+                    renderSectionHeader={({ section }) => (
-                    <Text style={kanjiListStyle.sectionHeader}>{section.title}</Text>
+                        <Text style={kanjiListStyle.sectionHeader}>{section.title}</Text>
-                )}
+                    )}
-                keyExtractor={item => `basicListEntry-${item.character}`}/>) 
+                    keyExtractor={item => `basicListEntry-${item.character}`}/>
-                : (
+                ) : (
                     <View style={kanjiListStyle.container}>
                         <Text style={kanjiListStyle.text}>Select a grade</Text>
                     </View>
@@ -68,9 +68,7 @@ const kanjiListStyle_light = StyleSheet.create({
         opacity: 0.5
     },
     container: {
-        flex: 1,
+        flex: 1
-        justifyContent: 'center',
-        alignItems: 'center',
     },
 })
 
@@ -92,9 +90,7 @@ const kanjiListStyle_dark = StyleSheet.create({
         opacity: 0.5
     },
     container: {
-        flex: 1,
+        flex: 1
-        justifyContent: 'center',
-        alignItems: 'center',
     },
 })
 

model/kanjiGuess.ts

@@ -6,7 +6,7 @@ export type KanjiGuess = {
 }
 
 export const calcCorrectGuessesRatio = (guess: KanjiGuess): number => {
-    return (guess.totalCorrectGuesses / guess.totalGuesses) * 100;
+    return Math.round((guess.totalCorrectGuesses / guess.totalGuesses) * 100);
 }
 
 export const getColorByRatio = (ratio: number): string => {

navigation/TabBar.tsx

@@ -76,13 +76,9 @@ const TabBar = () => {
 
     const Tab = createBottomTabNavigator();
     return (
-        <>
-        <Header/>
         <Tab.Navigator
         screenOptions={tabOptions}
-        initialRouteName="Learn"
+        initialRouteName="Learn">
-                
-        >
             <Tab.Screen
                 options={{
                     tabBarIcon: ({ color }) => (
@@ -90,9 +86,8 @@ const TabBar = () => {
                     )
                 }}
                 name="List"
-            component={KanjiStackNavigator}
+            component={KanjiStackNavigator}/>
-            />
+            <Tab.Screen
-        <Tab.Screen
             options={{
                 tabBarIcon: ({ color }) => (
                     <LearnIcon color={color} width={32} height={32} />
@@ -111,8 +106,7 @@ const TabBar = () => {
                 }}
                 name="Playground"
                 component={Playground} />
-            </Tab.Navigator>
+        </Tab.Navigator>
-        </>
     );
 }
 

pages/Detail.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, useColorScheme, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, Text, useColorScheme, View } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { learnihonColors } from '../assets/colors';
 import DetailExamples from '../components/DetailExamples';
@@ -11,6 +11,8 @@ const Detail = ({route}) => {
     const kanji:Kanji = route.params.kanji;
     const detailStyle = useColorScheme() == 'light' ? detailStyle_light : detailStyle_dark;
 
+
+    const [loadingImg, setLoadingImg] = useState(false);
     const [iconXml, setIconXml] = useState('<svg></svg>');
     const [imgXml, setImgXml] = useState('<svg></svg>');
 
@@ -25,8 +27,10 @@ const Detail = ({route}) => {
 
     useEffect(() => {
         console.log(kanji)
-
+        setLoadingImg(true);
-        fetchXml();
+        fetchXml().then(_ => {
+            setLoadingImg(false);
+        });
     }, []);
 
 
@@ -36,11 +40,16 @@ const Detail = ({route}) => {
                 <Text style={detailStyle.text}>{kanji.onyomi}</Text>
                 <Text style={detailStyle.text}>{kanji.kunyomi}</Text>
             </View>
-            <SvgXml
+            {loadingImg ? 
+                (
+                    <View style={detailStyle.loader}>
+                        <ActivityIndicator size="large" color={learnihonColors.main} />
+                    </View>
+                ):(<SvgXml
                 xml={imgXml
                     .replace(/fill="#[0-9a-f]{6}"/g, `fill=${detailStyle.svg.color}`)}
                 width="100"
-                height="100"/>
+                height="100" />)}
 
             <Text style={detailStyle.tinyText}>{kanji.strokes + " strokes"}</Text>
             <Text style={detailStyle.meaningText}>{kanji.meaning}</Text>
@@ -92,6 +101,12 @@ const detailStyle_light = StyleSheet.create({
         color: learnihonColors.main,
         fontWeight: "900",
         textAlign: "center"
+    },
+    loader: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 100,
+        height: 100
     }
 })
 
@@ -127,6 +142,12 @@ const detailStyle_dark = StyleSheet.create({
         fontWeight: "900",
         textAlign: "center"
 
+    },
+    loader: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 100,
+        height: 100
     }
 });
 

pages/Learn.tsx

@@ -1,38 +1,14 @@
 import React from 'react';
-import { StyleSheet, useColorScheme, View } from 'react-native';
-import { learnihonColors } from '../assets/colors';
 import KanjiCard from '../components/KanjiCard';
+import LearnihonPage from './LearnihonPage';
 
 
 const Learn = () => {
 
-    const learnStyle = useColorScheme() == 'light' ? learnStyle_light : learnStyle_dark;
-
     return (
-        <View style={learnStyle.container}>
+        <LearnihonPage>
             <KanjiCard></KanjiCard>
-        </View>
+        </LearnihonPage>
     );
 };
-
-
-const learnStyle_light = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: learnihonColors.light
-    }
-})
-
-
-const learnStyle_dark = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: learnihonColors.dark,
-    },
-});
-
 export default Learn;

pages/LearnihonPage.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleSheet, useColorScheme, View } from 'react-native';
+import { learnihonColors } from '../assets/colors';
+import Header from '../components/Header';
+
+
+const LearnihonPage = ({ children }: React.PropsWithChildren<{}>) => {
+
+    const style = useColorScheme() == 'light' ? style_light : style_dark;
+
+    return (
+        <View style={style.container}>
+            <Header/>
+            {children}
+        </View>
+    );
+};
+
+
+const style_light = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: learnihonColors.light
+    }
+})
+
+
+const style_dark = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: learnihonColors.dark,
+    },
+});
+
+export default LearnihonPage;

pages/List.tsx

@@ -2,37 +2,14 @@
 import { StyleSheet, useColorScheme, View } from 'react-native';
 import { learnihonColors } from '../assets/colors';
 import KanjiList from '../components/KanjiList';
+import LearnihonPage from './LearnihonPage';
 
 
 const List = () => {
-    
-    const listStyle = useColorScheme() == 'light' ? listStyle_light : listStyle_dark;
-
     return (
-        <View style={listStyle.container}>
+        <LearnihonPage>
             <KanjiList/>
-        </View>
+        </LearnihonPage>
     );
 };
-
-
-const listStyle_light = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: learnihonColors.light,
-    }
-})
-
-
-const listStyle_dark = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: learnihonColors.dark,
-    },
-});
-
 export default List;

pages/Playground.tsx

@@ -3,40 +3,15 @@ import { StyleSheet, useColorScheme, View } from 'react-native';
 import { learnihonColors } from '../assets/colors';
 import DrawingCanva from '../components/DrawingCanva';
 import KanjiPlaygroundList from '../components/KanjiPlaygroundList';
+import LearnihonPage from './LearnihonPage';
 
 
 const Playground = () => {
-    const playgroundStyle = useColorScheme() == 'light' ? playgroundStyle_light : playgroundStyle_dark;
-
     return (
-        <View style={playgroundStyle.container}>
+        <LearnihonPage>
             <KanjiPlaygroundList/>
-            <DrawingCanva backgroundImage="https://media.kanjialive.com/kanji_strokes/otozu(reru)_11.svg"/>
+            <DrawingCanva/>
-        </View>
+        </LearnihonPage>
     );
 };
-
-const playgroundStyle_light = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: learnihonColors.light
-
-    }
-})
-
-
-const playgroundStyle_dark = StyleSheet.create({
-    container: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: learnihonColors.dark,
-    },
-});
-
-
-
-
 export default Playground;