Adding search in Kanji Playground

App.tsx

@@ -1,23 +1,26 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
 import store from "./redux/store";
-import { Provider, useDispatch } from 'react-redux';
+import { Provider } from 'react-redux';
 
 import { StatusBar } from 'expo-status-bar';
-import { Keyboard, SafeAreaView, StyleSheet, TouchableWithoutFeedback} from 'react-native';
+import { Keyboard, StyleSheet, TouchableWithoutFeedback} from 'react-native';
 
 import { InitStack } from './navigation/Startup';
 
+import {SafeAreaView} from 'react-native-safe-area-context';
+
+
 export default function App() {
 
     return (
     <Provider store={store}>
-            <TouchableWithoutFeedback onPress={() => { Keyboard.dismiss(); }}>
+        <TouchableWithoutFeedback onPress={() => { Keyboard.dismiss(); }}>
-                <SafeAreaView style={styles.container}>
+            <SafeAreaView style={styles.container}>
-                    <InitStack/>
+                <InitStack/>
-                    <StatusBar style="auto" />
+                <StatusBar style="auto" />
-                </SafeAreaView>
+            </SafeAreaView>
-            </TouchableWithoutFeedback>
+        </TouchableWithoutFeedback>
     </Provider>
 
   );
@@ -27,9 +30,5 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         backgroundColor: '#FF5C5C',
-  },
+    },
 });
-
-
-
-

components/KanjiPlaygroundList.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FlatList, StyleSheet, Text, TextInput, TouchableOpacity, useColorScheme, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { Kanji } from '../model/kanji';
 import { setSelectedKanji } from '../redux/actions/setSelectedKanji';
+import { searchKanjis } from '../redux/thunks/searchKanjis';
 
 
 
