Merge pull request #107 from akvo/feature/106-question-group-navigation

Feature/106 question group navigation

app/src/components/LogoutButton.js

@@ -41,6 +41,7 @@ const LogoutButton = () => {
       s.question = [];
       s.currentValues = {}; // answers
       s.questionGroupListCurrentValues = {}; // answers for question group list component
+      s.visitedQuestionGroup = [];
       s.dataPointName = [];
       s.surveyDuration = 0;
     });

app/src/form/FormContainer.js

@@ -75,7 +75,11 @@ const FormContainer = ({ forms, initialValues = {}, onSubmit, onSave }) => {
   }, [currentValues, onSave]);
 
   const formDefinition = useMemo(() => {
-    return transformForm(forms, activeLang);
+    const transformedForm = transformForm(forms, activeLang);
+    FormState.update((s) => {
+      s.visitedQuestionGroup = [transformedForm.question_group[0].id];
+    });
+    return transformedForm;
   }, [forms, activeLang]);
 
   const currentGroup = useMemo(() => {
@@ -91,12 +95,13 @@ const FormContainer = ({ forms, initialValues = {}, onSubmit, onSave }) => {
       return initialValues;
     }
     return currentValues;
-  }, [initialValues]);
+  }, [initialValues, currentValues]);
 
   const refreshForm = () => {
     FormState.update((s) => {
       s.currentValues = {};
       s.questionGroupListCurrentValues = {};
+      s.visitedQuestionGroup = [];
       s.dataPointName = [];
       s.surveyDuration = 0;
     });

app/src/form/styles.js

@@ -150,7 +150,7 @@ export const styles = StyleSheet.create({
     paddingHorizontal: 10,
   },
   questionGroupListItemActive: {
-    backgroundColor: '#F3F3F3',
+    backgroundColor: '#E9E9E9',
   },
   questionGroupListItemIcon: {
     paddingHorizontal: 10,
@@ -159,6 +159,9 @@ export const styles = StyleSheet.create({
   questionGroupListItemName: {
     marginLeft: 10,
   },
+  questionGroupListItemNameActive: {
+    fontWeight: 'bold',
+  },
   cascadeContainer: {
     display: 'flex',
     flexDirection: 'column',

app/src/form/support/FormNavigation.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Platform, ToastAndroid } from 'react-native';
 import { Tab } from '@rneui/themed';
 import { styles } from '../styles';
-import { UIState } from '../../store';
+import { UIState, FormState } from '../../store';
 import { i18n } from '../../lib';
 
 const FormNavigation = ({
@@ -15,9 +15,17 @@ const FormNavigation = ({
   showQuestionGroupList,
   setShowQuestionGroupList,
 }) => {
+  const visitedQuestionGroup = FormState.useState((s) => s.visitedQuestionGroup);
   const activeLang = UIState.useState((s) => s.lang);
   const trans = i18n.text(activeLang);
 
+  useEffect(() => {
+    const updateVisitedQuestionGroup = [...visitedQuestionGroup, ...[activeGroup]];
+    FormState.update((s) => {
+      s.visitedQuestionGroup = [...new Set(updateVisitedQuestionGroup)];
+    });
+  }, [activeGroup]);
+
   const validateOnFormNavigation = async () => {
     let errors = false;
     if (formRef?.current) {

app/src/form/support/QuestionGroupList.js

@@ -4,6 +4,7 @@ import { Text, Divider } from '@rneui/themed';
 import QuestionGroupListItem from './QuestionGroupListItem';
 import { validateDependency, modifyDependency } from '../lib';
 import { styles } from '../styles';
+import { FormState } from '../../store';
 
 export const checkCompleteQuestionGroup = (form, values) => {
   return form.question_group.map((questionGroup) => {
@@ -41,6 +42,8 @@ const QuestionGroupList = ({
   setActiveQuestionGroup,
   setShowQuestionGroupList,
 }) => {
+  const visitedQuestionGroup = FormState.useState((s) => s.visitedQuestionGroup);
+
   const completedQuestionGroup = useMemo(() => {
     return checkCompleteQuestionGroup(form, values);
   });
@@ -69,7 +72,9 @@ const QuestionGroupList = ({
           key={questionGroup.id}
           name={questionGroup.name}
           active={activeQuestionGroup === questionGroup.id}
-          completedQuestionGroup={completedQuestionGroup[qx]}
+          completedQuestionGroup={
+            completedQuestionGroup[qx] && visitedQuestionGroup.includes(questionGroup.id)
+          }
           onPress={() => handleOnPress(questionGroup.id)}
         />
       ))}

app/src/form/support/QuestionGroupListItem.js

@@ -7,6 +7,7 @@ const QuestionGroupListItem = ({ name, active, completedQuestionGroup = false, o
   const icon = completedQuestionGroup ? 'check-circle' : 'circle';
   const bgColor = completedQuestionGroup ? '#2884bd' : '#d4d4d4';
   const activeOpacity = active ? styles.questionGroupListItemActive : {};
+  const activeName = active ? styles.questionGroupListItemNameActive : {};
   return (
     <TouchableOpacity
       style={{ ...styles.questionGroupListItemWrapper, ...activeOpacity }}
@@ -16,12 +17,12 @@ const QuestionGroupListItem = ({ name, active, completedQuestionGroup = false, o
     >
       <Icon
         testID="icon-mark"
-        name={icon}
+        name="circle"
         type="font-awesome"
         color={bgColor}
         style={styles.questionGroupListItemIcon}
       />
-      <Text style={styles.questionGroupListItemName}>{name}</Text>
+      <Text style={{ ...styles.questionGroupListItemName, ...activeName }}>{name}</Text>
     </TouchableOpacity>
   );
 };

app/src/form/support/__test__/QuestionGroupListItem.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react-native';
+import { render, act, waitFor } from '@testing-library/react-native';
 jest.useFakeTimers();
 import QuestionGroupList, { checkCompleteQuestionGroup } from '../QuestionGroupList';
 import QuestionGroupListItem from '../QuestionGroupListItem';
@@ -214,6 +214,11 @@ const example = {
 
 describe('QuestionGroup & QuestionGroupListItem without mock', () => {
   describe('checkCompleteQuestionGroup function', () => {
+    it('Should return boolean if completed/not', () => {
+      const completed = checkCompleteQuestionGroup(example, { 1: 'Galih' });
+      expect(completed).toEqual([true, false, false, true]);
+    });
+
     it.failing(
       'Should failing when only one question answered from two required questions in a question group',
       () => {
@@ -290,11 +295,6 @@ describe('QuestionGroup & QuestionGroupListItem without mock', () => {
     expect(dataPointElement).toBeFalsy();
   });
 
-  it('Should return boolean if completed/not', () => {
-    const completed = checkCompleteQuestionGroup(example, { 1: 'Galih' });
-    expect(completed).toEqual([true, false, false, true]);
-  });
-
   it('Should render question group name', () => {
     const wrapper = render(
       <QuestionGroupListItem name="Group 1" active={true} completedQuestionGroup={false} />,
@@ -312,7 +312,8 @@ describe('QuestionGroup & QuestionGroupListItem without mock', () => {
     const iconEl = wrapper.getByTestId('icon-mark');
     const iconElProps = iconEl.props.children.props.children.props;
     expect(iconElProps.color).toBe('#2884bd');
-    expect(iconElProps.name).toBe('check-circle');
+    // Drop the check mark (this can be implemented later after discussion with the design team )
+    expect(iconElProps.name).toBe('circle'); // check-circle
   });
 
   it('Should have disabled mark if not completed', () => {
@@ -348,7 +349,7 @@ describe('QuestionGroup & QuestionGroupListItem without mock', () => {
       <QuestionGroupListItem name="Group 1" active={true} completedQuestionGroup={false} />,
     );
     const itemEl = wrapper.getByTestId('question-group-list-item-wrapper');
-    expect(itemEl.props.style.backgroundColor).toBe('#F3F3F3');
+    expect(itemEl.props.style.backgroundColor).toBe('#E9E9E9');
   });
 
   it.failing('Should highlight question group if not active', () => {

app/src/navigation/index.js

@@ -131,6 +131,7 @@ const Navigation = (props) => {
       FormState.update((s) => {
         s.currentValues = {};
         s.questionGroupListCurrentValues = {};
+        s.visitedQuestionGroup = [];
         s.dataPointName = [];
         s.surveyDuration = 0;
       });

app/src/store/forms.js

@@ -9,6 +9,7 @@ const FormState = new Store({
   submitted: false,
   currentValues: {}, // answers
   questionGroupListCurrentValues: {}, // answers for question group list component
+  visitedQuestionGroup: [], // to store visited question group id
   dataPointName: [],
   surveyDuration: 0,
 });