lint it

2026-07-05 08:28:41 +03:00 · 2019-08-15 11:24:54 +01:00
parent f4350ba533
commit a0d224ca9c
8 changed files with 121 additions and 124 deletions
--- a/src/components/InfoPopup.jsx
+++ b/src/components/InfoPopup.jsx
@@ -24,9 +24,9 @@ export default ({ ui, app, methods }) => {
      <style>{`.svg-demo { max-width: 30px } .first { fill: ${firstFill} } .second { fill: ${secondFill} } .demo-text { font-size: 9pt; color: white; font-weight:900 }`}</style>,
      <svg viewBox='0 0 30 30' className='svg-demo'>
        <g className='location demo-element' transform='translate(15,15)'>
-          <path className="location-event-marker first" id="arc_0" d="M 10 0 A 10 10 0 0 1 -10 1.2246467991473533e-15 L 0 0  L 10 0 Z" />
-          <path class="location-event-marker second" id="arc_1" d="M -10 1.2246467991473533e-15 A 10 10 0 0 1 10 -2.4492935982947065e-15 L 0 0  L -10 1.2246467991473533e-15 Z" />
-          <text class="location-count demo-text" dx="-4" dy="4">2</text>
+          <path className='location-event-marker first' id='arc_0' d='M 10 0 A 10 10 0 0 1 -10 1.2246467991473533e-15 L 0 0  L 10 0 Z' />
+          <path class='location-event-marker second' id='arc_1' d='M -10 1.2246467991473533e-15 A 10 10 0 0 1 10 -2.4492935982947065e-15 L 0 0  L -10 1.2246467991473533e-15 Z' />
+          <text class='location-count demo-text' dx='-4' dy='4'>2</text>
        </g>
      </svg>
    ]
