Merge pull request #28 from leaonline/profileScreen

Profile screen

.github/workflows/build_android_apk.yml

@@ -22,7 +22,7 @@ jobs:
       with:
         node-version: '12.x'
     - name: install node modules
-      run: cd src && npm install && npm install --global expo-cli
+      run: cd src && npm ci && npm install --global expo-cli
 
     - name: eject from expo project
       run: cd src && npx expo eject --non-interactive

.github/workflows/jest_test.yml

@@ -29,7 +29,7 @@ jobs:
               ${{ runner.os }}-node-
        
         - name: install node modules
-          run: cd src && npm install
+          run: cd src && npm ci
 
         - name: run jest tests
           run: cd src && npm test

.github/workflows/jsdoc_test.yml

@@ -19,6 +19,6 @@ jobs:
         node-version: '12.x'
 
     - name: install node modules
-      run: cd src && npm install
+      run: cd src && npm ci
     - name: run jsdoc
       run: cd src && npm run docs

.github/workflows/lint_test.yml

@@ -26,6 +26,6 @@ jobs:
           ${{ runner.os }}-node-
 
     - name: install node modules
-      run: cd src && npm install
+      run: cd src && npm ci
     - name: run standard js
       run: cd src && npm run lint

docs/scripts/linenumber.js

@@ -1,25 +1,25 @@
-/*global document */
+/* global document */
 (() => {
-    const source = document.getElementsByClassName('prettyprint source linenums');
-    let i = 0;
-    let lineNumber = 0;
-    let lineId;
-    let lines;
-    let totalLines;
-    let anchorHash;
+  const source = document.getElementsByClassName('prettyprint source linenums')
+  let i = 0
+  let lineNumber = 0
+  let lineId
+  let lines
+  let totalLines
+  let anchorHash
 
-    if (source && source[0]) {
-        anchorHash = document.location.hash.substring(1);
-        lines = source[0].getElementsByTagName('li');
-        totalLines = lines.length;
+  if (source && source[0]) {
+    anchorHash = document.location.hash.substring(1)
+    lines = source[0].getElementsByTagName('li')
+    totalLines = lines.length
 
-        for (; i < totalLines; i++) {
-            lineNumber++;
-            lineId = `line${lineNumber}`;
-            lines[i].id = lineId;
-            if (lineId === anchorHash) {
-                lines[i].className += ' selected';
-            }
-        }
+    for (; i < totalLines; i++) {
+      lineNumber++
+      lineId = `line${lineNumber}`
+      lines[i].id = lineId
+      if (lineId === anchorHash) {
+        lines[i].className += ' selected'
+      }
     }
-})();
+  }
+})()

src/.expo/packager-info.json

@@ -6,5 +6,5 @@
   "expoServerNgrokUrl": null,
   "packagerNgrokUrl": null,
   "ngrokPid": null,
-  "webpackServerPort": null
+  "webpackServerPort": 19006
 }

src/App.js

@@ -10,7 +10,6 @@ import './i18n'
 const fetchFonts = () => {
   return Font.loadAsync({
     semicolon: require('./assets/fonts/SemikolonPlus-Regular.ttf')
-
   })
 }
 

src/__tests__/components/tts.test.js

@@ -2,7 +2,7 @@ import React from 'react'
 import WelcomeScreen from '../../screens/WelcomeScreen'
 import TandCScreen from '../../screens/TermsAndConditionsScreen'
 import { TTSengine } from '../../components/Tts'
-import { fireEvent, render, waitFor, act } from '@testing-library/react-native'
+import { fireEvent, render, act } from '@testing-library/react-native'
 import { asyncTimeout } from '../../utils/asyncTimeout'
 import Colors from '../../constants/Colors'
 import i18n from '../../i18n'
@@ -24,12 +24,10 @@ it('tts (async) speak', async () => {
     },
     speak: t => {
       expect(t).toBe('Herzlich Willkommen zu lea online')
-      global.ttsIsCurrentlyPlaying = true
       speakCalled = true
     },
     stop: () => {
       stopCalled = true
-      global.ttsIsCurrentlyPlaying = false
     }
   })
 
