Merge pull request #401 from HSLdevcom/revert-396-#AB25283-node-update

Revert "#AB25283 Node/React update"

.babelrc

@@ -1,16 +1,4 @@
 {
-    "presets": [
-        "@babel/preset-react",
-        "@babel/preset-env"
-    ],
-    "plugins": [
-        "@babel/plugin-transform-runtime"
-    ],
-    "env": {
-      "development": {
-        "plugins": [
-            "react-refresh/babel"
-        ]
-      }
-    }
-  }
+    "presets": ["react", "env", "stage-0"],
+    "plugins": ["transform-runtime", "react-hot-loader/babel"]
+}

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-buster-slim
+FROM node:16.20-buster-slim
 
 RUN apt-get update \
     && DEBIAN_FRONTEND=noninteractive apt-get install -yq wget curl gnupg fontconfig fonts-liberation ca-certificates --no-install-recommends \
@@ -11,7 +11,6 @@ RUN apt-get update \
     && cp ./azcopy /usr/bin/ \
     && rm -rf /var/lib/apt/lists/*
 
-ENV NODE_OPTIONS=--openssl-legacy-provider
 
 ENV WORK /opt/publisher
 

package.json

@@ -45,16 +45,15 @@
   },
   "homepage": "https://github.com/HSLdevcom/hsl-map-publisher#readme",
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=8.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-transform-runtime": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^9.0.0",
-    "babel-loader": "^8.3.0",
+    "babel-loader": "^7.1.4",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
     "cross-env": "^5.1.1",
     "css-loader": "^0.28.7",
     "eslint": "^5.8.0",
@@ -69,22 +68,21 @@
     "husky": "^8.0.0",
     "lint-staged": "^13.0.2",
     "prettier": "^1.14.3",
-    "react-refresh": "^0.14.0",
     "webpack-cli": "^3.0.8",
     "webpack-serve": "^1.0.4",
     "worker-loader": "^2.0.0"
   },
   "dependencies": {
     "@azure/storage-blob": "^10.4.0",
     "@koa/cors": "^2.2.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@turf/turf": "^6.5.0",
     "apollo-cache-inmemory": "^1.1.1",
     "apollo-client": "^2.0.3",
     "apollo-link": "^1.2.2",
     "apollo-link-http": "^1.2.0",
-
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.26.0",
+    "babel-preset-stage-0": "^6.24.1",
     "bullmq": "^1.86.2",
     "cheerio": "=1.0.0-rc.3",
     "classnames": "^2.2.5",
@@ -115,9 +113,10 @@
     "qrcode": "^1.0.0",
     "qs": "^6.5.2",
     "raw-loader": "^0.5.1",
-    "react": "18.2.0",
+    "react": "^16.5.1",
     "react-apollo": "^2.0.1",
-    "react-dom": "18.2.0",
+    "react-dom": "^16.5.1",
+    "react-hot-loader": "^4.3.3",
     "react-measure": "^2.5.2",
     "recompose": "^0.30.0",
     "segseg": "^0.2.2",

src/components/a3Timetable/a3Timetable.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import { hot } from 'react-hot-loader';
 import { chunk, last, groupBy, findIndex } from 'lodash';
 import renderQueue from 'util/renderQueue';
 
@@ -33,8 +34,11 @@ class Timetable extends Component {
     };
   }
 
-  componentDidMount() {
+  componentWillMount() {
     renderQueue.add(this);
+  }
+
+  componentDidMount() {
     let departures = [];
     const weekdays = this.rowsByHour(this.props.weekdays);
     const saturdays = this.rowsByHour(this.props.saturdays);
@@ -225,7 +229,6 @@ class Timetable extends Component {
         groupedRows.pop();
         weekdays.groupedRows = groupedRows;
       }
-      // eslint-disable-next-line no-constant-condition
       while (true) {
         const lastGroupedRows = last(groupedRows);
         const lastRow = last(lastGroupedRows);
@@ -451,4 +454,4 @@ Timetable.propTypes = {
   updateHook: PropTypes.func.isRequired,
 };
 
-export default Timetable;
+export default hot(module)(Timetable);

src/components/a3stopPoster/a3stopPoster.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { hot } from 'react-hot-loader';
 import { JustifiedColumn } from 'components/util';
 import renderQueue from 'util/renderQueue';
 import { colorsByMode } from 'util/domain';
@@ -31,8 +32,11 @@ class A3StopPoster extends Component {
     };
   }
 
-  componentDidMount() {
+  componentWillMount() {
     renderQueue.add(this);
+  }
+
+  componentDidMount() {
     this.updateLayout();
     renderQueue.onEmpty(error => !error && this.updateLayout(), {
       ignore: this,
@@ -199,4 +203,4 @@ A3StopPoster.defaultProps = {
   routeFilter: '',
 };
 
-export default A3StopPoster;
+export default hot(module)(A3StopPoster);

src/components/app.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { hot } from 'react-hot-loader';
 import { ApolloClient } from 'apollo-client';
 import { createHttpLink } from 'apollo-link-http';
 import { InMemoryCache } from 'apollo-cache-inmemory';
@@ -119,4 +120,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default hot(module)(App);

src/components/qrCode.js

@@ -13,9 +13,9 @@ class QrCode extends Component {
     this.updateCode(this.props.url);
   }
 
-  componentDidUpdate(prevProps) {
-    if (this.props.url !== prevProps.url) {
-      this.updateCode(this.props.url);
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.url !== this.props.url) {
+      this.updateCode(nextProps.url);
     }
   }
 

src/components/stopPoster/stopPoster.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { hot } from 'react-hot-loader';
 import { get, cloneDeep } from 'lodash';
 import { JustifiedColumn, Spacer } from 'components/util';
 import renderQueue from 'util/renderQueue';
@@ -525,4 +526,4 @@ StopPoster.defaultProps = {
   legend: false,
 };
 
-export default StopPoster;
+export default hot(module)(StopPoster);

src/components/stopPoster/terminalPoster.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { hot } from 'react-hot-loader';
 import { get, cloneDeep } from 'lodash';
 import { JustifiedColumn, Spacer } from 'components/util';
 import renderQueue from 'util/renderQueue';
@@ -531,4 +532,4 @@ TerminalPoster.defaultProps = {
   legend: false,
 };
 
-export default TerminalPoster;
+export default hot(module)(TerminalPoster);

src/components/timetable/timetable.js

@@ -201,7 +201,7 @@ class Timetable extends Component {
               ? `${getWeekdayName(dayNames[0], 'en')} - ${getWeekdayName(dayNames[1], 'en')}`
               : `${getWeekdayName(dayNames[0], 'en')}`;
           return (
-            <div key={`tableheader_container_${fiTitle}`}>
+            <div>
               <TableHeader
                 title={fiTitle}
                 subtitleSw={svTitle}

src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import { render } from 'react-dom';
 import App from 'components/app';
 import 'styles/base.css';
 import './util/mockGetTemplate';
@@ -8,7 +8,6 @@ if (!window.serverLog) {
   window.serverLog = console.log.bind(console);
 }
 
-const container = document.body.appendChild(document.createElement('div'));
-const root = createRoot(container);
+const root = document.body.appendChild(document.createElement('div'));
 
-root.render(<App />);
+render(<App />, root);

webpack.common.js

@@ -1,11 +1,8 @@
 const path = require('path');
-
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
 
-const isDevelopment = process.env.NODE_ENV !== 'production';
-
 module.exports = {
   entry: ['babel-polyfill', './src/index.js'],
   plugins: [
@@ -62,14 +59,6 @@ module.exports = {
         test: /\.svg$/,
         loader: 'raw-loader',
       },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
-        options: {
-          plugins: [isDevelopment && require.resolve('react-refresh/babel')].filter(Boolean),
-        },
-      },
     ],
   },
 };

webpack.dev.js

@@ -1,6 +1,5 @@
 const merge = require('webpack-merge');
 const webpackCommon = require('./webpack.common');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const PORT = process.env.PORT || 5000;
 
@@ -13,5 +12,4 @@ module.exports = merge.smart(webpackCommon, {
       hmr: true,
     },
   },
-  plugins: [new ReactRefreshWebpackPlugin()],
 });