Correcting dependencies

.vs/VSWorkspaceState.json

@@ -2,15 +2,15 @@
   "ExpandedNodes": [
     "",
     "\\src",
-    "\\src\\assets",
-    "\\src\\components",
     "\\src\\navigation",
+    "\\src\\pages",
     "\\src\\redux",
     "\\src\\redux\\actions",
     "\\src\\redux\\reducers",
     "\\src\\redux\\thunks",
-    "\\src\\storage"
+    "\\src\\storage",
+    "\\src\\test"
   ],
-  "SelectedNode": "\\src\\navigation\\TabBar.tsx",
+  "SelectedNode": "\\src\\components\\KanjiListCell.tsx",
   "PreviewInSolutionExplorer": false
 }

src/.idea/vcs.xml

@@ -2,5 +2,6 @@
 <project version="4">
   <component name="VcsDirectoryMappings">
     <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
   </component>
 </project>

src/components/DrawingCanva.tsx

@@ -1,163 +0,0 @@
-import Slider from '@react-native-community/slider';
-import React, { useEffect, useRef, useState } from 'react';
-import { Button, StyleSheet, TouchableOpacity, useColorScheme, View } from 'react-native';
-import { SvgXml } from 'react-native-svg';
-import { SketchCanvas, SketchCanvasRef } from 'rn-perfect-sketch-canvas';
-
-import { useSelector } from 'react-redux';
-import { Kanji } from '../model/kanji';
-import { KanjiMapper } from '../model/kanjiMapper';
-
-import { Eye, EyeOff } from "react-native-feather";
-import { learnihonColors } from '../assets/colors';
-
-const DrawingCanva = () => {
-
-    const style = useColorScheme()  == 'light' ? style_light : style_dark;
-
-    const canvasRef = useRef<SketchCanvasRef>(null);
-    const [strokeWidth, setStroke] = useState(5);
-    const [isCanvasReady, setIsCanvasReady] = useState(false);
-    const [imgXml, setImgXml] = useState('<svg></svg>');
-    const selectedKanji = KanjiMapper.SerializedObjectToKanji(useSelector(state => state.kanjiReducer.selectedKanji));
-
-    const [isVisible, setIsVisible] = useState(true);
-
-    useEffect(() => {
-        fetchXml();
-        if (canvasRef.current) {
-            setIsCanvasReady(true);
-        }
-    }, [canvasRef.current, selectedKanji]);
-
-    const fetchXml = async () => {
-        if (selectedKanji instanceof Kanji) {
-            const xml = await (await fetch(selectedKanji.image)).text();
-            setImgXml(xml);
-        }
-    }
-
-    return (
-        <View style={style.container}>
-
-            <TouchableOpacity style={style.visibility} onPress={() => setIsVisible(!isVisible)}>
-                {isVisible ? (<Eye stroke={style.svg.color} opacity={0.5} />) :
-                    (<EyeOff stroke={style.svg.color} opacity={0.5} />)}
-            </TouchableOpacity>
-
-            {selectedKanji && isVisible && (
-                 <SvgXml
-                    xml={imgXml
-                        .replace(/fill="#[0-9a-f]{6}"/g, `fill=${style.svg.color}`)}
-                    width="75%"
-                    height="75%"
-                    opacity={0.1}
-                    style={style.back}
-                />)}
-
-                <SketchCanvas
-                    ref={canvasRef}
-                    strokeColor={style.canvas.strokeColor}
-                    strokeWidth={strokeWidth}
-                    containerStyle={style.canvas}
-                    />
-            <Slider
-                style={style.slider}
-                onValueChange={(val) => setStroke(val)}
-                minimumValue={5}
-                maximumValue={15}
-                minimumTrackTintColor={learnihonColors.main}
-            />
-            {isCanvasReady && (<View style={style.menu}>
-                <Button color={learnihonColors.main} onPress={() => {
-                    canvasRef.current?.reset();
-                    setStroke(strokeWidth);
-                }} title="Reset" />
-                <Button color={learnihonColors.main}
-                    onPress={() => {
-                    canvasRef.current?.undo();
-                    setStroke(strokeWidth);
-                }} title="Undo" />
-            </View>)}
-        </View>
-    );
-};
-
-const style_light = StyleSheet.create({
-    svg: {
-      color: "black"  
-    },
-    container: {
-        flex: 1,
-        width: "100%",
-    },
-    back: {
-        alignSelf: "center",
-        width: "75%",
-        height: "75%",
-        position: "absolute"
-    },
-    canvas: {
-        alignSelf: "center",
-        height: "75%",
-        width: "75%",
-        borderWidth: 2,
-        borderColor: "black",
-        strokeColor: "black"
-    },
-    menu: {
-        flexDirection: "row",
-        justifyContent: "space-evenly",
-    },
-    slider: {
-        width: "75%",
-        alignSelf: "center",
-    },
-    visibility: {
-    position: "absolute",
-    right: 50,
-    top: -25
-}
-});
-
-const style_dark = StyleSheet.create({
-    svg: {
-        color: "white"
-    },
-    container: {
-        flex: 1,
-        width: "100%",
-    },
-    back: {
-        alignSelf: "center",
-        width: "75%",
-        height: "75%",
-        position: "absolute"
-    },
-    canvas: {
-        alignSelf: "center",
-        height: "75%",
-        width: "75%",
-        borderWidth: 2,
-        borderColor: "white",
-        strokeColor: "white"
-
-    },
-    menu: {
-        flexDirection: "row",
-        justifyContent: "space-evenly",
-    },
-    slider: {
-        width: "75%",
-        alignSelf: "center",
-    },
-    visibility: {
-        position: "absolute",
-        right: 50,
-        top: -25
-    }
-});
-
-
-
-export default DrawingCanva;

src/package.json

@@ -9,7 +9,6 @@
     "web": "expo start --web",
     "test": "jest --coverage=true --coverageDirectory=./test/coverage"
   },
-
   "jest": {
     "preset": "jest-expo",
     "verbose": true,
@@ -18,7 +17,8 @@
     ],
     "testMatch": [
       "**.test.js",
-      "**.test.ts"
+      "**.test.ts",
+      "**.test.tsx"
     ],
     "testEnvironment": "node",
     "testEnvironmentOptions": {
@@ -29,7 +29,6 @@
       ]
     }
   },
-
   "dependencies": {
     "@benjeau/react-native-draw": "^0.8.3",
     "@jest/globals": "^29.5.0",
@@ -40,15 +39,15 @@
     "@react-navigation/stack": "^6.3.12",
     "@reduxjs/toolkit": "^1.9.2",
     "@shopify/react-native-skia": "0.1.157",
+    "@testing-library/jest-native": "^5.4.2",
+    "@testing-library/react-native": "^12.0.1",
     "@types/jest": "^29.5.0",
     "expo": "~47.0.12",
     "expo-2d-context": "^0.0.3",
     "expo-av": "~13.0.2",
     "expo-cli": "^6.3.0",
     "expo-status-bar": "~1.4.2",
-    "jest": "^26.6.3",
+    "react": "^18.1.0",
-    "jest-expo": "^48.0.2",
-    "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-native": "0.70.5",
     "react-native-canvas": "^0.1.38",
@@ -67,6 +66,10 @@
     "@types/react-native": "~0.70.6",
     "@types/react-native-canvas": "^0.1.9",
     "@types/react-native-video": "^5.0.14",
+    "jest": "^29.5.0",
+    "jest-expo": "~47.0.1",
+    "react-test-renderer": "18.1.0",
+    "ts-jest": "^29.0.5",
     "typescript": "^4.6.3"
   },
   "private": true

src/pages/Playground.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import DrawingCanva from '../components/DrawingCanva';
+import DrawingCanvas from '../components/DrawingCanvas';
 import KanjiPlaygroundList from '../components/KanjiPlaygroundList';
 import LearnihonPage from './LearnihonPage';
 
@@ -8,7 +8,7 @@ const Playground = () => {
     return (
         <LearnihonPage>
             <KanjiPlaygroundList/>
-            <DrawingCanva/>
+            <DrawingCanvas/>
         </LearnihonPage>
     );
 };

src/redux/store.ts

@@ -1,4 +1,4 @@
-import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
+import { configureStore } from '@reduxjs/toolkit';
 import { SET_KANJIS, SET_PLAYGROUND_LIST, SET_SELECTED_KANJI } from './constants';
 import kanjiReducer from './reducers/kanjiReducer';