import React from 'react';
import UpdateFurnitureFormTable from '../containers/updateFurnitureFormTable.container.jsx';

export default function listingFurnitureRow(props)  {
  const { roomName, furnitureName, furnitureObj } = props.data;

  function controlsClick(e, type) {
    // todo: Convert this to a switch-object. Or refactor otherwise; it's looking like it
    // hardly does anything, and maybe could just be done inline or something.
    if (type === 'edit') {
      props.updateEditStatus(furnitureName, true);
    } else if (type === 'cancel') {
      props.updateEditStatus(furnitureName, false);
    } else if (type === 'submit') {
      props.updateEditStatus(furnitureName, false);
    }
  }

  return props.editing ? (
    <UpdateFurnitureFormTable data={ props.data } controlsClick={ controlsClick }
      formKey={ props.data.furnitureName }
      initialValues={ props.initialValues } />
  ) : (
    <div className="table-item tr">
      <span className="td room slimDown"><strong>{ roomName }</strong></span>
      <span className="td slimDown furniture">{ furnitureName }</span>
      <span className="td slimDown price">{ furnitureObj.price }</span>
      <span className="td slimDown size">{ furnitureObj.size }</span>
      <span className="td slimDown color">{ furnitureObj.color }</span>
      <span className="td controls slimDown">
        <button className={ `btn-flat` } onClick={ (e) => controlsClick(e, 'edit') }>Edit</button>
      </span>
    </div>
  );
}

import React from 'react';
import UpdateFurnitureFormTable from '../containers/updateFurnitureFormTable.container.jsx';

export default function listingFurnitureRow(props)  {
  const { roomName, furnitureName, furnitureObj } = props.data;

  function controlsClick(e, type) {
    const status = {
      edit: true,
      cancel: false,
      submit: false,
    };
    props.updateEditStatus(furnitureName, status[type]);
  }

  return props.editing ? (
    <UpdateFurnitureFormTable data={ props.data } controlsClick={ controlsClick }
      formKey={ props.data.furnitureName }
      initialValues={ props.initialValues } />
  ) : (
    <div className="table-item tr">
      <span className="td room slimDown"><strong>{ roomName }</strong></span>
      <span className="td slimDown furniture">{ furnitureName }</span>
      <span className="td slimDown price">{ furnitureObj.price }</span>
      <span className="td slimDown size">{ furnitureObj.size }</span>
      <span className="td slimDown color">{ furnitureObj.color }</span>
      <span className="td controls slimDown">
        <button className={ `btn-flat` } onClick={ (e) => controlsClick(e, 'edit') }>Edit</button>
      </span>
    </div>
  );
}

Replace bulky if/else block with a switch object
refactor(frontend): Replace bulky if/else block with a switch object
