Merge pull request #304 from elit-altum/refactor-components

refactor(*): template class components to functional - I293
accordproject · Feb 27, 2020 · 8117ad3 · 8117ad3
2 parents d6a34ca + ec280ef
commit 8117ad3
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 77 deletions.
diff --git a/src/TemplateLibrary/Components/TemplateActions.js b/src/TemplateLibrary/Components/TemplateActions.js
@@ -22,6 +22,7 @@ const AddToContractBtn = styled(TemplateBtn)`
   width: 60%;
   border-right: 1px solid ${props => props.color || '#E1E5EB'}; 
   cursor: pointer;
+  color: #19C6C7;
   &:hover {
     color: #3087CB;
   }
@@ -39,29 +40,27 @@ const DetailsBtn = styled(TemplateBtn)`
  * A Template Actions component that will provide each template
  * with functionality.
  */
-class TemplateActions extends React.Component {
+const TemplateActions = (props) => {
   /**
      * Render this React component
      * @return {*} the react component
   */
-  render() {
-    const { handleViewDetails, libraryProps } = this.props;
-    return (
-        <ActionsContainer color={libraryProps.ACTION_BUTTON_BG}>
-        <div>
-          <AddToContractBtn className="adToContractButton" color={libraryProps.ACTION_BUTTON_BORDER} onClick={() => this.props.addToCont(this.props.uriKey)} >
-            <Icon name="plus" />
-            Add to contract
-          </AddToContractBtn>
-          <DetailsBtn
-            color={libraryProps.ACTION_BUTTON}
-            onClick={() => handleViewDetails(this.props.uriKey)}>
-            Details
-          </DetailsBtn>
-        </div>
-      </ActionsContainer>
-    );
-  }
+  const { handleViewDetails, libraryProps } = props;
+  return (
+      <ActionsContainer color={libraryProps.ACTION_BUTTON_BG}>
+      <div>
+        <AddToContractBtn className="adToContractButton" color={libraryProps.ACTION_BUTTON_BORDER} onClick={() => props.addToCont(props.uriKey)} >
+          <Icon name="plus" />
+          Add to contract
+        </AddToContractBtn>
+        <DetailsBtn
+          color={libraryProps.ACTION_BUTTON}
+          onClick={() => handleViewDetails(props.uriKey)}>
+          Details
+        </DetailsBtn>
+      </div>
+    </ActionsContainer>
+  );
 }
 
 /**

diff --git a/src/TemplateLibrary/Components/TemplateCard.js b/src/TemplateLibrary/Components/TemplateCard.js
@@ -46,40 +46,39 @@ const DescriptionContainer = styled(Card.Description)`
  * A Template Card component that will display the each template
  * and it's details.
  */
-class TemplateCard extends React.Component {
+const TemplateCard = (props) => {
   /**
      * Render this React component
      * @return {*} the react component
   */
-  render() {
-    const { libraryProps, template } = this.props;
-    const displayName = template.displayName ? template.displayName : template.name;
-    return (
-        <CardContainer fluid
-          key={template.uri}
-          color={libraryProps.TEMPLATE_BACKGROUND}
-          tempborder={libraryProps.TEMPLATE_BORDER}
-        >
-            <Card.Content>
-              <TemplateLogo src={template.icon} />
-              <Title color={libraryProps.TEMPLATE_TITLE}>
-                {displayName}
-                <Version>v {template.version}</Version>
-              </Title>
-              <DescriptionContainer color={libraryProps.TEMPLATE_DESCRIPTION}>
-                {template.description}
-              </DescriptionContainer>
-            </Card.Content>
-            <TemplateActions
-              libraryProps={libraryProps}
-              addToCont={this.props.addToCont}
-              uriKey={template.uri}
-              handleViewDetails={this.props.handleViewTemplate}
-              className="templateAction"
-            />
-        </CardContainer>
-    );
-  }
+  const { libraryProps, template } = props;
+  const displayName = template.displayName ? template.displayName : template.name;
+
+  return (
+      <CardContainer fluid
+        key={template.uri}
+        color={libraryProps.TEMPLATE_BACKGROUND}
+        tempborder={libraryProps.TEMPLATE_BORDER}
+      >
+          <Card.Content>
+            <TemplateLogo src={template.icon} />
+            <Title color={libraryProps.TEMPLATE_TITLE}>
+              {displayName}
+              <Version>v {template.version}</Version>
+            </Title>
+            <DescriptionContainer color={libraryProps.TEMPLATE_DESCRIPTION}>
+              {template.description}
+            </DescriptionContainer>
+          </Card.Content>
+          <TemplateActions
+            libraryProps={libraryProps}
+            addToCont={props.addToCont}
+            uriKey={template.uri}
+            handleViewDetails={props.handleViewTemplate}
+            className="templateAction"
+          />
+      </CardContainer>
+  ); 
 }
 
 /**

diff --git a/src/Tile/TextForm.js b/src/Tile/TextForm.js
@@ -1,40 +1,33 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-export default class TextForm extends React.PureComponent {
-  static propTypes = {
+// The TextForm Pure component
+export default React.memo( (props) => {
+
+  propTypes = {
     label: PropTypes.string.isRequired,
     handleSubmit: PropTypes.func.isRequired,
   };
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-    };
-
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
+  const [setValue, value] = useState('');
 
-  handleChange(event) {
-    this.setState({ value: event.target.value });
+  const handleChange = (event) => {
+    setValue(event.target.value);
   }
 
-  handleSubmit(event) {
-    this.props.handleSubmit(this.state.value);
+  const handleSubmit = (event) => {
+    props.handleSubmit(value);
     event.preventDefault();
   }
 
-  render() {
-    return (
-      <form onSubmit={this.handleSubmit}>
-        <label>
-          <b>{this.props.label}</b>
-          <input type="text" value={this.state.value} onChange={this.handleChange} />
-        </label>
-        <input type="submit" value="Submit" />
-      </form>
-    );
-  }
-}
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        <b>{props.label}</b>
+        <input type="text" value={value} onChange={handleChange} />
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  );
+
+})