fix/enable-react-jsx-curly-spacing

front/.eslintrc.json

@@ -26,6 +26,7 @@
     "no-multiple-empty-lines": "error",
     "no-unused-vars": ["error", { "argsIgnorePattern": "_" }],
     "object-curly-spacing": ["error", "always"],
+    "react/jsx-curly-spacing": ["error", { "when": "always" }],
     "react/prop-types": "off",
     "sort-imports": ["error", { "ignoreCase": true }],
     "sort-keys": "error",

front/src/Component/App.js

@@ -11,7 +11,7 @@ import TextEditor from './Container/TextEditor/TextEditor'
 const App = ({
   store,
 }) =>
-  <Provider store={store}>
+  <Provider store={ store }>
     <main>
       <BrightcovePlayer/>
       <MediaPicker/>

front/src/Component/Container/Tweet/Tweet.js

@@ -33,7 +33,7 @@ const didMount = ({
 const View = ({
   uid,
 }) =>
-  <div id={`tweet-${uid}`}></div>
+  <div id={ `tweet-${ uid }` }></div>
 
 // lifecycles :: React.Component -> React.Component
 const lifecycles = compose(

front/src/Component/View/BrightcovePlayer/BrightcoveVideo.js

@@ -20,30 +20,30 @@ const BrightcoveVideo = ({
    */
   <div
     className="video-wrapper knp-rendered-video"
-    key={uniqid(videoId)}
-    data-video-id={videoId}
-    contentEditable={false}
+    key={ uniqid(videoId) }
+    data-video-id={ videoId }
+    contentEditable={ false }
   >
-    {editable &&
+    { editable &&
       <p
         className="knp-btn icomoon-font replace-video"
-        onClick={action}
+        onClick={ action }
       >p</p>
     }
-    {isReady &&
+    { isReady &&
       <video
         className="video-js"
         data-embed="default"
-        data-video-id={videoId}
-        data-player={playerId}
-        data-account={accountId}
-        data-application-id={true}
-        controls={true}
-        autoPlay={false}
+        data-video-id={ videoId }
+        data-player={ playerId }
+        data-account={ accountId }
+        data-application-id={ true }
+        controls={ true }
+        autoPlay={ false }
       ></video>
     }
-    {!isNil(name) &&
-      <figcaption>{name}</figcaption>
+    { !isNil(name) &&
+      <figcaption>{ name }</figcaption>
     }
   </div>
 

front/src/Component/View/List/NoResult.js

@@ -6,20 +6,20 @@ import React from 'react'
 
 // NoResult :: Props -> React.Component
 const NoResult = ({
-  resource,
+  children,
   collection,
   isLoading,
-  children,
+  resource,
 }) =>
   <React.Fragment>
-    {(!isLoading && isEmpty(collection)) &&
+    { (!isLoading && isEmpty(collection)) &&
       <div className="message is-info">
         <div className="message-body">
-          There is no {resource} matching your search criterias.
+          There is no { resource } matching your search criterias.
         </div>
       </div>
     }
-    {!isEmpty(collection) && children}
+    { !isEmpty(collection) && children }
   </React.Fragment>
 
 export default NoResult;

front/src/Component/View/MediaPicker/ImagePicker.js

@@ -19,28 +19,28 @@ const ImagePicker = ({
   <div data-is="image-picker">
     {/* scroll left */}
     <p
-      onClick={scrollLeft}
-      className={`btn-knp left is-pulled-left is-hidden-mobile ${page > 1 ? 'show' : ''}`}
+      onClick={ scrollLeft }
+      className={ `btn-knp left is-pulled-left is-hidden-mobile ${ page > 1 ? 'show' : '' }` }
     >
       <span className="icomoon-font">l</span>
     </p>
     {/* scroll right */}
     <p
-      onClick={scrollRight}
-      className={`btn-knp right is-pulled-right is-hidden-mobile ${containsTenItems(images) ? 'show' : ''}`}
+      onClick={ scrollRight }
+      className={ `btn-knp right is-pulled-right is-hidden-mobile ${ containsTenItems(images) ? 'show' : '' }` }
     >
       <span className="icomoon-font">r</span>
     </p>
 
     {/* search result container */}
     <div className="images">
-      <NoResult resource="image" collection={images} isLoading={isFetching}>
+      <NoResult resource="image" collection={ images } isLoading={ isFetching }>
         <div className="images-wrapper">
           <div className="row">
-            {renderImages(images.slice(0, 5), pickImage, domain, extra)}
+            { renderImages(images.slice(0, 5), pickImage, domain, extra) }
           </div>
           <div className="row">
-            {renderImages(images.slice(5, 10), pickImage, domain, extra)}
+            { renderImages(images.slice(5, 10), pickImage, domain, extra) }
           </div>
         </div>
       </NoResult>
@@ -49,11 +49,11 @@ const ImagePicker = ({
 
 // renderImages :: ([Image], Function, String, Object) -> React.Component
 const renderImages = (images, pickImage, domain, extra) => images.map(image =>
-  <div key={image.id} className="image">
+  <div key={ image.id } className="image">
     <img
-      onClick={() => pickImage(image.id, domain, extra)}
-      src={image.href}
-      alt={image.legend}
+      onClick={ () => pickImage(image.id, domain, extra) }
+      src={ image.href }
+      alt={ image.legend }
     />
   </div>,
 )

front/src/Component/View/MediaPicker/MediaPicker.js

@@ -5,40 +5,40 @@ import VideoPicker from '../../Container/MediaPicker/VideoPicker'
 
 // MediaPicker :: Props -> React.Component
 const MediaPicker = ({
-  isOpened,
   close,
   isFetchingImages,
   isFetchingVideos,
   isImagePickerOpened,
+  isOpened,
   isVideoPickerOpened,
+  openImagePicker,
   searchImages,
   searchVideos,
-  openImagePicker,
 }) =>
-  <div data-is="media-picker" className={`${!isOpened ? 'closed' : ''}`}>
+  <div data-is="media-picker" className={ `${ !isOpened ? 'closed' : '' }` }>
     <div className="search-images">
-      <form onSubmit={e => e.preventDefault()}>
+      <form onSubmit={ e => e.preventDefault() }>
         { isImagePickerOpened &&
           <div className="field">
-            <div className={`control has-icons-left ${isFetchingImages ? 'is-loading' : ''}`}>
-              <input className="input" type="text" onKeyUp={searchImages} placeholder="Search images (Estonia)"/>
+            <div className={ `control has-icons-left ${ isFetchingImages ? 'is-loading' : '' }` }>
+              <input className="input" type="text" onKeyUp={ searchImages } placeholder="Search images (Estonia)"/>
               <span className="icomoon-font icon is-small is-left">s</span>
             </div>
           </div>
         }
         { isVideoPickerOpened &&
           <div className="field">
-            <div className={`control has-icons-left ${isFetchingVideos ? 'is-loading' : ''}`}>
-              <input className="input" type="text" onKeyUp={searchVideos} placeholder="Search videos"/>
+            <div className={ `control has-icons-left ${ isFetchingVideos ? 'is-loading' : '' }` }>
+              <input className="input" type="text" onKeyUp={ searchVideos } placeholder="Search videos"/>
               <span className="icomoon-font icon is-small is-left">s</span>
             </div>
           </div>
         }
         <ul className="picker-buttons">
           <li>
             <p
-              className={`image-mode btn-knp ${isImagePickerOpened ? 'active' : ''}`}
-              onClick={e => isImagePickerOpened ? e.preventDefault() : openImagePicker()}
+              className={ `image-mode btn-knp ${isImagePickerOpened ? 'active' : '' }` }
+              onClick={ e => isImagePickerOpened ? e.preventDefault() : openImagePicker() }
             ><span className="icomoon-font">c</span></p>
           </li>
           {/* @TODO fix this features before re-enabling
@@ -54,10 +54,10 @@ const MediaPicker = ({
     </div>
 
     { isImagePickerOpened && <ImagePicker/> }
-    { isVideoPickerOpened && <VideoPicker/>}
+    { isVideoPickerOpened && <VideoPicker/> }
 
     <p className="btn-knp close">
-      <span className="icomoon-font" onClick={close}>e</span>
+      <span className="icomoon-font" onClick={ close }>e</span>
     </p>
   </div>
 

front/src/Component/View/MediaPicker/VideoPicker.js

@@ -14,22 +14,22 @@ import React from 'react'
 
 // VideoPicker :: Props -> React.Component
 const VideoPicker = ({
-  videos,
+  page,
   scrollLeft,
   scrollRight,
-  page,
+  videos,
   ...restProps
 }) =>
   <div data-is="video-picker">
     {/* scroll left */}
     <p
-      onClick={scrollLeft}
-      className={`btn-knp left is-pulled-left icomoon-font ${page > 1 ? 'show' : ''}`}
+      onClick={ scrollLeft }
+      className={ `btn-knp left is-pulled-left icomoon-font ${ page > 1 ? 'show' : '' }` }
     >l</p>
     {/* scroll right */}
     <p
-      onClick={scrollRight}
-      className={`btn-knp right is-pulled-right icomoon-font ${containsTenItems(videos) ? 'show' : ''}`}
+      onClick={ scrollRight }
+      className={ `btn-knp right is-pulled-right icomoon-font ${ containsTenItems(videos) ? 'show' : '' }` }
     >r</p>
 
     {/* search result container */}
@@ -42,10 +42,10 @@ const VideoPicker = ({
         </div> :
         <div className="videos-wrapper">
           <div className="columns">
-            {compose(renderVideos(restProps), nth(0), splitMedias)(videos)}
+            { compose(renderVideos(restProps), nth(0), splitMedias)(videos) }
           </div>
           <div className="columns">
-            {compose(renderVideos(restProps), nth(1), splitMedias)(videos)}
+            { compose(renderVideos(restProps), nth(1), splitMedias)(videos) }
           </div>
         </div>
       }
@@ -54,12 +54,12 @@ const VideoPicker = ({
 
 // renderVideos :: Props -> [Video] -> React.Component
 const renderVideos = props => map(video =>
-  <div key={video.id} className="column is-one-fifth video">
+  <div key={ video.id } className="column is-one-fifth video">
     <img
-      title={video.name}
-      onClick={() => props.pickVideo(video.id, props.domain, props.extra)}
-      src={video.poster}
-      alt={video.name}
+      title={ video.name }
+      onClick={ () => props.pickVideo(video.id, props.domain, props.extra) }
+      src={ video.poster }
+      alt={ video.name }
     />
   </div>,
 )

front/src/Component/View/TextEditor/InsertTweet.js

@@ -5,14 +5,14 @@ const InsertTweet = ({
   fetching = false,
   submit,
 }) =>
-  <form className="insert-tweet" onSubmit={submit}>
-    <div className={`control ${fetching ? 'is-loading' : ''}`}>
+  <form className="insert-tweet" onSubmit={ submit }>
+    <div className={ `control ${ fetching ? 'is-loading' : '' }` }>
       <input
         className="input"
         type="url"
         name="tweetLink"
         placeholder="Tweet link"
-        autoFocus={true}
+        autoFocus={ true }
       />
     </div>
   </form>

front/src/Component/View/TextEditor/InsertYoutubeVideo.js

@@ -4,14 +4,14 @@ import React from 'react'
 const InsertYoutubeVideo = ({
   submit,
 }) =>
-  <form className="insert-youtube" onSubmit={submit}>
+  <form className="insert-youtube" onSubmit={ submit }>
     <div className="control">
       <input
         className="input"
         type="url"
         name="youtubeLink"
         placeholder="Youtube link"
-        autoFocus={true}
+        autoFocus={ true }
       />
     </div>
   </form>

front/src/Component/View/TextEditor/ParagraphToolbox.js

@@ -6,26 +6,26 @@ import React from 'react'
 // ParagraphToolbox :: Props -> React.Component
 const ParagraphToolbox = ({
   closeInsertTweet,
+  closeInsertYoutubeVideo,
   editorName,
   insertTweetOpened = false,
+  insertYoutubeVideoOpened = false,
   isVisible = false,
+  mediaPickerOpened,
   openInsertTweet,
+  openInsertYoutubeVideo,
   openMediaPicker,
   top = 0,
-  insertYoutubeVideoOpened = false,
-  openInsertYoutubeVideo,
-  closeInsertYoutubeVideo,
-  mediaPickerOpened,
 }) =>
   <aside
-    className={`paragraph-toolbox ${isVisible ? 'visible' : ''}`}
-    style={{ top: top - 5 + 'px' }}
+    className={ `paragraph-toolbox ${ isVisible ? 'visible' : '' }` }
+    style={ { top: top - 5 + 'px' } }
   >
     <ul>
       <li>
         <button
-          className={`btn-knp icomoon-font ${mediaPickerOpened ? 'active' : ''}`}
-          onClick={() => openMediaPicker('TEXT_EDITOR', { editorName })}
+          className={ `btn-knp icomoon-font ${ mediaPickerOpened ? 'active' : '' }` }
+          onClick={ () => openMediaPicker('TEXT_EDITOR', { editorName }) }
         >é</button>
       </li>
       {/* @TODO fix these features before re-enabling this
@@ -38,19 +38,19 @@ const ParagraphToolbox = ({
       */}
       <li>
         <button
-          className={`btn-knp icomoon-font ${insertTweetOpened ? 'active' : ''}`}
-          onClick={ insertTweetOpened ? closeInsertTweet : openInsertTweet}
+          className={ `btn-knp icomoon-font ${ insertTweetOpened ? 'active' : '' }` }
+          onClick={ insertTweetOpened ? closeInsertTweet : openInsertTweet }
         >0</button>
       </li>
       <li>
         <button
-          className={`btn-knp icomoon-font ${insertYoutubeVideoOpened ? 'active' : ''}`}
+          className={ `btn-knp icomoon-font ${ insertYoutubeVideoOpened ? 'active' : '' }` }
           onClick={ insertYoutubeVideoOpened ? closeInsertYoutubeVideo: openInsertYoutubeVideo }
         >Y</button>
       </li>
     </ul>
-    { insertTweetOpened && <InsertTweet editorName={editorName} /> }
-    { insertYoutubeVideoOpened && <InsertYoutubeVideo editorName={editorName} /> }
+    { insertTweetOpened && <InsertTweet editorName={ editorName } /> }
+    { insertYoutubeVideoOpened && <InsertYoutubeVideo editorName={ editorName } /> }
   </aside>
 
 export default ParagraphToolbox;