Merge pull request #383 from lbryio/single-quote-jsx

fix: updated components to use single quotes in jsx

react/components/ActiveStatusBar/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const ActiveStatusBar = () => {
-  return <span className="progress-bar progress-bar--active">| </span>;
+  return <span className='progress-bar progress-bar--active'>| </span>;
-}
+};
 
 export default ActiveStatusBar;

react/components/ExpandingTextArea/index.jsx

@@ -2,31 +2,32 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 class ExpandingTextarea extends Component {
+  constructor (props) {
+    super(props);
+    this._handleChange = this._handleChange.bind(this);
+  }
   componentDidMount () {
     this.adjustTextarea({});
   }
-
-  render () {
-    const { onChange, ...rest } = this.props;
-    return (
-      <textarea
-        { ...rest }
-        ref={x => this.el = x}
-        onChange={ this._handleChange.bind(this) }
-      />
-    );
-  }
-
   _handleChange (event) {
     const { onChange } = this.props;
     if (onChange) onChange(event);
     this.adjustTextarea(event);
   }
-
   adjustTextarea ({ target = this.el }) {
     target.style.height = 0;
     target.style.height = `${target.scrollHeight}px`;
   }
+  render () {
+    const { ...rest } = this.props;
+    return (
+      <textarea
+        {...rest}
+        ref={x => this.el = x}
+        onChange={this._handleChange}
+      />
+    );
+  }
 }
 
 ExpandingTextarea.propTypes = {

react/components/InactiveStatusBar/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const InactiveStatusBar = () => {
-  return <span className="progress-bar progress-bar--inactive">| </span>;
+  return <span className='progress-bar progress-bar--inactive'>| </span>;
-}
+};
 
 export default InactiveStatusBar;

react/components/Logo/index.jsx

