Update front end dependencies

README.md

@@ -18,6 +18,7 @@ To run Kitesocial, you will need:
 - Ruby 2.7.2
 - Rails 6.0.3
 - Yarn 1.19.1
+- Node 16.7.0
 - Chrome or Chromium
 
 Once you've cloned the repo, run:

app/javascript/components/RelativeDateTime.js

@@ -24,7 +24,7 @@ const RelativeDateTime = ({ value }) => {
 
   return (
     <time
-      title={date.toLocaleString(DateTime.DATETIME_SHORT)}
+      title={date.toLocaleString(DateTime.DATETIME_SHORT, { locale: 'en-AU' })}
       dateTime={value}
     >
       {formatDate(date)}

app/javascript/components/__snapshots__/Chirp.spec.js.snap

@@ -38,7 +38,6 @@ exports[`Like button sends a like request to the API 1`] = `
       @
       bob
     </a>
-
   </p>
   -- 
   <a
@@ -102,7 +101,6 @@ exports[`Like button sends a like request to the API 2`] = `
       @
       bob
     </a>
-
   </p>
   -- 
   <a
@@ -166,7 +164,6 @@ exports[`Like button sends a like request to the API 3`] = `
       @
       bob
     </a>
-
   </p>
   -- 
   <a
@@ -261,7 +258,6 @@ exports[`mention tracking links to mentioned users 1`] = `
       @
       bob
     </a>
-
   </p>
   -- 
   <a

app/javascript/components/__snapshots__/RelativeDateTime.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`rendering a relative date handles negative values measured in seconds 1`] = `
 <time
   dateTime="2021-04-22T01:08:45Z"
-  title="2021-04-21, 6:08 p.m."
+  title="22/04/2021, 9:08 am"
 >
   in 35 seconds
 </time>
@@ -12,7 +12,7 @@ exports[`rendering a relative date handles negative values measured in seconds 1
 exports[`rendering a relative date handles values greater than a year old 1`] = `
 <time
   dateTime="2020-04-22T00:01:25Z"
-  title="2020-04-21, 5:01 p.m."
+  title="22/04/2020, 8:01 am"
 >
   1 year ago
 </time>
@@ -21,7 +21,7 @@ exports[`rendering a relative date handles values greater than a year old 1`] =
 exports[`rendering a relative date handles values measured in days 1`] = `
 <time
   dateTime="2021-04-18T22:02:01Z"
-  title="2021-04-18, 3:02 p.m."
+  title="19/04/2021, 6:02 am"
 >
   3 days ago
 </time>
@@ -30,7 +30,7 @@ exports[`rendering a relative date handles values measured in days 1`] = `
 exports[`rendering a relative date handles values measured in hours 1`] = `
 <time
   dateTime="2021-04-21T22:02:01Z"
-  title="2021-04-21, 3:02 p.m."
+  title="22/04/2021, 6:02 am"
 >
   3 hours ago
 </time>
@@ -39,7 +39,7 @@ exports[`rendering a relative date handles values measured in hours 1`] = `
 exports[`rendering a relative date handles values measured in minutes 1`] = `
 <time
   dateTime="2021-04-22T01:02:01Z"
-  title="2021-04-21, 6:02 p.m."
+  title="22/04/2021, 9:02 am"
 >
   6 minutes ago
 </time>
@@ -48,7 +48,7 @@ exports[`rendering a relative date handles values measured in minutes 1`] = `
 exports[`rendering a relative date handles values measured in months 1`] = `
 <time
   dateTime="2021-02-01T22:02:01Z"
-  title="2021-02-01, 2:02 p.m."
+  title="02/02/2021, 6:02 am"
 >
   3 months ago
 </time>
@@ -57,7 +57,7 @@ exports[`rendering a relative date handles values measured in months 1`] = `
 exports[`rendering a relative date handles values measured in seconds 1`] = `
 <time
   dateTime="2021-04-22T01:08:01Z"
-  title="2021-04-21, 6:08 p.m."
+  title="22/04/2021, 9:08 am"
 >
   9 seconds ago
 </time>
@@ -66,7 +66,7 @@ exports[`rendering a relative date handles values measured in seconds 1`] = `
 exports[`rendering a relative date handles values measured in weeks 1`] = `
 <time
   dateTime="2021-04-01T22:02:01Z"
-  title="2021-04-01, 3:02 p.m."
+  title="02/04/2021, 6:02 am"
 >
   3 weeks ago
 </time>
@@ -75,7 +75,7 @@ exports[`rendering a relative date handles values measured in weeks 1`] = `
 exports[`rendering a relative date handles values which are less than a second different from the current time 1`] = `
 <time
   dateTime="2021-04-22T01:08:10Z"
-  title="2021-04-21, 6:08 p.m."
+  title="22/04/2021, 9:08 am"
 >
   just now
 </time>

babel.config.js

@@ -23,6 +23,7 @@ module.exports = function(api) {
       isTestEnv && [
         '@babel/preset-env',
         {
+          loose: true,
           targets: {
             node: 'current'
           }
@@ -31,6 +32,7 @@ module.exports = function(api) {
       (isProductionEnv || isDevelopmentEnv) && [
         '@babel/preset-env',
         {
+          loose: true,
           forceAllTransforms: true,
           useBuiltIns: 'entry',
           corejs: 3,

globalSetup.js

@@ -0,0 +1,3 @@
+export default async() => {
+  process.env.TZ = 'Australia/Perth';
+};

jest.config.js

@@ -1,5 +1,7 @@
 /* eslint-env node */
 
 module.exports = {
-  testMatch: ["<rootDir>/app/**/?(*.)(spec|test).js"]
+  testMatch: ["<rootDir>/app/**/?(*.)(spec|test).js"],
+  testEnvironment: 'jsdom',
+  globalSetup: "<rootDir>/globalSetup.js"
 };

package.json

@@ -6,30 +6,37 @@
     "test": "jest"
   },
   "dependencies": {
-    "@babel/preset-react": "^7.13.13",
-    "@rails/actioncable": "^6.0.0",
-    "@rails/activestorage": "^6.0.0",
-    "@rails/ujs": "^6.0.0",
+    "@babel/core": "^7.8.0",
+    "@babel/preset-react": "^7.18.6",
+    "@rails/actioncable": "^7.0.3-1",
+    "@rails/activestorage": "^7.0.3-1",
+    "@rails/ujs": "^7.0.3-1",
     "@rails/webpacker": "^5.0.0",
     "global": "^4.4.0",
-    "luxon": "^1.26.0",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "turbolinks": "^5.2.0"
+    "luxon": "^3.0.1",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "turbolinks": "^5.2.0",
+    "webpack": "^4.0.0"
   },
   "version": "0.1.0",
   "devDependencies": {
-    "@babel/eslint-parser": "^7.13.14",
-    "@babel/eslint-plugin": "^7.13.16",
-    "@babel/preset-env": "^7.13.15",
-    "babel-jest": "^26.6.3",
-    "eslint": "^7.24.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-react": "^7.23.2",
-    "jest": "^26.6.3",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/eslint-plugin": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "babel-jest": "^28.1.3",
+    "eslint": "^8.22.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-react": "^7.30.1",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
     "jest-fetch-mock": "^3.0.3",
-    "react-test-renderer": "^17.0.2",
-    "webpack-dev-server": "^3.10.3"
+    "react-test-renderer": "^18.2.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.10.0"
+  },
+  "resolutions": {
+    "tough-cookie": "4.0.0"
   }
 }