Adding KanjiListCell and correcting bugs

.vs/VSWorkspaceState.json

@@ -1,14 +1,14 @@
 {
   "ExpandedNodes": [
     "",
-    "\\assets",
     "\\components",
     "\\model",
+    "\\navigation",
     "\\pages",
     "\\redux",
     "\\redux\\actions",
     "\\redux\\reducers"
   ],
-  "SelectedNode": "\\components\\DrawingCanva.tsx",
+  "SelectedNode": "\\navigation\\TabBar.tsx",
   "PreviewInSolutionExplorer": false
 }

App.tsx

@@ -26,17 +26,6 @@ export default function App() {
   );
 }
 
-const tabOptions = {
-    tabBarShowLabel: false,
-    tabBarStyle: {
-        backgroundColor: "#FF5C5C"
-    },
-    tabBarActiveTintColor: "white",
-    tabBarInactiveTintColor: "black"
-};
-
-
-
 const styles = StyleSheet.create({
     container: {
         flex: 1,

components/DrawingCanva.tsx

@@ -24,16 +24,18 @@ const DrawingCanva = (props: DrawingCanvaProps) => {
 
 
     useEffect(() => {
-        if (canvasRef.current) {
         fetchXml();
+        if (canvasRef.current) {
             setIsCanvasReady(true);
         }
-    }, [canvasRef.current]);
+    }, [canvasRef.current, selectedKanji]);
 
     const fetchXml = async () => {
+        if (selectedKanji instanceof Kanji) {
             const xml = await (await fetch(selectedKanji.image)).text();
             setImgXml(xml);
         }
+    }
 
 
     return (

components/KanjiCard.tsx

@@ -43,7 +43,6 @@ const KanjiCard = (props: KanjiProps) => {
     }, []);
 
 
-
     return (
             <View style={kanjiCardStyle.container}>
 

components/KanjiList.tsx

@@ -1,23 +1,35 @@
-import React from 'react';
+import React from 'react';
-import { Text, SectionList, View, StyleSheet } from 'react-native';
+import { Text, SectionList, View, StyleSheet, useColorScheme } from 'react-native';
+import { Kanji } from '../model/kanji';
+import KanjiListCell from './KanjiListCell';
 
 
 const KanjiList = () => {
 
+    const kanjiListStyle = useColorScheme() == 'light' ? kanjiListStyle_light : kanjiListStyle_dark;
+
     return (
         <View style={kanjiListStyle.container}>
             <SectionList sections={[
                 {
                     title: "N5",
-                    data: ["aa", "aaa"]
+                    data: [
+                        new Kanji("親", "parent", "https://media.kanjialive.com/kanji_strokes/shita(shii)_16.svg"),
+                        new Kanji("雨", "rain", "https://media.kanjialive.com/kanji_strokes/u-ame_8.svg"),
+                        new Kanji("貴", "noble", "https://media.kanjialive.com/kanji_strokes/ki-touto(i)_12.svg")
+                    ]
                 },
                 {
                     title: "N4",
-                    data: ["b", "bbb"]
+                    data: [
+                        new Kanji("親", "parent", "https://media.kanjialive.com/kanji_strokes/shita(shii)_16.svg"),
+                        new Kanji("雨", "rain", "https://media.kanjialive.com/kanji_strokes/u-ame_8.svg"),
+                        new Kanji("貴", "noble", "https://media.kanjialive.com/kanji_strokes/ki-touto(i)_12.svg")
+                    ]
                 }
             ]}
                 renderItem={
-                    ({ item }) => <Text style={kanjiListStyle.item}>{item}</Text>
+                    ({ item }) => <KanjiListCell kanji={item} />
                 }
                 renderSectionHeader={({ section }) => (
                     <Text style={kanjiListStyle.sectionHeader}>{section.title}</Text>
@@ -29,7 +41,7 @@ const KanjiList = () => {
     );
 };
 
-const kanjiListStyle = StyleSheet.create({
+const kanjiListStyle_light = StyleSheet.create({
     container: {
         width: '100%',
         height: '100%',
@@ -40,9 +52,10 @@ const kanjiListStyle = StyleSheet.create({
         paddingLeft: 10,
         paddingRight: 10,
         paddingBottom: 2,
-        fontSize: 14,
+        fontSize: 20,
         fontWeight: 'bold',
-        backgroundColor: '#e6e6e6',
+        color: "black",
+        backgroundColor: '#d5d5d5',
     },
     item: {
         padding: 10,
@@ -51,4 +64,28 @@ const kanjiListStyle = StyleSheet.create({
     },
 })
 
+const kanjiListStyle_dark = StyleSheet.create({
+    container: {
+        width: '100%',
+        height: '100%',
+        padding: 10
+    },
+    sectionHeader: {
+        paddingTop: 2,
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingBottom: 2,
+        fontSize: 20,
+        fontWeight: 'bold',
+        color: "white",
+        backgroundColor: '#0d0d0d',
+    },
+    item: {
+        padding: 10,
+        fontSize: 18,
+        height: 44,
+    },
+})
+
+
 export default KanjiList;

components/KanjiListCell.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Text, View, StyleSheet, TouchableOpacity, useColorScheme } from 'react-native';
+import { Kanji } from '../model/kanji';
+
+interface kanjiListCellProps {
+    kanji: Kanji;
+}
+
+const KanjiListCell = (props: kanjiListCellProps) => {
+
+    const cellStyle = useColorScheme() == 'light' ? cellStyle_light : cellStyle_dark;
+
+
+    return (
+        <TouchableOpacity onPress={() => console.log(props.kanji)} style={cellStyle.item}>
+            <Text style={cellStyle.kanji}>{props.kanji.character}</Text>
+            <Text style={cellStyle.text}>{props.kanji.meaning}</Text>
+        </TouchableOpacity>
+    );
+};
+
+const cellStyle_light = StyleSheet.create({
+    item: {
+        padding: 10,
+        fontSize: 18,
+        height: 44,
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: '#e6e6e6',
+    },
+    text: {
+        color: "black",
+    },
+    kanji: {
+        fontWeight: "bold",
+        color: "black",
+        fontSize: "20em",
+        width: "50%"
+    }
+})
+
+const cellStyle_dark = StyleSheet.create({
+    item: {
+        padding: 10,
+        fontSize: 18,
+        height: 44,
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: '#1c1c1c',
+    },
+    text: {
+        color: "white",
+    },
+    kanji: {
+        fontWeight: "bold",
+        color: "white",
+        fontSize: "20em",
+        width: "50%"
+    },
+})
+
+export default KanjiListCell;

components/KanjiPlaygroundList.tsx

@@ -27,7 +27,7 @@ const KanjiPlaygroundList = (props: kanjiPlaygroundListProps) => {
                 data={props.data}
                 renderItem={
                     ({ item }) => (
-                        <TouchableOpacity onPress={() => dispatch(setSelectedKanji(item))} style={kanjiPlaygroundList.entry}>
+                        <TouchableOpacity onPress={() => { dispatch(setSelectedKanji(item)); console.log(item) }} style={kanjiPlaygroundList.entry}>
                             <Text style={kanjiPlaygroundList.entryText}>{item.character}</Text>
                         </TouchableOpacity>
                     )

navigation/TabBar.tsx

@@ -25,6 +25,11 @@ const LearnButton = (props: BottomTabBarButtonProps) => {
             justifyContent: 'center',
             alignItems: 'center',
         }}>
+
+            <View
+                style={learnButtonStyle.button2}>
+            </View>
+
             <TouchableNativeFeedback onPress={props.onPress}>
                 <View
                     style={learnButtonStyle.button}>
@@ -42,9 +47,14 @@ const learnButtonStyle_light = StyleSheet.create({
         width: 80,
         height: 80,
         borderRadius: 40,
-        borderColor: "#f5f5f4",
+    },
-        borderWidth: 5
+    button2: {
-    }
+        backgroundColor: "#f5f5f4",
+        width: 90,
+        height: 90,
+        borderRadius: 45,
+        position: "absolute"
+    },
 });
 
 const learnButtonStyle_dark = StyleSheet.create({
@@ -53,9 +63,14 @@ const learnButtonStyle_dark = StyleSheet.create({
         width: 80,
         height: 80,
         borderRadius: 40,
-        borderColor: "#2b2b2b",
+    },
-        borderWidth: 5
+    button2: {
-    }
+        backgroundColor: "#2b2b2b",
+        width: 90,
+        height: 90,
+        borderRadius: 45,
+        position: "absolute"
+    },
 });
 
 const TabBar = () => {
@@ -104,7 +119,7 @@ const tabOptions: BottomTabNavigationOptions = {
     tabBarShowLabel: false,
     headerShown: false,
     tabBarStyle: {
-        backgroundColor: "#FF5C5C"
+        backgroundColor: "#FF5C5C",
     },
     tabBarActiveTintColor: "white",
     tabBarInactiveTintColor: "black",

pages/Learn.tsx

@@ -21,7 +21,7 @@ const learnStyle_light = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: "#f5f5f4"
+        backgroundColor: "#f5f5f5"
     }
 })
 

pages/List.tsx

@@ -20,7 +20,7 @@ const listStyle_light = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: "#f5f5f4"
+        backgroundColor: "#f5f5f5"
     }
 })
 

pages/Playground.tsx

@@ -27,7 +27,7 @@ const playgroundStyle_light = StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: "#f5f5f4"
+        backgroundColor: "#f5f5f5"
 
     }
 })

redux/reducers/kanjiReducer.ts

@@ -13,6 +13,7 @@ export default function kanjiReducer(state = initialState, action) {
             return { ...state, kanjis: state.kanjis.push(action.payload) };
         case c.SET_SELECTED_KANJI:
             // @ts-ignore
+            console.log("select" + action.payload.meaning);
             return { ...state, selectedKanji: action.payload };
         default:
             return state;