Updated dependencies.

README.md

@@ -9,7 +9,7 @@ API, the Redux Toolkit (RTK), React Router, Jest, and the React Testing Library
 
 Recursively clone this repository and `cd` into the root folder:
 
-```
+```bash
 $ git clone --recursive git@git.unl.edu:soft-core/soft-260/react-redux-starter-code.git
 $ cd react-redux-starter-code
 ```
@@ -19,12 +19,12 @@ $ cd react-redux-starter-code
 
 Install dependencies:
 
-```
+```bash
 $ npm install
 ```
 
-(Near the end you may see some warnings because `create-react-app` transitively
-depends on some deprecated packages.)
+(You may see a few warnings because `create-react-app` transitively depends on
+some deprecated packages.)
 
 Optionally run the linter and the test suite:
 
@@ -110,14 +110,6 @@ roles from MVC.
     `index.html`.  In this case the CSS forces a letterboxed portrait layout and
     specifies a sans-serif font.
 
-*   The file `minimal-app/src/service-worker.js` acts as a proxy server, which
-    among other things makes it possible to run a PWA while offline.  (See
-    <https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API> for
-    more information.)
-
-*   The file `minimal-app/src/serviceWorkerRegistration.js` registers the
-    service worker so that the browser knows about it.
-
 ## Model and Controller Code
 
 *   The file `minimal-app/src/app/store.js` combines the models provided by the
@@ -131,9 +123,9 @@ roles from MVC.
 ## View Code
 
 *   The file `minimal-app/src/app.js` implements the React component
-    representing the entire app.  In this case only one route, `/`, is
-    implemented, but the returned fragment is intentionally written so that it
-    is easy to add additional routes.
+    representing the entire app.  In this case only the universal route, `/*`,
+    is implemented, but the returned fragment is intentionally written so that
+    it is easy to add additional routes.
 
 *   The file `minimal-app/src/features/counter/counter.js` implements a React
     component that counts the number of times a user has tapped a button.  This
@@ -187,4 +179,5 @@ following:
 *  Rename the folder from `minimal-app` to something descriptive and change the
    corresponding entries in the outer `package.json`.
 
-*  Rerun `npm install` to update `package-lock.json` based on the above changes.
+*  Rerun `npm install` in the outer folder to update `package-lock.json` based
+   on the above changes.

eslint-config @ a85278e2

-Subproject commit 24df42fb655d234b83c93b0fb24d012e4d9ecb58
+Subproject commit a85278e2bd62f637800bc32fa6b372bc2855546e

minimal-app/package.json

