Upgrade wouter & date-fns

package.json

@@ -40,12 +40,12 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@reduxjs/toolkit": "^2.2.1",
     "@sendgrid/mail": "^8.1.1",
-    "@stanlemon/webdev": "^0.1.165",
+    "@stanlemon/webdev": "^0.1.166",
     "bcryptjs": "^2.4.3",
     "client-sessions": "^0.8.0",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.3.1",
     "express": "^4.18.2",
     "express-rate-limit": "^7.1.5",
     "express-session": "^1.18.0",
@@ -58,6 +58,7 @@
     "passport": "~0.6.0",
     "passport-jwt": "^4.0.1",
     "passport-local": "^1.0.0",
+    "path-to-regexp": "^6.2.1",
     "pg": "^8.11.3",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -69,7 +70,7 @@
     "shortid": "^2.2.16",
     "uuid": "^9.0.1",
     "validator": "^13.11.0",
-    "wouter": "^2.12.1"
+    "wouter": "^3.0.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.2.1",
@@ -82,4 +83,4 @@
     "supertest": "^6.3.4",
     "wait-for-expect": "^3.0.2"
   }
-}
+}

src/db/tags.js

@@ -1,4 +1,4 @@
-const format = require("date-fns/format");
+const { format } = require("date-fns");
 const knex = require("../connection");
 const isEmpty = require("lodash/isEmpty");
 const mapKeys = require("lodash/mapKeys");

src/db/tasks.js

@@ -3,8 +3,7 @@ const omit = require("lodash/omit");
 const includes = require("lodash/includes");
 const isObject = require("lodash/isObject");
 const isEmpty = require("lodash/isEmpty");
