unit-conversion/src/features/number-input-field/__snapshots__/numberInputField.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the NumberInputField component numberInputField displays apropriate content 1`] = `
+<div>
+  <div
+    class="inputFieldContainer"
+  >
+    <label
+      for="inputField"
+    >
+      inputField
+    </label>
+    <input
+      class="inputField"
+      id="inputField"
+      placeholder="Enter # of \\"cm\\""
+      type="text"
+    />
+  </div>
+</div>
+`;

unit-conversion/src/features/number-input-field/numberInputField.js

+import { useSelector, useDispatch } from 'react-redux';
+import { selectCurrentInputUnit } from '../unit-selector/unitSelectorSlice';
+import { setNumberOfUnits } from './numberInputFieldSlice';
+
+export function NumberInputField() {
+  const currentInputUnit = useSelector(selectCurrentInputUnit);
+  const placeHolderString = `Enter # of "${currentInputUnit}"`;
+  const dispatch = useDispatch();
+
+  function handleChange(e) {
+    const currentNumber = e.target.value;
+    dispatch(setNumberOfUnits(currentNumber));
+  }
+
+  return (
+    <div className="inputFieldContainer">
+      <label for="inputField">inputField</label>
+      <input id="inputField" className="inputField" type="text"
+        placeholder={ placeHolderString } onChange={handleChange}/>
+    </div>
+  );
+}
+
+export const internals = {
+  NumberInputField,
+};

unit-conversion/src/features/number-input-field/numberInputField.test.js

