Refactor MainForm

- Add a FormItem component for readability
sos-lapsikyla · Oct 15, 2023 · 0915f2a · 0915f2a
1 parent 7786e12
commit 0915f2a
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 71 deletions.
diff --git a/e2e/changePasswordTest.spec.ts b/e2e/changePasswordTest.spec.ts
@@ -31,7 +31,7 @@ describe('changePassword', () => {
     await element(by.id('tabs.settings')).tap();
 
     await scrollDownAndTap(
-      'main.settings.account.password.button',
+      'main.settings.account.password.change',
       'main.settings.index.view',
     );
 

diff --git a/e2e/logoutTest.spec.ts b/e2e/logoutTest.spec.ts
@@ -10,7 +10,7 @@ import {
   signIn,
 } from './helpers';
 
-describe('Delete', () => {
+describe('Logout', () => {
   beforeAll(async () => {
     await device.launchApp();
   });

diff --git a/src/Screens/Main/Settings/UserAccount/FormItem.tsx b/src/Screens/Main/Settings/UserAccount/FormItem.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import RN from 'react-native';
+
+import { MessageId } from '../../../../localization';
+import colors from '../../../components/colors';
+import fonts from '../../../components/fonts';
+
+import Message from '../../../components/Message';
+import IconButton from '../../../components/IconButton';
+
+type FormButton = {
+  testID: string;
+  onClick: () => void;
+};
+
+type Props = {
+  labelMessageId: MessageId;
+  button?: FormButton;
+  style?: RN.StyleProp<RN.ViewStyle>;
+  children: React.ReactNode;
+};
+
+export const FormItem = ({
+  labelMessageId,
+  button,
+  children,
+  style,
+}: Props) => {
+  return (
+    <RN.View style={style ?? styles.dataContainer}>
+      <RN.View style={styles.headerContainer}>
+        <Message style={styles.fieldName} id={labelMessageId} />
+        {button && (
+          <IconButton
+            badge={require('../../../images/pen.svg')}
+            onPress={button.onClick}
+            testID={button.testID}
+            noShadow
+          />
+        )}
+      </RN.View>
+      {children}
+    </RN.View>
+  );
+};
+
+const styles = RN.StyleSheet.create({
+  dataContainer: {
+    paddingVertical: 16,
+    borderBottomColor: colors.formBorderGray,
+    borderBottomWidth: 1,
+  },
+  headerContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'space-between',
+    paddingTop: 16,
+  },
+  fieldName: {
+    ...fonts.regularBold,
+    color: colors.darkestBlue,
+  },
+});
diff --git a/src/Screens/Main/Settings/UserAccount/MainForm.tsx b/src/Screens/Main/Settings/UserAccount/MainForm.tsx
@@ -8,12 +8,13 @@ import { tuple } from 'fp-ts/lib/function';
 import * as userAccountState from '../../../../state/reducers/userAccount';
 import * as actions from '../../../../state/actions';
 
-import RemoteData from '../../../components/RemoteData';
-import Message from '../../../components/Message';
 import colors from '../../../components/colors';
 import fonts from '../../../components/fonts';
+
+import RemoteData from '../../../components/RemoteData';
+import Message from '../../../components/Message';
 import MentorForm from './MentorForm';
-import IconButton from 'src/Screens/components/IconButton';
+import { FormItem } from './FormItem';
 
 type Props = {
   openPasswordForm: () => void;
@@ -42,45 +43,32 @@ export default ({ openPasswordForm, openEmailForm }: Props) => {
       >
         {([{ userId, userName, displayName, email, role }, hasBoth]) => (
           <>
-            <RN.View style={styles.dataContainer}>
-              <Message
-                style={styles.fieldName}
-                id="main.settings.account.userName"
-              />
+            <FormItem labelMessageId="main.settings.account.userName">
               <RN.Text
                 style={styles.fieldValueText}
                 testID="main.settings.account.userName"
               >
                 {userName}
               </RN.Text>
-            </RN.View>
-            {hasBoth ? (
-              <RN.View style={styles.dataContainer}>
-                <Message
-                  style={styles.fieldName}
-                  id="main.settings.account.displayName"
-                />
+            </FormItem>
+
+            {hasBoth && (
+              <FormItem labelMessageId="main.settings.account.displayName">
                 <RN.Text
                   style={styles.fieldValueText}
                   testID="main.settings.account.displayName"
                 >
                   {displayName}
                 </RN.Text>
-              </RN.View>
-            ) : null}
-            <RN.View style={styles.dataContainer}>
-              <RN.View style={styles.headerContainer}>
-                <Message
-                  style={styles.fieldName}
-                  id="main.settings.account.email.title"
-                />
-                <IconButton
-                  badge={require('../../../images/pen.svg')}
-                  onPress={openEmailForm}
-                  testID="main.settings.account.email.change"
-                  noShadow
-                />
-              </RN.View>
+              </FormItem>
+            )}
+            <FormItem
+              labelMessageId="main.settings.account.email.title"
+              button={{
+                testID: 'main.settings.account.email.change',
+                onClick: openEmailForm,
+              }}
+            >
               {email ? (
                 <RN.Text
                   style={styles.fieldValueText}
@@ -94,22 +82,17 @@ export default ({ openPasswordForm, openEmailForm }: Props) => {
                   id="main.settings.account.email.missing"
                 />
               )}
-            </RN.View>
-            <RN.View style={styles.dataContainerLast}>
-              <RN.View style={styles.headerContainer}>
-                <Message
-                  style={styles.fieldName}
-                  id="main.settings.account.password.title"
-                />
-                <IconButton
-                  badge={require('../../../images/pen.svg')}
-                  onPress={openPasswordForm}
-                  testID="main.settings.account.password.change"
-                  noShadow
-                />
-              </RN.View>
+            </FormItem>
+            <FormItem
+              labelMessageId="main.settings.account.password.title"
+              button={{
+                testID: 'main.settings.account.password.change',
+                onClick: openPasswordForm,
+              }}
+              style={styles.dataContainerLast}
+            >
               <RN.Text style={styles.fieldValueText}>{'********'}</RN.Text>
-            </RN.View>
+            </FormItem>
             {role === 'mentor' ? <MentorForm userId={userId} /> : null}
           </>
         )}
@@ -124,18 +107,6 @@ const styles = RN.StyleSheet.create({
     paddingBottom: 32,
     marginBottom: 32,
   },
-  headerContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    flex: 1,
-    justifyContent: 'space-between',
-    paddingTop: 16,
-  },
-  dataContainer: {
-    paddingVertical: 16,
-    borderBottomColor: colors.formBorderGray,
-    borderBottomWidth: 1,
-  },
   dataContainerLast: {
     paddingVertical: 16,
   },
@@ -144,20 +115,8 @@ const styles = RN.StyleSheet.create({
     color: colors.darkestBlue,
     marginBottom: 24,
   },
-  fieldName: {
-    ...fonts.regularBold,
-    color: colors.darkestBlue,
-  },
   fieldValueText: {
     color: colors.darkestBlue,
   },
-  link: {
-    marginTop: 8,
-    marginBottom: 24,
-  },
-  buttonText: {
-    ...fonts.regularBold,
-    color: colors.darkestBlue,
-  },
   errorStyle: { margin: 0 },
 });