-const format = require("date-fns/format");
-const isDate = require("date-fns/isDate");
+const { format, isDate } = require("date-fns");
 const { upsertTags, getTagsByTaskId, getTagsForTaskIds } = require("./tags");
 
 const columns = [

src/db/users.js

@@ -1,6 +1,6 @@
 const bcrypt = require("bcryptjs");
 const shortid = require("shortid");
-const format = require("date-fns/format");
+const { format } = require("date-fns");
 const omit = require("lodash/omit");
 const isEmpty = require("lodash/isEmpty");
 const isObject = require("lodash/isObject");

src/routes/auth/index.js

@@ -2,7 +2,7 @@ const express = require("express");
 const router = express.Router();
 const jwt = require("jsonwebtoken");
 const isEmpty = require("lodash/isEmpty");
-const addMinutes = require("date-fns/addMinutes");
+const { addMinutes } = require("date-fns");
 const passport = require("passport");
 const { Strategy: LocalStrategy } = require("passport-local");
 const { Strategy: JwtStrategy } = require("passport-jwt");

src/utils.js

@@ -1,4 +1,4 @@
-const format = require("date-fns/format");
+const { format } = require("date-fns");
 
 const SQL_DATE_FORMAT = "yyyy-MM-dd'T'HH:mm:ss.SSSxxx";
 

web/js/components/TaskForm.jsx

@@ -1,5 +1,5 @@
 import isBoolean from "lodash/isBoolean";
-import format from "date-fns/format";
+import { format } from "date-fns";
 import React from "react";
 import PropTypes from "prop-types";
 import isEmpty from "lodash/isEmpty";

web/js/components/TaskForm.test.js

@@ -1,7 +1,5 @@
 import React from "react";
-import parse from "date-fns/parse";
-import parseISO from "date-fns/parseISO";
-import isSameDay from "date-fns/isSameDay";
+import { parse, parseISO, isSameDay } from "date-fns";
 import { fireEvent, render, screen } from "@testing-library/react";
 import TaskForm from "./TaskForm";
 

web/js/components/TaskItem.jsx

@@ -1,9 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import isAfter from "date-fns/isAfter";
-import isBefore from "date-fns/isBefore";
-import addDays from "date-fns/addDays";
-import format from "date-fns/format";
+import { isAfter, isBefore, addDays, format } from "date-fns";
 import { connect } from "react-redux";
 import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
 import { faTrash } from "@fortawesome/free-solid-svg-icons/faTrash";
@@ -51,7 +48,7 @@ export class TaskItem extends React.Component {
     const styles = {
       cursor: "pointer",
       padding: 10,
-      textDecoration: !!task.completed ? "line-through" : "none",
+      textDecoration: task.completed ? "line-through" : "none",
       color: getTaskTextColor(task),
     };
 

web/js/components/TaskItem.test.js

@@ -1,9 +1,6 @@
 import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
-import subDays from "date-fns/subDays";
-import addDays from "date-fns/addDays";
-import isSameDay from "date-fns/isSameDay";
-import parseISO from "date-fns/parseISO";
+import { subDays, addDays, isSameDay, parseISO } from "date-fns";
 import { makeDateTime } from "../lib/Utils";
 import { getCurrentPathname } from "../lib/Navigation";
 import { TaskItem } from "./TaskItem";

web/js/components/TaskView.jsx

@@ -1,6 +1,6 @@
 import includes from "lodash/includes";
 import isEmpty from "lodash/isEmpty";
-import format from "date-fns/format";
+import { format } from "date-fns";
 import React from "react";
 import PropTypes from "prop-types";
 import Error from "./Error";

web/js/components/UpdateTaskForm.test.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { UpdateTaskForm } from "./UpdateTaskForm";
-import parseISO from "date-fns/parseISO";
+import { parseISO } from "date-fns";
 
 describe("<UpdateTaskForm />", () => {
   it("should render a form with an existing task and update it", () => {

web/js/components/VerifyEmailView.jsx

@@ -58,7 +58,6 @@ export class VerifyEmailViewContainer extends React.Component {
 
   async componentDidMount() {
     const token = getRouteParam(ROUTE_VERIFY, "token");
-
     const response = await this.props.verify(token);
 
     this.setState({ loaded: true, ...response });

web/js/lib/Navigation.js

@@ -1,4 +1,5 @@
-const makeMatcher = require("wouter/matcher").default;
+const { makeMatcher } = require("wouter");
+const { pathToRegexp, match } = require("path-to-regexp");
 
 // This file contains function that obscure route navigation during
 // development so that there are no hard dependencies outside of this file
@@ -12,9 +13,15 @@ export function getCurrentPathname() {
 }
 
 export function getRouteParam(route, param) {
-  const matcher = makeMatcher();
-  const [, params] = matcher(route, window.location.pathname);
-  return params?.[param];
+  console.log(route, window.location.pathname);
+  const urlMatch = match(route, {
+    decode: decodeURIComponent,
+  });
+
+  console.log(urlMatch(window.location.pathname));
+  //=> { path: '/users/1234/photos', index: 0, params: { id: '1234', tab: 'photos' } }
+
+  return "";
 }
 
 export const history = window.history;

web/js/lib/TaskService.js

@@ -1,6 +1,5 @@
 import mapValues from "lodash/mapValues";
-import isDate from "date-fns/isDate";
-import format from "date-fns/format";
+import { isDate, format } from "date-fns";
 import RestService from "./RestService";
 
 export default class TaskService extends RestService {

web/js/lib/Utils.js

@@ -1,6 +1,4 @@
-import formatISO from "date-fns/formatISO";
-import isAfter from "date-fns/isAfter";
-import isSameMinute from "date-fns/isSameMinute";
+import { formatISO, isAfter, isSameMinute } from "date-fns";
 
 export const DATE_FORMAT_LONG = "MMMM do yyyy, h:mma";
 

web/js/lib/Utils.test.js

@@ -1,5 +1,4 @@
-import addDays from "date-fns/addDays";
-import subDays from "date-fns/subDays";
+import { addDays, subDays } from "date-fns";
 import shuffle from "lodash/shuffle";
 import { makeDateTime, sortTasks } from "./Utils";