5752588387

Committed 03 Aug 2023 03:17PM UTC coverage: 79.826% (-0.2%) from 80.025%

Build # 5752588387

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #114 from akvo/feature/106-fix-form-navigation

Feature/106 fix form navigation

Run Details

607 of 816 branches covered (74.39%)

Branch coverage included in aggregate %.

16 of 16 new or added lines in 4 files covered. (100.0%)

1320 of 1598 relevant lines covered (82.6%)

17.2 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

81.25

/app/src/form/support/FormNavigation.js

import React, { useEffect } from 'react';
import { Platform, ToastAndroid } from 'react-native';
import { Tab } from '@rneui/themed';
import { styles } from '../styles';
import { UIState, FormState } from '../../store';
import { i18n } from '../../lib';

const FormNavigation = ({
  currentGroup,
  formRef,
  onSubmit,
  activeGroup,
  setActiveGroup,
  totalGroup,
  showQuestionGroupList,
  setShowQuestionGroupList,
  setShowDialogMenu,
}) => {
  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) {
      const touched = currentGroup?.question?.reduce(
        (res, currentQ) => ({ ...res, [currentQ?.id]: true }),
        {},
      );
      formRef.current.setTouched(touched);
      await formRef.current.validateForm();
      errors = Object.keys(formRef.current.errors)?.length > 0;
    }
    return errors;
  };

  const handleFormNavigation = (index) => {
    // index 0 = prev group
    // index 1 = show question group list
    // index 2 = next group
    if (index === 0) {
      if (!activeGroup) {
        setShowDialogMenu(true);
      } else {
        setActiveGroup(activeGroup - 1);
      }
      return;
    }
    if (index === 1) {
      setShowQuestionGroupList(!showQuestionGroupList);
      return;
    }
    validateOnFormNavigation()
      .then((errors) => {
        if (errors && Platform.OS === 'android') {
          ToastAndroid.show(trans.formMandatoryAlert, ToastAndroid.SHORT);
          return;
        }
        if (!errors && index === 2 && activeGroup === totalGroup - 1) {
          return onSubmit();
        }
        if (!errors && activeGroup <= totalGroup - 1) {
          const newValue = index === 0 ? activeGroup - 1 : activeGroup + 1;
          return setActiveGroup(newValue < 0 ? 0 : newValue);
        }
      })
      .catch((err) => console.error(err));
  };

  return (
    <Tab
      buttonStyle={styles.formNavigationButton}
      onChange={handleFormNavigation}
      disableIndicator={true}
      value={activeGroup}
    >
      <Tab.Item
        title={trans.buttonBack}
        icon={{ name: 'chevron-back-outline', type: 'ionicon', color: 'grey', size: 20 }}
        iconPosition="left"
        iconContainerStyle={styles.formNavigationIcon}
        titleStyle={styles.formNavigationTitle}
        testID="form-nav-btn-back"
        disabled={showQuestionGroupList}
        disabledStyle={{ backgroundColor: 'transparent' }}
      />
      <Tab.Item
        title={`${activeGroup + 1}/${totalGroup}`}
        titleStyle={styles.formNavigationGroupCount}
        testID="form-nav-group-count"
      />
      {activeGroup < totalGroup - 1 ? (
        <Tab.Item
          title={trans.buttonNext}
          icon={{ name: 'chevron-forward-outline', type: 'ionicon', color: 'grey', size: 20 }}
          iconPosition="right"
          iconContainerStyle={styles.formNavigationIcon}
          titleStyle={styles.formNavigationTitle}
          testID="form-nav-btn-next"
          disabled={showQuestionGroupList}
          disabledStyle={{ backgroundColor: 'transparent' }}
        />
      ) : (
        <Tab.Item
          title={trans.buttonSubmit}
          icon={{ name: 'paper-plane-outline', type: 'ionicon', color: 'grey', size: 20 }}
          iconPosition="right"
          iconContainerStyle={styles.formNavigationIcon}
          titleStyle={styles.formNavigationTitle}
          testID="form-btn-submit"
        />
      )}
    </Tab>
  );
};

export default FormNavigation;

