diff --git a/.vs/LEARNIHON/FileContentIndex/2534c58f-9ae7-4767-b67f-77259d1f0725.vsidx b/.vs/LEARNIHON/FileContentIndex/2534c58f-9ae7-4767-b67f-77259d1f0725.vsidx new file mode 100644 index 0000000..afbf465 Binary files /dev/null and b/.vs/LEARNIHON/FileContentIndex/2534c58f-9ae7-4767-b67f-77259d1f0725.vsidx differ diff --git a/.vs/LEARNIHON/FileContentIndex/be389c18-6425-4f5b-9d89-3417bf0346ea.vsidx b/.vs/LEARNIHON/FileContentIndex/be389c18-6425-4f5b-9d89-3417bf0346ea.vsidx deleted file mode 100644 index b67acfb..0000000 Binary files a/.vs/LEARNIHON/FileContentIndex/be389c18-6425-4f5b-9d89-3417bf0346ea.vsidx and /dev/null differ diff --git a/.vs/LEARNIHON/FileContentIndex/cb72c0c1-899a-4487-9b4a-3c7b70c1694e.vsidx b/.vs/LEARNIHON/FileContentIndex/cb72c0c1-899a-4487-9b4a-3c7b70c1694e.vsidx new file mode 100644 index 0000000..19022fe Binary files /dev/null and b/.vs/LEARNIHON/FileContentIndex/cb72c0c1-899a-4487-9b4a-3c7b70c1694e.vsidx differ diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite index 48119de..6578fc5 100644 Binary files a/.vs/slnx.sqlite and b/.vs/slnx.sqlite differ diff --git a/App.tsx b/App.tsx index aec1ad1..709a76e 100644 --- a/App.tsx +++ b/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 ( - { Keyboard.dismiss(); }}> - - - - - + { Keyboard.dismiss(); }}> + + + + + ); @@ -27,9 +30,5 @@ const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#FF5C5C', - }, + }, }); - - - - diff --git a/components/KanjiPlaygroundList.tsx b/components/KanjiPlaygroundList.tsx index c033b61..158610a 100644 --- a/components/KanjiPlaygroundList.tsx +++ b/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 ( - - + + await (await searchKanjis(search))(dispatch)} + > ( - { dispatch(setSelectedKanji(item))}} style={kanjiPlaygroundList.entry}> - {item.character} + { dispatch(setSelectedKanji(item))}} style={kanjiPlaygroundListStyle.entry}> + {item.character} ) } @@ -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%', diff --git a/redux/actions/setPlaygroundList.ts b/redux/actions/setPlaygroundList.ts new file mode 100644 index 0000000..e7e52ba --- /dev/null +++ b/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, + }; +} \ No newline at end of file diff --git a/redux/constants.ts b/redux/constants.ts index f82bfd9..4533e9c 100644 --- a/redux/constants.ts +++ b/redux/constants.ts @@ -1,2 +1,3 @@ export const SET_SELECTED_KANJI = 'SET_SELECTED_KANJI'; -export const SET_KANJIS = 'SET_KANJIS'; \ No newline at end of file +export const SET_KANJIS = 'SET_KANJIS'; +export const SET_PLAYGROUND_LIST = 'SET_PLAYGROUND_LIST'; \ No newline at end of file diff --git a/redux/reducers/kanjiReducer.ts b/redux/reducers/kanjiReducer.ts index 2f243a0..db2bfaa 100644 --- a/redux/reducers/kanjiReducer.ts +++ b/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; } diff --git a/redux/store.ts b/redux/store.ts index cd3fc7f..7426ebb 100644 --- a/redux/store.ts +++ b/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] + } + }) },); diff --git a/redux/thunks/fetchKanjis.ts b/redux/thunks/fetchKanjis.ts index be84384..61627bf 100644 --- a/redux/thunks/fetchKanjis.ts +++ b/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(); - data.forEach(async (it: object) => { - await fetch(`https://kanjialive-api.p.rapidapi.com/api/public/kanji/${it.kanji.character}`, options) - .then(async detail => { - const detail_data = await detail.json(); - kanjis['Grade ' + i].push(KanjiMapper.ApiJsonToKanji(detail_data)); - }) - }) - }) + + const data = await fetchData(i.toString()).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()) + ); + + 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)); }; -} \ No newline at end of file +} diff --git a/redux/thunks/searchKanjis.ts b/redux/thunks/searchKanjis.ts new file mode 100644 index 0000000..0b91e32 --- /dev/null +++ b/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)); + + + }; +} \ No newline at end of file