Initial commit.

minimal-app/src/index.css

+:root {
+  /* Colors */
+  --letterbox-color: rgba(0 0 0 / 100%);
+  --app-background-color: rgba(239 239 239 / 100%);
+  --font-color: rgba(0 0 0 / 100%);
+
+  /* Sizes */
+  --minimum-app-size: 300px;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  color: var(--font-color);
+}
+
+#root {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--letterbox-color);
+}
+
+#portrait {
+  position: relative;
+  margin: auto;
+  min-width: var(--minimum-app-size);
+  min-height: var(--minimum-app-size);
+  width: 100%;
+  height: 100%;
+  max-width: 62.5vh;
+  background: var(--app-background-color);
+  overflow: hidden;
+  transform: scale(1);
+}
+
+button {
+  -webkit-tap-highlight-color: transparent;
+}

minimal-app/src/index.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+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 './index.css';
+
+import * as serviceWorkerRegistration from './serviceWorkerRegistration.js';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <Router>
+        <div id="portrait">
+          <App />
+        </div>
+      </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);
+      });
+  }
+}

minimal-app/src/setupTests.js

+import '@testing-library/jest-dom/extend-expect';

minimal-app/src/testing/mockRedux.js

+export const mockDispatch = jest.fn().mockName('dispatch');
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn((selector) => {
+    if (selector.mock === undefined) {
+      throw new Error(`Call to unmocked selector ${selector.name}`);
+    }
+    return selector();
+  }).mockName('useSelector'),
+  useDispatch: jest.fn().mockName('useDispatch').mockReturnValue(mockDispatch),
+}));

package.json

+{
+  "name": "@unlsoft/starter-code",
+  "version": "1.0.0",
+  "description": "A project skeleton to be used as starter code for labs and homework.",
+  "private": true,
+  "license": "UNLICENSED",
+  "scripts": {
+    "postinstall:stylelint-config": "cd stylelint-config && npm install",
+    "postinstall:eslint-config": "cd eslint-config && npm install",
+    "postinstall:app": "cd minimal-app && npm install",
+    "postinstall": "run-s postinstall:**",
+    "lint:app": "cd minimal-app && npm run lint",
+    "lint": "run-s --continue-on-error lint:**",
+    "test-once:app": "cd minimal-app && npm run test-once",
+    "test-once": "run-s --continue-on-error test-once:**",
+    "test": "run-s test-once",
+    "start": "cd minimal-app && npm run start",
+    "build:app": "cd minimal-app && npm run build",
+    "build": "run-s build:**"
+  },
+  "devDependencies": {
+    "ghooks": "^2.0.4",
+    "npm-run-all": "^4.1.5"
+  },
+  "config": {
+    "ghooks": {
+      "pre-commit": "npm run lint"
+    }
+  }
+}

react-redux-starter-code.code-workspace

+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {
+		"files.eol": "LF",
+		"files.exclude": {
+			"**/node_modules": true
+		},
+		"files.trimFinalNewlines": true,
+		"files.trimTrailingWhitespace": true
+	}
+}

stylelint-config @ 40b0b096

+Subproject commit 40b0b09694d1fa983446ff2768211c23f71f0f78