@@ -61,7 +61,6 @@ export default ({ ui, app, methods }) => {
  }

  function renderView2DLegend () {
-    const categories = Object.keys(ui.style.categories).filter(label => label !== 'default')
    return (
      <div className={`infopopup ${(app.flags.isInfopopup) ? '' : 'hidden'}`}>
        <div className='legend-header'>
@@ -83,7 +82,7 @@ export default ({ ui, app, methods }) => {
            </div>
          </div>
        </div>
-        <br/>
+        <br />
        <div>
          <p>In narrative mode, arrows indicate physical movement between two events.</p>
        </div>
@@ -91,7 +90,7 @@ export default ({ ui, app, methods }) => {
        {
          ui.style.arrows ? (

-            Object.keys(ui.style.arrows).map( arrowName => (
+            Object.keys(ui.style.arrows).map(arrowName => (
              <div className='legend-section'>
                {renderArrow(ui.style.arrows[arrowName])}
                <div className='legend-labels'>
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -52,9 +52,9 @@ class Map extends React.Component {
        if (eventPoint !== null && eventPoint.latitude && eventPoint.longitude) {
          // this.map.setView([eventPoint.latitude, eventPoint.longitude])
          this.map.setView([eventPoint.latitude, eventPoint.longitude], this.map.getZoom(), {
-            "animate":true,
-            "pan":{
-              "duration": 0.7
+            'animate': true,
+            'pan': {
+              'duration': 0.7
            }
          })
        }
--- a/src/components/Overlay/Media.js
+++ b/src/components/Overlay/Media.js
@@ -29,64 +29,64 @@ class SourceOverlay extends React.Component {
  }

  switchToTrans (idx) {
-    this.setState({ transIdx: idx });
+    this.setState({ transIdx: idx })
  }

-  renderContent(source) {
+  renderContent (source) {
    const { url, title, paths, date, type, desc, poster } = source
    const shortenedTitle = title.substring(0, 100)
    return (
      <React.Fragment>
-      <div className='mo-banner'>
-        <div className='mo-banner-close' onClick={this.props.onCancel}>
-          <i className='material-icons'>close</i>
-        </div>
-
-        <h3 className='mo-banner-content'>{shortenedTitle}</h3>
-
-        <div className='mo-banner-trans'>
-          {this.props.translations ? this.props.translations.map((trans, idx) => (
-            this.state.transIdx !== idx + 1 ? (
-              <div className='mo-trans' onClick={() => this.switchToTrans(idx + 1)}>{trans.code}</div>
-            ) : (
-              <div className='mo-trans' onClick={() => this.switchToTrans(0)}>EN</div>
-            )
-          )) : null}
-        </div>
-      </div>
-      <div className='mo-container' onClick={e => e.stopPropagation()}>
-        <div className='mo-media-container'>
-          <Content media={paths.map(p => selectTypeFromPathWithPoster(p, poster))} viewmediaIdx={this.state.mediaIdx} />
-        </div>
-      </div>
-
-      <div className='mo-footer'>
-        <Controls paths={paths} viewmediaIdx={this.state.mediaIdx} onShiftHandler={this.onShiftGallery} />
-
-        <div className='mo-meta-container'>
-          <div className='mo-box-title'>
-            <div>{desc}</div>
+        <div className='mo-banner'>
+          <div className='mo-banner-close' onClick={this.props.onCancel}>
+            <i className='material-icons'>close</i>
          </div>

-          {(type || date || url) ? (
-            <div className='mo-box'>
-              <div>
-                {type ? <h4>Evidence type</h4> : null}
-                {type ? <p><i className='material-icons left'>perm_media</i>{type}</p> : null}
-              </div>
-              <div>
-                {date ? <h4>Date Published</h4> : null}
-                {date ? <p><i className='material-icons left'>today</i>{date}</p> : null}
-              </div>
-              <div>
-                {url ? <h4>Link</h4> : null}
-                {url ? <span><i className='material-icons left'>link</i><a href={url} target='_blank'>Link to original URL</a></span> : null}
-              </div>
-            </div>
-          ) : null}
+          <h3 className='mo-banner-content'>{shortenedTitle}</h3>
+
+          <div className='mo-banner-trans'>
+            {this.props.translations ? this.props.translations.map((trans, idx) => (
+              this.state.transIdx !== idx + 1 ? (
+                <div className='mo-trans' onClick={() => this.switchToTrans(idx + 1)}>{trans.code}</div>
+              ) : (
+                <div className='mo-trans' onClick={() => this.switchToTrans(0)}>EN</div>
+              )
+            )) : null}
+          </div>
        </div>
-      </div>
-    </React.Fragment>
+        <div className='mo-container' onClick={e => e.stopPropagation()}>
+          <div className='mo-media-container'>
+            <Content media={paths.map(p => selectTypeFromPathWithPoster(p, poster))} viewmediaIdx={this.state.mediaIdx} />
+          </div>
+        </div>
+
+        <div className='mo-footer'>
+          <Controls paths={paths} viewmediaIdx={this.state.mediaIdx} onShiftHandler={this.onShiftGallery} />
+
+          <div className='mo-meta-container'>
+            <div className='mo-box-title'>
+              <div>{desc}</div>
+            </div>
+
+            {(type || date || url) ? (
+              <div className='mo-box'>
+                <div>
+                  {type ? <h4>Evidence type</h4> : null}
+                  {type ? <p><i className='material-icons left'>perm_media</i>{type}</p> : null}
+                </div>
+                <div>
+                  {date ? <h4>Date Published</h4> : null}
+                  {date ? <p><i className='material-icons left'>today</i>{date}</p> : null}
+                </div>
+                <div>
+                  {url ? <h4>Link</h4> : null}
+                  {url ? <span><i className='material-icons left'>link</i><a href={url} target='_blank'>Link to original URL</a></span> : null}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </React.Fragment>
    )
  }

@@ -94,12 +94,11 @@ class SourceOverlay extends React.Component {
    if (typeof (this.props.source) !== 'object') {
      return this.renderError()
    }
-    const { url, title, paths, date, type, desc, poster } = this.props.source
    const { transIdx } = this.state

    return (
      <div className={`mo-overlay ${this.props.opaque ? 'opaque' : ''}`}>
-        {this.renderContent(transIdx === 0 ? this.props.source : this.props.translations[transIdx-1])}
+        {this.renderContent(transIdx === 0 ? this.props.source : this.props.translations[transIdx - 1])}
      </div>
    )
  }
--- a/src/components/presentational/Map/Events.jsx
+++ b/src/components/presentational/Map/Events.jsx
@@ -9,16 +9,16 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
    return [x, y]
  }

-  function renderBorder() {
+  function renderBorder () {
    return (
      <React.Fragment>
        {<circle
          class='event-hover'
-          cx="0"
-          cy="0"
-          r="10"
+          cx='0'
+          cy='0'
+          r='10'
          stroke={colors.primaryHighlight}
-          fill-opacity="0.0"
+          fill-opacity='0.0'
        />}
      </React.Fragment>
    )
@@ -110,20 +110,20 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
    const customStyles = styleLocation ? styleLocation(location) : null
    const extraRender = (customStyles) ? customStyles[1] : null

-    const isSelected = selected.reduce( (acc, event) => {
-      return acc || (event.latitude == location.latitude && event.longitude == location.longitude)
+    const isSelected = selected.reduce((acc, event) => {
+      return acc || (event.latitude === location.latitude && event.longitude === location.longitude)
    }, false)

    return (
-        <g
-          className={`location-event ${narrative ? 'no-hover' : ''}`}
-          transform={`translate(${x}, ${y})`}
-          onClick={(!narrative) ? () => onSelect(location.events) : null}
-        >
-          {renderLocationSlicesByCategory(location)}
-          {extraRender ? extraRender() : null}
-          {isSelected ? null : renderBorder()}
-        </g>
+      <g
+        className={`location-event ${narrative ? 'no-hover' : ''}`}
+        transform={`translate(${x}, ${y})`}
+        onClick={(!narrative) ? () => onSelect(location.events) : null}
+      >
+        {renderLocationSlicesByCategory(location)}
+        {extraRender ? extraRender() : null}
+        {isSelected ? null : renderBorder()}
+      </g>
    )
  }

--- a/src/components/presentational/Timeline/ZoomControls.js
+++ b/src/components/presentational/Timeline/ZoomControls.js
@@ -1,8 +1,8 @@
 import React from 'react'

-function zoomIsActive(duration, extent) {
+function zoomIsActive (duration, extent) {
  if (duration > 1570000 && extent > 1570000) {
-    return true;
+    return true
  }
  return duration === extent
 }
--- a/src/components/presentational/covers/TemplateCover.js
+++ b/src/components/presentational/covers/TemplateCover.js
@@ -1,11 +1,10 @@
 import React from 'react'
-import { connect } from "react-redux"
+import { connect } from 'react-redux'
 import MediaOverlay from '../../Overlay/Media'

 const ReactMarkdown = require('react-markdown')

 const MEDIA_HIDDEN = -2
-const MEDIA_HOWTO = -1

 class TemplateCover extends React.Component {
  constructor (props) {
@@ -15,10 +14,10 @@ class TemplateCover extends React.Component {
    }
  }

-  getVideo(index, headerEndIndex) {
-    if(index < headerEndIndex) {
+  getVideo (index, headerEndIndex) {
+    if (index < headerEndIndex) {
      return this.props.cover.headerVideos[index]
-    } else if(index >= 0) {
+    } else if (index >= 0) {
      return this.props.cover.videos[index]
    } else {
      return null
@@ -30,7 +29,7 @@ class TemplateCover extends React.Component {
    var video = this.getVideo(this.state.video, headerVideos.length || 0)
    return (
      <div className='default-cover-container'>
-        <div className="cover-content">
+        <div className='cover-content'>
          {
            this.props.cover.bgVideo ? (
              <div className={`fullscreen-bg ${!this.props.showing ? 'hidden' : ''}`}>
@@ -41,7 +40,7 @@ class TemplateCover extends React.Component {
                  preload='auto'
                  className='fullscreen-bg__video'
                >
-                <source src={this.props.cover.bgVideo} type='video/mp4' />
+                  <source src={this.props.cover.bgVideo} type='video/mp4' />
                </video>
              </div>
            ) : null
@@ -55,17 +54,17 @@ class TemplateCover extends React.Component {
          }
          <hr />
          <div className='hero thin'>
-          {
-            headerVideos ? (
-              <div className='row'>
-                { headerVideos.slice(0,2).map( (media, index) => (
-                  <div className='cell plain' onClick={() => this.setState({ video: index })}>
-                    {media.buttonTitle}
-                  </div>
-                ) ) }
-              </div>
-            ) : null
-          }
+            {
+              headerVideos ? (
+                <div className='row'>
+                  { headerVideos.slice(0, 2).map((media, index) => (
+                    <div className='cell plain' onClick={() => this.setState({ video: index })}>
+                      {media.buttonTitle}
+                    </div>
+                  )) }
+                </div>
+              ) : null
+            }
            <div className='row'>
              <div className='cell yellow' onClick={this.props.showAppHandler}>
                EXPLORE
@@ -80,8 +79,8 @@ class TemplateCover extends React.Component {
              <div className='hero'>
                <div className='row'>
                  {/* NOTE: only take first four videos, drop any others for style reasons */}
-                  { this.props.cover.videos.slice(0,4).map( (media, index) => (
-                    <div className='cell small' onClick={() => this.setState({ video: index + (headerVideos.length || 0)})} >
+                  { this.props.cover.videos.slice(0, 4).map((media, index) => (
+                    <div className='cell small' onClick={() => this.setState({ video: index + (headerVideos.length || 0) })} >
                      {media.buttonTitle}<br />{media.buttonSubtitle}
                    </div>
                  )) }
@@ -92,29 +91,29 @@ class TemplateCover extends React.Component {
        </div>

        {
-          this.state.video != MEDIA_HIDDEN ? (
-          <MediaOverlay
-            opaque
-            source={
-              {
-              title: video.title,
-              desc: video.desc,
-              paths: [video.file],
-              poster: video.poster
-            }}
-            translations={video.translations}
-            onCancel={() => this.setState({ video: MEDIA_HIDDEN })}
-          />
-        ) : null }
+          this.state.video !== MEDIA_HIDDEN ? (
+            <MediaOverlay
+              opaque
+              source={
+                {
+                  title: video.title,
+                  desc: video.desc,
+                  paths: [video.file],
+                  poster: video.poster
+                }}
+              translations={video.translations}
+              onCancel={() => this.setState({ video: MEDIA_HIDDEN })}
+            />
+          ) : null }
      </div>
    )
  }
 }

-function mapStateToProps(state) {
+function mapStateToProps (state) {
  return {
-    cover : state.app.cover
+    cover: state.app.cover
  }
 }

-export default connect(mapStateToProps) (TemplateCover);
+export default connect(mapStateToProps)(TemplateCover)