Merge pull request #20 from mori8/feature/search

[#14] Feature/search
dsc-sookmyung · Mar 5, 2022 · c9c60bc · c9c60bc
2 parents 37fa899 + df75763
commit c9c60bc
Show file tree

Hide file tree

Showing 12 changed files with 7,739 additions and 1,851 deletions.
diff --git a/react-native/App.tsx b/react-native/App.tsx
@@ -11,7 +11,9 @@ import JoinScreen from './screens/JoinScreen';
 import ForgotPasswordScreen from './screens/ForgotPasswordScreen';
 import HomeScreen from './screens/HomeScreen';
 import TranslateScreen from './screens/TranslateScreen';
+import SearchScreen from './screens/SearchScreen';
 import LogoutButton from './components/LogoutButton';
+import SearchResultScreen from './screens/SearchResultScreen';
 
 
 const Stack = createNativeStackNavigator();
@@ -64,8 +66,16 @@ export default function App() {
             name="Translate"
             component={TranslateScreen}
           />
-          </Stack.Navigator>
-        </NavigationContainer>
-      </NativeBaseProvider>
+          <Stack.Screen
+            name="Search"
+            component={SearchScreen}
+          />
+          <Stack.Screen
+            name="SearchResult"
+            component={SearchResultScreen}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </NativeBaseProvider>
   );
 }
diff --git a/react-native/components/BottomDrawer.tsx b/react-native/components/BottomDrawer.tsx
@@ -6,7 +6,7 @@ import { theme } from '../core/theme';
 
 
 interface BottomDrawerProps {
-	results?: {"content": string; "highlight": boolean}[],
+	results?: {"id": number, "content": string; "highlight": boolean}[],
 	fullText?: {"translated": string; "korean": string},
 	showFullText?: boolean,
 	showTranslated?: boolean,
@@ -36,7 +36,7 @@ function BottomDrawer(props: BottomDrawerProps) {
 	}
 
 	const closePopup = () => {
-		setCurrentEvent();
+		setCurrentEvent(0);
 	}
 
 	const addEvent = (resultId) => (event) => {
@@ -88,7 +88,7 @@ function BottomDrawer(props: BottomDrawerProps) {
 								<Popover 
 									key={result.id} 
 									isOpen={result.id===currentEvent}
-									onOpen={openPopup(result.id)}									
+									onOpen={() => openPopup(result.id)}									
 									onClose={closePopup}
 									trigger={triggerProps => {
 										return <Text {...triggerProps}>

diff --git a/react-native/components/SearchedNotice.tsx b/react-native/components/SearchedNotice.tsx
@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';
+import { useNavigation, StackActions } from '@react-navigation/native';
+import type { Notice } from '../types';
+import useFonts from '../hooks/useFonts'
+import AppLoading from 'expo-app-loading';
+import { AntDesign } from '@expo/vector-icons';
+import { theme } from '../core/theme';
+
+interface SearchedNoticeProps {
+    date: string
+    summariedNotices: string[]
+}
+
+export default function SearchedNotice(props: SearchedNoticeProps) {
+    const navigation = useNavigation<any>();
+    const [componentOpened, setComponentOpened] = useState<boolean>(false);
+    const [fontsLoaded, SetFontsLoaded] = useState<boolean>(false);
+    const LoadFontsAndRestoreToken = async () => {
+        await useFonts();
+    };
+
+    const updateComponentOpened = () => {
+        setComponentOpened(!componentOpened);
+    }
+
+    if (!fontsLoaded) {
+        return (
+          <AppLoading
+            startAsync={LoadFontsAndRestoreToken}
+            onFinish={() => SetFontsLoaded(true)}
+            onError={() => {}}
+          />
+        );
+    } 
+
+    return (
+        <View style={[styles.container, {
+            height: componentOpened ? (80 + props.summariedNotices.length * 22): 60,
+            paddingBottom: componentOpened ? 20: 0
+        }]}>
+            <View style={styles.headerContainer}>
+                <Text style={[styles.date, {
+                    color: componentOpened ? theme.colors.primary : "#2A2A2A",
+                    textDecorationLine: componentOpened ? "underline": "none"
+                }]}>{props.date}</Text>
+                <TouchableHighlight onPress={updateComponentOpened}>
+                    <AntDesign name={componentOpened ? "caretup" : "caretdown"} color={componentOpened ? theme.colors.primary : "#000"} size={14}/>
+                </TouchableHighlight>
+            </View>
+             {componentOpened && (
+                <TouchableHighlight onPress={() => navigation.navigate('SearchResult', {date: props.date})}>
+                    <View>
+                        {props.summariedNotices.map((notice, index) => 
+                            <Text style={styles.notices}>{(index + 1) + ". " + notice}</Text>
+                        )}
+                    </View>
+                </TouchableHighlight>
+            )}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: "#fff",
+        width: '100%',
+        marginVertical: 4,
+        paddingVertical: 20,
+        paddingHorizontal: 28,
+        borderRadius: 16,
+        shadowColor: "#acacac",
+        shadowOpacity: 0.2,
+        shadowRadius: 8,
+        shadowOffset: {
+          height: 0,
+          width: 0,
+        }
+    },
+    headerContainer: {
+        flex: 1,
+        flexDirection: "row",
+        justifyContent: "space-between"
+    },
+    date: {
+        fontFamily: 'Lora_700Bold',
+        marginBottom: 12,
+    },
+    notices: {
+        lineHeight: 22,
+        color: "#2A2A2A",
+    }
+})