fix deprecation warnings

package.json

@@ -47,7 +47,6 @@
     "raven-js": "^3.16.0",
     "react": "~16.14",
     "react-dom": "~16.14",
-    "react-emotion": "^8.0.12",
     "react-infinite": "^0.11.0",
     "react-list": "^0.8.6",
     "react-measure": "^2.0.2",

src/CanExplorer.js

@@ -23,7 +23,6 @@ import SaveDbcModal from './components/SaveDbcModal';
 import LoadDbcModal from './components/LoadDbcModal';
 import debounce from './utils/debounce';
 import EditMessageModal from './components/EditMessageModal';
-import LoadingBar from './components/LoadingBar';
 import {
   persistDbc,
   fetchPersistedDbc,
@@ -75,7 +74,6 @@ export default class CanExplorer extends Component {
       seekTime: props.seekTime || 0,
       seekIndex: 0,
       maxByteStateChangeCount: 0,
-      isLoading: true,
       partsLoaded: 0,
       spawnWorkerHash: null,
       attemptingPandaConnection: false,
@@ -400,9 +398,6 @@ export default class CanExplorer extends Component {
   spawnWorker(options) {
     let { currentParts, currentWorkers, loadingParts } = this.state;
     console.log('Checking worker for', currentParts);
-    if (!this.state.isLoading) {
-      this.setState({ isLoading: true });
-    }
     if (loadingParts.length > 1) {
       // only 2 workers at a time pls
       return;
@@ -427,11 +422,6 @@ export default class CanExplorer extends Component {
         break;
       }
     }
-    if (part === -1) {
-      console.log('Loading complete');
-      this.setState({ isLoading: false });
-      return;
-    }
     console.log('Starting worker for part', part);
     // options is object of {part, prevMsgEntries, spawnWorkerHash, prepend}
     options = options || {};
@@ -1294,9 +1284,6 @@ export default class CanExplorer extends Component {
         id="cabana"
         className={cx({ 'is-showing-modal': this.showingModal() })}
       >
-        {this.state.isLoading ? (
-          <LoadingBar isLoading={this.state.isLoading} />
-        ) : null}
         <div className="cabana-header">
           <a className="cabana-header-logo" href="/">
             Comma Cabana

src/__tests__/components/LoadingBar.test.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import { shallow, mount, render } from 'enzyme';
-import LoadingBar from '../../components/LoadingBar';
-
-test('LoadingBar successfully mounts with minimal default props', () => {
-  const component = shallow(<LoadingBar />);
-  expect(component.exists()).toBe(true);
-});

src/components/AddSignals.js

@@ -131,15 +131,13 @@ export default class AddSignals extends Component {
     return signalStyles;
   }
 
-  componentWillReceiveProps(newProps) {
-    if (newProps.message.address !== this.props.message.address
-      || newProps.selectedMessageKey !== this.props.selectedMessageKey) {
-      const signals = newProps.message.frame ? newProps.message.frame.signals : {};
+  componentDidUpdate(prevProps) {
+    if (prevProps.message.address !== this.props.message.address ||
+      prevProps.selectedMessageKey !== this.props.selectedMessageKey)
+    {
+      const signals = this.props.message.frame ? this.props.message.frame.signals : {};
 
-      this.setState(
-        { signals: this.copySignals(signals) },
-        this.updateSignalStyles
-      );
+      this.setState({ signals: this.copySignals(signals) }, this.updateSignalStyles);
     }
   }
 

src/components/CanGraph.js

@@ -160,35 +160,31 @@ export default class CanGraph extends Component {
     this.view.run();
   }, 250);
 
-  componentWillReceiveProps(nextProps) {
-    if (
-      nextProps.dragPos
-      && JSON.stringify(nextProps.dragPos) !== JSON.stringify(this.props.dragPos)
-    ) {
-      this.updateStyleFromDragPos(nextProps.dragPos);
-    } else if (!nextProps.dragPos && this.state.plotInnerStyle !== null) {
+  componentDidUpdate(prevProps) {
+    if (this.props.dragPos && JSON.stringify(prevProps.dragPos) !== JSON.stringify(this.props.dragPos)) {
+      this.updateStyleFromDragPos(this.props.dragPos);
+    } else if (!this.props.dragPos && this.state.plotInnerStyle !== null) {
       this.setState({ plotInnerStyle: null });
     }
-    if (
-      this.props.messages !== nextProps.messages
-      || this.props.plottedSignal !== nextProps.plottedSignal
-    ) {
-      console.log('Calculating new data!');
-      const data = this.getGraphData(nextProps);
-      // if (
-      //   data.series.length === this.state.data.series.length
-      //   && data.firstRelTime === this.state.data.firstRelTime
-      //   && data.lastRelTime === this.state.data.lastRelTime
-      //   && JSON.stringify(nextProps.signalSpec) === JSON.stringify(this.props.signalSpec)
-      // ) {
-      //   // do nothing, the data didn't *actually* change
-      // } else {
-      console.log('Inserting new data!');
+
+    if (prevProps.messages !== this.props.messages || prevProps.plottedSignal !== this.props.plottedSignal) {
+      const data = this.getGraphData(this.props);
       this.setState({ data });
-      // }
     }
-    if (this.segmentIsNew(nextProps.segment)) {
-      this.setState({ spec: this.getGraphSpec(nextProps) });
+    if (this.segmentIsNew(this.props.segment)) {
+      this.setState({ spec: this.getGraphSpec(this.props) });
+    }
+
+    if (this.view) {
+      if (this.props.segment.length > 0) {
+        // Set segmented domain
+        this.view.signal('segment', this.props.segment);
+      } else {
+        // Reset segment to full domain
+        this.view.signal('segment', 0);
+      }
+      this.view.signal('videoTime', this.props.currentTime);
+      this.view.runAsync();
     }
   }
 
@@ -218,20 +214,6 @@ export default class CanGraph extends Component {
     return false;
   }
 
-  componentDidUpdate(oldProps, oldState) {
-    if (this.view) {
-      if (this.props.segment.length > 0) {
-        // Set segmented domain
-        this.view.signal('segment', this.props.segment);
-      } else {
-        // Reset segment to full domain
-        this.view.signal('segment', 0);
-      }
-      this.view.signal('videoTime', this.props.currentTime);
-      this.view.runAsync();
-    }
-  }
-
   updateStyleFromDragPos({ left, top }) {
     const plotInnerStyle = { ...this.state.plotInnerStyle };
     plotInnerStyle.left = left;

src/components/CanGraphList.js

@@ -116,14 +116,14 @@ export default class CanGraphList extends Component {
     const { draggingSignal, graphToReceiveDrop } = this.state;
     const { messageId, signalUid } = plottedSignals[0];
     const msg = this.props.messages[messageId];
+    if (!this.plotListRef || !msg) {
+      return [];
+    }
+
     const signal = Object.values(msg.frame.signals).find(
       (s) => s.uid === signalUid
     );
 
-    if (!this.plotListRef) {
-      return [];
-    }
-
     const isDragging = draggingSignal.signalUid === signalUid
       && draggingSignal.messageId === messageId;
     const canReceiveGraphDrop = graphToReceiveDrop

src/components/CanLog.js

@@ -38,8 +38,8 @@ export default class CanLog extends Component {
     this.toggleSignalPlot = this.toggleSignalPlot.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.message && !this.props.message) {
+  componentDidUpdate(prevProps) {
+    if (!prevProps.message && this.props.message) {
       this.addDisplayedMessages();
     }
   }

src/components/Explorer.js

@@ -118,73 +118,60 @@ export default class Explorer extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
-    const nextMessage = nextProps.messages[nextProps.selectedMessage];
+  componentDidUpdate(prevProps) {
+    const prevMessage = prevProps.messages[prevProps.selectedMessage];
     const curMessage = this.props.messages[this.props.selectedMessage];
-    let { plottedSignals } = this.state;
 
-    if (Object.keys(nextProps.messages).length === 0 && Object.keys(this.props.messages).length !== 0) {
+    if (Object.keys(prevProps.messages).length === 0 && Object.keys(this.props.messages).length !== 0) {
       this.resetSegment();
     }
-    if (nextMessage && nextMessage.frame && nextMessage !== curMessage) {
-      const nextSignalNames = Object.keys(nextMessage.frame.signals);
 
-      if (nextSignalNames.length === 0) {
+    if (curMessage && curMessage.frame && prevMessage !== curMessage) {
+      if (Object.keys(curMessage.frame.signals).length === 0) {
         this.setState({ shouldShowAddSignal: true });
       }
     }
 
     // remove plottedSignals that no longer exist
-    plottedSignals = plottedSignals
-      .map((plot) => plot.filter(({ messageId, signalUid }, index) => {
-        const messageExists = !!nextProps.messages[messageId];
+    const newPlottedSignals = this.state.plottedSignals
+      .map((plot) => plot.filter(({ messageId, signalUid }) => {
+        const messageExists = Boolean(this.props.messages[messageId]);
         let signalExists = true;
         if (messageExists) {
-          signalExists = Object.values(
-            nextProps.messages[messageId].frame.signals
-          ).some((signal) => signal.uid === signalUid);
+          signalExists = Object.values(this.props.messages[messageId].frame.signals)
+            .some((signal) => signal.uid === signalUid);
         }
 
         return messageExists && signalExists;
       }))
       .filter((plot) => plot.length > 0);
 
-    this.setState({ plottedSignals });
+    if (this.state.plottedSignals.length !== newPlottedSignals.length) {
+      this.setState({ plottedSignals: newPlottedSignals });
+    }
 
-    if (
-      nextProps.selectedMessage
-      && nextProps.selectedMessage !== this.props.selectedMessage
-    ) {
-      // Update segment and seek state
-      // by finding a entry indices
-      // corresponding to old message segment/seek times.
+    if (this.props.selectedMessage && prevProps.selectedMessage !== this.props.selectedMessage) {
+      // Update segment and seek state by finding a entry indices corresponding to old message segment/seek times.
 
       const { segment, segmentIndices } = clipSegment(
         this.state.segment,
         this.state.segmentIndices,
-        nextMessage
+        curMessage
       );
 
-      // console.log('componentWillReceiveProps', this.state.userSeekTime, '->', nextSeekTime);
       this.setState({
         segment,
         segmentIndices,
-        userSeekIndex: nextProps.seekIndex,
-        // userSeekTime: nextSeekTime
+        userSeekIndex: this.props.seekIndex,
       });
     }
 
-    if (
-      nextMessage
-      && curMessage
-      && nextMessage.entries.length !== curMessage.entries.length
-    ) {
+    if (prevMessage && curMessage && prevMessage.entries.length !== curMessage.entries.length) {
       const { segment, segmentIndices } = clipSegment(
         this.state.segment,
         this.state.segmentIndices,
-        nextMessage
+        curMessage
       );
-      // console.log(this.state.segment, '->', segment, segmentIndices);
       this.setState({ segment, segmentIndices });
     }
   }

src/components/GithubDbcList.js

@@ -23,14 +23,6 @@ export default class GithubDbcList extends Component {
     this.updatePathQuery = this.updatePathQuery.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.repo !== this.props.repo) {
-      this.props.openDbcClient.list(nextProps.repo).then((paths) => {
-        this.setState({ paths, selectedPath: null });
-      });
-    }
-  }
-
   componentDidMount() {
     this.props.openDbcClient.list(this.props.repo).then((paths) => {
       paths = paths.filter((path) => path.indexOf('.dbc') !== -1);
@@ -38,6 +30,14 @@ export default class GithubDbcList extends Component {
     });
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.repo !== this.props.repo) {
+      this.props.openDbcClient.list(this.props.repo).then((paths) => {
+        this.setState({ paths, selectedPath: null });
+      });
+    }
+  }
+
   updatePathQuery(e) {
     this.setState({
       pathQuery: e.target.value

src/components/HLS.js

@@ -16,17 +16,14 @@ export default class HLS extends Component {
     onRestart: PropTypes.func
   };
 
-  componentWillReceiveProps(nextProps) {
-    this.videoElement.playbackRate = nextProps.playbackSpeed;
+  componentDidUpdate(prevProps) {
+    this.videoElement.playbackRate = this.props.playbackSpeed;
 
-    if (nextProps.source !== this.props.source) {
-      this.loadSource(nextProps.source);
+    if (prevProps.source !== this.props.source) {
+      this.loadSource(this.props.source);
     }
-    if (nextProps.playing) {
-      if (
-        this.videoElement
-        && (this.videoElement.paused || this.videoElement.currentTime < 0.01)
-      ) {
+    if (this.props.playing) {
+      if (this.videoElement && (this.videoElement.paused || this.videoElement.currentTime < 0.01)) {
         this.videoElement.play();
       }
     } else {

src/components/LoadDbcModal.js

@@ -33,7 +33,7 @@ export default class LoadDbcModal extends Component {
     this.renderActions = this.renderActions.bind(this);
   }
 
-  componentWillMount() {
+  componentDidMount() {
     this.props.openDbcClient.getUserOpenDbcFork().then((userOpenDbcRepo) => {
       this.setState({ userOpenDbcRepo });
     });

src/components/LoadingBar.js

@@ -1,35 +0,0 @@
-import styled, { keyframes } from 'react-emotion';
-
-const frames = keyframes`
-  0% {
-    transform: translateX(0)
-  }
-  to {
-    transform: translateX(-400px)
-  }
-`;
-const animationColor1 = 'rgba(74, 242, 161, 1.00)';
-const animationColor2 = 'rgba(140, 169, 197, 1.00)';
-
-export default styled('div')`
-  display: block;
-  animation-name: ${frames};
-  animation-duration: 2s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  background-color: ${animationColor1};
-  background-image: linear-gradient(
-    to right,
-    ${animationColor2} 0,
-    ${animationColor2} 50%,
-    ${animationColor1} 50%,
-    ${animationColor1} 100%
-  );
-  background-repeat: repeat-x;
-  background-size: 25pc 25pc;
-  width: 200%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 2;
-`;

src/components/MessageBytes.js

@@ -19,6 +19,7 @@ export default class MessageBytes extends Component {
 
     this.onVisibilityChange = this.onVisibilityChange.bind(this);
     this.onCanvasRefAvailable = this.onCanvasRefAvailable.bind(this);
+    this.updateCanvas = this.updateCanvas.bind(this);
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -33,16 +34,11 @@ export default class MessageBytes extends Component {
     return nextProps.seekTime !== this.props.seekTime;
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (
-      this.props.seekIndex !== nextProps.seekIndex
-      || frameForTime(this.props.seekTime) !== frameForTime(nextProps.seekTime)
-    ) {
-      this.updateCanvas(nextProps);
-    }
-
-    function frameForTime(t) {
-      return ~~(t * 60);
+  componentDidUpdate(prevProps) {
+    if (prevProps.seekIndex !== this.props.seekIndex ||
+      Math.floor(prevProps.seekTime * 60) !== Math.floor(this.props.seekTime * 60))
+    {
+      this.updateCanvas();
     }
   }
 
@@ -77,8 +73,8 @@ export default class MessageBytes extends Component {
     }
   }
 
-  updateCanvas(props) {
-    const { message, live, seekTime } = props;
+  updateCanvas() {
+    const { message, live, seekTime } = this.props;
     if (!this.canvas || message.entries.length === 0) return;
 
     let mostRecentMsg = message.entries[message.entries.length - 1];

src/components/Meta.js

@@ -66,30 +66,21 @@ export default class Meta extends Component {
     window.clearInterval(this.lastSavedTimer);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (
-      nextProps.lastSaved !== this.props.lastSaved
-      && typeof nextProps === 'object'
-    ) {
-      this.setState({ lastSaved: nextProps.dbcLastSaved.fromNow() });
+  componentDidUpdate(prevProps) {
+    if (prevProps.lastSaved !== this.props.lastSaved) {
+      this.setState({ lastSaved: this.props.dbcLastSaved.fromNow() });
     }
 
-    const nextMsgKeys = Object.keys(nextProps.messages);
-    if (
-      JSON.stringify(nextMsgKeys)
-      !== JSON.stringify(Object.keys(this.props.messages))
-    ) {
-      const orderedMessageKeys = this.sortMessages(nextProps.messages);
+    if (JSON.stringify(Object.keys(prevProps.messages)) !== JSON.stringify(Object.keys(this.props.messages))) {
+      const orderedMessageKeys = this.sortMessages(this.props.messages);
       this.setState({ hoveredMessages: [], orderedMessageKeys });
-    } else if (
-      this.state.orderedMessageKeys.length === 0
-      || (!this.props.live
-        && this.props.messages
-        && nextProps.messages
-        && this.byteCountsDidUpdate(this.props.messages, nextProps.messages))
-    ) {
-      const orderedMessageKeys = this.sortMessages(nextProps.messages);
-      this.setState({ orderedMessageKeys });
+    } else if (this.state.orderedMessageKeys.length === 0 || (!this.props.live && prevProps.messages &&
+      this.props.messages && this.byteCountsDidUpdate(prevProps.messages, this.props.messages)))
+    {
+      const orderedMessageKeys = this.sortMessages(this.props.messages);
+      if (orderedMessageKeys.length > 0) {
+        this.setState({ orderedMessageKeys });
+      }
     }
   }
 

src/components/RouteSeeker/RouteSeeker.js

@@ -51,34 +51,31 @@ export default class RouteSeeker extends Component {
     this.executePlayTimer = this.executePlayTimer.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
-    const { ratio } = this.state;
-
-    if (
-      JSON.stringify(this.props.segmentIndices)
-      !== JSON.stringify(nextProps.segmentIndices)
-    ) {
+  componentDidUpdate(prevProps) {
+    if (JSON.stringify(prevProps.segmentIndices) !== JSON.stringify(this.props.segmentIndices)) {
       this.setState({
         seekedBarStyle: RouteSeeker.zeroSeekedBarStyle,
         markerStyle: RouteSeeker.hiddenMarkerStyle,
         ratio: 0
       });
-    } else if (nextProps.videoLength !== this.props.videoLength) {
+    } else if (this.props.videoLength && prevProps.videoLength !== this.props.videoLength) {
       // adjust ratio in line with new videoLength
-      const secondsSeeked = ratio * this.props.videoLength;
-      const newRatio = secondsSeeked / nextProps.videoLength;
+      const secondsSeeked = this.state.ratio * prevProps.videoLength;
+      const newRatio = secondsSeeked / this.props.videoLength;
       this.updateSeekedBar(newRatio);
     }
 
-    if (this.props.nearestFrameTime !== nextProps.nearestFrameTime) {
-      const newRatio = this.props.segmentProgress(nextProps.nearestFrameTime);
+    if (prevProps.nearestFrameTime !== this.props.nearestFrameTime) {
+      const newRatio = this.props.segmentProgress(this.props.nearestFrameTime);
       this.updateSeekedBar(newRatio);
     }
 
-    if (nextProps.playing && !this.state.isPlaying) {
-      this.onPlay();
-    } else if (!nextProps.playing && this.state.isPlaying) {
-      this.onPause();
+    if (prevProps.playing !== this.props.isPlaying) {
+      if (this.props.playing && !this.state.isPlaying) {
+        this.onPlay();
+      } else if (!this.props.playing && this.state.isPlaying) {
+        this.onPause();
+      }
     }
   }
 

src/components/RouteVideoSync.js

@@ -62,7 +62,7 @@ export default class RouteVideoSync extends Component {
     this.ratioTime = this.ratioTime.bind(this);
   }
 
-  componentWillMount() {
+  componentDidMount() {
     let videoApi = VideoApi(this.props.url, process.env.REACT_APP_VIDEO_CDN);
     videoApi.getQcameraStreamIndex().then(() => {
       this.setState({source: videoApi.getQcameraStreamIndexUrl()});

src/components/SaveDbcModal.js

@@ -37,7 +37,7 @@ export default class SaveDbcModal extends Component {
     this.renderActions = this.renderActions.bind(this);
   }
 
-  async componentWillMount() {
+  async componentDidMount() {
     const openDbcFork = await this.props.openDbcClient.getUserOpenDbcFork();
     this.setState({ openDbcFork });
   }

src/components/SignalLegend/signalLegend.scss

@@ -42,6 +42,13 @@
       display: block;
     }
   }
+  &-colorbar {
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    width: 1.5%;
+  }
   &-header {
     border-bottom: 1px solid transparent;
     cursor: pointer;

src/components/SignalLegendEntry/ColorBar.js

@@ -1,12 +0,0 @@
-import styled from 'react-emotion';
-
-// color bar on the left side of the signals legend
-export default styled('div')`
-  display: block;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  width: 1.5%;
-  opacity: ${({ isHighlighted }) => (isHighlighted ? 0.5 : 0.3)};
-  background-color: rgb(${({ rgb }) => rgb.join(',')});
-`;

src/components/SignalLegendEntry/index.js

@@ -6,7 +6,6 @@ import cx from 'classnames';
 
 import Signal from '../../models/can/signal';
 import SignalForm from './SignalForm';
-import ColorBar from './ColorBar';
 import FIELDS from './FIELDS';
 
 export default class SignalLegendEntry extends Component {
@@ -34,12 +33,12 @@ export default class SignalLegendEntry extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (!nextProps.signal.equals(this.props.signal)) {
+  componentDidUpdate(prevProps) {
+    if (!this.props.signal.equals(prevProps.signal)) {
       this.setState({
         signalEdited: Object.assign(
-          Object.create(nextProps.signal),
-          nextProps.signal
+          Object.create(this.props.signal),
+          this.props.signal
         )
       });
     }
@@ -115,13 +114,17 @@ export default class SignalLegendEntry extends Component {
     } = this.props;
     const expandedEntryClass = isExpanded ? 'is-expanded' : null;
     const plottedButtonClass = isPlotted ? 'button' : 'button--alpha';
+    const colorBarStyle = {
+      opacity: isHighlighted ? 0.5 : 0.3,
+      backgroundColor: `rgb(${color.join(',')})`,
+    };
     return (
       <div
         className={cx('signals-legend-entry', expandedEntryClass)}
         onMouseEnter={() => this.props.onSignalHover(signal)}
         onMouseLeave={() => this.props.onSignalHoverEnd(signal)}
       >
-        <ColorBar isHighlighted={isHighlighted} rgb={color} />
+        <div className="signals-legend-entry-colorbar" style={ colorBarStyle } />
         <div className="signals-legend-entry-header">
           <div
             className="signals-legend-entry-header-name"

yarn.lock

@@ -11894,14 +11894,6 @@ react-dom@~16.14:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
-react-emotion@^8.0.12:
-  version "8.0.12"
-  resolved "https://registry.yarnpkg.com/react-emotion/-/react-emotion-8.0.12.tgz#3dd94c151197e2e3399e34e3e118df141b5ebb7b"
-  integrity sha512-shGa+uer+Ng1uRwqkdVIYW5zsxx4/kc5za8zRMhrTaGJCpU3uwQsdMpmX2kF4chJZvRsfxW+2cBue3EnJeX5zw==
-  dependencies:
-    babel-plugin-emotion "^8.0.12"
-    emotion-utils "^8.0.12"
-
 react-error-overlay@^6.0.7:
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.10.tgz#0fe26db4fa85d9dbb8624729580e90e7159a59a6"