[#11] feat: add children selection to save results feature

dsc-sookmyung · May 17, 2022 · 891c144 · 891c144
1 parent 7df9b8e
commit 891c144
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 24 deletions.
diff --git a/react-native/components/BottomDrawer.tsx b/react-native/components/BottomDrawer.tsx
@@ -1,11 +1,9 @@
-BottomDrawer
-
 import React, { useState, useEffect, useRef } from 'react';
 import { StyleSheet, Dimensions, View, TouchableOpacity, TouchableHighlight, ScrollView, Alert, Linking } from 'react-native';
 import { MaterialIcons, FontAwesome } from '@expo/vector-icons';
 import { Popover, Button, Text, Modal, FormControl, Input, VStack, Select, CheckIcon, AlertDialog } from 'native-base';
 import { theme } from '../core/theme';
-import type { BottomDrawerProps, EventForm, UserData } from '../types';
+import type { BottomDrawerProps, EventForm, ResultsForm, UserData } from '../types';
 import { useAuth } from '../contexts/Auth';
 import { useNavigation, StackActions } from '@react-navigation/native';
 import i18n from 'i18n-js';
@@ -21,7 +19,7 @@ function BottomDrawer(props: BottomDrawerProps) {
     const [eventForm, setEventForm] = useState<EventForm>({cid: 1, title: '', date: '', description: ''});
     const [calendarAlert, setCalendarAlert] = useState<boolean>(false);
     const [calendarUrl, setCalendarUrl] = useState<string>('');
-    const [resultsTitle, setResultsTitle] = useState<string>('title');
+    const [resultsForm, setResultsForm] = useState<ResultsForm>({cid: 1, title: 'title'});
     const [user, setUser] = useState<UserData>();
     const auth = useAuth();
     const navigation = useNavigation();
@@ -47,7 +45,7 @@ function BottomDrawer(props: BottomDrawerProps) {
 
 	useEffect(() => {
         if (props.openSaveForm) {
-            setResultsTitle('title');
+            setResultsForm({ cid: 1, title: 'title' });
         }
 	}, [props?.openSaveForm])
 
@@ -71,6 +69,8 @@ function BottomDrawer(props: BottomDrawerProps) {
     }
 
     const addEvent = () => {
+		handleCalendarAlert();
+
         if (auth?.authData?.jwt_token && eventForm) {
             console.log(eventForm, currentEvent);
             fetch(`http://localhost:8080/event/register?id=${currentEvent}`, {
@@ -88,7 +88,7 @@ function BottomDrawer(props: BottomDrawerProps) {
                 if (data.url) {
                     setCalendarUrl(data.url)    // console.log(data)
                     handleCalendarAlert();
-					// auth?.handleUpdate();
+					auth?.handleUpdate();
                 }
                 else {
                     Alert.alert(i18n.t('registerFailed'));
@@ -135,23 +135,40 @@ function BottomDrawer(props: BottomDrawerProps) {
                                 <Modal.CloseButton />
                                 <Modal.Header>{i18n.t('saveResults')}</Modal.Header>
                                 <Modal.Body>
-                                    <FormControl>
-                                    <FormControl.Label>Title</FormControl.Label>
-                                    <Input 
-                                        value={resultsTitle}
-                                        onChangeText={(text) => setResultsTitle(text)}
-                                    />
-                                    <FormControl.HelperText>
-                                        {i18n.t('helpertext')}
-                                    </FormControl.HelperText>
-                                    </FormControl>
+                                    <VStack space={2}>
+                                        <FormControl>
+                                            <FormControl.Label>{i18n.t('child')}</FormControl.Label>
+                                                <Select selectedValue={resultsForm?.cid.toString()} accessibilityLabel="Child" onValueChange={itemValue => {
+                                                    setResultsForm({...resultsForm, ['cid']: Number(itemValue)})
+                                                }} _selectedItem={{
+                                                    bg: "skyblue.500",
+                                                    endIcon: <CheckIcon size={3} />
+                                                }}>
+                                                    {/* Country code 3 digit ISO */}
+                                                    {user?.uchildren?.map((child, index) => 
+                                                        child?.cname && child?.cid &&
+                                                            <Select.Item key={'cs_'+index} label={child?.cname} value={child?.cid.toString()} />
+                                                    )}
+                                                </Select>
+                                        </FormControl>
+                                        <FormControl>
+                                            <FormControl.Label>Title</FormControl.Label>
+                                            <Input 
+                                                value={resultsForm['title']}
+                                                onChangeText={(text) => setResultsForm({...resultsForm, ['title']: text})}
+                                            />
+                                            <FormControl.HelperText>
+                                                {i18n.t('helpertext')}
+                                            </FormControl.HelperText>
+                                        </FormControl>
+                                    </VStack>
                                 </Modal.Body>
                                 <Modal.Footer>
                                     <Button.Group space={2}>
                                     <Button variant="ghost" colorScheme="blueGray" onPress={props.handleOpenSaveForm}>
                                         {i18n.t('cancel')}
                                     </Button>
-                                    <Button onPress={() => props?.saveResults && props.saveResults(resultsTitle)}>
+                                    <Button onPress={() => props?.saveResults && props.saveResults(resultsForm)}>
                                         {i18n.t('save')}
                                     </Button>
                                     </Button.Group>
@@ -294,7 +311,7 @@ function BottomDrawer(props: BottomDrawerProps) {
                                 </Popover>
                             ) : (
                                 <Text key={item.content}>
-                                    {item.content}
+                                    {item.content.slice(72)}
                                 </Text>
                             )
                         )

diff --git a/react-native/screens/TranslateScreen.tsx b/react-native/screens/TranslateScreen.tsx
@@ -3,7 +3,7 @@ import { StyleSheet, View, TouchableOpacity, ImageBackground, Dimensions, Alert
 import { Camera } from 'expo-camera';
 import { Ionicons } from '@expo/vector-icons';
 import { theme } from '../core/theme';
-import type { Navigation, Result } from '../types';
+import type { Navigation, Result, ResultsForm } from '../types';
 import AppLoading from 'expo-app-loading';
 import useFonts from '../hooks/useFonts'
 import SwipeUpDown from 'react-native-swipe-up-down';
@@ -177,9 +177,9 @@ export default function TranslateScreen({ navigation }: Navigation) {
         setOpenSaveForm(!openSaveForm);
     }
 
-    const saveResults = (title: string): void => {
+    const saveResults = (form: ResultsForm): void => {
         // data 보내고, success 라면, 서버에 저장된 제목 받아와서 보여주기!
-        if (!title) {
+        if (!form?.title) {
             Alert.alert("You must enter at least one character for the title.");
             return;
         }
@@ -194,7 +194,8 @@ export default function TranslateScreen({ navigation }: Navigation) {
                  name: imageUri.split("/").pop()
             });
             // formdata.append('noticeRequestDTO',  new Blob([JSON.stringify(data)], {type: 'application/json'}));
-            formdata.append('title', title);
+            formdata.append('cid', form?.cid);
+            formdata.append('title', form?.title);
             formdata.append('date', new Date().toISOString().slice(0, 10));
             formdata.append('korean', results?.korean);
             formdata.append('trans_full', results?.trans_full);

diff --git a/react-native/types.ts b/react-native/types.ts
@@ -92,7 +92,7 @@ interface BottomDrawerProps {
 	isTranslateScreen?: boolean,
 	openSaveForm?: boolean,
 	handleKorean?: () => void,
-	saveResults?: (title: string) => void,
+	saveResults?: (form: ResultsForm) => void,
 	closeResults?: () => void,
 	retakePicture?: () => void,
 	handleOpenSaveForm?: () => void
@@ -105,7 +105,12 @@ interface EventForm {
 	description: string
 }
 
+interface ResultsForm {
+	cid: number,
+	title: string
+}
+
 export type {
 	UserData, JoinData, AuthData, AuthResponse, AuthContextData, Children, 
-	Event, Result, Notice, Notices, BottomDrawerProps, EventForm
+	Event, Result, Notice, Notices, BottomDrawerProps, EventForm, ResultsForm
 }