Merge pull request #19 from dsc-sookmyung/feature/translate

[#11] Feat: Add event to highlighted text
dsc-sookmyung · Mar 4, 2022 · ddea414 · ddea414
2 parents 6f0f884 + 82b0494
commit ddea414
Show file tree

Hide file tree

Showing 6 changed files with 1,164 additions and 75 deletions.
diff --git a/react-native/App.tsx b/react-native/App.tsx
@@ -2,8 +2,9 @@ import * as React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { Provider as PaperProvider } from 'react-native-paper';
+import { NativeBaseProvider } from 'native-base';
 import { Button } from 'react-native';
-import { theme } from './core/theme';
+import { theme, nativeBaseTheme } from './core/theme';
 
 import LoginScreen from './screens/LoginScreen';
 import JoinScreen from './screens/JoinScreen';
@@ -18,38 +19,40 @@ const Stack = createNativeStackNavigator();
 export default function App() {
   return (
     <PaperProvider theme={theme}>
-      <NavigationContainer>
-        <Stack.Navigator 
-          initialRouteName="Login"
-        >
-          <Stack.Screen 
-            name="Login" 
-            component={LoginScreen} 
-            options={{headerShown: false}} 
-          />
-          <Stack.Screen
-            name="Join"
-            component={JoinScreen}
-          />
-          <Stack.Screen
-            name="ForgotPassword"
-            component={ForgotPasswordScreen}
-          />
-          <Stack.Screen
-            name="Home"
-            component={HomeScreen}
-            options={{
-              title: "NotiNote",
-              headerBackVisible: false,
-              headerRight: () => <LogoutButton/>
-            }}
-          />
-          <Stack.Screen
-            name="Translate"
-            component={TranslateScreen}
-          />
-          </Stack.Navigator>
-        </NavigationContainer>
-    </PaperProvider>
+      <NativeBaseProvider theme={nativeBaseTheme}>
+        <NavigationContainer>
+          <Stack.Navigator 
+            initialRouteName="Login"
+          >
+            <Stack.Screen 
+              name="Login" 
+              component={LoginScreen} 
+              options={{headerShown: false}} 
+            />
+            <Stack.Screen
+              name="Join"
+              component={JoinScreen}
+            />
+            <Stack.Screen
+              name="ForgotPassword"
+              component={ForgotPasswordScreen}
+            />
+            <Stack.Screen
+              name="Home"
+              component={HomeScreen}
+              options={{
+                title: "NotiNote",
+                headerBackVisible: false,
+                headerRight: () => <LogoutButton/>
+              }}
+            />
+            <Stack.Screen
+              name="Translate"
+              component={TranslateScreen}
+            />
+            </Stack.Navigator>
+          </NavigationContainer>
+        </NativeBaseProvider>
+      </PaperProvider>
   );
 }
diff --git a/react-native/components/BottomDrawer.tsx b/react-native/components/BottomDrawer.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { StyleSheet, Dimensions, View, Text, TouchableOpacity, TouchableHighlight, ScrollView } from 'react-native';
+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 { theme } from '../core/theme';
 
 
@@ -10,7 +11,7 @@ interface BottomDrawerProps {
 	showFullText?: boolean,
 	showTranslated?: boolean,
 	isFullDrawer?: boolean,
-	save?: boolean,
+	isTranslateScreen?: boolean,
 	handleFullText?: () => void,
 	saveResults?: () => void,
 	handleTranslatedText?: () => void,
@@ -28,6 +29,33 @@ const highlight = (text: string) =>
   ));
 
 function BottomDrawer(props: BottomDrawerProps) {
+	const [currentEvent, setCurrentEvent] = useState();
+
+	const openPopup = (resultId) => (event) => {
+		setCurrentEvent(resultId)
+	}
+
+	const closePopup = () => {
+		setCurrentEvent();
+	}
+
+	const addEvent = (resultId) => (event) => {
+		// TODO: api
+		// TEST
+		let status = "success";
+		switch (status) {
+			case "success": 
+				Alert.alert("The event has been successfully added to your calendar!");
+				setCurrentEvent();	
+				break;
+			case "duplicate": 
+				Alert.alert("This schedule has already been registered.");
+				setCurrentEvent();
+				break;
+			default:
+				Alert.alert("Failed to add event to calendar. Please try again.")
+		}
+	}
 
 	return (
 		<View style={styles.bottomDrawer}>
@@ -40,7 +68,7 @@ function BottomDrawer(props: BottomDrawerProps) {
 							<TouchableOpacity style={styles.rightSpace} onPress={props.handleFullText}>
 								<Entypo name="text" size={32} color="#000"/>
 							</TouchableOpacity>
-							{props.save &&
+							{props.isTranslateScreen &&
 								<TouchableOpacity onPress={props.saveResults}>
 									<FontAwesome name="save" size={32} color='#000' />
 								</TouchableOpacity>
@@ -56,14 +84,47 @@ function BottomDrawer(props: BottomDrawerProps) {
 				<ScrollView style={{ flex: 1 }}>
 					{!props.showFullText ? (
 						props.results?.map((result, index) => 
-							<Text key={result.content} style={styles.content}>
-								{index+1}.&nbsp; 
-								{result.highlight ? (
-									highlight(result.content)
-								) : (
-									result.content
-								)}
-							</Text>
+							result.highlight ? (
+								<Popover 
+									key={result.id} 
+									isOpen={result.id===currentEvent}
+									onOpen={openPopup(result.id)}									
+									onClose={closePopup}
+									trigger={triggerProps => {
+										return <Text {...triggerProps}>
+													<Text key={result.content} style={styles.content}>
+														{index+1}.&nbsp; 
+														{result.highlight ? (
+															highlight(result.content)
+														) : (
+															result.content
+														)}
+													</Text>
+												</Text>;
+									}}
+								>
+									<Popover.Content accessibilityLabel="Add schedule to calendar" w={Dimensions.get('window').width*0.7}>
+									<Popover.Arrow />
+									<Popover.CloseButton />
+									<Popover.Header>Add an event</Popover.Header>
+									<Popover.Body>
+										You can add this schedule to the Google calendar.
+									</Popover.Body>
+									<Popover.Footer justifyContent="flex-end">
+										<Button.Group space={4}>
+											<Button variant="ghost" onPress={closePopup}>
+												Cancel
+											</Button>
+											<Button onPress={addEvent(result.id)}>Add to calendar</Button>
+										</Button.Group>
+									</Popover.Footer>
+									</Popover.Content>
+								</Popover>
+							) : (
+								<Text key={result.content} style={styles.content}>
+									{index+1}.&nbsp; {result.content}
+								</Text>
+							)
 						)
 					) : (
 						props.showTranslated ? (
@@ -74,21 +135,23 @@ function BottomDrawer(props: BottomDrawerProps) {
 					)}
 				</ScrollView>
 			</View>
-			<View style={[styles.spaceBetween, props.isFullDrawer && styles.full ]}>
-				{!props.showFullText ? (
-					<TouchableHighlight style={[styles.regularButton, styles.grayBackground]} onPress={props.closeResults}>
-						<Text style={styles.whiteText}>Close</Text>
-					</TouchableHighlight>
-				) : (
-						<TouchableHighlight style={[styles.regularButton, styles.grayBackground]} onPress={props.handleFullText}>
-							<Text style={styles.whiteText}>Back</Text>
+			{props.isTranslateScreen && 
+				<View style={[styles.spaceBetween, props.isFullDrawer && styles.full ]}>
+					{!props.showFullText ? (
+						<TouchableHighlight style={[styles.regularButton, styles.grayBackground]} onPress={props.closeResults}>
+							<Text style={styles.whiteText}>Close</Text>
 						</TouchableHighlight>
-				)}
-				<View style={styles.gap} />
-				<TouchableHighlight style={[styles.regularButton, styles.primaryBackground]} onPress={props.retakePicture}>
-					<Text style={styles.whiteText}>Try again</Text>
-				</TouchableHighlight>
-			</View>
+					) : (
+							<TouchableHighlight style={[styles.regularButton, styles.grayBackground]} onPress={props.handleFullText}>
+								<Text style={styles.whiteText}>Back</Text>
+							</TouchableHighlight>
+					)}
+					<View style={styles.gap} />
+					<TouchableHighlight style={[styles.regularButton, styles.primaryBackground]} onPress={props.retakePicture}>
+						<Text style={styles.whiteText}>Try again</Text>
+					</TouchableHighlight>
+				</View>
+			}
 		</View>
 	)
 }
@@ -119,10 +182,12 @@ const styles = StyleSheet.create({
 		fontSize: 24,
 		fontWeight: '700',
 		color: theme.colors.primary,
+		// letterSpacing: 1
 	},
 	content: {
 		fontSize: 16,
-		paddingBottom: 8
+		paddingBottom: 8,
+		letterSpacing: 1
 	},
 	regularButton: {
 		paddingVertical: 16,

diff --git a/react-native/core/theme.ts b/react-native/core/theme.ts
@@ -1,4 +1,5 @@
 import { DefaultTheme } from 'react-native-paper';
+import { extendTheme } from 'native-base';
 
 export const theme = {
   ...DefaultTheme,
@@ -7,11 +8,43 @@ export const theme = {
     primary: '#333D79',
     secondary: '#FAEBEF',
     text: '#343a40',
-    surface: '#fff',
-    background: '#fff',
+    surface: '#fafafa',
+    background: '#fafafa',
     error: '#f13a59',
     coral: '#FF6B6B',
     skyblue: '#D0E1FC',
     gray: '#dddddd',
   },
 };
+
+export const nativeBaseTheme = extendTheme({
+  colors: {
+    primary: {
+      500: '#333D79',
+    },
+    secondary: {
+      500: '#FAEBEF',
+    },
+    text: {
+      500: '#343a40',
+    },
+    surface: {
+      500: '#fafafa',
+    },
+    background: {
+      500: '#fafafa',
+    },
+    error: {
+      500: '#f13a59',
+    },
+    coral: {
+      500: '#FF6B6B',
+    },
+    skyblue: {
+      500: '#D0E1FC',
+    },
+    gray: {
+      500: '#dddddd',
+    },
+  }
+})
diff --git a/react-native/package.json b/react-native/package.json
@@ -18,12 +18,14 @@
     "expo-camera": "^12.1.2",
     "expo-font": "~10.0.4",
     "expo-status-bar": "~1.2.0",
+    "native-base": "^3.3.7",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-native": "0.64.3",
     "react-native-paper": "^4.11.2",
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.10.1",
+    "react-native-svg": "12.1.1",
     "react-native-swipe-up-down": "^1.1.6",
     "react-native-vector-icons": "^9.1.0",
     "react-native-web": "0.17.1",