Merge pull request #25 from leaonline/screens

changed all icons to use font-awesome-5, added new component task in …

src/__tests__/components/__snapshots__/titleText.test.js.snap

@@ -5,8 +5,6 @@ exports[`Text alignment center 1`] = `
   style={
     Object {
       "color": "#f59d1d",
-      "fontFamily": "semicolon",
-      "fontSize": 18,
       "paddingLeft": 5,
       "textAlign": "center",
     }
@@ -21,8 +19,6 @@ exports[`Text alignment left 1`] = `
   style={
     Object {
       "color": "#f59d1d",
-      "fontFamily": "semicolon",
-      "fontSize": 18,
       "paddingLeft": 5,
       "textAlign": "left",
     }
@@ -37,8 +33,6 @@ exports[`Text alignment right 1`] = `
   style={
     Object {
       "color": "#f59d1d",
-      "fontFamily": "semicolon",
-      "fontSize": 18,
       "paddingLeft": 5,
       "textAlign": "right",
     }
@@ -53,8 +47,6 @@ exports[`Text color secondary 1`] = `
   style={
     Object {
       "color": "#193b5e",
-      "fontFamily": "semicolon",
-      "fontSize": 18,
       "paddingLeft": 5,
       "textAlign": "center",
     }

src/components/RouteButton.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Button, Icon } from 'react-native-elements'
+import { TTSengine } from '../components/Tts'
+import Colors from '../constants/Colors'
+
+const Tts = TTSengine.component()
+
+/**
+ * RouteButton contains an icon and a button.
+ * @param {string} props.title: The displayed and spoken title
+ * @param {string} props.icon: The icon for the button
+ * @param {function} props.handleScreen The screen to be navigated
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const RouteButton = props => {
+  return (
+    <View style={styles.body}>
+      <Tts text={props.title} color={Colors.primary} id={6} testId='routeButton' dontShowText />
+      <Button icon={<Icon type='font-awesome-5' name={props.icon} size={25} color={Colors.primary} />} title={props.title} titleStyle={styles.buttonTitle} buttonStyle={{ borderRadius: 15 }} type='outline' onPress={props.handleScreen} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  body: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  buttonTitle: {
+    color: Colors.primary,
+    padding: 30,
+    width: '75%'
+  }
+})
+
+export default RouteButton

src/components/TitleText.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text, StyleSheet } from 'react-native'
+import { Text } from 'react-native'
 
 /**
  * TitleText is a component of Tts. It displays the spoken text.
@@ -8,13 +8,6 @@ import { Text, StyleSheet } from 'react-native'
  * @returns {JSX.Element}
  * @constructor
  */
-const TitleText = props => <Text style={{ ...styles.body, ...props.style }}>{props.text}</Text>
-
-const styles = StyleSheet.create({
-  body: {
-    fontFamily: 'semicolon',
-    fontSize: 18
-  }
-})
+const TitleText = props => <Text style={props.style}>{props.text}</Text>
 
 export default TitleText

src/components/Tts.js

@@ -11,6 +11,7 @@ let Speech = null
 /**
  * Tts stands for Text-To-Speech. It contains an icon and the text to be spoken.
  * @param {string} props.text: The displayed and spoken text
+ * @param {boolean} props.dontShowText: Determines whether the text is displayed (Default 'true')
  * @param {string} props.color: The color of the icon and the text, in hexadecimal format  (examples in ./constants/Colors.js)
  * @param {string} props.align: The parameter to change the text alignment ('left', 'right', 'center', 'justify')
  * @param {string} props.testID: The parameter to identify the buttons for testing
@@ -68,19 +69,30 @@ const ttsComponent = props => {
     setCurrentlyPlayingId(props.id)
   }
 
+  /**
+   * Displays the spoken text if "dontShowText" is false.
+   */
+  const displayedText = () => {
+    if (!props.dontShowText) {
+      return (
+        <TitleText
+          style={{ color: props.color, flexShrink: 1, fontSize: 18, textAlign: props.align }}
+          text={props.text}
+        />
+      )
+    }
+  }
+
   return (
     <View style={styles.body}>
       <Icon
         testID={props.testId}
-        reverse style={styles.icon} color={ttsColorIcon} size={22} marginonPress={speak}
-        name='volume-2'
-        type='feather'
+        reverse style={styles.icon} color={ttsColorIcon} size={20} marginonPress={speak}
+        name='volume-up'
+        type='font-awesome-5'
         onPress={() => ((currentlyPlayingId === props.id) && isCurrentlyPlaying) ? stopSpeak() : speak()}
       />
-      <TitleText
-        style={{ color: props.color, paddingLeft: 5, textAlign: props.align }}
-        text={props.text}
-      />
+      {displayedText()}
     </View>
 
   )
@@ -98,9 +110,7 @@ export const TTSengine = {
 
 const styles = StyleSheet.create({
   body: {
-    flex: 2,
-    flexDirection: 'row',
-    marginHorizontal: 32
+    flexDirection: 'row'
   },
   icon: {
     paddingBottom: 5

src/i18n.js

@@ -22,9 +22,14 @@ const resources = {
       text: 'I hereby agree to the following conditions ...',
       checkBoxText: 'I have read and agree to the general terms and conditions'
     },
-    HomeScreen: {},
-    OverviewScreen: {},
-    TaskScreen: {}
+    homeScreen: {
+      text: 'Welcome! Please select an area.'
+    },
+    profileScreen: {
+      headerTitle: 'Your Profile'
+    },
+    overviewScreen: {},
+    taskScreen: {}
   },
   de: {
     alert: {
@@ -43,9 +48,14 @@ const resources = {
       text: 'Hiermit stimme ich folgenden Bedingungen zu ...',
       checkBoxText: 'Ich habe die allgemeinen Geschäftsbedingungen gelesen und stimme ihnen zu'
     },
-    HomeScreen: {},
-    OverviewScreen: {},
-    TaskScreen: {}
+    homeScreen: {
+      text: 'Herzlich Willkommen! Bitte wähle einen Bereich.'
+    },
+    profileScreen: {
+      headerTitle: 'Dein Profil'
+    },
+    overviewScreen: {},
+    taskScreen: {}
   }
 }
 

src/navigation/navigator.js

@@ -7,6 +7,7 @@ import HomeScreen from '../screens/HomeScreen'
 import OverviewScreen from '../screens/OverviewScreen'
 import TaskScreen from '../screens/TaskScreen'
 import RegistrationScreen from '../screens/RegistrationScreen'
+import ProfileScreen from '../screens/ProfileScreen'
 
 /**
  * WizardNavigator navigates between screens.
@@ -19,7 +20,8 @@ const WizardNavigator = createStackNavigator({
   Registration: RegistrationScreen,
   Home: HomeScreen,
   Overview: OverviewScreen,
-  Task: TaskScreen
+  Task: TaskScreen,
+  Profile: ProfileScreen
 })
 
 export default createAppContainer(WizardNavigator)

src/screens/HomeScreen.js

@@ -1,41 +1,76 @@
 import React from 'react'
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 import { Icon } from 'react-native-elements'
+import { TTSengine } from '../components/Tts'
+import { useTranslation } from 'react-i18next'
+import Colors from '../constants/Colors'
+import RouteButton from '../components/RouteButton'
+import * as data from '../taskData.json'
+
+const Tts = TTSengine.component()
 
 const HomeScreen = props => {
+  const { t } = useTranslation()
+
+  /**
+   * Renders the RouteButtons for the Homescreen
+   */
+  const renderButtons = () => {
+    return data.dimensions.map((item, key) => {
+      return (
+        <RouteButton title={item.title} icon={item.icon} key={key} handleScreen={() => props.navigation.navigate({ routeName: 'Overview' })} />
+      )
+    })
+  }
+
   return (
     <View style={styles.container}>
-      <View style={styles.body}>
-        <Text>Homescreen</Text>
+      <View style={styles.profile}>
+        <Icon name='user' type='font-awesome-5' color={Colors.gray} reverse style size={17} onPress={() => props.navigation.navigate({ routeName: 'Profile' })} />
+      </View>
+      <View style={styles.header}>
+        <Tts text={t('homeScreen.text')} color={Colors.secondary} id={5} testId='homeScreen1' />
       </View>
 
-      <View style={styles.navigationButton}>
-        <TouchableOpacity onPress={() => {
-          props.navigation.navigate({ routeName: 'Overview' })
-        }}
-        >
-          <Icon style={styles.iconNavigation} name='arrow-right-circle' type='feather' size={35} />
-        </TouchableOpacity>
+      <View style={styles.body}>
+
+        <View style={styles.button}>
+          {renderButtons()}
+        </View>
       </View>
     </View>
   )
 }
 
-HomeScreen.navigationOptions = (navData) => {
+HomeScreen.navigationOptions = () => {
   return {
     headerShown: false
   }
 }
 
 const styles = StyleSheet.create({
+  profile: {
+    display: 'flex',
+    marginLeft: 'auto'
+  },
   container: {
     flex: 1,
     alignItems: 'center',
     margin: 30
   },
+  header: {
+    flex: 1,
+    alignItems: 'center',
+    margin: 30
+  },
   body: {
     flex: 2,
-    flexDirection: 'row'
+    alignItems: 'center',
+    flexDirection: 'column'
+  },
+  button: {
+    alignItems: 'center',
+    flex: 1
   }
 })
 

src/screens/OverviewScreen.js

@@ -14,14 +14,14 @@ const OverviewScreen = props => {
           props.navigation.navigate({ routeName: 'Home' })
         }}
         >
-          <Icon style={styles.iconNavigation} name='arrow-left-circle' type='feather' size={35} />
+          <Icon style={styles.iconNavigation} name='arrow-alt-circle-left' type='font-awesome-5' size={35} />
         </TouchableOpacity>
 
         <TouchableOpacity onPress={() => {
           props.navigation.navigate({ routeName: 'Task' })
         }}
         >
-          <Icon style={styles.iconNavigation} name='arrow-right-circle' type='feather' size={35} />
+          <Icon style={styles.iconNavigation} name='arrow-alt-circle-right' type='font-awesome-5' size={35} />
         </TouchableOpacity>
       </View>
     </View>

src/screens/ProfileScreen.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import i18n from 'i18next'
+
+const ProfileScreen = props => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.body}>
+        <Text>Dein Profil</Text>
+      </View>
+    </View>
+
+  )
+}
+
+ProfileScreen.navigationOptions = (navData) => {
+  return {
+    headerTitle: i18n.t('profileScreen.headerTitle')
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    margin: 30
+  },
+  body: {
+    flex: 2,
+    flexDirection: 'row'
+  }
+})
+
+export default ProfileScreen

