Skip to content

Commit

Permalink
[#11] Refactor: override and add type & simplify the BottomDrawer but…
Browse files Browse the repository at this point in the history 
…tons
  • Loading branch information
@hee-suh
hee-suh committed Mar 6, 2022
1 parent c9c60bc commit 305471f
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 168 deletions.
181 changes: 84 additions & 97 deletions react-native/components/BottomDrawer.tsx
View file
Original file line number Diff line number Diff line change
@@ -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) => (
<Text key={i}>
<Text style={styles.highlighted}>{word} </Text>
<Text style={!registered ? styles.highlighted : styles.grayBackground}>{word} </Text>
{NO_WIDTH_SPACE}
</Text>
));

function BottomDrawer(props: BottomDrawerProps) {
const [currentEvent, setCurrentEvent] = useState();
const [currentEvent, setCurrentEvent] = useState<number>(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.")
Expand All @@ -62,93 +49,104 @@ function BottomDrawer(props: BottomDrawerProps) {
<View style={{ flex: 1 }}>
<View style={styles.horizontalLine} />
<View style={[styles.spaceBetween, { paddingBottom: 24 }]}>
<Text style={styles.title}>{props.showFullText ? "Full Text" : "Results"}</Text>
{!props.showFullText ? (
<View style={styles.alignRow}>
<TouchableOpacity style={styles.rightSpace} onPress={props.handleFullText}>
<Entypo name="text" size={32} color="#000"/>
</TouchableOpacity>
{props.isTranslateScreen &&
<TouchableOpacity onPress={props.saveResults}>
<FontAwesome name="save" size={32} color='#000' />
</TouchableOpacity>
}
</View>
) : (
<TouchableOpacity style={styles.rightSpace} onPress={props.handleTranslatedText}>
<MaterialIcons name="translate" size={32} color="#000"/>
<Text fontFamily="heading" fontWeight={700} fontStyle="normal" fontSize={24} color="primary.500">{props.showFullText ? "Full Text" : "Results"}</Text>
<View style={styles.alignRow}>
<TouchableOpacity style={styles.rightSpace} onPress={props.handleFullText}>
<Entypo name="text" size={32} color="#000"/>
</TouchableOpacity>
)}
{props.isTranslateScreen &&
<TouchableOpacity onPress={props.saveResults}>
<FontAwesome name="save" size={32} color='#000' />
</TouchableOpacity>
}
</View>
</View>

<ScrollView style={{ flex: 1 }}>
{!props.showFullText ? (
props.results?.map((result, index) =>
result.highlight ? (
props.results?.summary?.map((item, index) =>
item.highlight ? (
<Popover
key={result.id}
isOpen={result.id===currentEvent}
onOpen={() => openPopup(result.id)}
key={item.id}
isOpen={item.id===currentEvent}
onOpen={openPopup(item.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>;
<Text key={item.content} style={styles.content}>
{index+1}.&nbsp;
{item.highlight ? (
highlight(item.content, item.registered)
) : (
item.content
)}
</Text>
</Text>;
}}
>
{!item.registered ? (
<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(item.id)}>Add to calendar</Button>
</Button.Group>
</Popover.Footer>
</Popover.Content>
) : (
<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.Arrow />
<Popover.CloseButton />
<Popover.Header>Event already registered</Popover.Header>
<Popover.Body>
This event is already registered in Google Calendar.
</Popover.Body>
<Popover.Footer justifyContent="flex-end">
<Button.Group space={4}>
<Button variant="ghost" onPress={closePopup}>
Cancel
</Button>
<Button onPress={closePopup}>Got it</Button>
</Button.Group>
</Popover.Footer>
</Popover.Content>
)}
</Popover>
) : (
<Text key={result.content} style={styles.content}>
{index+1}.&nbsp; {result.content}
<Text key={item.content} style={styles.content}>
{index+1}.&nbsp; {item.content}
</Text>
)
)
) : (
props.showTranslated ? (
<Text style={styles.content}>{props.fullText?.translated}</Text>
) : (
<Text style={styles.content}>{props.fullText?.korean}</Text>
)
<View style={{flex:1, flexDirection: 'column'}}>
<ScrollView style={{flex:1}}>
<Text >{props.results?.fullText}</Text>
</ScrollView>
<Divider my="2" />
<ScrollView style={{flex:2}}>
<Text>{props.results?.korean}</Text>
</ScrollView>
</View>
)}
</ScrollView>
</View>
{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>
) : (
<TouchableHighlight style={[styles.regularButton, styles.grayBackground]} onPress={props.handleFullText}>
<Text style={styles.whiteText}>Back</Text>
</TouchableHighlight>
)}
<TouchableHighlight style={[styles.regularButton, styles.grayBackground]} onPress={props.closeResults}>
<Text color="white">Close</Text>
</TouchableHighlight>
<View style={styles.gap} />
<TouchableHighlight style={[styles.regularButton, styles.primaryBackground]} onPress={props.retakePicture}>
<Text style={styles.whiteText}>Try again</Text>
<Text color="white">Try again</Text>
</TouchableHighlight>
</View>
}
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -219,10 +210,6 @@ const styles = StyleSheet.create({
rightSpace: {
paddingRight: 8
},
whiteText: {
color: '#fff',
fontSize: 16
},
full: {
paddingBottom: 96
},
Expand Down
31 changes: 10 additions & 21 deletions react-native/screens/SearchResultScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -24,14 +22,15 @@ interface SearchResultScreenProps {

export default function SearchResultScreen(props: SearchResultScreenProps) {
const [imageUri, setImageUri] = useState("../assets/images/calendar.png");
const [notice, setNotice] = useState<Notice>({date: "", notices: {total_results: [], notice_body: []}});
const [notice, setNotice] = useState<Notice>({userId: 1, childId: 1, date: "", notices: {total_results: [], notice_body: []}});
const [showFullText, setShowFullText] = useState<boolean>(false);
const [showTranslated, setShowTranslated] = useState<boolean>(true);
const [isFullDrawer, setFullDrawer] = useState<boolean>(false);

React.useEffect(() => {
useEffect(() => {
// TODO: Fetch API
setNotice({
userId: 1,
childId: 1,
date: "2022-02-10",
notices: {
total_results: [
Expand All @@ -42,17 +41,17 @@ 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: "희망찬 새해를 맞이하여 학부모님의 가정에 건강과 행복이 함께 하시기를 기원합니다."
}, {
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시까지 강당으로 오시기 바랍니다."
Expand All @@ -65,10 +64,6 @@ export default function SearchResultScreen(props: SearchResultScreenProps) {
setShowFullText(!showFullText);
}

const handleTranslatedText = (): void => {
setShowTranslated(!showTranslated);
}

return (
<View style={styles.container}>
<Swiper>
Expand All @@ -77,26 +72,20 @@ export default function SearchResultScreen(props: SearchResultScreenProps) {
<SwipeUpDown
itemMini={
<BottomDrawer
results={notice.summary}
fullText={{translated: notice.fullText, korean: notice.korean}}
results={notice}
showFullText={showFullText}
showTranslated={showTranslated}
isFullDrawer={isFullDrawer}
isTranslateScreen={false}
handleFullText={handleFullText}
handleTranslatedText={handleTranslatedText}
/>
}
itemFull={
<BottomDrawer
results={notice.summary}
fullText={{translated: notice.fullText, korean: notice.korean}}
results={notice}
showFullText={showFullText}
showTranslated={showTranslated}
isFullDrawer={isFullDrawer}
isTranslateScreen={false}
handleFullText={handleFullText}
handleTranslatedText={handleTranslatedText}
/>
}
onShowMini={() => setFullDrawer(false)}
Expand Down
Loading

0 comments on commit 305471f

Please sign in to comment.