@@ -16,35 +16,34 @@
   },
   "homepage": ".",
   "dependencies": {
-    "@reduxjs/toolkit": "^1.6.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.1.9",
+    "@reduxjs/toolkit": "^1.8.3",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.3.0",
     "classnames": "^2.3.1",
     "npm-run-all": "^4.1.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-redux": "^7.2.4",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3",
-    "workbox-background-sync": "^5.1.3",
-    "workbox-broadcast-update": "^5.1.3",
-    "workbox-cacheable-response": "^5.1.3",
-    "workbox-core": "^5.1.3",
-    "workbox-expiration": "^5.1.3",
-    "workbox-google-analytics": "^5.1.3",
-    "workbox-navigation-preload": "^5.1.3",
-    "workbox-precaching": "^5.1.3",
-    "workbox-range-requests": "^5.1.3",
-    "workbox-routing": "^5.1.3",
-    "workbox-strategies": "^5.1.3",
-    "workbox-streams": "^5.1.3"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.2",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "^5.0.1",
+    "workbox-background-sync": "^6.5.3",
+    "workbox-broadcast-update": "^6.5.3",
+    "workbox-cacheable-response": "^6.5.3",
+    "workbox-core": "^6.5.3",
+    "workbox-expiration": "^6.5.3",
+    "workbox-navigation-preload": "^6.5.3",
+    "workbox-precaching": "^6.5.3",
+    "workbox-range-requests": "^6.5.3",
+    "workbox-routing": "^6.5.3",
+    "workbox-strategies": "^6.5.3",
+    "workbox-streams": "^6.5.3"
   },
   "devDependencies": {
     "@unlsoft/eslint-config": "file:../eslint-config",
     "@unlsoft/stylelint-config": "file:../stylelint-config",
-    "eslint-plugin-jest-dom": "^3.9.0",
-    "stylelint": "^13.13.1"
+    "eslint-plugin-jest-dom": "^4.0.2",
+    "stylelint": "^14.9.1"
   },
   "stylelint": {
     "extends": "@unlsoft/stylelint-config"
@@ -52,6 +51,9 @@
   "eslintConfig": {
     "extends": [
       "react-app",
+      "react-app/jest",
+      "plugin:jest-dom/recommended",
+      "plugin:testing-library/react",
       "@unlsoft/eslint-config/react"
     ]
   },

minimal-app/public/index.html

@@ -8,9 +8,13 @@
       name="description"
       content="A minimal app to be used as starter code for labs and homework."
     />
-    <meta name="theme-color" content="rgba(208 0 0 / 100%)" />
+    <meta name="theme-color" content="#d00000" />
+    <link rel="icon" href="%PUBLIC_URL%/logo.png" />
     <link rel="icon" href="%PUBLIC_URL%/logo.svg" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
+    <link rel="apple-touch-startup-image" href="%PUBLIC_URL%/logo.png" />
+    <link rel="apple-touch-startup-image" href="%PUBLIC_URL%/logo.svg" />
     <title>Minimal React Redux App</title>
   </head>
   <body>

minimal-app/public/manifest.json

@@ -8,11 +8,17 @@
       "type": "image/svg+xml",
       "sizes": "192x192 512x512",
       "purpose": "any maskable"
+    },
+    {
+      "src": "logo.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any maskable"
     }
   ],
   "start_url": ".",
   "display": "standalone",
   "orientation": "portrait",
-  "theme_color": "rgba(208 0 0 / 100%)",
-  "background_color": "rgba(255 255 255 / 100%)"
+  "theme_color": "#d00000",
+  "background_color": "#ffffff"
 }

minimal-app/src/app.js

