From 655fde81e986f4e464e25c61ed3ee7a40aa86867 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 22 Apr 2020 18:11:12 -0500
Subject: [PATCH] Refactor TextInput component

---
 app/gabsocial/features/forms/index.js | 33 +++++++++++++++++----------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/app/gabsocial/features/forms/index.js b/app/gabsocial/features/forms/index.js
index 90f3b9b5f..cb0fcd20e 100644
--- a/app/gabsocial/features/forms/index.js
+++ b/app/gabsocial/features/forms/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { v4 as uuidv4 } from 'uuid';
 
 export class SimpleForm extends ImmutablePureComponent {
@@ -197,21 +198,29 @@ export class TextInput extends ImmutablePureComponent {
     const { label, ...props } = this.props;
     const id = uuidv4();
 
-    return (
-      <div className='input with_label string optional'>
-        <div className='label_input'>
-          <label className='string optional' htmlFor={id}>{label}</label>
-          <div className='label_input__wrapper'>
-            <input
-              className='string optional'
-              type='text'
-              id={id}
-              {...props}
-            />
-          </div>
+    const containerClassNames = classNames('input', {
+      'with_label': label,
+      'required': this.props.required,
+    });
+
+    const InputWithLabel = () => (
+      <div className='label_input'>
+        <label htmlFor={id}>{label}</label>
+        <div className='label_input__wrapper'>
+          <Input />
         </div>
       </div>
     );
+
+    const Input = () => (
+      <input id={id} type='text' {...props} />
+    );
+
+    return (
+      <div className={containerClassNames}>
+        {label ? <InputWithLabel /> : <Input />}
+      </div>
+    );
   }
 
 }