From 305471f830cd4bdded5363ec5f4b881472fbc518 Mon Sep 17 00:00:00 2001 From: 0hee0 Date: Sun, 6 Mar 2022 15:49:35 +0900 Subject: [PATCH] [#11] Refactor: override and add type & simplify the BottomDrawer buttons --- react-native/components/BottomDrawer.tsx | 181 +++++++++----------- react-native/screens/SearchResultScreen.tsx | 31 ++-- react-native/screens/SearchScreen.tsx | 40 +++-- react-native/screens/TranslateScreen.tsx | 47 ++--- react-native/types.ts | 30 +++- 5 files changed, 161 insertions(+), 168 deletions(-) diff --git a/react-native/components/BottomDrawer.tsx b/react-native/components/BottomDrawer.tsx index 702862d..a6ce418 100644 --- a/react-native/components/BottomDrawer.tsx +++ b/react-native/components/BottomDrawer.tsx @@ -1,56 +1,43 @@ import React, { useState } from 'react'; -import { StyleSheet, Dimensions, View, Text, TouchableOpacity, TouchableHighlight, ScrollView, Modal, Pressable, Alert } from 'react-native'; -import { Entypo, FontAwesome, MaterialIcons } from '@expo/vector-icons'; -import { Popover, Button } from 'native-base'; +import { StyleSheet, Dimensions, View, TouchableOpacity, TouchableHighlight, ScrollView, Alert } from 'react-native'; +import { Entypo, FontAwesome } from '@expo/vector-icons'; +import { Popover, Button, Divider, Text } from 'native-base'; import { theme } from '../core/theme'; +import type { BottomDrawerProps } from '../types'; -interface BottomDrawerProps { - results?: {"id": number, "content": string; "highlight": boolean}[], - fullText?: {"translated": string; "korean": string}, - showFullText?: boolean, - showTranslated?: boolean, - isFullDrawer?: boolean, - isTranslateScreen?: boolean, - handleFullText?: () => void, - saveResults?: () => void, - handleTranslatedText?: () => void, - closeResults?: () => void, - retakePicture?: () => void, -} - const NO_WIDTH_SPACE = '​'; -const highlight = (text: string) => +const highlight = (text: string, registered: boolean) => text.split(' ').map((word, i) => ( - {word} + {word} {NO_WIDTH_SPACE} )); function BottomDrawer(props: BottomDrawerProps) { - const [currentEvent, setCurrentEvent] = useState(); + const [currentEvent, setCurrentEvent] = useState(0); - const openPopup = (resultId) => (event) => { - setCurrentEvent(resultId) + const openPopup = (resultId: number) => () => { + setCurrentEvent(resultId); } const closePopup = () => { setCurrentEvent(0); } - const addEvent = (resultId) => (event) => { + const addEvent = (resultId: number) => () => { // TODO: api // TEST let status = "success"; switch (status) { case "success": Alert.alert("The event has been successfully added to your calendar!"); - setCurrentEvent(); + setCurrentEvent(0); break; case "duplicate": Alert.alert("This schedule has already been registered."); - setCurrentEvent(); + setCurrentEvent(0); break; default: Alert.alert("Failed to add event to calendar. Please try again.") @@ -62,93 +49,104 @@ function BottomDrawer(props: BottomDrawerProps) { - {props.showFullText ? "Full Text" : "Results"} - {!props.showFullText ? ( - - - - - {props.isTranslateScreen && - - - - } - - ) : ( - - + {props.showFullText ? "Full Text" : "Results"} + + + - )} + {props.isTranslateScreen && + + + + } + {!props.showFullText ? ( - props.results?.map((result, index) => - result.highlight ? ( + props.results?.summary?.map((item, index) => + item.highlight ? ( openPopup(result.id)} + key={item.id} + isOpen={item.id===currentEvent} + onOpen={openPopup(item.id)} onClose={closePopup} trigger={triggerProps => { return - - {index+1}.  - {result.highlight ? ( - highlight(result.content) - ) : ( - result.content - )} - - ; + + {index+1}.  + {item.highlight ? ( + highlight(item.content, item.registered) + ) : ( + item.content + )} + + ; }} > + {!item.registered ? ( + + + + Add an event + + You can add this schedule to the Google calendar. + + + + + + + + + ) : ( - - - Add an event - - You can add this schedule to the Google calendar. - - - - - - - + + + Event already registered + + This event is already registered in Google Calendar. + + + + + + + + )} ) : ( - - {index+1}.  {result.content} + + {index+1}.  {item.content} ) ) ) : ( - props.showTranslated ? ( - {props.fullText?.translated} - ) : ( - {props.fullText?.korean} - ) + + + {props.results?.fullText} + + + + {props.results?.korean} + + )} {props.isTranslateScreen && - {!props.showFullText ? ( - - Close - - ) : ( - - Back - - )} + + Close + - Try again + Try again } @@ -177,13 +175,6 @@ const styles = StyleSheet.create({ justifyContent: 'center', backgroundColor: theme.colors.gray }, - title: { - fontFamily: 'Lora_700Bold', - fontSize: 24, - fontWeight: '700', - color: theme.colors.primary, - // letterSpacing: 1 - }, content: { fontSize: 16, paddingBottom: 8, @@ -219,10 +210,6 @@ const styles = StyleSheet.create({ rightSpace: { paddingRight: 8 }, - whiteText: { - color: '#fff', - fontSize: 16 - }, full: { paddingBottom: 96 }, diff --git a/react-native/screens/SearchResultScreen.tsx b/react-native/screens/SearchResultScreen.tsx index b1bc59d..f55e0ca 100644 --- a/react-native/screens/SearchResultScreen.tsx +++ b/react-native/screens/SearchResultScreen.tsx @@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react'; import { StyleSheet, Text, View, Button, ImageBackground, Dimensions } from 'react-native'; import Swiper from 'react-native-swiper'; -import AppLoading from 'expo-app-loading'; -import useFonts from '../hooks/useFonts' import SwipeUpDown from 'react-native-swipe-up-down'; import BottomDrawer from '../components/BottomDrawer'; import type { Navigation, Notice } from '../types'; @@ -24,14 +22,15 @@ interface SearchResultScreenProps { export default function SearchResultScreen(props: SearchResultScreenProps) { const [imageUri, setImageUri] = useState("../assets/images/calendar.png"); - const [notice, setNotice] = useState({date: "", notices: {total_results: [], notice_body: []}}); + const [notice, setNotice] = useState({userId: 1, childId: 1, date: "", notices: {total_results: [], notice_body: []}}); const [showFullText, setShowFullText] = useState(false); - const [showTranslated, setShowTranslated] = useState(true); const [isFullDrawer, setFullDrawer] = useState(false); - React.useEffect(() => { + useEffect(() => { // TODO: Fetch API setNotice({ + userId: 1, + childId: 1, date: "2022-02-10", notices: { total_results: [ @@ -42,8 +41,8 @@ export default function SearchResultScreen(props: SearchResultScreenProps) { id: 1, title: "17th Graduation Ceremony", summary: [ - {id: 1, content: "17th Graduation Ceremony is on February 14th", highlight: true}, - {id: 2, content: "held in classrooms to prevent the spread of COVID-19", highlight: false} + {id: 1, content: "17th Graduation Ceremony is on February 14th", highlight: true, registered: false}, + {id: 2, content: "held in classrooms to prevent the spread of COVID-19", highlight: false, registered: false} ], fullText: "We wish you good health and happiness in your family", korean: "희망찬 새해를 맞이하여 학부모님의 가정에 건강과 행복이 함께 하시기를 기원합니다." @@ -51,8 +50,8 @@ export default function SearchResultScreen(props: SearchResultScreenProps) { id: 2, title: "School Day", summary: [ - {id: 1, content: "School day is March 2nd", highlight: true}, - {id: 2, content: "Parents participate is available", highlight: false} + {id: 1, content: "School day is March 2nd", highlight: true, registered: true}, + {id: 2, content: "Parents participate is available", highlight: false, registered: false} ], fullText: "The school starts on March 2nd, and parents who want to participate in the opening ceremony are request to com to auditorium", korean: "개학일은 3월 2일이며, 개학식에 참여하고자 하는 학부모님께서는 10시까지 강당으로 오시기 바랍니다." @@ -65,10 +64,6 @@ export default function SearchResultScreen(props: SearchResultScreenProps) { setShowFullText(!showFullText); } - const handleTranslatedText = (): void => { - setShowTranslated(!showTranslated); - } - return ( @@ -77,26 +72,20 @@ export default function SearchResultScreen(props: SearchResultScreenProps) { } itemFull={ } onShowMini={() => setFullDrawer(false)} diff --git a/react-native/screens/SearchScreen.tsx b/react-native/screens/SearchScreen.tsx index 58c5fce..3d09ba8 100644 --- a/react-native/screens/SearchScreen.tsx +++ b/react-native/screens/SearchScreen.tsx @@ -8,6 +8,8 @@ import SearchBar from 'react-native-elements/dist/searchbar/SearchBar-ios'; export default function SearchScreen({ navigation }: Navigation) { const [search, setSearch] = useState(''); const [filteredNotices, setFilteredNotices] = useState([{ + userId: 1, + childId: 1, date: "2022-02-10", notices: { total_results: [ @@ -18,8 +20,8 @@ export default function SearchScreen({ navigation }: Navigation) { id: 1, title: "17th Graduation Ceremony", summary: [ - {id: 1, content: "17th Graduation Ceremony is on February 14th", highlight: true}, - {id: 2, content: "held in classrooms to prevent the spread of COVID-19", highlight: false} + {id: 1, content: "17th Graduation Ceremony is on February 14th", highlight: true, registered: false}, + {id: 2, content: "held in classrooms to prevent the spread of COVID-19", highlight: false, registered: false} ], fullText: "We wish you good health and happiness in your family", korean: "희망찬 새해를 맞이하여 학부모님의 가정에 건강과 행복이 함께 하시기를 기원합니다." @@ -27,14 +29,16 @@ export default function SearchScreen({ navigation }: Navigation) { id: 2, title: "School Day", summary: [ - {id: 1, content: "School day is March 2nd", highlight: true}, - {id: 2, content: "Parents participate is available", highlight: false} + {id: 1, content: "School day is March 2nd", highlight: true, registered: true}, + {id: 2, content: "Parents participate is available", highlight: false, registered: false} ], fullText: "The school starts on March 2nd, and parents who want to participate in the opening ceremony are request to com to auditorium", korean: "개학일은 3월 2일이며, 개학식에 참여하고자 하는 학부모님께서는 10시까지 강당으로 오시기 바랍니다." }] } }, { + userId: 1, + childId: 1, date: "2022-02-10", notices: { total_results: [ @@ -45,8 +49,8 @@ export default function SearchScreen({ navigation }: Navigation) { id: 1, title: "17th Graduation Ceremony", summary: [ - {id: 1, content: "17th Graduation Ceremony is on February 14th", highlight: true}, - {id: 2, content: "held in classrooms to prevent the spread of COVID-19", highlight: false} + {id: 1, content: "17th Graduation Ceremony is on February 14th", highlight: true, registered: false}, + {id: 2, content: "held in classrooms to prevent the spread of COVID-19", highlight: false, registered: false} ], fullText: "We wish you good health and happiness in your family", korean: "희망찬 새해를 맞이하여 학부모님의 가정에 건강과 행복이 함께 하시기를 기원합니다." @@ -54,8 +58,8 @@ export default function SearchScreen({ navigation }: Navigation) { id: 2, title: "School Day", summary: [ - {id: 1, content: "School day is March 2nd", highlight: true}, - {id: 2, content: "Parents participate is available", highlight: false} + {id: 1, content: "School day is March 2nd", highlight: true, registered: true}, + {id: 2, content: "Parents participate is available", highlight: false, registered: false} ], fullText: "The school starts on March 2nd, and parents who want to participate in the opening ceremony are request to com to auditorium", korean: "개학일은 3월 2일이며, 개학식에 참여하고자 하는 학부모님께서는 10시까지 강당으로 오시기 바랍니다." @@ -63,6 +67,8 @@ export default function SearchScreen({ navigation }: Navigation) { } }]); const [notices, setNotices] = useState([{ + userId: 1, + childId: 1, date: "2022-02-10", notices: { total_results: [ @@ -73,8 +79,8 @@ export default function SearchScreen({ navigation }: Navigation) { id: 1, title: "17th Graduation Ceremony", summary: [ - {id: 1, content: "17th Graduation Ceremony is on February 14th", highlight: true}, - {id: 2, content: "held in classrooms to prevent the spread of COVID-19", highlight: false} + {id: 1, content: "17th Graduation Ceremony is on February 14th", highlight: true, registered: false}, + {id: 2, content: "held in classrooms to prevent the spread of COVID-19", highlight: false, registered: false} ], fullText: "We wish you good health and happiness in your family", korean: "희망찬 새해를 맞이하여 학부모님의 가정에 건강과 행복이 함께 하시기를 기원합니다." @@ -82,14 +88,16 @@ export default function SearchScreen({ navigation }: Navigation) { id: 2, title: "School Day", summary: [ - {id: 1, content: "School day is March 2nd", highlight: true}, - {id: 2, content: "Parents participate is available", highlight: false} + {id: 1, content: "School day is March 2nd", highlight: true, registered: true}, + {id: 2, content: "Parents participate is available", highlight: false, registered: false} ], fullText: "The school starts on March 2nd, and parents who want to participate in the opening ceremony are request to com to auditorium", korean: "개학일은 3월 2일이며, 개학식에 참여하고자 하는 학부모님께서는 10시까지 강당으로 오시기 바랍니다." }] } }, { + userId: 1, + childId: 1, date: "2022-02-10", notices: { total_results: [ @@ -100,8 +108,8 @@ export default function SearchScreen({ navigation }: Navigation) { id: 1, title: "17th Graduation Ceremony", summary: [ - {id: 1, content: "17th Graduation Ceremony is on February 14th", highlight: true}, - {id: 2, content: "held in classrooms to prevent the spread of COVID-19", highlight: false} + {id: 1, content: "17th Graduation Ceremony is on February 14th", highlight: true, registered: false}, + {id: 2, content: "held in classrooms to prevent the spread of COVID-19", highlight: false, registered: false} ], fullText: "We wish you good health and happiness in your family", korean: "희망찬 새해를 맞이하여 학부모님의 가정에 건강과 행복이 함께 하시기를 기원합니다." @@ -109,8 +117,8 @@ export default function SearchScreen({ navigation }: Navigation) { id: 2, title: "School Day", summary: [ - {id: 1, content: "School day is March 2nd", highlight: true}, - {id: 2, content: "Parents participate is available", highlight: false} + {id: 1, content: "School day is March 2nd", highlight: true, registered: false}, + {id: 2, content: "Parents participate is available", highlight: false, registered: false} ], fullText: "The school starts on March 2nd, and parents who want to participate in the opening ceremony are request to com to auditorium", korean: "개학일은 3월 2일이며, 개학식에 참여하고자 하는 학부모님께서는 10시까지 강당으로 오시기 바랍니다." diff --git a/react-native/screens/TranslateScreen.tsx b/react-native/screens/TranslateScreen.tsx index 56b6c27..ea7499b 100644 --- a/react-native/screens/TranslateScreen.tsx +++ b/react-native/screens/TranslateScreen.tsx @@ -1,10 +1,9 @@ import React, { useState, useEffect } from 'react'; -import { StyleSheet, View, TouchableOpacity, ImageBackground, Dimensions, Text, - ToastAndroid, Platform, Alert } from 'react-native'; +import { StyleSheet, View, TouchableOpacity, ImageBackground, Dimensions, Alert } from 'react-native'; import { Camera } from 'expo-camera'; import { Ionicons } from '@expo/vector-icons'; import { theme } from '../core/theme'; -import type { Navigation } from '../types'; +import type { Navigation, Result } from '../types'; import AppLoading from 'expo-app-loading'; import useFonts from '../hooks/useFonts' import SwipeUpDown from 'react-native-swipe-up-down'; @@ -22,11 +21,8 @@ export default function TranslateScreen({ navigation }: Navigation) { const [type, setType] = useState(Camera.Constants.Type.back); const [camera, setCamera] = useState(null); const [imageUri, setImageUri] = useState(""); - const [results, setResults] = useState<{"content": string; "highlight": boolean}[]>(); - - const [fullText, setFullText] = useState<{"translated": string; "korean": string}>(); + const [results, setResults] = useState({id: 0, summary: [], fullText: '', korean: ''}); const [showFullText, setShowFullText] = useState(false); - const [showTranslated, setShowTranslated] = useState(true); const [isFullDrawer, setFullDrawer] = useState(false); const toast = useToast(); @@ -44,7 +40,7 @@ export default function TranslateScreen({ navigation }: Navigation) { }, []); useEffect(() => { - if (results?.filter(result => result.highlight === true).length > 0) { + if (results?.summary && results.summary.filter(item => item.highlight === true).length > 0) { const message = "You can add a schedule to the calendar by clicking the highlighted text." toast.show({ // Design according to mui toast guidelines (https://material.io/components/snackbars#anatomy) render: () => { @@ -84,15 +80,16 @@ export default function TranslateScreen({ navigation }: Navigation) { const extractText = (): void => { // TODO: api // TEST - setResults([ - {"id": 1, "content": "Buy Suyeon a delicious meal.", "highlight": false}, - {"id": 2, "content": "The graduation ceremony will be held in the auditorium at 2 p.m. on February 14th.", "highlight": true}, - ]); - setFullText({ - "id": 1, - "translated": "We wish you good health and happiness in your family in the hopeful new year of the 17th graduation ceremony in 2020. Thank you very much for supporting our educational activities and for your constant interest and cooperation in the midst of the 2020 COVID-19 crisis. The 17th graduation ceremony of Hwaam High School will be held in classrooms to prevent the spread of COVID-19. Parents and outsiders are not allowed to enter each class. Please understand that we cannot bring you together because it is an inevitable measure to prevent the spread of infectious diseases. Please congratulate and encourage graduates who are taking their first steps toward a hopeful tomorrow. -Information on the 17th graduation ceremony -1. Date: January 5, 2021 (Tue) 10:00 2. Location: Classroom 3: Contents: Graduation ceremony is held through video clips of each class * Graduates are allowed / Parents and outsiders are not allowed * Graduates must wear masks, self-diagnosis, and go to school.", - "korean": "2020학년도 제17회 졸업식 실시 안내 희망찬 새해를 맞이하여 학부모님의 가정에 건강과 행복이 함께 하시기를 기원합니다. 2020학년도 코로나19라는 위기 상황 속에서 본교 교육활동을 지지해주시고 변함없는 관심과 협조를 보내 주셔서 진심으로 감사드립니다. 화암고등학교 제17회 졸업식은 코로나19 확산 예방을 위해 각반 교실에서 진행합니다. 각반 교실에는 학부모 및 외부인의 출입이 불가능합니다. 감염병 확산 방지를 위한 불가피한 대책이니 함께 자리에 모시지 못함을 양해 부탁드립니다. 희망찬 내일을 향해 첫발을 내딛는 졸업생들에게 멀리서나마 축하와 격려를 보내주시기 바랍니다. -제17회 졸업식 안내- 1. 일시: 2021년 1월 5일(화) 10:00 2. 장소: 각반 교실 3: 내용: 각반 영상으로 졸업식 실시 * 졸업생 출입 가능 / 학부모 및 외부인 출입 불가 * 졸업생은 반드시 마스크 착용, 자가 진단 후 등교" - }); + setResults({ + id: 1, + summary: [ + {"id": 1, "content": "Buy Suyeon a delicious meal.", "highlight": false, registered: false}, + {"id": 2, "content": "The graduation ceremony will be held in the auditorium at 2 p.m. on February 14th.", "highlight": true, registered: false}, + {"id": 3, "content": "Parents and outsiders are not allowed to enter each class.", "highlight": true, registered: true}, + ], + fullText: "We wish you good health and happiness in your family in the hopeful new year of the 17th graduation ceremony in 2020. Thank you very much for supporting our educational activities and for your constant interest and cooperation in the midst of the 2020 COVID-19 crisis. The 17th graduation ceremony of Hwaam High School will be held in classrooms to prevent the spread of COVID-19. Parents and outsiders are not allowed to enter each class. Please understand that we cannot bring you together because it is an inevitable measure to prevent the spread of infectious diseases.", + korean: "2020학년도 제17회 졸업식 실시 안내 희망찬 새해를 맞이하여 학부모님의 가정에 건강과 행복이 함께 하시기를 기원합니다. 2020학년도 코로나19라는 위기 상황 속에서 본교 교육활동을 지지해주시고 변함없는 관심과 협조를 보내 주셔서 진심으로 감사드립니다. 화암고등학교 제17회 졸업식은 코로나19 확산 예방을 위해 각반 교실에서 진행합니다. 각반 교실에는 학부모 및 외부인의 출입이 불가능합니다. 감염병 확산 방지를 위한 불가피한 대책이니 함께 자리에 모시지 못함을 양해 부탁드립니다. 희망찬 내일을 향해 첫발을 내딛는 졸업생들에게 멀리서나마 축하와 격려를 보내주시기 바랍니다. -제17회 졸업식 안내- 1. 일시: 2021년 1월 5일(화) 10:00 2. 장소: 각반 교실 3: 내용: 각반 영상으로 졸업식 실시 * 졸업생 출입 가능 / 학부모 및 외부인 출입 불가 * 졸업생은 반드시 마스크 착용, 자가 진단 후 등교" + }) } const handleFullText = (): void => { @@ -104,18 +101,13 @@ export default function TranslateScreen({ navigation }: Navigation) { Alert.alert("The scanned result was saved in ."); } - const handleTranslatedText = (): void => { - setShowTranslated(!showTranslated); - } - const closeResults = (): void => { navigation.navigate('Home'); } const retakePicture = (): void => { setImageUri(''); - setResults([]); - setFullText({ "translated": "", "korean": "" }); + setResults({id: 0, summary: [], fullText: '', korean: ''}); setShowFullText(false); } @@ -124,20 +116,17 @@ export default function TranslateScreen({ navigation }: Navigation) { {/* After taking a picture */} {imageUri ? ( /* After taking a picture and press the check button */ - results && results.length > 0 ? ( + results?.summary && results?.fullText && results?.korean ? ( @@ -145,14 +134,11 @@ export default function TranslateScreen({ navigation }: Navigation) { itemFull={ @@ -208,7 +194,6 @@ export default function TranslateScreen({ navigation }: Navigation) { const styles = StyleSheet.create({ container: { flex: 1, - }, camera: { flex: 4, diff --git a/react-native/types.ts b/react-native/types.ts index 3614175..850ee7a 100644 --- a/react-native/types.ts +++ b/react-native/types.ts @@ -19,16 +19,40 @@ export type TextInput = { description: string; } -export type Notice = { +interface Result { + id: number, + summary: {id: number, content: string, highlight: boolean, registered: boolean}[], + fullText: string, + korean: string +} + +interface Notice { + userId: number, + childId: number, date: string, notices: { total_results: string[], notice_body: { - id: number, title: string, - summary: {id: number, content: string, highlight: boolean}[], + id: number, + summary: {id: number, content: string, highlight: boolean, registered: boolean}[], fullText: string, korean: string }[] } } + +interface BottomDrawerProps { + results: Result, + showFullText?: boolean, + isFullDrawer?: boolean, + isTranslateScreen?: boolean, + handleFullText?: () => void, + saveResults?: () => void, + closeResults?: () => void, + retakePicture?: () => void, +} + +export type { + Result, Notice, BottomDrawerProps +} \ No newline at end of file