@@ -40,11 +38,9 @@ it('tts (async) speak', async () => {
   )
   const foundButton = getByTestId('welcomeScreen1')
   await fireEvent.press(foundButton)
-  await waitFor(() => {
-    expect(global.ttsIsCurrentlyPlaying).toBeTruthy()
-    expect(speakCalled).toBe(true)
-    expect(stopCalled).toBe(false)
-  })
+  await asyncTimeout(50)
+  expect(speakCalled).toBe(true)
+  expect(stopCalled).toBe(false)
 })
 
 it('stop tts process if its already active', async () => {
@@ -70,13 +66,13 @@ it('stop tts process if its already active', async () => {
   const foundButton = getByTestId('welcomeScreen1')
 
   act(() => fireEvent.press(foundButton))
-  await asyncTimeout(10)
+  await asyncTimeout(5)
   expect(TTSengine.isSpeaking).toBe(true)
   expect(TTSengine.speakId).toBe(1)
   expect(speakCalled).toBe(true)
 
   act(() => fireEvent.press(foundButton))
-  await asyncTimeout(10)
+  await asyncTimeout(5)
   expect(TTSengine.isSpeaking).toBe(false)
   expect(TTSengine.speakId).toBe(0)
   expect(stopCalled).toBe(true)
@@ -92,25 +88,22 @@ it('start 2 different tts processes successively', async () => {
     },
     speak: t => {
       expect(t).toBe('Ich habe die allgemeinen Geschäftsbedingungen gelesen und stimme ihnen zu')
-      global.ttsIsCurrentlyPlaying = true
       speakCalled = true
     },
     stop: () => {
       stopCalled = true
-      global.ttsIsCurrentlyPlaying = false
     }
   })
 
   const { getByTestId } = render(<TandCScreen />)
   const foundButton1 = getByTestId('tandc1')
   const foundButton2 = getByTestId('tandc2')
-  fireEvent.press(foundButton1)
-  fireEvent.press(foundButton2)
-  await waitFor(() => {
-    expect(global.ttsIsCurrentlyPlaying).toBeTruthy()
-    expect(speakCalled).toBe(true)
-    expect(stopCalled).toBe(false)
-  })
+  act(() => fireEvent.press(foundButton1))
+  act(() => fireEvent.press(foundButton2))
+  await asyncTimeout(50)
+
+  expect(speakCalled).toBe(true)
+  expect(stopCalled).toBe(false)
 })
 
 it('checks for icon color', async () => {

src/components/RouteButton.js

@@ -18,7 +18,9 @@ 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 style={styles.button}>
+        <Button icon={<Icon type='font-awesome-5' name={props.icon} size={25} color={Colors.primary} />} title={props.title} titleStyle={styles.buttonTitle} buttonStyle={{ borderRadius: 15, paddingTop: 10 }} type='outline' onPress={props.handleScreen} />
+      </View>
     </View>
   )
 }
@@ -32,6 +34,9 @@ const styles = StyleSheet.create({
     color: Colors.primary,
     padding: 30,
     width: '75%'
+  },
+  button: {
+    paddingTop: 5
   }
 })
 

src/components/Tts.js

@@ -12,20 +12,31 @@ 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 {boolean} props.smallButton: Changes the button size from 20 to 15 (Default 'false')
  * @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 {number} props.shrink: The parameter to shrink the text. Default: 1
+ * @param {number} props.fontSize: The parameter to change the font size of the text. Default: 18
+ * @param {number} props.paddingTop: Determines the top padding of the text. Default: 8
  * @param {string} props.testID: The parameter to identify the buttons for testing
  * @param {string} props.id: The parameter to identify the buttons
  * @returns {JSX.Element}
  * @constructor
  */
 
 const ttsComponent = props => {
+  // FIXME: Warning: Can't perform a React state update on an unmounted component.
+  // FIXME: This is a no-op, but it indicates a memory leak in your application.
+  // FIXME: To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
   const [isCurrentlyPlaying, setCurrentlyPlaying] = useState(false)
   const [currentlyPlayingId, setCurrentlyPlayingId] = useState(0)
   const [ttsColorIcon, setTtsColorIcon] = useState(props.color)
 
+  /**
+   * @deprecated use TTSEngine.isSpeaking
+   **/
   global.ttsIsCurrentlyPlaying = isCurrentlyPlaying
+
   TTSengine.isSpeaking = isCurrentlyPlaying
   TTSengine.speakId = currentlyPlayingId
   TTSengine.iconColor = ttsColorIcon
@@ -74,20 +85,24 @@ const ttsComponent = props => {
    */
   const displayedText = () => {
     if (!props.dontShowText) {
-      return (
-        <TitleText
-          style={{ color: props.color, flexShrink: 1, fontSize: 18, textAlign: props.align }}
-          text={props.text}
-        />
-      )
+      // color always detaults to secondary and align always to left
+      const styleProps = {
+        color: props.color,
+        flexShrink: props.shrink || 1,
+        fontSize: props.fontSize || 18,
+        textAlign: props.align,
+        paddingTop: props.paddingTop || 8
+      }
+
+      return (<TitleText style={styleProps} text={props.text} />)
     }
   }
 
   return (
     <View style={styles.body}>
       <Icon
         testID={props.testId}
-        reverse style={styles.icon} color={ttsColorIcon} size={20} marginonPress={speak}
+        reverse style={styles.icon} color={ttsColorIcon} size={props.smallButton ? 15 : 20} marginonPress={speak}
         name='volume-up'
         type='font-awesome-5'
         onPress={() => ((currentlyPlayingId === props.id) && isCurrentlyPlaying) ? stopSpeak() : speak()}
@@ -113,6 +128,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row'
   },
   icon: {
-    paddingBottom: 5
+    paddingBottom: 120
   }
 })

src/i18n.js

@@ -26,7 +26,9 @@ const resources = {
       text: 'Welcome! Please select an area.'
     },
     profileScreen: {
-      headerTitle: 'Your Profile'
+      headerTitle: 'Your Profile',
+      progress: 'Overall progress',
+      title: 'My successes'
     },
     overviewScreen: {},
     taskScreen: {}
@@ -52,7 +54,9 @@ const resources = {
       text: 'Herzlich Willkommen! Bitte wähle einen Bereich.'
     },
     profileScreen: {
-      headerTitle: 'Dein Profil'
+      headerTitle: 'Dein Profil',
+      progress: 'Gesamter Fortschritt',
+      title: 'Meine Erfolge'
     },
     overviewScreen: {},
     taskScreen: {}

src/navigation/navigator.js

@@ -22,6 +22,7 @@ const WizardNavigator = createStackNavigator({
   Overview: OverviewScreen,
   Task: TaskScreen,
   Profile: ProfileScreen
-})
+},
+{ transparentCard: true })
 
 export default createAppContainer(WizardNavigator)