@@ -3,20 +3,20 @@ import { Link } from 'react-router-dom';
 
 function Logo () {
   return (
-    <svg version="1.1" id="Layer_1" x="0px" y="0px" height="24px" viewBox="0 0 80 31" enableBackground="new 0 0 80 31" className="nav-bar-logo">
+    <svg version='1.1' id='Layer_1' x='0px' y='0px' height='24px' viewBox='0 0 80 31' enableBackground='new 0 0 80 31' className='nav-bar-logo'>
-      <Link to="/">
+      <Link to='/'>
         <title>Logo</title>
         <desc>Spee.ch logo</desc>
-        <g id="About">
+        <g id='About'>
-          <g id="Publish-Form-V2-_x28_filled_x29_" transform="translate(-42.000000, -23.000000)">
+          <g id='Publish-Form-V2-_x28_filled_x29_' transform='translate(-42.000000, -23.000000)'>
-            <g id="Group-17" transform="translate(42.000000, 22.000000)">
+            <g id='Group-17' transform='translate(42.000000, 22.000000)'>
-              <text transform="matrix(1 0 0 1 0 20)" fontSize="25" fontFamily="Roboto">Spee&lt;h</text>
+              <text transform='matrix(1 0 0 1 0 20)' fontSize='25' fontFamily='Roboto'>Spee&lt;h</text>
-              <g id="Group-16" transform="translate(0.000000, 30.000000)">
+              <g id='Group-16' transform='translate(0.000000, 30.000000)'>
-                <path id="Line-8" fill="none" stroke="#09F911" strokeWidth="1" strokeLinecap="square" d="M0.5,1.5h15"/>
+                <path id='Line-8' fill='none' stroke='#09F911' strokeWidth='1' strokeLinecap='square' d='M0.5,1.5h15' />
-                <path id="Line-8-Copy" fill="none" stroke="#029D74" strokeWidth="1" strokeLinecap="square" d="M16.5,1.5h15"/>
+                <path id='Line-8-Copy' fill='none' stroke='#029D74' strokeWidth='1' strokeLinecap='square' d='M16.5,1.5h15' />
-                <path id="Line-8-Copy-2" fill="none" stroke="#E35BD8" strokeWidth="1" strokeLinecap="square" d="M32.5,1.5h15"/>
+                <path id='Line-8-Copy-2' fill='none' stroke='#E35BD8' strokeWidth='1' strokeLinecap='square' d='M32.5,1.5h15' />
-                <path id="Line-8-Copy-3" fill="none" stroke="#4156C5" strokeWidth="1" strokeLinecap="square" d="M48.5,1.5h15"/>
+                <path id='Line-8-Copy-3' fill='none' stroke='#4156C5' strokeWidth='1' strokeLinecap='square' d='M48.5,1.5h15' />
-                <path id="Line-8-Copy-4" fill="none" stroke="#635688" strokeWidth="1" strokeLinecap="square" d="M64.5,1.5h15"/>
+                <path id='Line-8-Copy-4' fill='none' stroke='#635688' strokeWidth='1' strokeLinecap='square' d='M64.5,1.5h15' />
               </g>
             </g>
           </g>

react/components/NavBarChannelOptionsDropdown/index.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 function NavBarChannelDropdown ({ channelName, handleSelection, defaultSelection, VIEW, LOGOUT }) {
   return (
-    <select type="text" id="nav-bar-channel-select" className="select select--arrow link--nav" onChange={handleSelection} value={defaultSelection}>
+    <select type='text' id='nav-bar-channel-select' className='select select--arrow link--nav' onChange={handleSelection} value={defaultSelection}>
-      <option id="nav-bar-channel-select-channel-option">{channelName}</option>
+      <option id='nav-bar-channel-select-channel-option'>{channelName}</option>
       <option value={VIEW}>View</option>
       <option value={LOGOUT}>Logout</option>
     </select>

react/components/PublishUrlMiddleDisplay/index.jsx

@@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
 function UrlMiddle ({publishInChannel, selectedChannel, loggedInChannelName, loggedInChannelShortId}) {
   if (publishInChannel) {
     if (selectedChannel === loggedInChannelName) {
-      return <span id="url-channel" className="url-text--secondary">{loggedInChannelName}:{loggedInChannelShortId} /</span>;
+      return <span id='url-channel' className='url-text--secondary'>{loggedInChannelName}:{loggedInChannelShortId} /</span>;
     }
-    return <span id="url-channel-placeholder" className="url-text--secondary tooltip">@channel<span
+    return <span id='url-channel-placeholder' className='url-text--secondary tooltip'>@channel<span
-      className="tooltip-text">Select a channel below</span> /</span>;
+      className='tooltip-text'>Select a channel below</span> /</span>;
   }
   return (
-    <span id="url-no-channel-placeholder" className="url-text--secondary tooltip">xyz<span className="tooltip-text">This will be a random id</span> /</span>
+    <span id='url-no-channel-placeholder' className='url-text--secondary tooltip'>xyz<span className='tooltip-text'>This will be a random id</span> /</span>
   );
 }
 

react/containers/AssetTitle/index.js

@@ -3,9 +3,7 @@ import View from './view';
 import { selectAsset } from 'selectors/show';
 
 const mapStateToProps = ({ show }) => {
-  // select title
   const { claimData: { title } } = selectAsset(show);
-  //  return props
   return {
     title,
   };

react/containers/AssetTitle/view.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const AssetTitle = ({ title }) => {
   return (
     <div>
-      <span className="text--large">{title}</span>
+      <span className='text--large'>{title}</span>
     </div>
   );
 };

react/containers/ChannelClaimsDisplay/view.jsx

@@ -24,7 +24,7 @@ class ChannelClaimsDisplay extends React.Component {
   render () {
     const { channel: { claimsData: { claims, currentPage, totalPages } } } = this.props;
     return (
-      <div className="row row--tall">
+      <div className='row row--tall'>
         {(claims.length > 0) ? (
           <div>
             {claims.map((claim, index) => <AssetPreview

react/containers/NavBar/view.jsx

@@ -54,15 +54,15 @@ class NavBar extends React.Component {
   }
   render () {
     return (
-      <div className="row row--wide nav-bar">
+      <div className='row row--wide nav-bar'>
-        <div className="row row--padded row--short flex-container--row flex-container--space-between-center">
+        <div className='row row--padded row--short flex-container--row flex-container--space-between-center'>
           <Logo />
-          <div className="nav-bar--center">
+          <div className='nav-bar--center'>
-            <span className="nav-bar-tagline">Open-source, decentralized image and video sharing.</span>
+            <span className='nav-bar-tagline'>Open-source, decentralized image and video sharing.</span>
           </div>
-          <div className="nav-bar--right">
+          <div className='nav-bar--right'>
-            <NavLink className="nav-bar-link link--nav" activeClassName="link--nav-active" to="/" exact={true}>Publish</NavLink>
+            <NavLink className='nav-bar-link link--nav' activeClassName='link--nav-active' to='/' exact>Publish</NavLink>
-            <NavLink className="nav-bar-link link--nav"  activeClassName="link--nav-active" to="/about">About</NavLink>
+            <NavLink className='nav-bar-link link--nav'  activeClassName='link--nav-active' to='/about'>About</NavLink>
             { this.props.channelName ? (
               <NavBarChannelDropdown
                 channelName={this.props.channelName}
@@ -72,7 +72,7 @@ class NavBar extends React.Component {
                 LOGOUT={LOGOUT}
               />
             ) : (
-              <NavLink id="nav-bar-login-link" className="nav-bar-link link--nav" activeClassName="link--nav-active" to="/login">Channel</NavLink>
+              <NavLink id='nav-bar-login-link' className='nav-bar-link link--nav' activeClassName='link--nav-active' to='/login'>Channel</NavLink>
             )}
           </div>
         </div>

react/containers/PublishMetadataInputs/view.jsx

@@ -24,48 +24,48 @@ class PublishMetadataInputs extends React.Component {
   }
   render () {
     return (
-      <div id="publish-details" className="row row--padded row--no-top row--wide">
+      <div id='publish-details' className='row row--padded row--no-top row--wide'>
         {this.props.showMetadataInputs && (
           <div>
-          <div className="row row--no-top">
+            <div className='row row--no-top'>
-            <div className="column column--3 column--med-10 align-content-top">
+              <div className='column column--3 column--med-10 align-content-top'>
-              <label htmlFor="publish-license" className="label">Description:</label>
+                <label htmlFor='publish-license' className='label'>Description:</label>
-            </div><div className="column column--7 column--sml-10">
+              </div><div className='column column--7 column--sml-10'>
                 <ExpandingTextArea
-                id="publish-description"
+                  id='publish-description'
-                className="textarea textarea--primary textarea--full-width"
+                  className='textarea textarea--primary textarea--full-width'
                   rows={1}
                   maxLength={2000}
                   style={{ maxHeight: 200 }}
-                name="description"
+                  name='description'
-                placeholder="Optional description"
+                  placeholder='Optional description'
                   value={this.props.description}
                   onChange={this.handleInput} />
               </div>
             </div>
 
-          <div className="row row--no-top">
+            <div className='row row--no-top'>
-            <div className="column column--3 column--med-10">
+              <div className='column column--3 column--med-10'>
-              <label htmlFor="publish-license" className="label">License:</label>
+                <label htmlFor='publish-license' className='label'>License:</label>
-            </div><div className="column column--7 column--sml-10">
+              </div><div className='column column--7 column--sml-10'>
-              <select type="text" name="license" id="publish-license" className="select select--primary" onChange={this.handleSelect}>
+                <select type='text' name='license' id='publish-license' className='select select--primary' onChange={this.handleSelect}>
-                <option value=" ">Unspecified</option>
+                  <option value=' '>Unspecified</option>
-                <option value="Public Domain">Public Domain</option>
+                  <option value='Public Domain'>Public Domain</option>
-                <option value="Creative Commons">Creative Commons</option>
+                  <option value='Creative Commons'>Creative Commons</option>
                 </select>
               </div>
             </div>
 
-          <div className="row row--no-top">
+            <div className='row row--no-top'>
-            <div className="column column--3">
+              <div className='column column--3'>
-              <label htmlFor="publish-nsfw" className="label">Mature:</label>
+                <label htmlFor='publish-nsfw' className='label'>Mature:</label>
-            </div><div className="column column--7">
+              </div><div className='column column--7'>
-              <input className="input-checkbox" type="checkbox" id="publish-nsfw" name="nsfw" value={this.props.nsfw} onChange={this.handleInput} />
+                <input className='input-checkbox' type='checkbox' id='publish-nsfw' name='nsfw' value={this.props.nsfw} onChange={this.handleInput} />
               </div>
             </div>
           </div>
         )}
-        <button className="button--secondary" onClick={this.toggleShowInputs}>{this.props.showMetadataInputs ? 'less' : 'more'}</button>
+        <button className='button--secondary' onClick={this.toggleShowInputs}>{this.props.showMetadataInputs ? 'less' : 'more'}</button>
       </div>
     );
   }

react/containers/PublishTitleInput/view.jsx

@@ -12,7 +12,7 @@ class PublishTitleInput extends React.Component {
   }
   render () {
     return (
-      <input type="text" id="publish-title" className="input-text text--large input-text--full-width" name="title" placeholder="Give your post a title..." onChange={this.handleInput} value={this.props.title}/>
+      <input type='text' id='publish-title' className='input-text text--large input-text--full-width' name='title' placeholder='Give your post a title...' onChange={this.handleInput} value={this.props.title} />
     );
   }
 }

react/containers/ShowAssetDetails/view.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import SEO from 'components/SEO';
 import NavBar from 'containers/NavBar';
 import ErrorPage from 'components/ErrorPage';
-import AssetTitle from 'components/AssetTitle';
+import AssetTitle from 'containers/AssetTitle';
-import AssetDisplay from 'components/AssetDisplay';
+import AssetDisplay from 'containers/AssetDisplay';
-import AssetInfo from 'components/AssetInfo';
+import AssetInfo from 'containers/AssetInfo';
 
 class ShowAssetDetails extends React.Component {
   render () {

react/containers/ShowAssetLite/view.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import SEO from 'components/SEO';
 import { Link } from 'react-router-dom';
-import AssetDisplay from 'components/AssetDisplay';
+import AssetDisplay from 'containers/AssetDisplay';
 
 class ShowLite extends React.Component {
   render () {

react/containers/ShowPage/view.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ErrorPage from 'components/ErrorPage';
-import ShowAssetLite from 'components/ShowAssetLite';
+import ShowAssetLite from 'containers/ShowAssetLite';
-import ShowAssetDetails from 'components/ShowAssetDetails';
+import ShowAssetDetails from 'containers/ShowAssetDetails';
-import ShowChannel from 'components/ShowChannel';
+import ShowChannel from 'containers/ShowChannel';
 
 import { CHANNEL, ASSET_LITE, ASSET_DETAILS } from 'constants/show_request_types';