@@ -12,23 +13,32 @@ interface kanjiPlaygroundListProps {
 
 const KanjiPlaygroundList = (props: kanjiPlaygroundListProps) => {
 
-    const kanjiPlaygroundList = useColorScheme() == 'light' ? kanjiPlaygroundList_light : kanjiPlaygroundList_dark;
+    const kanjiPlaygroundListStyle = useColorScheme() == 'light' ? kanjiPlaygroundListStyle_light : kanjiPlaygroundListStyle_dark;
+    const [search, setSearch] = React.useState("");
 
 
-    const selectedKanji = useSelector(state => state.kanjiReducer.selectedKanji);
+    const searchResult: Kanji[] = useSelector(state => state.kanjiReducer.playgroundList);
     const dispatch = useDispatch();
 
+    useEffect(() => {
+        console.log(searchResult);
+    }, [searchResult])
+
     return (
-        <View style={kanjiPlaygroundList.container}>
+        <View style={kanjiPlaygroundListStyle.container}>
-            <TextInput style={kanjiPlaygroundList.input}
+            <TextInput style={kanjiPlaygroundListStyle.input}
-                placeholder="Search kanji here"></TextInput>
+                placeholder="Search kanji here"
+                value={search}
+                onChangeText={setSearch}
+                onBlur={async () => await (await searchKanjis(search))(dispatch)}
+            ></TextInput>
             <FlatList 
                 numColumns={4}
-                data={props.data}
+                data={searchResult}
                 renderItem={
                     ({ item }) => (
-                        <TouchableOpacity onPress={() => { dispatch(setSelectedKanji(item))}} style={kanjiPlaygroundList.entry}>
+                        <TouchableOpacity onPress={() => { dispatch(setSelectedKanji(item))}} style={kanjiPlaygroundListStyle.entry}>
-                            <Text style={kanjiPlaygroundList.entryText}>{item.character}</Text>
+                            <Text style={kanjiPlaygroundListStyle.entryText}>{item.character}</Text>
                         </TouchableOpacity>
                     )
                 }
@@ -38,7 +48,7 @@ const KanjiPlaygroundList = (props: kanjiPlaygroundListProps) => {
     );
 };
 
-const kanjiPlaygroundList_light = StyleSheet.create({
+const kanjiPlaygroundListStyle_light = StyleSheet.create({
     container: {
         width: '70%',
         height: '30%',
@@ -68,7 +78,7 @@ const kanjiPlaygroundList_light = StyleSheet.create({
     },
 })
 
-const kanjiPlaygroundList_dark = StyleSheet.create({
+const kanjiPlaygroundListStyle_dark = StyleSheet.create({
     container: {
         width: '70%',
         height: '30%',

redux/actions/setPlaygroundList.ts

@@ -0,0 +1,10 @@
+import { Kanji } from '../../model/kanji';
+import { SET_PLAYGROUND_LIST } from '../constants';
+
+export const setPlaygroundList = (kanjis: Kanji[]) => {
+    console.log("SET");
+    return {
+        type: SET_PLAYGROUND_LIST,
+        payload: kanjis,
+    };
+}

redux/constants.ts

@@ -1,2 +1,3 @@
 export const SET_SELECTED_KANJI = 'SET_SELECTED_KANJI';
-export const SET_KANJIS = 'SET_KANJIS';
+export const SET_KANJIS = 'SET_KANJIS';
+export const SET_PLAYGROUND_LIST = 'SET_PLAYGROUND_LIST';

redux/reducers/kanjiReducer.ts

@@ -4,6 +4,7 @@ import * as c from '../constants';
 const initialState = {
     kanjis: initKanjiListByGrade(),
     selectedKanji: null,
+    playgroundList: []
 }
 
 // @ts-ignore
@@ -15,6 +16,9 @@ export default function kanjiReducer(state = initialState, action) {
         case c.SET_SELECTED_KANJI:
             // @ts-ignore
             return { ...state, selectedKanji: action.payload };
+        case c.SET_PLAYGROUND_LIST:
+            // @ts-ignore
+            return { ...state, playgroundList: [...action.payload] };
         default:
             return state;
     }

redux/store.ts

@@ -1,4 +1,5 @@
 import { configureStore, createSerializableStateInvariantMiddleware, getDefaultMiddleware } from '@reduxjs/toolkit'
+import { SET_KANJIS, SET_PLAYGROUND_LIST, SET_SELECTED_KANJI } from './constants';
 import kanjiReducer  from './reducers/kanjiReducer';
 
 // Reference here all your application reducers
@@ -11,8 +12,10 @@ const store = configureStore(
 	{
 		reducer,
 		middleware: getDefaultMiddleware({
-			serializableCheck: false
+			serializableCheck: {
-			})
+				ignoredActions: [SET_KANJIS, SET_PLAYGROUND_LIST, SET_SELECTED_KANJI]
+				}
+		})
 		
 	},);
 

redux/thunks/fetchKanjis.ts

@@ -22,20 +22,20 @@ export const fetchKanjis = async () => {
     return async (dispatch) => {
         const fetchAll = async () => {
             for (let i = 1; i <= 6; i++) {
-                await fetchData(i.toString()).then(async (response) => {
+
-                    const data = await response.json();
+                const data = await fetchData(i.toString()).then(response => response.json());
-                    data.forEach(async (it: object) => {
+
-                        await fetch(`https://kanjialive-api.p.rapidapi.com/api/public/kanji/${it.kanji.character}`, options)
+                const fetchPromises = data.map(it =>
-                            .then(async detail => {
+                    fetch(`https://kanjialive-api.p.rapidapi.com/api/public/kanji/${it.kanji.character}`, options)
-                                const detail_data = await detail.json();
+                        .then(detail => detail.json())
-                                kanjis['Grade ' + i].push(KanjiMapper.ApiJsonToKanji(detail_data));
+                );
-                            })
+
-                    })
+                kanjis['Grade ' + i] = await Promise.all(fetchPromises)
-                })
+                    .then(details => details.map(detail_data => KanjiMapper.ApiJsonToKanji(detail_data)));
             }
         }
         return fetchAll().then(_ => dispatch(setKanjis(kanjis)))
                   .catch((err) => console.log("ERR : " + err));
 
     };  
-} 
+} 

redux/thunks/searchKanjis.ts

@@ -0,0 +1,40 @@
+import { useDispatch } from 'react-redux';
+import { Kanji } from '../../model/kanji';
+import { initKanjiListByGrade, KanjiListByGrade } from '../../model/kanjiListByGrades';
+import { KanjiMapper } from '../../model/kanjiMapper';
+import { setPlaygroundList } from '../actions/setPlaygroundList';
+
+// @ts-ignore
+export const searchKanjis = async (search: string) => {
+
+    const options = {
+        method: 'GET',
+        headers: {
+            'X-RapidAPI-Key': '19516a9900mshce10de76f99976bp10f192jsn8c8d82222baa',
+            'X-RapidAPI-Host': 'kanjialive-api.p.rapidapi.com'
+        }
+    };
+
+    return async (dispatch) => {
+        const fetchAll = async () => {
+            const data = await fetch(`https://kanjialive-api.p.rapidapi.com/api/public/search/${search}`, options)
+                .then(response => response.json());
+
+            const fetchPromises = data.map(it =>
+                fetch(`https://kanjialive-api.p.rapidapi.com/api/public/kanji/${it.kanji.character}`, options)
+                    .then(detail => detail.json())
+            );
+
+            const kanjis = await Promise.all(fetchPromises)
+                .then(details => details.map(detail_data => KanjiMapper.ApiJsonToKanji(detail_data)));
+
+            return kanjis;
+        };
+
+        return fetchAll()
+            .then(kanjis => dispatch(setPlaygroundList(kanjis)))
+            .catch(err => console.log("ERR : " + err));
+
+
+    };
+}