From cc29df30339e623a5c673f42aab467116702d1a4 Mon Sep 17 00:00:00 2001
From: Sboonny <muhammed@freecodecamp.org>
Date: Thu, 26 Jan 2023 18:03:57 +0000
Subject: [PATCH] refactor(client): clean extra FormGroup component in personal
 info

---
 client/src/components/helpers/grid.tsx   | 23 ++++++
 client/src/components/helpers/index.ts   |  1 +
 client/src/components/settings/about.tsx | 89 ++++++++++++------------
 3 files changed, 67 insertions(+), 46 deletions(-)
 create mode 100644 client/src/components/helpers/grid.tsx

diff --git a/client/src/components/helpers/grid.tsx b/client/src/components/helpers/grid.tsx
new file mode 100644
index 00000000000..48d2e30dce9
--- /dev/null
+++ b/client/src/components/helpers/grid.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface GridProps extends React.HTMLAttributes<Element> {
+  children: React.ReactNode;
+}
+
+const GridStyle = {
+  display: 'grid',
+  gap: '15px',
+  marginBottom: '15px'
+};
+
+const Grid = ({ children, ...rest }: GridProps) => {
+  return (
+    <div {...rest} style={GridStyle}>
+      {children}
+    </div>
+  );
+};
+
+Grid.displayName = 'Grid';
+
+export default Grid;
diff --git a/client/src/components/helpers/index.ts b/client/src/components/helpers/index.ts
index d58dd56ae09..d85852dbfba 100644
--- a/client/src/components/helpers/index.ts
+++ b/client/src/components/helpers/index.ts
@@ -1,5 +1,6 @@
 export { default as ButtonSpacer } from './button-spacer';
 export { default as FullWidthRow } from './full-width-row';
+export { default as Grid } from './grid';
 export { default as SlimWidthRow } from './slim-width-row';
 export { default as Loader } from './loader';
 export { default as SkeletonSprite } from './skeleton-sprite';
diff --git a/client/src/components/settings/about.tsx b/client/src/components/settings/about.tsx
index 4b3f1aa8d16..73089c8887f 100644
--- a/client/src/components/settings/about.tsx
+++ b/client/src/components/settings/about.tsx
@@ -1,5 +1,4 @@
 import {
-  FormGroup,
   ControlLabel,
   FormControl,
   HelpBlock,
@@ -9,7 +8,7 @@ import React, { Component } from 'react';
 
 import { TFunction, withTranslation } from 'react-i18next';
 import isURL from 'validator/lib/isURL';
-import { FullWidthRow, Spacer } from '../helpers';
+import { FullWidthRow, Grid, Spacer } from '../helpers';
 import BlockSaveButton from '../helpers/form/block-save-button';
 import SoundSettings from './sound';
 import ThemeSettings, { Themes } from './theme';
@@ -79,7 +78,6 @@ class AboutSettings extends Component<AboutProps, AboutState> {
       picture === formValues.picture &&
       about === formValues.about
     ) {
-      // eslint-disable-next-line react/no-did-update-set-state
       return this.setState({
         originalValues: {
           name,
@@ -216,49 +214,48 @@ class AboutSettings extends Component<AboutProps, AboutState> {
         <SectionHeader>{t('settings.headings.personal-info')}</SectionHeader>
         <FullWidthRow>
           <form id='camper-identity' onSubmit={this.handleSubmit}>
-            <div role='group' aria-label={t('settings.headings.personal-info')}>
-              <FormGroup controlId='about-name'>
-                <ControlLabel>
-                  <strong>{t('settings.labels.name')}</strong>
-                </ControlLabel>
-                <FormControl
-                  onChange={this.handleNameChange}
-                  type='text'
-                  value={name}
-                />
-              </FormGroup>
-              <FormGroup controlId='about-location'>
-                <ControlLabel>
-                  <strong>{t('settings.labels.location')}</strong>
-                </ControlLabel>
-                <FormControl
-                  onChange={this.handleLocationChange}
-                  type='text'
-                  value={location}
-                />
-              </FormGroup>
-              <FormGroup controlId='about-picture'>
-                <ControlLabel>
-                  <strong>{t('settings.labels.picture')}</strong>
-                </ControlLabel>
-                <FormControl
-                  onChange={this.handlePictureChange}
-                  type='url'
-                  value={picture}
-                />
-                {this.showImageValidationWarning()}
-              </FormGroup>
-              <FormGroup controlId='about-about'>
-                <ControlLabel>
-                  <strong>{t('settings.labels.about')}</strong>
-                </ControlLabel>
-                <FormControl
-                  componentClass='textarea'
-                  onChange={this.handleAboutChange}
-                  value={about}
-                />
-              </FormGroup>
-            </div>
+            <Grid
+              role='group'
+              aria-label={t('settings.headings.personal-info')}
+            >
+              <ControlLabel htmlFor='about-name'>
+                <strong>{t('settings.labels.name')}</strong>
+              </ControlLabel>
+              <FormControl
+                id='about-name'
+                onChange={this.handleNameChange}
+                type='text'
+                value={name}
+              />
+              <ControlLabel htmlFor='about-location'>
+                <strong>{t('settings.labels.location')}</strong>
+              </ControlLabel>
+              <FormControl
+                id='about-location'
+                onChange={this.handleLocationChange}
+                type='text'
+                value={location}
+              />
+              <ControlLabel htmlFor='about-picture'>
+                <strong>{t('settings.labels.picture')}</strong>
+              </ControlLabel>
+              <FormControl
+                id='about-picture'
+                onChange={this.handlePictureChange}
+                type='url'
+                value={picture}
+              />
+              {this.showImageValidationWarning()}
+              <ControlLabel htmlFor='about-about'>
+                <strong>{t('settings.labels.about')}</strong>
+              </ControlLabel>
+              <FormControl
+                id='about-about'
+                componentClass='textarea'
+                onChange={this.handleAboutChange}
+                value={about}
+              />
+            </Grid>
             <BlockSaveButton disabled={this.isFormPristine()}>
               {t('buttons.save')}{' '}
               <span className='sr-only'>