Jma/prod misc qol fixes (#21)

* Remove unused dependencies + migrate to MUI v5

* add / modify various files for production

.dockerIgnore

@@ -4,7 +4,6 @@
 lib/
 node_modules/
 *.sqlite3
+.git/
 
 /src/api/file-upload/**/*.json
-
-

.eslintignore

@@ -1,3 +1,3 @@
 node_modules
 build
-
+lib

.gitignore

@@ -31,6 +31,9 @@ package-lock.json
 lib/
 *.sqlite3
 .env
+.env.prod
+*.dump
+*.log
 
 /src/backend/api/file-upload/**/*.json
 /scripts/sql/*

Dockerfile

@@ -1,24 +1,38 @@
+# syntax=docker/dockerfile:1
+
 # Using node 16
 FROM node:16-slim
 
 # Change timezone of container from UTC to EST
 RUN rm -rf /etc/localtime
 RUN ln -s /usr/share/zoneinfo/America/New_York /etc/localtime
 
-# WORKDIR /waterloop
+WORKDIR /waterloop
+ENV PATH /waterloop/node_modules/.bin:$PATH
+
+# Initialize dependencies
+ENV NODE_ENV=production
+ENV NODE_OPTIONS="--max-old-space-size=4096"
 
-# COPY src ./src/
-# COPY migrations ./migrations/
-# COPY seeds ./seeds/
+COPY .babelrc package.json yarn.lock fix.js .npmrc .nvmrc ./
 
-# Copy over remaining files
-# COPY .env .babelrc package.json package-lock.json knexfile.js ./
+RUN npm install -g knex
+RUN yarn install --production
 
-# Initialize dependencies
-# ENV NODE_ENV=test
-# RUN npm install
-# RUN npm install -g knex
-# RUN npm run build
-EXPOSE 9000
+# add missing dependencies
+RUN yarn add mssql http2
+
+# copy files over here after installing deps, to skip reinstalling deps
+COPY src ./src
+COPY public ./public
+COPY .env.prod ./.env
+
+# build project
+RUN yarn build
+
+EXPOSE 9000-9002
+EXPOSE 3000-3002
 
-CMD ["bash"]
+# enable swap memory, then run yarn start:
+# https://community.fly.io/t/swap-memory/2749
+CMD /bin/bash -c "fallocate -l $(($(stat -f -c "(%a*%s/10)*7" .))) _swapfile && mkswap _swapfile && swapon _swapfile;" && yarn start

fix.js

@@ -0,0 +1,29 @@
+// code from https://github.com/brianc/node-postgres/issues/838#issuecomment-670941092
+// this fixes docker build issue of requiring pg-native, which isn't recommended unless you want to install python3 in the docker image somehow.
+
+const fs = require('fs');
+const path = require('path');
+
+const pgClientPath = path.resolve(
+  __dirname,
+  'node_modules',
+  'pg',
+  'lib',
+  'native',
+  'client.js',
+);
+
+fs.readFile(pgClientPath, 'utf8', function (err, data) {
+  if (err) {
+    return console.log(err);
+  }
+
+  const result = data.replace(
+    "var Native = require('pg-native')",
+    'var Native = null',
+  );
+
+  fs.writeFile(pgClientPath, result, 'utf8', function (err) {
+    if (err) return console.log(err);
+  });
+});

fly.toml

@@ -0,0 +1,44 @@
+# fly.toml file generated for waterloop-cms on 2022-11-26T21:50:01-05:00
+# NOTE: make sure that you set the secret for DATABASE_URL if it's not already there.
+# Run 'flyctl secrets set DATABASE_URL=<pg connection string>'
+
+app = "waterloop-cms"
+kill_signal = "SIGINT"
+kill_timeout = 5
+processes = []
+
+[build]
+  [build.args]
+    NODE_VERSION = "16"
+
+[env]
+
+[experimental]
+  allowed_public_ports = []
+  auto_rollback = true
+
+[[services]]
+  http_checks = []
+  internal_port = 9000
+  processes = ["app"]
+  protocol = "tcp"
+  script_checks = []
+  [services.concurrency]
+    hard_limit = 25
+    soft_limit = 20
+    type = "connections"
+
+  [[services.ports]]
+    force_https = true
+    handlers = ["http"]
+    port = 80
+
+  [[services.ports]]
+    handlers = ["tls", "http"]
+    port = 443
+
+  [[services.tcp_checks]]
+    grace_period = "30s"
+    interval = "15s"
+    restart_limit = 0
+    timeout = "2s"

package.json

@@ -8,6 +8,7 @@
     "yarn": "=1.*"
   },
   "scripts": {
+    "postinstall": "node fix.js",
     "start:frontend": "cross-env PORT=3000 react-scripts start",
     "build:frontend": "react-scripts build",
     "test": "react-scripts test",
@@ -46,18 +47,15 @@
     "@babel/core": "^7.17.12",
     "@babel/node": "^7.17.10",
     "@babel/preset-env": "^7.17.12",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
     "@google-cloud/storage": "^5.7.4",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.11.2",
     "@mui/icons-material": "^5.3.1",
     "@mui/material": "^5.4.0",
     "axios": "^0.21.2",
-    "chai": "^4.2.0",
-    "chai-http": "^4.3.0",
     "cookie-parser": "^1.4.5",
     "cors": "^2.8.5",
     "cross-env": "^7.0.3",
-    "csurf": "^1.11.0",
     "dotenv": "^8.2.0",
     "draft-convert": "^2.1.11",
     "draft-js": "^0.11.7",
@@ -74,9 +72,8 @@
     "moment": "^2.29.2",
     "multer": "^1.4.2",
     "nodemon": "^2.0.4",
-    "pg": "^8.5.1",
+    "pg": "^8.8.0",
     "pg-connection-string": "^2.4.0",
-    "postgres": "^1.0.2",
     "ramda": "^0.27.1",
     "react": "^16.13.1",
     "react-datepicker": "^3.5.0",
@@ -87,11 +84,9 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "redux": "^4.0.5",
-    "redux-devtools-extension": "^2.13.8",
-    "socket.io": "^2.4.1",
-    "socket.io-client": "2.3.0",
     "styled-components": "^5.2.1",
-    "typeface-ibm-plex-sans": "^1.1.13"
+    "typeface-ibm-plex-sans": "^1.1.13",
+    "redux-devtools-extension": "^2.13.8"
   },
   "browserslist": {
     "production": [
@@ -115,6 +110,8 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "chai": "^4.2.0",
+    "chai-http": "^4.3.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",

src/backend/index.js

@@ -1,4 +1,5 @@
 import path from 'path';
+
 /** Used for the development file storage */
 if (process.env.NODE_ENV !== 'production') {
   global.rootDirectory = path.resolve(__dirname);
@@ -8,10 +9,9 @@ if (process.env.NODE_ENV !== 'production') {
 require('dotenv').config();
 import express from 'express';
 import session from 'express-session';
-import csrf from 'csurf';
 import cookieParser from 'cookie-parser';
 import cors from 'cors';
-import socketio from 'socket.io';
+// import socketio from 'socket.io'; // unused, add package when needed.
 import http from 'http';
 import multer from 'multer';
 import googleAuth from './google-auth';
@@ -20,7 +20,7 @@ import fs from 'fs';
 import api from './api';
 
 // setup middleware
-const csrfProtection = csrf({ cookie: true });
+// TODO: find another CSRF implementation, csurf is deprecated.
 
 const app = express();
 const server = http.createServer(app);
@@ -90,13 +90,13 @@ if (process.env.NODE_ENV === 'production') {
 }
 app.use(session(sessionConfig));
 
-/**
+/**NOTE: UNUSED FOR NOW
  * @brief Websocket Initialization:
  * The following enables us to create web socket connections
  * with the frontend in the event that real time communication is required.
  */
-const io = socketio(server, { origins: '*:*' });
-app.set('io', io); // allows us to access io from the req obj
+// const io = socketio(server, { origins: '*:*' });
+// app.set('io', io); // allows us to access io from the req obj
 
 app.use('/google', googleAuth);
 app.use('/api', api);

src/backend/knexfile.js

@@ -5,10 +5,6 @@ let config;
 if (process.env.NODE_ENV === 'production') {
   const { parse } = require('pg-connection-string');
   config = parse(process.env.DATABASE_URL);
-  // NOTE: Comment this out if you're testing the production environment on a local postgres database!
-  config.ssl = {
-    rejectUnauthorized: false,
-  };
 }
 
 module.exports = {

src/frontend/components/Dialog/index.js

@@ -1,25 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import MUIDialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import MUIDialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
 
-const Dialog = ({
-  open,
-  title,
-  actionChildren,
-  children,
-  wide
-}) => (
-  <MUIDialog open={open} maxWidth={wide ? "md" : "sm"} fullWidth>
+const Dialog = ({ open, title, actionChildren, children, wide }) => (
+  <MUIDialog open={open} maxWidth={wide ? 'md' : 'sm'} fullWidth>
     <DialogTitle>{title}</DialogTitle>
-    <DialogContent>
-      {children}
-    </DialogContent>
-    <DialogActions>
-      {actionChildren}
-    </DialogActions>
+    <DialogContent>{children}</DialogContent>
+    <DialogActions>{actionChildren}</DialogActions>
   </MUIDialog>
 );
 
@@ -29,5 +19,5 @@ Dialog.propTypes = {
   open: PropTypes.bool,
   children: PropTypes.node,
   actionChildren: PropTypes.node,
-  wide: PropTypes.bool
+  wide: PropTypes.bool,
 };

src/frontend/components/PreviewTable/HeaderCell.js

@@ -4,7 +4,7 @@ import SortingVectorTop from './assets/SortingVectorTop.svg';
 import SortingVectorTopColoured from './assets/SortingVectorTopColoured.svg';
 import SortingVectorBottom from './assets/SortingVectorBottom.svg';
 import SortingVectorBottomColoured from './assets/SortingVectorBottomColoured.svg';
-import MUITableCell from '@material-ui/core/TableCell';
+import MUITableCell from '@mui/material/TableCell';
 
 const TableCell = styled(MUITableCell)`
   cursor: pointer;
@@ -36,21 +36,14 @@ const ChartHeaderText = styled.div`
   color: #000000;
 `;
 
-const HeaderCell = ({
-  onSort,
-  title,
-  sorted,
-  ascending,
-}) => (
+const HeaderCell = ({ onSort, title, sorted, ascending }) => (
   <TableCell>
     <ChartHeaderText onClick={onSort}>
       {title}
       <SortingIcon>
         <SortingTop
           src={
-            sorted && ascending
-              ? SortingVectorTopColoured
-              : SortingVectorTop
+            sorted && ascending ? SortingVectorTopColoured : SortingVectorTop
           }
           alt="Table Header Sort Acceding"
         />

src/frontend/components/PreviewTable/PreviewTable.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import theme from '../../theme';
-import TableCell from '@material-ui/core/TableCell';
+import TableCell from '@mui/material/TableCell';
 
 import PreviewTable from '.';
 
@@ -11,7 +11,11 @@ export default {
   argTypes: {},
 };
 
-const Template = (args) => <ThemeProvider theme={theme}><PreviewTable {...args} /></ThemeProvider>;
+const Template = (args) => (
+  <ThemeProvider theme={theme}>
+    <PreviewTable {...args} />
+  </ThemeProvider>
+);
 
 const RowComponent = ({ columnOne, columnTwo, columnThree }) => (
   <>

src/frontend/components/PreviewTable/index.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import HeaderCell from './HeaderCell';
 import EditIcon from './assets/EditIcon.svg';
-import MUITableCell from '@material-ui/core/TableCell';
-import MUITable from '@material-ui/core/Table';
-import MUITableBody from '@material-ui/core/TableBody';
-import MUITableRow from '@material-ui/core/TableRow';
-import MUITableContainer from '@material-ui/core/TableContainer';
-import MUITableHead from '@material-ui/core/TableHead';
+import MUITableCell from '@mui/material/TableCell';
+import MUITable from '@mui/material/Table';
+import MUITableBody from '@mui/material/TableBody';
+import MUITableRow from '@mui/material/TableRow';
+import MUITableContainer from '@mui/material/TableContainer';
+import MUITableHead from '@mui/material/TableHead';
 import useSortedRows from './hooks/sorted-rows';
 
 const Table = styled(MUITable)``;