+import { render, screen } from '@testing-library/react';
+import '../../testing/mockRedux.js';
+import { NumberInputField} from './numberInputField.js';
+import numberInputFieldSlice from '../number-input-field/numberInputFieldSlice.js';
+
+import {
+  selectNumberOfUnits,
+  setNumberOfUnits,
+} from './numberInputFieldSlice.js';
+
+import {
+  selectCurrentInputUnit,
+} from '../unit-selector/unitSelectorSlice.js';
+
+jest.mock('../unit-selector/unitSelectorSlice.js', () => ({
+  selectCurrentInputUnit: jest.fn().mockName('selectCurrentInputUnit'),
+}));
+
+describe('the NumberInputField slice', () => {
+  test('selects input value according to the store', () => {
+    const state = {
+      unitSelector: {
+        currentInputUnit: 'm',
+        currentOutputUnit: 'cm',
+      },
+      numberInputField: {
+        numberToConvert: 10,
+      },
+    };
+
+    const selectedInputUnit = selectNumberOfUnits(state);
+    expect(selectedInputUnit).toEqual(10);
+  });
+});
+
+describe('the NumberInputField slice', () => {
+  test('setNumberOfUnits correctly adjusts state value', () => {
+    // This is what the local state looks like to the "setNumberOfUnits" reducer.
+    const state = numberInputFieldSlice.reducer({
+      numberToConvert: 10,
+    }, setNumberOfUnits(100));
+
+    const numberOfUnits = 100;
+    expect(state.numberToConvert).toEqual(numberOfUnits);
+  });
+});
+
+describe('the NumberInputField component', () => {
+  test('numberInputField displays apropriate content', () => {
+    selectCurrentInputUnit.mockReturnValue('cm');
+
+    const { container } = render(<NumberInputField/>);
+    expect(screen.getByLabelText('inputField')).toHaveAttribute(
+      'placeholder', expect.stringContaining('Enter # of "cm"'),
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

unit-conversion/src/features/number-input-field/numberInputFieldSlice.js

+import { createSlice } from '@reduxjs/toolkit';
+
+const numberInputFieldSlice = createSlice({
+  name: 'numberInputField',
+  initialState: {
+    numberToConvert: 0,
+  },
+  reducers: {
+    setNumberOfUnits: (state, action) => {
+      const numToConvert = action.payload;
+      state.numberToConvert = numToConvert;
+    },
+  },
+});
+export default numberInputFieldSlice;
+
+export const {
+  setNumberOfUnits,
+} = numberInputFieldSlice.actions;
+
+export function selectNumberOfUnits(state) {
+  return state.numberInputField.numberToConvert;
+}

unit-conversion/src/features/unit-selector/unitSelector.js

+import { store } from '../../app/store';
+import { useDispatch } from 'react-redux';
+import {
+  setCurrentInputUnit,
+  setCurrentOutputUnit,
+} from './unitSelectorSlice';
+import PropTypes from 'prop-types';
+
+export function UnitSelector(props) {
+  // type will either be 'Input' or 'Output'
+  UnitSelector.propTypes = {
+    type: PropTypes.string.isRequired,
+  };
+
+  const unitSelectorOptions = [
+    {
+      label: 'Km',
+      value: 'km',
+    },
+    {
+      label: 'M',
+      value: 'm',
+    },
+    {
+      label: 'Cm',
+      value: 'cm',
+    },
+    {
+      label: 'Ft',
+      value: 'ft',
+    },
+    {
+      label: 'In',
+      value: 'in',
+    },
+  ];
+
+  const disbatch = useDispatch();
+  function handleChange(e) {
+    const unsubscribe = store.subscribe(() =>
+      console.log('State after dispatch: ', store.getState()),
+    );
+    const currentUnit = e.target.value;
+    console.log(currentUnit);
+
+    if (props.type === 'Input') {
+      disbatch(setCurrentInputUnit(currentUnit));
+    }
+    if (props.type === 'Output') {
+      disbatch(setCurrentOutputUnit(currentUnit));
+    }
+    unsubscribe();
+  }
+
+  return (
+    <div className="selectorContainer">
+      <select className="selector" name="units" onChange={handleChange}>
+        {unitSelectorOptions.map((option) =>
+          <option value={option.value}>{option.label}</option>)}
+      </select>
+    </div>
+  );
+}

unit-conversion/src/features/unit-selector/unitSelector.test.js

+import '../../testing/mockRedux.js';
+
+import unitSelectorSlice, {
+  selectCurrentInputUnit,
+  selectCurrentOutputUnit,
+  setCurrentInputUnit,
+  setCurrentOutputUnit,
+} from './unitSelectorSlice.js';
+
+describe('the UnitSelector slice', () => {
+  test('selects inputUnit value according to the store', () => {
+    const state = {
+      unitSelector: {
+        currentInputUnit: 'm',
+        currentOutputUnit: 'cm',
+      },
+      numberInputField: {
+        numberToConvert: 10,
+      },
+    };
+
+    const selectedInputUnit = selectCurrentInputUnit(state);
+    expect(selectedInputUnit).toEqual('m');
+  });
+});
+
+describe('the UnitSelector slice', () => {
+  test('selects outputUnit value according to the store', () => {
+    const state = {
+      unitSelector: {
+        currentInputUnit: 'm',
+        currentOutputUnit: 'cm',
+      },
+      numberInputField: {
+        numberToConvert: 10,
+      },
+    };
+
+    const selectedOutputUnit = selectCurrentOutputUnit(state);
+    expect(selectedOutputUnit).toEqual('cm');
+  });
+});
+
+describe('the UnitSelector slice', () => {
+  test('setcurrentInputUnit correctly adjusts state value', () => {
+    // This is what the local state looks like to the "setCurrentInputUnit" reducer.
+    const state = unitSelectorSlice.reducer({
+      currentInputUnit: 'm',
+      currentOutputUnit: 'cm',
+    }, setCurrentInputUnit('km'));
+
+    expect(state.currentInputUnit).toEqual('km');
+  });
+});
+
+describe('the UnitSelector slice', () => {
+  test('setcurrentOutputUnit correctly adjusts state value', () => {
+    // This is what the local state looks like to the "setCurrentOutputUnit" reducer.
+    const state = unitSelectorSlice.reducer({
+      currentInputUnit: 'm',
+      currentOutputUnit: 'cm',
+    }, setCurrentOutputUnit('km'));
+
+    expect(state.currentOutputUnit).toEqual('km');
+  });
+});

unit-conversion/src/features/unit-selector/unitSelectorSlice.js

+import { createSlice } from '@reduxjs/toolkit';
+
+const unitSelectorSlice = createSlice({
+  name: 'unitSelector',
+  initialState: {
+    currentInputUnit: 'km',
+    currentOutputUnit: 'km',
+  },
+  reducers: {
+    // The action payload should have the unit to switch to with the in or out
+    setCurrentInputUnit: (state, action) => {
+      const newUnit = action.payload;
+      state.currentInputUnit = newUnit;
+    },
+    setCurrentOutputUnit: (state, action) => {
+      const newUnit = action.payload;
+      state.currentOutputUnit = newUnit;
+    },
+  },
+});
+export default unitSelectorSlice;
+
+export const {
+  setCurrentInputUnit,
+  setCurrentOutputUnit,
+} = unitSelectorSlice.actions;
+
+export function selectCurrentInputUnit(state) {
+  return state.unitSelector.currentInputUnit;
+}
+
+export function selectCurrentOutputUnit(state) {
+  return state.unitSelector.currentOutputUnit;
+}

unit-conversion/src/index.css

+:root {
+  /* Colors */
+  --letterbox-color: rgba(255 255 255 / 100%);
+
+  /* background-color: rgba(101 142 156 / 100%); */
+  --app-background-color: linear-gradient(102.28deg, rgba(231 189 251 / 50%) -7.7%, rgba(250 208 218 / 50%) 38.01%, rgba(168 198 243 / 50%) 91.43%);
+  --font-color: rgba(0 0 0 / 100%);
+
+  /* Sizes */
+  --minimum-app-size: 300px;
+}
+
+* {
+  font-size: 1.05em;
+}
+
+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;
+}

unit-conversion/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();

unit-conversion/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.

unit-conversion/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);
+      });
+  }
+}

unit-conversion/src/setupTests.js

+import '@testing-library/jest-dom/extend-expect';
+
+afterEach(() => {
+  jest.clearAllMocks();
+});

unit-conversion/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),
+}));