-import { Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 
 import { Counter } from './features/counter/counter.js';
 
 export function App() {
-  return (
+  const page =
     <>
-      <Route exact path={'/'}>
       <Counter label={'Taps'} />
-      </Route>
-    </>
+    </>;
+  return (
+    <Routes>
+      <Route path={'/*'} element={page} />
+    </Routes>
   );
 }

minimal-app/src/app.test.js

-/* eslint-disable no-magic-numbers */
-
 import { render } from '@testing-library/react';
 import './testing/mockRedux.js';
 import { MemoryRouter as Router } from 'react-router-dom';

minimal-app/src/app/store.js

 import { configureStore } from '@reduxjs/toolkit';
+
 import counterSlice from '../features/counter/counterSlice.js';
 
 export const store = configureStore({

minimal-app/src/features/counter/counter.test.js

-/* eslint-disable no-magic-numbers */
-
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '../../testing/mockRedux.js';
@@ -31,10 +29,10 @@ describe('the button', () => {
     render(<Counter label={'Foo'} />);
     expect(screen.getByRole('button')).toHaveClass('blue');
   });
-  test('increments the value in the store when clicked', () => {
+  test('increments the value in the store when clicked', async() => {
     selectValue.mockReturnValue(9999);
     render(<Counter label={'Foo'} />);
-    userEvent.click(screen.getByRole('button'));
+    await userEvent.click(screen.getByRole('button'));
     expect(setValue).toHaveBeenCalledTimes(1);
     expect(setValue).toHaveBeenCalledWith({
       value: 9999 + 1,

minimal-app/src/features/counter/counterSlice.test.js

-/* eslint-disable no-magic-numbers */
-
 import counterSlice, {
   selectValue,
   setValue,

minimal-app/src/index.js

 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { HashRouter as Router } from 'react-router-dom';
 
-import { App } from './app.js';
 import { store } from './app/store.js';
+import { App } from './app.js';
 
 import './index.css';
 
-import * as serviceWorkerRegistration from './serviceWorkerRegistration.js';
-
-ReactDOM.render(
+createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <Provider store={store}>
       <Router>
@@ -20,8 +18,4 @@ ReactDOM.render(
       </Router>
     </Provider>
   </React.StrictMode>,
-  document.getElementById('root'),
 );
-
-// Learn more about service workers: https://cra.link/PWA
-serviceWorkerRegistration.register();

minimal-app/src/service-worker.js

-/* eslint-disable no-restricted-globals, no-underscore-dangle */
-
-// This service worker can be customized!
-// See https://developers.google.com/web/tools/workbox/modules
-// for the list of available Workbox modules, or add any other
-// code you'd like.
-// You can also remove this file if you'd prefer not to use a
-// service worker, and the Workbox build step will be skipped.
-
-import { clientsClaim } from 'workbox-core';
-import { ExpirationPlugin } from 'workbox-expiration';
-import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
-import { registerRoute } from 'workbox-routing';
-import { StaleWhileRevalidate } from 'workbox-strategies';
-
-clientsClaim();
-
-// Precache all of the assets generated by your build process.
-// Their URLs are injected into the manifest variable below.
-// This variable must be present somewhere in your service worker file,
-// even if you decide not to use precaching. See https://cra.link/PWA
-precacheAndRoute(self.__WB_MANIFEST);
-
-// Set up App Shell-style routing, so that all navigation requests
-// are fulfilled with your index.html shell. Learn more at
-// https://developers.google.com/web/fundamentals/architecture/app-shell
-const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
-registerRoute(
-  // Return false to exempt requests from being fulfilled by index.html.
-  ({ request, url }) => {
-    // If this isn't a navigation, skip.
-    if (request.mode !== 'navigate') {
-      return false;
-    } // If this is a URL that starts with /_, skip.
-
-    if (url.pathname.startsWith('/_')) {
-      return false;
-    } // If this looks like a URL for a resource, because it contains // a file extension, skip.
-
-    if (url.pathname.match(fileExtensionRegexp)) {
-      return false;
-    } // Return true to signal that we want to use the handler.
-
-    return true;
-  },
-  createHandlerBoundToURL(`${process.env.PUBLIC_URL}/index.html`),
-);
-
-const MAX_ENTRIES = 50;
-
-// An example runtime caching route for requests that aren't handled by the
-// precache, in this case same-origin .png requests like those from in public/
-registerRoute(
-  // Add in any other file extensions or routing criteria as needed.
-  // Customize this strategy as needed, e.g., by changing to CacheFirst.
-  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
-  new StaleWhileRevalidate({
-    cacheName: 'images',
-    plugins: [
-      // Ensure that once this runtime cache reaches a maximum size the
-      // least-recently used images are removed.
-      new ExpirationPlugin({ maxEntries: MAX_ENTRIES }),
-    ],
-  }),
-);
-
-// This allows the web app to trigger skipWaiting via
-// registration.waiting.postMessage({type: 'SKIP_WAITING'})
-self.addEventListener('message', (event) => {
-  if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting();
-  }
-});
-
-// Any other custom service worker logic can go here.

minimal-app/src/serviceWorkerRegistration.js

-/* eslint-disable no-restricted-syntax */
-
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://cra.link/PWA
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
-);
-
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service worker. To learn more, visit https://cra.link/PWA',
-          );
-        });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then((registration) => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker === null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://cra.link/PWA.',
-              );
-
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch((error) => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-const NOT_FOUND = 404;
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' },
-  })
-    .then((response) => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === NOT_FOUND ||
-        (contentType !== null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then((registration) => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log('No internet connection found. App is running in offline mode.');
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready
-      .then((registration) => {
-        registration.unregister();
-      })
-      .catch((error) => {
-        console.error(error.message);
-      });
-  }
-}

stylelint-config @ 948fc884

-Subproject commit 40b0b09694d1fa983446ff2768211c23f71f0f78
+Subproject commit 948fc884d068e87763fa0f0c165ca0cd256bf43d