1	import React, { useEffect } from 'react';
2	import { Platform, ToastAndroid } from 'react-native';
3	import { Tab } from '@rneui/themed';
4	import { styles } from '../styles';
5	import { UIState, FormState } from '../../store';
6	import { i18n } from '../../lib';
7
8	const FormNavigation = ({	18✔
9	currentGroup,
10	formRef,
11	onSubmit,
12	activeGroup,
13	setActiveGroup,
14	totalGroup,
15	showQuestionGroupList,
16	setShowQuestionGroupList,
17	setShowDialogMenu,
18	}) => {
19	const visitedQuestionGroup = FormState.useState((s) => s.visitedQuestionGroup);	58✔
20	const activeLang = UIState.useState((s) => s.lang);	38✔
21	const trans = i18n.text(activeLang);	28✔
22
23	useEffect(() => {	28✔
24	const updateVisitedQuestionGroup = [...visitedQuestionGroup, ...[activeGroup]];	19✔
25	FormState.update((s) => {	19✔
26	s.visitedQuestionGroup = [...new Set(updateVisitedQuestionGroup)];	19✔
27	});
28	}, [activeGroup]);
29
30	const validateOnFormNavigation = async () => {	28✔
31	let errors = false;	14✔
32	if (formRef?.current) {	14✔
33	const touched = currentGroup?.question?.reduce(	12✔
34	(res, currentQ) => ({ ...res, [currentQ?.id]: true }),	36✔
35	{},
36	);
37	formRef.current.setTouched(touched);	12✔
38	await formRef.current.validateForm();	12✔
39	errors = Object.keys(formRef.current.errors)?.length > 0;	12✔
40	}
41	return errors;	14✔
42	};
43
44	const handleFormNavigation = (index) => {	28✔
45	// index 0 = prev group
46	// index 1 = show question group list
47	// index 2 = next group
48	if (index === 0) {	14!
49	if (!activeGroup) {	×
50	setShowDialogMenu(true);	×
51	} else {
52	setActiveGroup(activeGroup - 1);	×
53	}
54	return;	×
55	}
56	if (index === 1) {	14!
57	setShowQuestionGroupList(!showQuestionGroupList);	×
58	return;	×
59	}
60	validateOnFormNavigation()	14✔
61	.then((errors) => {
62	if (errors && Platform.OS === 'android') {	14✔
63	ToastAndroid.show(trans.formMandatoryAlert, ToastAndroid.SHORT);	2✔
64	return;	2✔
65	}
66	if (!errors && index === 2 && activeGroup === totalGroup - 1) {	12✔
67	return onSubmit();	6✔
68	}
69	if (!errors && activeGroup <= totalGroup - 1) {	6✔
70	const newValue = index === 0 ? activeGroup - 1 : activeGroup + 1;	3!
71	return setActiveGroup(newValue < 0 ? 0 : newValue);	3!
72	}
73	})
74	.catch((err) => console.error(err));	1✔
75	};
76
77	return (	28✔
78	<Tab
79	buttonStyle={styles.formNavigationButton}
80	onChange={handleFormNavigation}
81	disableIndicator={true}
82	value={activeGroup}
83	>
84	<Tab.Item
85	title={trans.buttonBack}
86	icon={{ name: 'chevron-back-outline', type: 'ionicon', color: 'grey', size: 20 }}
87	iconPosition="left"
88	iconContainerStyle={styles.formNavigationIcon}
89	titleStyle={styles.formNavigationTitle}
90	testID="form-nav-btn-back"
91	disabled={showQuestionGroupList}
92	disabledStyle={{ backgroundColor: 'transparent' }}
93	/>
94	<Tab.Item
95	title={`${activeGroup + 1}/${totalGroup}`}
96	titleStyle={styles.formNavigationGroupCount}
97	testID="form-nav-group-count"
98	/>
99	{activeGroup < totalGroup - 1 ? (	28✔
100	<Tab.Item
101	title={trans.buttonNext}
102	icon={{ name: 'chevron-forward-outline', type: 'ionicon', color: 'grey', size: 20 }}
103	iconPosition="right"
104	iconContainerStyle={styles.formNavigationIcon}
105	titleStyle={styles.formNavigationTitle}
106	testID="form-nav-btn-next"
107	disabled={showQuestionGroupList}
108	disabledStyle={{ backgroundColor: 'transparent' }}
109	/>
110	) : (
111	<Tab.Item
112	title={trans.buttonSubmit}
113	icon={{ name: 'paper-plane-outline', type: 'ionicon', color: 'grey', size: 20 }}
114	iconPosition="right"
115	iconContainerStyle={styles.formNavigationIcon}
116	titleStyle={styles.formNavigationTitle}
117	testID="form-btn-submit"
118	/>
119	)}
120	</Tab>
121	);
122	};
123
124	export default FormNavigation;

akvo / nmis-mobile / 5752588387

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous