Correcting bugs and code smells

src/components/DrawingCanva.tsx

@@ -19,7 +19,6 @@ const DrawingCanva = () => {
     const [strokeWidth, setStroke] = useState(5);
     const [isCanvasReady, setIsCanvasReady] = useState(false);
     const [imgXml, setImgXml] = useState('<svg></svg>');
-    const [drawnStrokes, setDrawnStrokes] = useState(0);
     const selectedKanji = KanjiMapper.SerializedObjectToKanji(useSelector(state => state.kanjiReducer.selectedKanji));
 
     const [isVisible, setIsVisible] = useState(true);
@@ -31,10 +30,6 @@ const DrawingCanva = () => {
         }
     }, [canvasRef.current, selectedKanji]);
 
-    const getCanvasStrokeCount = () => {
-        return canvasRef.current?.toPoints().length;
-    }
-
     const fetchXml = async () => {
         if (selectedKanji instanceof Kanji) {
             const xml = await (await fetch(selectedKanji.image)).text();

src/components/GradeChip.tsx

@@ -5,7 +5,7 @@ import { learnihonColors } from '../assets/colors';
 
 interface gradeChipProps {
     grade: number;
-    onSelect: (item: string, isSelected: Boolean) => void;
+    onSelect: (item: string, isSelected: boolean) => void;
 }
 
 const GradeChip = (props: gradeChipProps) => {

src/components/GradeChipList.tsx

@@ -1,10 +1,9 @@
-import { useNavigation } from "@react-navigation/native";
 import React from "react";
 import { FlatList, StyleSheet, View } from "react-native";
 import GradeChip from './GradeChip';
 
 interface kanjiListSeachPanelProps {
-    onSelect: (item: string, isSelected: Boolean) => void;
+    onSelect: (item: string, isSelected: boolean) => void;
 }
 
 const GradeChipList = (props: kanjiListSeachPanelProps) => {

src/components/KanjiCard.tsx

@@ -11,9 +11,9 @@ import KanjiAnswerField from './KanjiAnswerField';
 
 const KanjiCard = () => {
 
-    var kanjiCardStyle = useColorScheme() == 'light' ? kanjiCardStyle_light : kanjiCardStyle_dark;
+    let kanjiCardStyle = useColorScheme() == 'light' ? kanjiCardStyle_light : kanjiCardStyle_dark;
     const [answerTextColor, setAnswerTextColor] = useState(kanjiCardStyle.text.color); 
-    var textAnswerStyle = StyleSheet.create({
+    let textAnswerStyle = StyleSheet.create({
         text: {
             color: answerTextColor,
             fontWeight: "bold",
@@ -35,7 +35,7 @@ const KanjiCard = () => {
 
     const nextKanji = () => {
         if (selectedItems.length) {
-            var items= [].concat(...Object.values(selectedItems.map(it => it.data)))
+            let items= [].concat(...Object.values(selectedItems.map(it => it.data)))
             return items[Math.floor(Math.random() * items.length)]
         }
         return allKanjis[Math.floor(Math.random() * allKanjis.length)]
@@ -46,7 +46,7 @@ const KanjiCard = () => {
     const [hasAnswered, setHasAnswered] = useState(false);
     const [answer, setAnswer] = React.useState("");
 
-    var kanjis: KanjiListByGrade = useSelector(state => state.kanjiReducer.kanjis);
+    let kanjis: KanjiListByGrade = useSelector(state => state.kanjiReducer.kanjis);
 
     const allKanjis = [].concat(...Object.values(kanjis))
 
@@ -69,7 +69,7 @@ const KanjiCard = () => {
     }, [kanji]);
 
     const computeAnswer = () => {
-        var isCorrect = isAnswerRight();
+        let isCorrect = isAnswerRight();
         setAnswerTextColor(isCorrect ? learnihonColors.correct : learnihonColors.wrong);
         storeGuess(kanji?.character!, isCorrect);
         setHasAnswered(true);

src/components/KanjiList.tsx

@@ -12,7 +12,7 @@ const KanjiList = () => {
 
     const kanjiListStyle = useColorScheme() == 'light' ? kanjiListStyle_light : kanjiListStyle_dark;
 
-    var kanjis: KanjiListByGrade = useSelector(state => state.kanjiReducer.kanjis);
+    let kanjis: KanjiListByGrade = useSelector(state => state.kanjiReducer.kanjis);
 
     const [selectedItems, setSelectedItems] = useState<{title: string, data: Kanji[]}[]>([]);
     const updateSelectedItems = (item: string, isSelected: Boolean) => {

src/components/KanjiListCell.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { StyleSheet, Text, TouchableOpacity, useColorScheme } from 'react-native';
 import { learnihonColors } from '../assets/colors';
 import { Kanji } from '../model/kanji';
-import { calcCorrectGuessesRatio, getColorByRatio, KanjiGuess } from '../model/kanjiGuess';
+import { calcCorrectGuessesRatio, getColorByRatio } from '../model/kanjiGuess';
 import { retrieveGuess } from '../storage/storage';
 
 interface kanjiListCellProps {
@@ -17,7 +17,7 @@ const KanjiListCell = React.memo((props: kanjiListCellProps) => {
     const navigator = useNavigation();
     const [guessColor, setGuessColor] = useState(cellStyle.text.color);
     const [ratio, setRatio] = useState(-1);
-    var ratioStyle = StyleSheet.create({
+    let ratioStyle = StyleSheet.create({
         text:
         {
             color: guessColor,

src/model/kanjiMapper.ts

@@ -3,12 +3,12 @@ import { Kanji } from "./kanji";
 export class KanjiMapper {
 
     static ApiJsonToKanji(json: any): Kanji {
-        var radical: { character: string, position: string } = {
+        let radical: { character: string, position: string } = {
             character: json.radical.character,
             position: json.radical.position.icon
         };
 
-        var examples: { japanese: string, english: string }[] = [];
+        let examples: { japanese: string, english: string }[] = [];
 
         json.examples.forEach(
             (entry) => {

src/pages/Detail.tsx

@@ -54,7 +54,7 @@ const Detail = ({route}) => {
             <Text style={detailStyle.tinyText}>{kanji.strokes + " strokes"}</Text>
             <Text style={detailStyle.meaningText}>{kanji.meaning}</Text>
 
-            {kanji.radical.position && kanji.radical.character &&
+            {!!(kanji.radical.position && kanji.radical.character) &&
                 (<>
                     <Text style={detailStyle.title}>Radical</Text>
                     <DetailRadical character={kanji.radical.character} icon={iconXml}/>