diff --git a/react-native/components/Home/HomeMenu.tsx b/react-native/components/Home/HomeMenu.tsx index 91fb934..8e5f910 100644 --- a/react-native/components/Home/HomeMenu.tsx +++ b/react-native/components/Home/HomeMenu.tsx @@ -24,6 +24,7 @@ export default function HomeMenu() { return ( { if (auth?.userData) { - setUser(auth?.userData); + setUser(auth?.userData); } navigation.setOptions({ @@ -118,7 +118,7 @@ export default function HomeScreen({ navigation }: Navigation) { ))} - + {nowSelectedChildId === SHOW_ALL ? ( events?.children.reduce( (prevValue, child) => prevValue + child.events.length, @@ -248,7 +248,10 @@ export default function HomeScreen({ navigation }: Navigation) { events?.children.map((notice, index) => notice.events.map((event, index) => { return ( - + )} - + )} @@ -353,7 +356,7 @@ const styles = StyleSheet.create({ shadowOffset: { height: 0, width: 0, - } + }, }, childButtonWrapper: { flexDirection: "row", @@ -436,7 +439,7 @@ const styles = StyleSheet.create({ pinkButton: { backgroundColor: theme.colors.secondary, borderRadius: 12, - padding: 16, + padding: 12, marginBottom: 12, width: "100%", }, diff --git a/react-native/screens/TranslateScreen.tsx b/react-native/screens/TranslateScreen.tsx index 3519e4a..825c86a 100644 --- a/react-native/screens/TranslateScreen.tsx +++ b/react-native/screens/TranslateScreen.tsx @@ -35,21 +35,21 @@ export default function TranslateScreen({ navigation }: Navigation) { const [openSaveForm, setOpenSaveForm] = useState(false); const [openInitialEventForm, setOpenInitialEventForm] = useState(true); - const toast = useToast(); - const auth = useAuth(); + const toast = useToast(); + const auth = useAuth(); - useEffect(() => { - (async () => { - const { status } = await Camera.requestCameraPermissionsAsync(); - setHasPermission(status === 'granted'); - })(); - }, []); + useEffect(() => { + (async () => { + const { status } = await Camera.requestCameraPermissionsAsync(); + setHasPermission(status === "granted"); + })(); + }, []); - useEffect(() => { - if (imageUri) { - extractText - } - }, [imageUri]); + useEffect(() => { + if (imageUri) { + extractText; + } + }, [imageUri]); // DEV TEST // if (hasPermission === null) { @@ -59,41 +59,41 @@ export default function TranslateScreen({ navigation }: Navigation) { // return No access to camera! // } - const takePicture = async () => { - if (camera) { - const data = await camera.takePictureAsync(null); - setImageUri(data.uri); - } - }; + const takePicture = async () => { + if (camera) { + const data = await camera.takePictureAsync(null); + setImageUri(data.uri); + } + }; - const pickImage = async () => { - // No permissions request is necessary for launching the image library - let result = await ImagePicker.launchImageLibraryAsync({ - mediaTypes: ImagePicker.MediaTypeOptions.All, - allowsEditing: true, - aspect: [4, 3], - quality: 1, - }); + const pickImage = async () => { + // No permissions request is necessary for launching the image library + let result = await ImagePicker.launchImageLibraryAsync({ + mediaTypes: ImagePicker.MediaTypeOptions.All, + allowsEditing: true, + aspect: [4, 3], + quality: 1, + }); - if (!result.cancelled) { - setImageUri(result.uri); - } - }; + if (!result.cancelled) { + setImageUri(result.uri); + } + }; - const extractText = async(): Promise => { - if (imageUri) { - // console.log(imageUri); - let FormData = require('form-data'); - const formdata = new FormData(); - formdata.append("uploadfile", { - uri : imageUri, - type: mime.getType(imageUri), - name: imageUri.split("/").pop() - }); + const extractText = async (): Promise => { + if (imageUri) { + // console.log(imageUri); + let FormData = require("form-data"); + const formdata = new FormData(); + formdata.append("uploadfile", { + uri: imageUri, + type: mime.getType(imageUri), + name: imageUri.split("/").pop(), + }); - console.log('ocr',formdata); + console.log("ocr", formdata); - setLoading(true); + setLoading(true); if (auth?.authData?.access_token) { const axiosInstance = axios.create({ @@ -138,39 +138,39 @@ export default function TranslateScreen({ navigation }: Navigation) { } } - // TEST: mockup data - // setResults({ - // 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}, - // {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: "hello", - // event_num: 2, - // events: [ - // { - // title: "opening ceremony", - // date: "2022-03-24" - // }, - // { - // title: "closing ceremony", - // date: "2022-03-24" - // } - // ], - // title: "closing ceremony" - // }); - } + // TEST: mockup data + // setResults({ + // 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}, + // {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: "hello", + // event_num: 2, + // events: [ + // { + // title: "opening ceremony", + // date: "2022-03-24" + // }, + // { + // title: "closing ceremony", + // date: "2022-03-24" + // } + // ], + // title: "closing ceremony" + // }); + }; - const handleKorean = (): void => { - setShowKorean(!showKorean); - } + const handleKorean = (): void => { + setShowKorean(!showKorean); + }; - const handleOpenSaveForm = () => { - setOpenSaveForm(!openSaveForm); - } + const handleOpenSaveForm = () => { + setOpenSaveForm(!openSaveForm); + }; const saveResults = async(form: ResultsForm): Promise => { // data 보내고, success 라면, 서버에 저장된 제목 받아와서 보여주기! @@ -249,188 +249,227 @@ export default function TranslateScreen({ navigation }: Navigation) { } } - const retakePicture = (): void => { - setImageUri(''); - setResults({id: 0, fullText: [], korean: ''}); - setShowKorean(false); - setLoading(false); - } + const retakePicture = (): void => { + setImageUri(""); + setResults({ id: 0, fullText: [], korean: "" }); + setShowKorean(false); + setLoading(false); + }; - return ( - - {/* After taking a picture */} - {imageUri ? ( - /* After taking a picture and press the check button */ - results?.fullText && results?.korean ? ( - - - - } - itemFull={ - - } - onShowMini={() => setFullDrawer(false)} - onShowFull={() => setFullDrawer(true)} - animation="easeInEaseOut" - disableSwipeIcon - extraMarginTop={10} - swipeHeight={Dimensions.get('window').height*0.65} - /> - - - - - {results?.event_num ? ( - We found {results.event_num} events for you - ) : ( - {i18n.t('eventNotFound')} - )} - - - - {results?.events?.length ? ( - results.events.map((item, index) => - - - - {item.date} - {item.title} - - - ) - ) : ( - - )} - - - - - - - - - - ) : ( - /* After taking a picture, before OCR(pressing the check button) */ - loading ? ( - + return ( + + {/* After taking a picture */} + {imageUri ? ( + /* After taking a picture and press the check button */ + results?.fullText && results?.korean ? ( + + + + } + itemFull={ + + } + onShowMini={() => setFullDrawer(false)} + onShowFull={() => setFullDrawer(true)} + animation="easeInEaseOut" + disableSwipeIcon + extraMarginTop={10} + swipeHeight={Dimensions.get("window").height * 0.65} + /> + + + + + {results?.event_num ? ( + + We found {results.event_num} events for you + + ) : ( + + {i18n.t("eventNotFound")} + + )} + + + + {results?.events?.length ? ( + results.events.map((item, index) => ( + + + + {item.date} + {item.title} + + + )) ) : ( - <> - - - - - - - - ) - ) - ) : ( - /* Before taking a picture, Camera ready */ - <> - setCamera(ref)}> - - - - - - - - - - { - setType( - type === Camera.Constants.Type.back - ? Camera.Constants.Type.front - : Camera.Constants.Type.back - ); - }}> - - - - - )} - - ); + + )} + + + + + + + + + + ) : /* After taking a picture, before OCR(pressing the check button) */ + loading ? ( + + ) : ( + <> + + + + + + + + ) + ) : ( + /* Before taking a picture, Camera ready */ + <> + setCamera(ref)} + > + + + + + + + + + + { + setType( + type === Camera.Constants.Type.back + ? Camera.Constants.Type.front + : Camera.Constants.Type.back + ); + }} + > + + + + + )} + + ); } const styles = StyleSheet.create({ - container: { - flex: 1, - }, - camera: { - flex: 4, - }, - cameraContainer: { - flex: 1, - backgroundColor: 'transparent', - flexDirection: 'row', - margin: 20, - }, - buttonContainer: { - flex: 1, - flexDirection: 'row', - alignItems: 'center', - paddingHorizontal: 24, - backgroundColor: '#000' - }, - circleButton: { - borderRadius: 48, - height: 64, - width: 64, - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - }, - primaryBackground: { - backgroundColor: theme.colors.primary - }, - grayBackground: { - backgroundColor: theme.colors.gray - }, - whiteBackground: { - backgroundColor: '#fff', - }, - innerCircle: { - borderRadius: 48, - padding: 8, - height: 56, - width: 56, - borderWidth: 2 - }, - backdrop: { - flex: 1, - backgroundColor: 'rgba(0,0,0, 0.60)' - }, - imageStyle: { - width: 80, - height: 80, - margin: 20, - alignSelf: 'center' - } + container: { + flex: 1, + }, + camera: { + flex: 4, + }, + cameraContainer: { + flex: 1, + backgroundColor: "transparent", + flexDirection: "row", + margin: 20, + }, + buttonContainer: { + flex: 1, + flexDirection: "row", + alignItems: "center", + paddingHorizontal: 24, + backgroundColor: "#000", + }, + circleButton: { + borderRadius: 48, + height: 64, + width: 64, + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + }, + primaryBackground: { + backgroundColor: theme.colors.primary, + }, + grayBackground: { + backgroundColor: theme.colors.gray, + }, + whiteBackground: { + backgroundColor: "#fff", + }, + innerCircle: { + borderRadius: 48, + padding: 8, + height: 56, + width: 56, + borderWidth: 2, + }, + backdrop: { + flex: 1, + backgroundColor: "rgba(0,0,0, 0.60)", + }, + imageStyle: { + width: 80, + height: 80, + margin: 20, + alignSelf: "center", + }, }); diff --git a/react-native/services/authService.ts b/react-native/services/authService.ts index 19f4b2e..c68217b 100644 --- a/react-native/services/authService.ts +++ b/react-native/services/authService.ts @@ -1,52 +1,54 @@ -import axios from 'axios'; -import type { AuthResponse, JoinData } from '../types'; - +import axios from "axios"; +import type { AuthResponse, JoinData } from "../types"; const signIn = (accessToken: string): Promise => { - return new Promise((resolve, reject) => { - axios.get('http://localhost:8080/login/oauth2', { - headers: { - "Authorization": accessToken - } - }) - .then(response => { - // console.log('response headers',response.headers); - let data = { - header: { - access_token: response.headers["access-token"], - refresh_token: response.headers["refresh-token"] - }, - body: response.data - } - console.log(data); - resolve(data); - }) - .catch(err => { - reject(err) - }) - }); + return new Promise((resolve, reject) => { + axios + .get("http://localhost:8080/login/oauth2", { + headers: { + Authorization: accessToken, + }, + }) + .then((response) => { + // console.log('response headers',response.headers); + let data = { + header: { + access_token: response.headers["access-token"], + refresh_token: response.headers["refresh-token"], + }, + body: response.data, + }; + console.log(data); + resolve(data); + }) + .catch((err) => { + reject(err); + }); + }); }; const signUp = (data: JoinData): Promise => { - return new Promise((resolve, reject) => { - axios.post('http://localhost:8080/join', data) - .then(response => { - let data = { - header: { - access_token: response.headers["access-token"], - refresh_token: response.headers["refresh-token"] - }, - body: response.data - } - console.log(data); - resolve(data); - }) - .catch(err => { - reject(err) - }) - }) -} + return new Promise((resolve, reject) => { + axios + .post("http://localhost:8080/join", data) + .then((response) => { + let data = { + header: { + access_token: response.headers["access-token"], + refresh_token: response.headers["refresh-token"], + }, + body: response.data, + }; + console.log(data); + resolve(data); + }) + .catch((err) => { + reject(err); + }); + }); +}; export const authService = { - signIn, signUp + signIn, + signUp, };