src/screens/RegistrationScreen.js

@@ -32,7 +32,7 @@ const RegistrationScreen = props => {
           ttsIsCurrentlyPlaying ? Alert.alert(t('alert.title'), t('alert.navText')) : props.navigation.navigate({ routeName: 'TandC' })
         }}
         >
-          <Icon style={styles.iconNavigation} name='arrow-left-circle' type='feather' size={35} />
+          <Icon style={styles.iconNavigation} name='arrow-alt-circle-left' type='font-awesome-5' size={35} />
         </TouchableOpacity>
 
         <TouchableOpacity onPress={() => {
@@ -41,7 +41,7 @@ const RegistrationScreen = props => {
             : props.navigation.navigate({ routeName: 'Home' })
         }}
         >
-          <Icon style={styles.iconNavigation} name='arrow-right-circle' type='feather' size={35} />
+          <Icon style={styles.iconNavigation} name='arrow-alt-circle-right' type='font-awesome-5' size={35} />
         </TouchableOpacity>
       </View>
     </View>

src/screens/TaskScreen.js

@@ -14,14 +14,14 @@ const TaskScreen = props => {
           props.navigation.navigate({ routeName: 'Overview' })
         }}
         >
-          <Icon style={styles.iconNavigation} name='arrow-left-circle' type='feather' size={35} />
+          <Icon style={styles.iconNavigation} name='arrow-alt-circle-right' type='font-awesome-5' size={35} />
         </TouchableOpacity>
       </View>
     </View>
   )
 }
 
-TaskScreen.navigationOptions = (navData) => {
+TaskScreen.navigationOptions = () => {
   return {
     headerShown: false
   }