upgrade packages (#87)

* upgrade react

* further react upgrade

* yarn upgrade

* upgrade node-sass

* upgrade node in dockerfile and actions

* fix test

* fix other test

.github/workflows/build.yaml

@@ -7,6 +7,9 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
     - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2
+      with:
+        node-version: '16'
     - name: cache node modules
       uses: actions/cache@v2
       id: yarn-cache
@@ -34,6 +37,9 @@ jobs:
       contents: read
     steps:
     - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2
+      with:
+        node-version: '16'
     - name: Set up Docker Buildx
       id: buildx
       uses: docker/setup-buildx-action@v1

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10.24-buster
+FROM node:16-buster-slim
 
 RUN apt-get update && apt-get install -y libusb-dev libudev-dev && rm -rf /var/lib/apt/lists/*
 

package.json

@@ -8,7 +8,7 @@
     "@commaai/hls.js": "^0.12.7",
     "@commaai/log_reader": "^0.5.5",
     "@commaai/my-comma-auth": "^1.4.1",
-    "@commaai/pandajs": "^0.3.4",
+    "@commaai/pandajs": "^0.3.7",
     "@craco/craco": "^5.5.0",
     "ap": "^0.2.0",
     "aphrodite": "^1.2.1",
@@ -39,14 +39,14 @@
     "lint-staged": "^9.4.0",
     "localforage": "^1.7.1",
     "moment": "^2.18.1",
-    "node-sass": "^4.12.0",
+    "node-sass": "^7.0.1",
     "prettier": "^1.9.2",
     "prop-types": "^15.5.10",
     "query-string": "^5.0.1",
     "randomcolor": "^0.5.4",
     "raven-js": "^3.16.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "~16.14",
+    "react-dom": "~16.14",
     "react-emotion": "^8.0.12",
     "react-infinite": "^0.11.0",
     "react-list": "^0.8.6",
@@ -55,7 +55,7 @@
     "react-test-renderer": "^16.2.0",
     "react-vega": "^7.0.0",
     "react-visibility-sensor": "^3.10.1",
-    "right-pad": "^1.0.1",
+    "simple-get": "^4.0.1",
     "simple-statistics": "^4.1.0",
     "socket.io-client": "^2.0.3",
     "stream-selector": "^0.1.1",

src/__puppeteer__/jest.config.js

@@ -1,7 +1,7 @@
 const { createJestConfig } = require('@craco/craco');
 const cracoConfig = require('../../craco.config.js');
 
-const jestConfig = createJestConfig(cracoConfig);
+const jestConfig = createJestConfig(cracoConfig({ env: process.env.NODE_ENV }));
 
 module.exports = {
   ...jestConfig,

src/index.js

@@ -1,4 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import CanExplorer from './CanExplorer';
 import init from './init';
 import './index.css';
 
-init();
+init().then((props) => {
+  ReactDOM.render(<CanExplorer {...props} />, document.getElementById('root')); // eslint-disable-line react/jsx-props-no-spreading
+});

src/init.js

@@ -1,10 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
 import qs from 'query-string';
 import CommaAuth, { config as AuthConfig, storage as AuthStorage } from '@commaai/my-comma-auth';
 import { auth as AuthApi, request as Request } from '@commaai/comma-api';
 import Sentry from './logging/Sentry';
-import CanExplorer from './CanExplorer';
 import { getUrlParameter, modifyQueryParameters } from './utils/url';
 import { GITHUB_AUTH_TOKEN_KEY } from './config';
 import {
@@ -112,11 +109,9 @@ export default function init() {
     props.githubAuthToken = fetchPersistedGithubAuthToken();
   }
 
-  async function renderDom() {
-    ReactDOM.render(<CanExplorer {...props} />, document.getElementById('root')); // eslint-disable-line react/jsx-props-no-spreading
-  }
-
-  authenticate().then(() => {
-    renderDom();
+  return new Promise((resolve) => {
+    authenticate().then(() => {
+      resolve(props);
+    });
   });
 }

src/init.test.js

@@ -3,6 +3,8 @@ import init from './init';
 
 describe('init', () => {
   it('works without url params', () => {
-    init();
+    init().then((props) => {
+      expect(true).toBe(true);
+    });
   });
 });

src/models/can/dbc.js

@@ -1,4 +1,3 @@
-import rightPad from 'right-pad';
 import CloudLog from '../../logging/CloudLog';
 import Signal from './signal';
 import Frame from './frame';
@@ -608,7 +607,7 @@ export default class DBC {
     let paddedBuffer = buffer;
     if (buffer.length !== 8) {
       // pad data it's 64 bits long
-      const paddedDataHex = rightPad(buffer.toString('hex'), 16, '0');
+      const paddedDataHex = buffer.toString('hex').padEnd(16, '0');
       paddedBuffer = Buffer.from(paddedDataHex, 'hex');
     }
     const hexData = paddedBuffer.toString('hex');