From c70e440b07dbc5fe9c8f4ffc91aef96bb0c4ea76 Mon Sep 17 00:00:00 2001 From: 0hee0 Date: Sat, 4 Jun 2022 01:22:10 +0900 Subject: [PATCH 1/4] [#11] feat: add results title --- react-native/components/BottomDrawer.tsx | 2 +- react-native/screens/TranslateScreen.tsx | 46 ++++++++++++------------ 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/react-native/components/BottomDrawer.tsx b/react-native/components/BottomDrawer.tsx index d871b6e..0e1e764 100644 --- a/react-native/components/BottomDrawer.tsx +++ b/react-native/components/BottomDrawer.tsx @@ -55,7 +55,7 @@ function BottomDrawer(props: BottomDrawerProps) { useEffect(() => { if (props.openSaveForm && firstCid) { - setResultsForm({ cid: firstCid, title: 'title' }); + setResultsForm({ cid: firstCid, title: props?.results?.title ? props.results.title : 'title' }); } }, [props?.openSaveForm]) diff --git a/react-native/screens/TranslateScreen.tsx b/react-native/screens/TranslateScreen.tsx index 039b6f4..63f10e5 100644 --- a/react-native/screens/TranslateScreen.tsx +++ b/react-native/screens/TranslateScreen.tsx @@ -1,8 +1,8 @@ import React, { useState, useEffect } from 'react'; import { StyleSheet, View, TouchableOpacity, ImageBackground, Dimensions, Alert, Image } from 'react-native'; -import { useToast, Box, Button, HStack, Text, Divider, Modal, VStack } from 'native-base'; +import { useToast, Button, HStack, Text, Divider, Modal, VStack } from 'native-base'; import { Camera } from 'expo-camera'; -import { Ionicons, SimpleLineIcons, FontAwesome } from '@expo/vector-icons'; +import { Ionicons, SimpleLineIcons } from '@expo/vector-icons'; import { theme } from '../core/theme'; import type { Navigation, Result, ResultsForm } from '../types'; import SwipeUpDown from 'react-native-swipe-up-down'; @@ -19,7 +19,7 @@ import '../locales/i18n'; /* TODO: - 스크롤 내려가게 하기 (지금은 ScrollView의 스크롤이 안 먹음) - low highlight 주기 (지금은 텍스트 높이만큼 background에 색 줘서 highlight) -*/ +*/ const date = new Date(); @@ -27,13 +27,13 @@ export default function TranslateScreen({ navigation }: Navigation) { const [hasPermission, setHasPermission] = useState(false); const [type, setType] = useState(Camera.Constants.Type.back); const [camera, setCamera] = useState(null); - const [imageUri, setImageUri] = useState(''); + const [imageUri, setImageUri] = useState(''); const [results, setResults] = useState(); const [showKorean, setShowKorean] = useState(false); const [isFullDrawer, setFullDrawer] = useState(false); const [loading, setLoading] = useState(false); const [openSaveForm, setOpenSaveForm] = useState(false); - const [openInitialEventForm, setOpenInitialEventForm] = useState(false); + const [openInitialEventForm, setOpenInitialEventForm] = useState(false); const toast = useToast(); const auth = useAuth(); @@ -57,7 +57,7 @@ export default function TranslateScreen({ navigation }: Navigation) { } }, [results]); - // DEV TEST + // DEV TEST // if (hasPermission === null) { // return ; // } @@ -80,11 +80,11 @@ export default function TranslateScreen({ navigation }: Navigation) { aspect: [4, 3], quality: 1, }); - + if (!result.cancelled) { setImageUri(result.uri); } - }; + }; const extractText = async(): Promise => { if (imageUri) { @@ -111,7 +111,7 @@ export default function TranslateScreen({ navigation }: Navigation) { redirect: 'follow' }) .then(response => response.json()) - .then(data => { + .then(data => { console.log(data); setResults(data); setLoading(false); @@ -132,14 +132,14 @@ export default function TranslateScreen({ navigation }: Navigation) { // TEST: mockup data // setResults({ // fullText: [ - // {id: 1, content: "1. Schedule of the closing ceremony and diploma presentation ceremony: Friday, January 4, 2019 at 9 o'clock for students to go to school.\n1) ", date: "", highlight: false, registered: false}, - // {id: 2, content: "Closing ceremony", date: "2022-01-04", highlight: true, registered: false}, - // {id: 3, content: ": 1st and 2nd graders, each classroom, 9:00-10:50 (no meals)\n2) ", date: "", highlight: false, registered: false}, - // {id: 4, content: "Diploma representation ceremony", date: "2022-01-04", highlight: true, registered: true}, - // {id: 5, content: ": 3rd grade, multi-purpose auditorium (2nd floor), 10:30-12:20\n2. School opening and entrance ceremony for new students: March 4th (Mon), 2019 at 9 o'clock for students to go to school.", date: "", highlight: false, registered: false}, + // {id: 1, eid: -1, content: "1. Schedule of the closing ceremony and diploma presentation ceremony: Friday, January 4, 2019 at 9 o'clock for students to go to school.\n1) ", date: "", highlight: false, registered: false}, + // {id: 2, eid: -1, content: "Closing ceremony", date: "2022-01-04", highlight: true, registered: false}, + // {id: 3, eid: -1, content: ": 1st and 2nd graders, each classroom, 9:00-10:50 (no meals)\n2) ", date: "", highlight: false, registered: false}, + // {id: 4, eid: -1, content: "Diploma representation ceremony", date: "2022-01-04", highlight: true, registered: true}, + // {id: 5, eid: -1, content: ": 3rd grade, multi-purpose auditorium (2nd floor), 10:30-12:20\n2. School opening and entrance ceremony for new students: March 4th (Mon), 2019 at 9 o'clock for students to go to school.", date: "", highlight: false, registered: false}, // ], // korean: "가정통신문\n예당중학교\n8053-8388\n꿈은 크게. 마음은 넘게·\n행동은 바르게\n학부모님께\n희망찬 새해를 맞이하며 학부모님 가정에 건강과 행운이 함께 하시기를 기원 드립니다.\n드릴 말씀은, 2018학년도 종업식 및 졸업장 수여식과 2019학년도 개학 및 신입생 입학식을 다음과 같이 안내드리오니, 이후 3월 개학 때까지 학생들이 자기주도 학습 능력을 배양하고 다양한 체험 활동을 통하여 심신이 건강해지며 각종 유해 환경에 노출되지 않고 안전하고 줄거운 시간이 되도록 지도해 주시기 바랍니다.\n", - // trans_full: "", + // trans_full: "hello", // event_num: 2, // events: [ // { @@ -150,10 +150,11 @@ export default function TranslateScreen({ navigation }: Navigation) { // title: "closing ceremony", // date: "2022-03-24" // } - // ] + // ], + // title: "closing ceremony" // }); } - + const handleKorean = (): void => { setShowKorean(!showKorean); } @@ -243,7 +244,7 @@ export default function TranslateScreen({ navigation }: Navigation) { } itemFull={ - {results?.events?.length ? ( - results.events.map((item, index) => + results.events.map((item, index) => @@ -350,7 +351,6 @@ export default function TranslateScreen({ navigation }: Navigation) { - )} @@ -402,7 +402,7 @@ const styles = StyleSheet.create({ borderWidth: 2 }, backdrop: { - flex: 1, + flex: 1, backgroundColor: 'rgba(0,0,0, 0.60)' }, imageStyle: { @@ -411,4 +411,4 @@ const styles = StyleSheet.create({ margin: 20, alignSelf: 'center' } -}); +}); From 0cb117055666a8c114ccd454f5483633f63f22c6 Mon Sep 17 00:00:00 2001 From: 0hee0 Date: Sat, 4 Jun 2022 01:24:28 +0900 Subject: [PATCH 2/4] [#5] refactor: make profile image index start from 0 --- react-native/screens/JoinScreen.tsx | 14 +++++++------- react-native/screens/SearchScreen.tsx | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/react-native/screens/JoinScreen.tsx b/react-native/screens/JoinScreen.tsx index e917c99..54b398a 100644 --- a/react-native/screens/JoinScreen.tsx +++ b/react-native/screens/JoinScreen.tsx @@ -22,10 +22,10 @@ export default function JoinScreen({ navigation }: Navigation) { // 1 3 4 5 7 10 const [joinForm, setJoinForm] = useState({ uid: undefined, - uprofileImg: 1, + uprofileImg: 0, username: '', ulanguage: '', - uchildren: colors.map(color => ({ cname: '', cprofileImg: 1, color: color?.id })) + uchildren: colors.map(color => ({ cname: '', cprofileImg: 0, color: color?.id })) }) const [open, setOpen] = useState(-1); @@ -136,8 +136,8 @@ export default function JoinScreen({ navigation }: Navigation) { {i18n.t('profileImage')} {Array.from(Array(Number(7)).keys()).map((num, index) => - )} @@ -228,7 +228,7 @@ export default function JoinScreen({ navigation }: Navigation) { trigger={triggerProps => { return }} @@ -240,9 +240,9 @@ export default function JoinScreen({ navigation }: Navigation) { {i18n.t('profileImage')} {Array.from(Array(Number(9)).keys()).map((num, i) => - )} diff --git a/react-native/screens/SearchScreen.tsx b/react-native/screens/SearchScreen.tsx index 17cd122..760c54b 100644 --- a/react-native/screens/SearchScreen.tsx +++ b/react-native/screens/SearchScreen.tsx @@ -206,7 +206,7 @@ export default function SearchScreen({ navigation }: Navigation) { handleNowSelectedChildId(child.cid)}> - + {child.cname} From 7a17a97a50ca95ac7d26738d9e8556c7283c25c5 Mon Sep 17 00:00:00 2001 From: 0hee0 Date: Sat, 4 Jun 2022 01:25:55 +0900 Subject: [PATCH 3/4] [#48] feat: change data structure --- react-native/screens/SearchResultScreen.tsx | 95 ++++++++------------- react-native/types.ts | 11 +-- 2 files changed, 41 insertions(+), 65 deletions(-) diff --git a/react-native/screens/SearchResultScreen.tsx b/react-native/screens/SearchResultScreen.tsx index cfd169d..73a48d4 100644 --- a/react-native/screens/SearchResultScreen.tsx +++ b/react-native/screens/SearchResultScreen.tsx @@ -25,35 +25,18 @@ export default function SearchResultScreen(props: SearchResultScreenProps) { const auth = useAuth(); const navigation = useNavigation(); - const [notices, setNotices] = useState({date: "", results: []}); + const [notice, setNotice] = useState({ + imageUri: '', + fullText: [ + {id: 1, eid: 1, content: "1. Schedule of the closing ceremony and diploma presentation ceremony: Friday, January 4, 2019 at 9 o'clock for students to go to school.\n1) ", date: "", highlight: false, registered: false}, + {id: 2, eid: -1, content: "Closing ceremony", date: "2022-01-04", highlight: true, registered: false} + ], + korean: "희망찬 새해를 맞이하여 학부모님의 가정에 건강과 행복이 함께 하시기를 기원합니다." + }); const [showKorean, setShowKorean] = useState(false); const [isFullDrawer, setFullDrawer] = useState(false); useEffect(() => { - // TODO: Fetch API - // mockup data - setNotices({ - date: "2022-02-10", - results: [{ - id: 1, - imageUri: '', - fullText: [ - {id: 1, eid: 1, content: "1. Schedule of the closing ceremony and diploma presentation ceremony: Friday, January 4, 2019 at 9 o'clock for students to go to school.\n1) ", date: "", highlight: false, registered: false}, - {id: 2, eid: -1, content: "Closing ceremony", date: "2022-01-04", highlight: true, registered: false} - ], - korean: "희망찬 새해를 맞이하여 학부모님의 가정에 건강과 행복이 함께 하시기를 기원합니다." - }, { - id: 2, - imageUri: '', - fullText: [ - {id: 1, eid: -1, content: "1. Schedule of the closing ceremony and diploma presentation ceremony: Friday, January 4, 2019 at 9 o'clock for students to go to school.\n1) ", date: "", highlight: false, registered: false}, - {id: 2, eid: 2, content: "Closing ceremony", date: "2022-01-04", highlight: true, registered: false} - ], - korean: "개학일은 3월 2일이며, 개학식에 참여하고자 하는 학부모님께서는 10시까지 강당으로 오시기 바랍니다.", - trans_full: "" - }] - }) - if (auth?.authData?.access_token) { fetch(`http://localhost:8080/search/detail?nid=${props.route.params.nid}`, { method: 'GET', @@ -65,7 +48,7 @@ export default function SearchResultScreen(props: SearchResultScreenProps) { .then(response => response.json()) .then(data => { if (data?.date && data?.results.length) { - setNotices(data); + setNotice(data); } }) .catch(function (error) { @@ -86,38 +69,34 @@ export default function SearchResultScreen(props: SearchResultScreenProps) { return ( - - {notices?.results && notices.results.length > 0 && notices.results.map((notice, index) => - - - } - itemFull={ - - } - onShowMini={() => setFullDrawer(false)} - onShowFull={() => setFullDrawer(true)} - animation="easeInEaseOut" - disableSwipeIcon - extraMarginTop={10} - swipeHeight={Dimensions.get('window').height*0.5} - /> - - )} - + + + } + itemFull={ + + } + onShowMini={() => setFullDrawer(false)} + onShowFull={() => setFullDrawer(true)} + animation="easeInEaseOut" + disableSwipeIcon + extraMarginTop={10} + swipeHeight={Dimensions.get('window').height*0.5} + /> + ); } diff --git a/react-native/types.ts b/react-native/types.ts index d1b9957..3e5aeb5 100644 --- a/react-native/types.ts +++ b/react-native/types.ts @@ -73,12 +73,14 @@ interface Event { registered: boolean } -interface Result { - id?: number, +interface Notice { imageUri?: string, fullText: Event[], korean: string, trans_full?: string, +} +interface Result extends Notice { + id?: number, title?: string, @@ -86,11 +88,6 @@ interface Result { events?: { title: string, date: string }[] } -interface Notice { - date: string, - results: Result[] -} - interface Notices { date: string, saved: { nid: number, cid: number, title: string }[] From f64205c5976f58789c767c05db5d32bcdf5ed0a0 Mon Sep 17 00:00:00 2001 From: 0hee0 Date: Sat, 4 Jun 2022 01:49:07 +0900 Subject: [PATCH 4/4] [#48] feat: add empty state --- react-native/locales/en.js | 4 ++- react-native/locales/ja.js | 4 ++- react-native/locales/km.js | 4 ++- react-native/locales/ko.js | 4 ++- react-native/locales/th.js | 4 ++- react-native/locales/vn.js | 4 ++- react-native/locales/zh.js | 4 ++- react-native/screens/SearchScreen.tsx | 35 ++++++++++++++++++++------- 8 files changed, 47 insertions(+), 16 deletions(-) diff --git a/react-native/locales/en.js b/react-native/locales/en.js index 3549e7e..1aa9719 100644 --- a/react-native/locales/en.js +++ b/react-native/locales/en.js @@ -74,5 +74,7 @@ export default { searchResult: "Search Result", noEvent: "There is no event today!", saveFirst: "Click the Save button to save the results first!", - eventNotFound: "No event found" + eventNotFound: "No event found", + noResults: "There are no results yet", + translateFirst: "Translate and save the results." } \ No newline at end of file diff --git a/react-native/locales/ja.js b/react-native/locales/ja.js index a8eefcf..702583c 100644 --- a/react-native/locales/ja.js +++ b/react-native/locales/ja.js @@ -68,5 +68,7 @@ export default { searchResult: "検索結果", noEvent: "今日はイベントはありません！", saveFirst: "保存ボタンを押して結果を保存してください！", - eventNotFound: "イベントが見つかりませんでした" + eventNotFound: "イベントが見つかりませんでした", + noResults: "まだ結果はありません。", + translateFirst: "結果を翻訳して保存する。" } \ No newline at end of file diff --git a/react-native/locales/km.js b/react-native/locales/km.js index 5f1d7a5..83da9d0 100644 --- a/react-native/locales/km.js +++ b/react-native/locales/km.js @@ -68,5 +68,7 @@ export default { searchResult: "លទ្ធផលស្វែងរក", noEvent: "មិនមានព្រឹត្តិការណ៍ថ្ងៃនេះទេ!", saveFirst: "ចុចប៊ូតុង Save ដើម្បីរក្សាទុកលទ្ធផលជាមុន!", - eventNotFound: "រកមិនឃើញព្រឹត្តិការណ៍ទេ។" + eventNotFound: "រកមិនឃើញព្រឹត្តិការណ៍ទេ។", + noResults: "មិនទាន់មានលទ្ធផលនៅឡើយទេ។", + translateFirst: "បកប្រែ និងរក្សាទុកលទ្ធផល។" } \ No newline at end of file diff --git a/react-native/locales/ko.js b/react-native/locales/ko.js index 92eb706..bb4cd97 100644 --- a/react-native/locales/ko.js +++ b/react-native/locales/ko.js @@ -67,5 +67,7 @@ export default { searchResult: "검색 결과", noEvent: "오늘은 이벤트가 없어요!", saveFirst: "저장 버튼을 눌러서 결과 저장을 먼저 해주세요!", - eventNotFound: "이벤트를 찾지 못했어요" + eventNotFound: "이벤트를 찾지 못했어요", + noResults: "아직 결과가 없습니다.", + translateFirst: "번역을 한 후에 결과를 저장해주세요." } \ No newline at end of file diff --git a/react-native/locales/th.js b/react-native/locales/th.js index d99e77e..b942c0f 100644 --- a/react-native/locales/th.js +++ b/react-native/locales/th.js @@ -68,5 +68,7 @@ export default { searchResult: "ผลการค้นหา", noEvent: "วันนี้ไม่มีกิจกรรม!", saveFirst: "คลิกปุ่มบันทึกเพื่อบันทึกผลลัพธ์ก่อน!", - eventNotFound: "ไม่พบกิจกรรม" + eventNotFound: "ไม่พบกิจกรรม", + noResults: "ยังไม่มีผลลัพธ", + translateFirst: "แปลและบันทึกผลลัพธ์" } \ No newline at end of file diff --git a/react-native/locales/vn.js b/react-native/locales/vn.js index 12fea6c..f73ea7e 100644 --- a/react-native/locales/vn.js +++ b/react-native/locales/vn.js @@ -67,5 +67,7 @@ export default { searchResult: "Kết quả tìm kiếm", noEvent: "Không có sự kiện hôm nay!", saveFirst: "Nhấp vào nút Lưu để lưu kết quả trước!", - eventNotFound: "Không tìm thấy sự kiện nào" + eventNotFound: "Không tìm thấy sự kiện nào", + noResults: "Chưa có kết quả.", + translateFirst: "Dịch và lưu kết quả." } \ No newline at end of file diff --git a/react-native/locales/zh.js b/react-native/locales/zh.js index d9eea9b..e94b073 100644 --- a/react-native/locales/zh.js +++ b/react-native/locales/zh.js @@ -67,5 +67,7 @@ export default { searchResult: "搜索结果", noEvent: "今天没有活动！", saveFirst: "单击保存按钮首先保存结果！", - eventNotFound: "未找到任何事件" + eventNotFound: "未找到任何事件", + noResults: "目前还没有结果。", + translateFirst: "翻译并保存结果。" } \ No newline at end of file diff --git a/react-native/screens/SearchScreen.tsx b/react-native/screens/SearchScreen.tsx index 760c54b..9071dae 100644 --- a/react-native/screens/SearchScreen.tsx +++ b/react-native/screens/SearchScreen.tsx @@ -10,6 +10,7 @@ import { useAuth } from '../contexts/Auth'; import { StackActions } from '@react-navigation/native'; import i18n from 'i18n-js' import '../locales/i18n'; +import { colors } from 'react-native-elements'; export default function SearchScreen({ navigation }: Navigation) { @@ -81,10 +82,8 @@ export default function SearchScreen({ navigation }: Navigation) { }) .then(response => response.json()) .then(data => { - if (data?.date && data?.saved?.length) { - setNotices(data); - setFilteredNotices(data); - } + setNotices(data); + setFilteredNotices(data); }) .catch(function (error) { console.log(error) @@ -218,15 +217,21 @@ export default function SearchScreen({ navigation }: Navigation) { {i18n.t('results_cap')} - {filteredNotices && filteredNotices.length > 0 && ( + {filteredNotices && filteredNotices.length > 0 ? ( filteredNotices?.map((notice, index) => ) - )} - {/* TODO: empty icon + ) : ( - There are no results yet. Translate and save the results. - )} */} + + + {i18n.t('noResults')} + {i18n.t('translateFirst')} + navigation.navigate('Translate')}> + Go to {i18n.t('translate')} + + + )} ); @@ -299,4 +304,16 @@ const styles = StyleSheet.create({ height: 20, marginRight: 12 }, + imageStyle: { + width: 80, + height: 80, + margin: 20, + }, + navigateButton: { + margin: 20, + backgroundColor: theme.colors.primary, + paddingVertical: 8, + paddingHorizontal: 16, + borderRadius: 8, + } })