Merge pull request #49 from dsc-sookmyung/feature/search

[#48] feat: implement api fetch
dsc-sookmyung · Mar 23, 2022 · 07caced · 07caced
2 parents 0ce5053 + 993a7c6
commit 07caced
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 15 deletions.
diff --git a/react-native/screens/SearchResultScreen.tsx b/react-native/screens/SearchResultScreen.tsx
@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, ImageBackground, Dimensions } from 'react-native';
+import { StyleSheet, View, ImageBackground, Dimensions, Alert } from 'react-native';
 import Swiper from 'react-native-swiper';
-
 import SwipeUpDown from 'react-native-swipe-up-down';
 import BottomDrawer from '../components/BottomDrawer';
 import type { Navigation, Notice } from '../types';
+import { useAuth } from '../contexts/Auth';
+import { useNavigation, StackActions } from '@react-navigation/native';
+
 
 const { width } = Dimensions.get('window');
 
@@ -21,17 +23,19 @@ interface SearchResultScreenProps {
 }
 
 export default function SearchResultScreen(props: SearchResultScreenProps) {
+    const auth = useAuth();
+    const navigation = useNavigation();
+
     const [imageUri, setImageUri] = useState("../assets/images/calendar.png");
-	const [notice, setNotice] = useState<Notice>({id: 1, cid: 2, date: "", saved_titles: [], results: []});
+	const [notice, setNotice] = useState<Notice>({id: 1, date: "", saved_titles: [], results: []});
 	const [showKorean, setShowKorean] = useState<boolean>(false);
 	const [isFullDrawer, setFullDrawer] = useState<boolean>(false);
 
     useEffect(() => {
-        // TODO: Fetch API
-        // search/{props.route.params.id}    
+        // TODO: Fetch API   
+        // mockup data
         setNotice({
             id: 1,
-            cid: 1,
             date: "2022-02-10",
             saved_titles: [
                 "17th Graduation Ceremony",
@@ -55,7 +59,29 @@ export default function SearchResultScreen(props: SearchResultScreenProps) {
                 korean: "개학일은 3월 2일이며, 개학식에 참여하고자 하는 학부모님께서는 10시까지 강당으로 오시기 바랍니다."
             }]
         })
-    }, [])
+
+        if (auth?.authData?.jwt_token) {
+            fetch(`http://localhost:8080/search/${props.route.params.id}`, {
+                method: 'GET',
+                headers: {
+                    'JWT_TOKEN': auth.authData.jwt_token
+                },
+                redirect: 'follow'
+            })
+            .then(response => response.json())
+            .then(data => setNotice(data))
+            .catch(function (error) {
+                console.log(error.response.status) // 401
+                console.log(error.response.data.error) //Please Authenticate or whatever returned from server
+                if(error.response.status==401) {
+                    //redirect to login
+                    Alert.alert("The session has expired. Please log in again.");
+                    auth.signOut();
+                    navigation.dispatch(StackActions.popToTop())
+                }
+            });
+        }
+    }, [auth])
 
     const handleKorean = (): void => {
 		setShowKorean(!showKorean);

diff --git a/react-native/screens/SearchScreen.tsx b/react-native/screens/SearchScreen.tsx
@@ -1,22 +1,21 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';
+import { StyleSheet, Text, View, TouchableHighlight, Alert } from 'react-native';
 import type { Navigation, Notice } from '../types';
 import SearchedNotice from '../components/SearchedNotice';
 import SearchBar from 'react-native-elements/dist/searchbar/SearchBar-ios';
 import DateTimePickerModal from "react-native-modal-datetime-picker"
-import { Column } from 'native-base';
 import { useAuth } from '../contexts/Auth';
+import { StackActions } from '@react-navigation/native';
 
 
 export default function SearchScreen({ navigation }: Navigation) {
-    const auth = useAuth(); // TODO: get notices by send header(`auth.AuthData`) to server
+    const auth = useAuth();
 
     const [search, setSearch] = useState<string>('');
     const [filteredNotices, setFilteredNotices] = useState<Notice[]>(
         [
             {
                 id: 1,
-                cid: 1, 
                 date: "2022-02-19",
                 saved_titles: [
                     "17th Graduation Ceremony",
@@ -25,7 +24,6 @@ export default function SearchScreen({ navigation }: Navigation) {
             },
             {
                 id: 1,
-                cid: 1, 
                 date: "2022-02-10",
                 saved_titles: [
                     "17th Graduation Ceremony",
@@ -38,7 +36,6 @@ export default function SearchScreen({ navigation }: Navigation) {
         [
             {
                 id: 1,
-                cid: 1, 
                 date: "2022-02-19",
                 saved_titles: [
                     "17th Graduation Ceremony",
@@ -47,7 +44,6 @@ export default function SearchScreen({ navigation }: Navigation) {
             },
             {
                 id: 1,
-                cid: 1, 
                 date: "2022-02-10",
                 saved_titles: [
                     "17th Graduation Ceremony",
@@ -58,6 +54,30 @@ export default function SearchScreen({ navigation }: Navigation) {
     const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
     const [searchDate, setSearchDate] = useState<string>("Click calendar icon to select date.");
 
+    useEffect(() => {
+        if (auth?.authData?.jwt_token) {
+            fetch('http://localhost:8080/search', {
+                method: 'GET',
+                headers: {
+                    'JWT_TOKEN': auth.authData.jwt_token
+                },
+                redirect: 'follow'
+            })
+            .then(response => response.json())
+            .then(data => setNotices(data))
+            .catch(function (error) {
+                console.log(error.response.status) // 401
+                console.log(error.response.data.error) //Please Authenticate or whatever returned from server
+                if(error.response.status==401) {
+                    //redirect to login
+                    Alert.alert("The session has expired. Please log in again.");
+                    auth.signOut();
+                    navigation.dispatch(StackActions.popToTop())
+                }
+            });
+        }
+    }, [auth])
+
     const showDatePicker = () => {
         setDatePickerVisibility(true);
     };

diff --git a/react-native/types.ts b/react-native/types.ts
@@ -74,7 +74,6 @@ interface Result {
 
 interface Notice {
 	id: number,
-	cid: number,
 	date: string,
 	saved_titles: string[],
 	results?: Result[]