From 993a7c6e78b7e1cd8d965afd8640a1e167db1865 Mon Sep 17 00:00:00 2001 From: 0hee0 Date: Thu, 24 Mar 2022 00:17:36 +0900 Subject: [PATCH] [#48] feat: implement api fetch --- react-native/screens/SearchResultScreen.tsx | 40 +++++++++++++++++---- react-native/screens/SearchScreen.tsx | 34 ++++++++++++++---- react-native/types.ts | 1 - 3 files changed, 60 insertions(+), 15 deletions(-) diff --git a/react-native/screens/SearchResultScreen.tsx b/react-native/screens/SearchResultScreen.tsx index cfb73cf..6530fd1 100644 --- 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({id: 1, cid: 2, date: "", saved_titles: [], results: []}); + const [notice, setNotice] = useState({id: 1, date: "", saved_titles: [], results: []}); const [showKorean, setShowKorean] = useState(false); const [isFullDrawer, setFullDrawer] = useState(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 index 8af3595..7aaa250 100644 --- 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(''); const [filteredNotices, setFilteredNotices] = useState( [ { 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("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 index b25064c..13d38fe 100644 --- 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[]