Skip to content

Commit

Permalink
Updated welcom flow screens.
Browse files Browse the repository at this point in the history
  • Loading branch information
naodya committed May 13, 2020
1 parent 1a93949 commit 1e6fbb5
Showing 13 changed files with 160 additions and 58 deletions.
1 change: 1 addition & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"cSpell.words": [
"Coronavirus",
"Fontisto"
]
}
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -33,7 +33,8 @@
"react-native-screens": "~2.7.0",
"react-native-swiper": "^1.6.0",
"react-native-unimodules": "~0.9.1",
"react-native-web": "~0.11.7"
"react-native-web": "~0.11.7",
"zipcodes": "^8.0.0"
},
"devDependencies": {
"@babel/core": "~7.9.0",
25 changes: 20 additions & 5 deletions src/components/Welcome/Age.js
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
import { AppContext } from '../../context';

const Age = ({ navigation }) => {
const [age, setAge] = useState(null);
const [age, setAge] = useState('');
const { setUserProfile, t } = React.useContext(AppContext);
return (
<View style={styles.container}>
@@ -15,13 +15,28 @@ const Age = ({ navigation }) => {
<Input
containerStyle={styles.containerStyle}
value={age}
type="number"
maxLength={3}
inputStyle={styles.inputStyle}
inputContainerStyle={styles.inputContainerStyle}
rightIconContainerStyle={styles.rightIconContainerStyle}
placeholder="Enter your age...."
keyboardType="numeric"
placeholder={t('PLACE_HOLDER_AGE')}
keyboardType="number-pad"
onChangeText={(value) => {
// Limit characters.
if (value.length > 3) {
return;
}

// When input is cleared.
if (!value) {
setAge(value);
return;
}

// Ignore non-numeric characters.
const regex = /[0-9]/;
if (!regex.test(value)) return;

setAge(value);
}}
/>
@@ -30,7 +45,7 @@ const Age = ({ navigation }) => {
<Button
buttonStyle={styles.buttonStyle}
titleStyle={styles.buttonText}
disabled={!age}
disabled={age.length < 1 || age.length > 3}
title={t('ACTION_BUTTON_NEXT')}
onPress={() => {
setUserProfile({ age });
24 changes: 21 additions & 3 deletions src/components/Welcome/Consent.js
Original file line number Diff line number Diff line change
@@ -7,7 +7,10 @@ const Consent = ({ navigation }) => {
const { setUserProfile, t } = React.useContext(AppContext);
return (
<View style={styles.container}>
<Text>Consent</Text>
<View style={{ marginBottom: 20 }}>
<Text style={styles.titleStyle}>{t('TITLE_DISCLAIMER')}</Text>
<Text>{t('CONSENT')}</Text>
</View>

<View style={styles.buttonWrapper}>
<Button
@@ -16,7 +19,7 @@ const Consent = ({ navigation }) => {
title={t('ACTION_BUTTON_CONSENT')}
onPress={() => {
setUserProfile({ concent: true });
navigation.navigate('Location');
navigation.navigate('Instruction');
}}
/>
</View>
@@ -27,7 +30,22 @@ const Consent = ({ navigation }) => {
export default Consent;

const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-start',
marginHorizontal: 16,
},
buttonWrapper: {
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
},
titleStyle: {
fontSize: 15,
fontWeight: 'bold',
marginBottom: 5,
},
buttonWrapper: {
justifyContent: 'center',
alignItems: 'center',
19 changes: 16 additions & 3 deletions src/components/Welcome/Instruction.js
Original file line number Diff line number Diff line change
@@ -8,14 +8,17 @@ const Instruction = ({ navigation }) => {
const { t } = React.useContext(AppContext);
return (
<View style={styles.container}>
<Text>Instruction</Text>
<View style={{ marginBottom: 20 }}>
<Text style={styles.titleStyle}>{t('TITLE_INSTRUCTION')}</Text>
<Text>{t('INSTRUCTION')}</Text>
</View>

<View style={styles.buttonWrapper}>
<Button
buttonStyle={styles.buttonStyle}
titleStyle={styles.buttonText}
title={t('ACTION_LETS_DO_IT')}
onPress={() => navigation.navigate('Consent')}
onPress={() => navigation.navigate('Location')}
/>
</View>
</View>
@@ -25,12 +28,22 @@ const Instruction = ({ navigation }) => {
export default Instruction;

const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-start',
marginHorizontal: 16,
},
buttonWrapper: {
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
},
titleStyle: {
fontSize: 15,
fontWeight: 'bold',
marginBottom: 5,
},
buttonStyle: { borderRadius: 19, padding: 20 },
buttonText: { fontSize: 20 },
});
53 changes: 41 additions & 12 deletions src/components/Welcome/UserLocation.js
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ import { Input, Button } from 'react-native-elements';
import Icon from '@expo/vector-icons/FontAwesome5';
import { get } from 'lodash';
import * as Location from 'expo-location';
import ZIPCodes from 'zipcodes';

import { AppContext } from '../../context';

@@ -33,7 +34,7 @@ const LocationButton = ({ onSelect, onError }) => {
};

const UserLocation = ({ navigation }) => {
const [userLocation, setUserLocation] = useState({ zip: '', coords: {} });
const [userLocation, setUserLocation] = useState({ zip: '', address: {} });
const { setUserProfile, t } = React.useContext(AppContext);

return (
@@ -46,38 +47,66 @@ const UserLocation = ({ navigation }) => {
<Input
containerStyle={styles.containerStyle}
value={userLocation.zip}
maxLength={5}
inputStyle={styles.inputStyle}
inputContainerStyle={styles.inputContainerStyle}
keyboardType="number-pad"
rightIconContainerStyle={styles.rightIconContainerStyle}
placeholder={t('PLACE_HOLDER_ZIP')}
rightIcon={
<LocationButton
onSelect={async (location) => {
const coords = location.coords || {};
onSelect={(location) => {
try {
const coords = location.coords || {};

if (coords && coords.latitude && coords.longitude) {
const address = ZIPCodes.lookupByCoords(
coords.latitude,
coords.longitude
);

let zip = get(address, 'zip');

if (coords && coords.latitude && coords.longitude) {
const address = await Location.reverseGeocodeAsync(coords);
if (address && address.length && address[0]) {
setUserLocation({
zip: get(address[0], 'postalCode'),
coords,
zip,
address: { ...address, ...coords },
});
}
} catch (error) {
console.log(error);
}
}}
onError={(error) => console.log(error)}
/>
}
onChangeText={(value) =>
setUserLocation({ ...userLocation, zip: value })
}
onChangeText={(value) => {
// Limit characters.
if (value.length > 5) {
return;
}

// When input is cleared.
if (!value) {
setUserLocation({ ...userLocation, zip: value });
return;
}

// Ignore non-numeric characters.
const regex = /^\d+$/;
if (!regex.test(value)) return;

setUserLocation({
zip: value,
address: { ...userLocation.address, ...ZIPCodes.lookup(value) },
});
}}
/>

<View style={styles.buttonWrapper}>
<Button
buttonStyle={styles.buttonStyle}
titleStyle={styles.buttonText}
disabled={!userLocation.zip}
disabled={userLocation.zip.length < 5 || userLocation.zip.length > 5}
title={t('ACTION_BUTTON_NEXT')}
onPress={() => {
setUserProfile({ location: userLocation });
2 changes: 1 addition & 1 deletion src/components/Welcome/index.js
Original file line number Diff line number Diff line change
@@ -20,7 +20,7 @@ const Welcome = ({ navigation }) => {
buttonStyle={styles.buttonStyle}
titleStyle={styles.buttonText}
title={t('ACTION_BUTTON_CONTINUE')}
onPress={() => navigation.navigate('Instruction')}
onPress={() => navigation.navigate('Consent')}
/>
</View>
</View>
2 changes: 1 addition & 1 deletion src/context/index.js
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ const initialState = {
concent: false,
location: {
zip: '',
coords: {},
address: {},
},
gender: null,
age: null,
11 changes: 8 additions & 3 deletions src/localization/amh/translation.json
Original file line number Diff line number Diff line change
@@ -14,9 +14,14 @@
"ACTION_BUTTON_START_OVER": "እንደና ይጀምሩ",
"ACTION_BUTTON_MALE": "ወንድ",
"ACTION_BUTTON_FEMALE": "ሴት",
"PLACE_HOLDER_ZIP": "ZIP code",
"PLACE_HOLDER_AGE": "Enter your age...",
"TITLE_USER_LOCATION": "የሚኖሩበት አካባቢ የት ነው?",
"TITLE_USER_LOCATION_DESCRIPTION": "This helps track the virus\\'s spread, and you can learn about what\\'s reported nearby",
"TITLE_USER_GENDER": "What\\'s is your gender?",
"TITLE_USER_LOCATION_DESCRIPTION": "This helps track the virus's spread, and you can learn about what's reported nearby",
"TITLE_USER_GENDER": "ጾታው ምንድን ነው?",
"TITLE_USER_AGE": "ዕድሜዎ ምን ያህል ነው?",
"PLACE_HOLDER_ZIP": "ZIP code"
"TITLE_DISCLAIMER": "Disclaimer",
"CONSENT": "The purpose of the Coronavirus Self-Checker is to help you make decisions about seeking appropriate medical care. This system is not intended for the diagnosis or treatment of disease or other conditions, including COVID-19. This system is intended only for people who are currently located in the United States.",
"TITLE_INSTRUCTION": "Instruction",
"INSTRUCTION": "Hi, we are here to guide you through the Coronavirus Self-Checker.\r\n\r\nIf you are experiencing a life-threatening emergency, please call 911 immediately.\r\n\r\nThis app does not replace the judgment of healthcare professionals or the performance of any clinical assessment.\r\n\r\nTo provide information on the right level of care, we are going to ask you a series of questions."
}
15 changes: 10 additions & 5 deletions src/localization/eng/translation.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"WELCOME_HEADER": "Welcome",
"WELCOME_SELECT_LANGUAGE": "Select language",
"ACTION_BUTTON_CONSENT": "I consent",
"ACTION_LETS_DO_IT": "Let\\'s do it",
"ACTION_BUTTON_CONSENT": "I agree",
"ACTION_LETS_DO_IT": "Let's do it",
"ACTION_BUTTON_CONTINUE": "Continue",
"ACTION_BUTTON_NEXT": "Next",
"TABS_HOME": "Home",
@@ -14,9 +14,14 @@
"ACTION_BUTTON_START_OVER": "Start over",
"ACTION_BUTTON_MALE": "Male",
"ACTION_BUTTON_FEMALE": "Female",
"PLACE_HOLDER_ZIP": "ZIP code",
"PLACE_HOLDER_AGE": "Enter your age...",
"TITLE_USER_LOCATION": "Where are you currently?",
"TITLE_USER_LOCATION_DESCRIPTION": "This helps track the virus\\'s spread, and you can learn about what\\'s reported nearby",
"TITLE_USER_GENDER": "What\\'s is your gender?",
"TITLE_USER_LOCATION_DESCRIPTION": "This helps track the virus's spread, and you can learn about what's reported nearby",
"TITLE_USER_GENDER": "What's is your gender?",
"TITLE_USER_AGE": "How old are you?",
"PLACE_HOLDER_ZIP": "ZIP code"
"TITLE_DISCLAIMER": "Disclaimer",
"CONSENT": "The purpose of the Coronavirus Self-Checker is to help you make decisions about seeking appropriate medical care. This app is not intended for the diagnosis or treatment of disease or other conditions, including COVID-19. This app is intended only for people who are currently located in the United States.",
"TITLE_INSTRUCTION": "Instruction",
"INSTRUCTION": "Hi, we are here to guide you through the Coronavirus Self-Checker.\r\n\r\nIf you are experiencing a life-threatening emergency, please call 911 immediately.\r\n\r\nThis app does not replace the judgment of healthcare professionals or the performance of any clinical assessment.\r\n\r\nTo provide information on the right level of care, we are going to ask you a series of questions."
}
29 changes: 17 additions & 12 deletions src/localization/orm/translation.json
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
{
"WELCOME_HEADER": "Welcome",
"WELCOME_SELECT_LANGUAGE": "Select language",
"ACTION_BUTTON_CONSENT": "I consent",
"ACTION_LETS_DO_IT": "Let\\'s do it",
"ACTION_BUTTON_CONSENT": "I agree",
"ACTION_LETS_DO_IT": "Let's do it",
"ACTION_BUTTON_CONTINUE": "Continue",
"ACTION_BUTTON_NEXT": "Next",
"TABS_HOME": "ማርፊያ",
"TABS_CHECK": "ምርመራ",
"TABS_STATS": "ሠሌዳ",
"ACTION_BUTTON_YES": "አዎ",
"ACTION_BUTTON_NO": "አይ",
"ACTION_BUTTON_NOT_SURE": "እርግጠኛ አይደለሁም",
"ACTION_BUTTON_START_OVER": "እንደና ይጀምሩ",
"TABS_HOME": "Home",
"TABS_CHECK": "Check",
"TABS_STATS": "Stats",
"ACTION_BUTTON_YES": "Yes",
"ACTION_BUTTON_NO": "No",
"ACTION_BUTTON_NOT_SURE": "I'm not sure",
"ACTION_BUTTON_START_OVER": "Start over",
"ACTION_BUTTON_MALE": "Male",
"ACTION_BUTTON_FEMALE": "Female",
"PLACE_HOLDER_ZIP": "ZIP code",
"PLACE_HOLDER_AGE": "Enter your age...",
"TITLE_USER_LOCATION": "Where are you currently?",
"TITLE_USER_LOCATION_DESCRIPTION": "This helps track the virus\\'s spread, and you can learn about what\\'s reported nearby",
"TITLE_USER_GENDER": "What\\'s is your gender?",
"TITLE_USER_LOCATION_DESCRIPTION": "This helps track the virus's spread, and you can learn about what's reported nearby",
"TITLE_USER_GENDER": "What's is your gender?",
"TITLE_USER_AGE": "How old are you?",
"PLACE_HOLDER_ZIP": "ZIP code"
"TITLE_DISCLAIMER": "Disclaimer",
"CONSENT": "The purpose of the Coronavirus Self-Checker is to help you make decisions about seeking appropriate medical care. This system is not intended for the diagnosis or treatment of disease or other conditions, including COVID-19. This system is intended only for people who are currently located in the United States.",
"TITLE_INSTRUCTION": "Instruction",
"INSTRUCTION": "Hi, we are here to guide you through the Coronavirus Self-Checker.\r\n\r\nIf you are experiencing a life-threatening emergency, please call 911 immediately.\r\n\r\nThis app does not replace the judgment of healthcare professionals or the performance of any clinical assessment.\r\n\r\nTo provide information on the right level of care, we are going to ask you a series of questions."
}
Loading

0 comments on commit 1e6fbb5

Please sign in to comment.