Upgrading UI

assets/animations/answerAnimation.ts

@@ -1,30 +0,0 @@
-import { Dimensions, Animated } from 'react-native';
-
-export const animation = new Animated.Value(0);
-
-export const startAnimation = () => {
-    Animated.timing(animation, {
-        toValue: 1,
-        duration: 400,
-        useNativeDriver: true,
-    }).start();
-};
-
-export const stopAnimation = () => {
-    Animated.timing(animation, {
-        toValue: 0,
-        duration: 400,
-        useNativeDriver: true,
-    }).start();
-};
-
-export const animatedStyles = {
-    transform: [
-        {
-            translateY: animation.interpolate({
-                inputRange: [0, 1],
-                outputRange: [0, -Dimensions.get('window').height/2]
-            }),
-        },
-    ],
-};

components/GradeChipList.tsx

@@ -7,44 +7,31 @@ interface kanjiListSeachPanelProps {
     onSelect: (item: string, isSelected: Boolean) => void;
 }
 
-const KanjiListSearchPanel = (props: kanjiListSeachPanelProps) => {
+const GradeChipList = (props: kanjiListSeachPanelProps) => {
 
     const navigator = useNavigation();
 
     return (
         <View style={panelStyle.container}>
-            <TextInput style={panelStyle.input} />
             <FlatList
                 data={[1, 2, 3, 4, 5, 6]}
                 renderItem={(item) => <GradeChip grade={item.item} onSelect={props.onSelect} />}
                 horizontal={true}
-                showsHorizontalScrollIndicator={false}
-
-            >
-            </FlatList>
+                showsHorizontalScrollIndicator={false}/>
         </View>
     );
 };
 
 
 const panelStyle = StyleSheet.create({
-    input: {
-        height: 40,
-        margin: 12,
-        borderWidth: 1,
-        padding: 10,
-        width: 200,
-        backgroundColor: "white",
-        borderRadius: 20,
-        borderColor: "black",
-        width: "80%"
-    },
     container: {
         justifyContent: "center",
         alignItems: "center",
-        height: "20%"
+        height: "10%",
+        marginTop: 5,
+        marginBottom: 5
     }
 })
 
 
-export default KanjiListSearchPanel;
+export default GradeChipList;

components/Header.tsx

@@ -21,7 +21,7 @@ const headerStyle = StyleSheet.create({
         color: 'white',
         textAlign: 'center',
         fontWeight: 'bold',
-        fontSize: 30,
+        fontSize: 40,
     }
 })
 

components/KanjiAnswerField.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Animated, StyleSheet, TextInput } from 'react-native';
-import { startAnimation, stopAnimation, animatedStyles } from '../assets/animations/answerAnimation'
+import { StyleSheet, TextInput, View } from 'react-native';
 
 interface kanjiAnswerFieldProps { 
     answer: string,
@@ -11,14 +10,14 @@ const KanjiAnswerField = (props: kanjiAnswerFieldProps) => {
 
 
     return (
-        <Animated.View style={[animatedStyles]}>
+        <View>
             <TextInput
                 style={answerFieldStyle.input}
                 onChangeText={props.setAnswer}
                 value={props.answer}
                 placeholder="Answer here"
             />
-        </Animated.View>
+        </View>
     );
 };
 

components/KanjiList.tsx

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Kanji } from '../model/kanji';
 import { KanjiListByGrade } from '../model/kanjiListByGrades';
 import KanjiListCell from './KanjiListCell';
-import KanjiListSearchPanel from './KanjiListSearchPanel';
+import GradeChipList from './GradeChipList';
 
 
 const KanjiList = () => {
@@ -37,12 +37,11 @@ const KanjiList = () => {
     }, [dispatch]);
 
     return (
-
-
-
         <View>
-            <KanjiListSearchPanel onSelect={updateSelectedItems} />
-            <SectionList 
+            <GradeChipList onSelect={updateSelectedItems} />
+
+            {selectedItems.length ?
+            (<SectionList
                 sections={selectedItems}
                 renderItem={
                     ({ item }) => <KanjiListCell kanji={item} />
@@ -50,13 +49,12 @@ const KanjiList = () => {
                 renderSectionHeader={({ section }) => (
                     <Text style={kanjiListStyle.sectionHeader}>{section.title}</Text>
                 )}
-                keyExtractor={item => `basicListEntry-${item.character}`
-                }
-                style={kanjiListStyle.list}
-            >
-            </SectionList>
-            
-
+                keyExtractor={item => `basicListEntry-${item.character}`}/>) 
+                : (
+                    <View style={kanjiListStyle.container}>
+                        <Text style={kanjiListStyle.text}>Select a grade</Text>
+                    </View>
+                )}
         </View>
     );
 }; 
@@ -72,34 +70,20 @@ const kanjiListStyle_light = StyleSheet.create({
         color: "black",
         backgroundColor: '#d5d5d5',
     },
-    item: {
-        padding: 10,
-        fontSize: 18,
-        height: 44,
+    text: {
+        textAlign: "center",
+        fontWeight: "bold",
+        color: "black",
+        opacity: 0.5
     },
-    input: {
-        height: 40,
-        margin: 12,
-        borderWidth: 1,
-        padding: 10,
-        width: 200,
-        backgroundColor: "white",
-        borderRadius: 20,
-        borderColor: "black"
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
     },
 })
 
 const kanjiListStyle_dark = StyleSheet.create({
-    list: {
-    },
-    chipList: {
-        height: 10
-    },
-    container: {
-        width: '100%',
-        height: '100%',
-        padding: 10
-    },
     sectionHeader: {
         paddingTop: 2,
         paddingLeft: 10,
@@ -110,19 +94,16 @@ const kanjiListStyle_dark = StyleSheet.create({
         color: "white",
         backgroundColor: '#0d0d0d',
     },
-    item: {
-        padding: 10,
-        fontSize: 18,
-        height: 44,
+    text: {
+        textAlign: "center",
+        fontWeight: "bold",
+        color: "white",
+        opacity: 0.5
     },
-    input: {
-        height: 40,
-        margin: 12,
-        borderWidth: 1,
-        padding: 10,
-        backgroundColor: "white",
-        borderRadius: 20,
-        borderColor: "black"
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
     },
 })
 

components/KanjiPlaygroundList.tsx

@@ -28,9 +28,10 @@ const KanjiPlaygroundList = (props: kanjiPlaygroundListProps) => {
         <View style={kanjiPlaygroundListStyle.container}>
             <TextInput style={kanjiPlaygroundListStyle.input}
                 placeholder="Search kanji here"
+                placeholderTextColor="gray"
                 value={search}
                 onChangeText={setSearch}
-                onBlur={async () => await (await searchKanjis(search))(dispatch)}
+                onBlur={async () => await (await searchKanjis(search.toLowerCase()))(dispatch)}
             ></TextInput>
             <FlatList 
                 numColumns={4}
@@ -74,7 +75,7 @@ const kanjiPlaygroundListStyle_light = StyleSheet.create({
         width: "75%",
         backgroundColor: "white",
         borderRadius: 20,
-        alignSelf: "center"
+        alignSelf: "center",
     },
 })
 
@@ -105,7 +106,8 @@ const kanjiPlaygroundListStyle_dark = StyleSheet.create({
         width: "75%",
         backgroundColor: "white",
         borderRadius: 20,
-        alignSelf: "center"
+        alignSelf: "center",
+
     },
 })