Merge pull request #187 from bcgov/wayf-168-serviceworker-refinement

[WAYF-168] FEATURE** Serviceworker Refinement

README.md

@@ -5,30 +5,38 @@ Citizen Services Capstone Project Team B (Wayfinder)
 ## Project Information
 [![Lifecycle:Experimental](https://img.shields.io/badge/Lifecycle-Experimental-339999)](<Redirect-URL>)
 ## Project Description
-The "Wayfinder" application is a mobile application that directs citizens and employees to government services.  The Wayfinder proof of concept provides an extensible platform that allows new services and locations to be added as they become available.  Another use case for the Wayfinder app is the ability to process application generated analytics data allowing the product team to analyze valuable usage data that will inform the creation of new services that can be delivered using the Wayfinder app.
+The "Wayfinder" application is a Progressive Web Application that directs citizens to government services.  The Wayfinder proof-of-concept provides an extensible platform that allows new services and locations to be added as they become available.  Another use case for the Wayfinder app is the ability to process application generated analytics data allowing the product team to analyze valuable usage data that will inform the creation of new services that can be delivered using the Wayfinder app.
 
 
 
 ## Introduction
-This repository is a mono-repo containing all relevant documentation, code, and infrastructure that is required for the Wayfinder application and container(s).
-There will be additional supplementary README's for the back-end and front-end.
+This repository is a mono-repo containing all relevant documentation, code, and infrastructure that is required for the Wayfinder application.
 
 ## Project Status
-Project is currently under development via the Capstone team.
+Project was completed by the Capstone Team.
+
+### Frontend:
+* [Node.js](https://nodejs.org/en)
+* [Vite](https://vitejs.dev/)
+* [React](https://react.dev/)
+* [TypeScript](https://devdocs.io/typescript/) 
+* [emotion.js](https://emotion.sh/docs/introduction)
+* [leaflet.js](https://leafletjs.com/) + [react-leaflet](https://react-leaflet.js.org/)
+* [Cypress](https://www.cypress.io/)
+
+### Backend: 
+* [Node.js](https://nodejs.org/en)
+* [Express.js](https://expressjs.com/)
+* [TypeScript](https://devdocs.io/typescript/)
+* [Mongoose](https://mongoosejs.com/docs/)
+* [Jest](https://jestjs.io/)
+
+### Database:
+* [MongoDB](https://www.mongodb.com/docs/) 
+
+### Data Visualization:
+* [PowerBI](https://learn.microsoft.com/en-us/power-bi/)
 
-## Stack
-
-### Front-End
-* React PWA
-    * Typescript
-    * Node
-
-### Back-End
-* Express
-* MongoDB
-* Typescript
-* Node
-* Swagger
 
 ### Mongo Dev Key Examples
 

src/frontend-pwa/package.json

@@ -1,7 +1,7 @@
 {
   "name": "testing-vite",
   "private": true,
-  "version": "0.9.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/frontend-pwa/src/components/common/Button/Button.tsx

@@ -12,7 +12,7 @@
 
 import StyledButton from './button.styles';
 
-export type ButtonVariants = 'default' | 'primary' | 'secondary';
+export type ButtonVariants = 'default' | 'primary' | 'secondary' | 'tertiary';
 export type ButtonSizes = 'sm' | 'md' | 'lg';
 
 export type ButtonProps = {

src/frontend-pwa/src/components/common/Button/button.styles.ts

@@ -25,7 +25,8 @@ const StyledButton = styled.button<ButtonProps>`
   font-weight: 500;
   letter-spacing: 1px;
   cursor: pointer;
-  background-color: ${(props) => (props.variant === 'primary' ? '#003366' : props.variant === 'secondary' ? '#FFFFFF' : '#000000')};
+  background-color: ${(props) => (props.variant === 'primary' ? '#003366' : props.variant === 'secondary' ? '#DC3545' : '#000000')};
+  background-color: ${(props) => (props.variant === 'primary' ? '#003366' : props.variant === 'secondary' ? '#DC3545' : props.variant === 'tertiary' ? '#198754' : '#000000')};
   color: #FFFFFF;
   &:hover {
     transform: scale(0.98);

src/frontend-pwa/src/components/utility/Mapping/Mapping.tsx

@@ -34,6 +34,7 @@ import {
   StyledPopup,
   StyledMapContainer,
   PopupInfo,
+  MapTilesNotFoundDiv,
 } from './mapping.styles';
 import SingleLocation from '../../../Type/SingleLocation';
 import LocationsArray from '../../../Type/LocationsArray';
@@ -86,6 +87,16 @@ export default function Mapping({ locations, currentLocation }: MappingProps) {
     ? 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
     : '/mapTiles/{z}/{x}/{y}.png';
 
+  if (!onlineMode && !state.mapsCached) {
+    return (
+      <MapTilesNotFoundDiv>
+        <p>
+          {mappingContent.offlineMapTilesNotFoundMessage[lang]}
+        </p>
+      </MapTilesNotFoundDiv>
+    );
+  }
+
   return (
     <MapWrapperDiv>
       { !isNaN(lat)

src/frontend-pwa/src/components/utility/Mapping/mapping.styles.ts

@@ -44,3 +44,10 @@ export const StyledPopupDiv = styled.div`
     max-height: 10em;
     overflow-y: auto;
 `;
+
+export const MapTilesNotFoundDiv = styled.div`
+    color: darkred;
+    align-items: center;
+    justify-content: center;
+    padding: 3em;
+`;

src/frontend-pwa/src/constants/Constants.ts

@@ -9,6 +9,7 @@ const constants = {
   REPORTS_KEY: 'reports',
   UNSENT_REPORTS_KEY: 'unsentReports',
   APP_INSTALL_KEY: 'appInstalled',
+  MAPS_CACHED_KEY: 'mapsCached',
   UPDATE_ARRAY_KEY: 'updateArr',
 };
 

src/frontend-pwa/src/content/changelogContent.ts

@@ -7,6 +7,16 @@ export interface ContentMap {
 }
 
 const ChangeLog: ContentMap = {
+  '1.0.0': {
+    eng: [
+      'Added ability to delete and recache map tiles at will',
+      'Changed the secondary button color to a softer shade of red',
+    ],
+    fr: [
+      'Ajout de la possibilité de supprimer et de remettre en cache des tuiles de carte à volonté',
+      'Modification de la couleur du bouton secondaire en une nuance de rouge plus douce',
+    ],
+  },
   '0.9.0': {
     eng: [
       'Settings view revamped to new modern design',

src/frontend-pwa/src/content/content.ts

@@ -68,6 +68,62 @@ export const SettingsContent: ContentMap = {
     eng: 'Pull in new location data from the server',
     fr: 'Récupérer de nouvelles données de localisation à partir du serveur',
   },
+  refreshDataButtonTextRefresh: {
+    eng: 'Refresh',
+    fr: 'Rafraîchir',
+  },
+  refreshDataButtonTextOffline: {
+    eng: 'Offline',
+    fr: 'Hors ligne',
+  },
+  refreshDataTextConfirm: {
+    eng: 'App data updated',
+    fr: 'Données d\'application mises à jour',
+  },
+  refreshDataModalButton: {
+    eng: 'OK',
+    fr: 'D\'ACCORD',
+  },
+  offlineMapTilesTitle: {
+    eng: 'Offline Map Tiles',
+    fr: 'Tuiles de carte hors ligne',
+  },
+  offlineMapTilesToolTip: {
+    eng: 'To decrease app size, you can delete the saved tiles. This will prevent offline map functionality.',
+    fr: 'Pour réduire la taille de l\'application, vous pouvez supprimer les vignettes enregistrées. Cela empêchera la fonctionnalité de carte hors ligne.',
+  },
+  installMapTilesButtonTextOffline: {
+    eng: 'Offline',
+    fr: 'Hors ligne',
+  },
+  installMapTilesButtonTextOnline: {
+    eng: 'Download',
+    fr: 'Télécharger',
+  },
+  installMapTilesModalWarning: {
+    eng: 'The size of the mapTile package is ~35MB. do you wish to proceed with the download?',
+    fr: 'La taille du package mapTile est d\'environ 35 Mo. Souhaitez-vous poursuivre le téléchargement ?',
+  },
+  clearCache: {
+    eng: 'Delete Data',
+    fr: 'Suprimmer les données',
+  },
+  clearCacheToolTip: {
+    eng: 'Deletes the cached map data.',
+    fr: 'Supprime les données de site mises en cache.',
+  },
+  clearCacheConfirmText: {
+    eng: 'Are you sure you want to clear the cache data? Offline map will be unavailable.',
+    fr: 'Voulez-vous vraiment effacer les données du cache ? La carte hors ligne ne sera pas disponible.',
+  },
+  clearCacheButtonConfirm: {
+    eng: 'Confirm',
+    fr: 'Confirmer',
+  },
+  clearCacheButtonCancel: {
+    eng: 'Cancel',
+    fr: 'Annuler',
+  },
   languages: {
     eng: [
       'English',
@@ -512,6 +568,10 @@ export const mappingContent: ContentMap = {
     eng: 'Phone Number: ',
     fr: 'Numéro de téléphone: ',
   },
+  offlineMapTilesNotFoundMessage: {
+    eng: 'The map data was not found and the device appears to be offline. The offline map is unable to be rendered.',
+    fr: 'Les données cartographiques sont introuvables et l\'appareil semble être hors ligne. La carte hors ligne ne peut pas être rendue.',
+  },
 };
 
 export const reportHistoryContent: ContentMap = {

src/frontend-pwa/src/services/app/AppActions.ts

@@ -8,6 +8,7 @@ enum AppActionType {
   SET_REPORTS = 'SET_REPORTS',
   SET_TOOL_TIP_TEXT = 'SET_TOOL_TIP_TEXT',
   SET_ONLINE = 'SET_ONLINE',
+  SET_MAP_CACHED = 'SET_MAP_CACHED',
 }
 
 export default AppActionType;

src/frontend-pwa/src/services/app/AppReducer.ts

@@ -9,6 +9,7 @@ const {
   SET_REPORTS,
   SET_TOOL_TIP_TEXT,
   SET_ONLINE,
+  SET_MAP_CACHED,
 } = AppActionType;
 
 export type AppAction = {
@@ -26,6 +27,7 @@ export const initialState = {
   reports: {},
   toolTipText: '',
   isOnline: false,
+  mapsCached: true,
 };
 
 /**
@@ -53,6 +55,8 @@ export const reducer = (state: object, action: AppAction): object => {
       return { ...state, toolTipText: action.payload };
     case SET_ONLINE:
       return { ...state, isOnline: action.payload };
+    case SET_MAP_CACHED:
+      return { ...state, mapsCached: action.payload };
     default:
       throw new Error();
   }

src/frontend-pwa/src/services/app/useAppService.ts

@@ -20,6 +20,7 @@ const {
   SET_REPORTS,
   SET_TOOL_TIP_TEXT,
   SET_ONLINE,
+  SET_MAP_CACHED,
 } = AppActionType;
 
 /**
@@ -288,6 +289,17 @@ const useAppService = () => {
       });
     };
 
+    /**
+     * @summary Sets the state for determining whether the map tiles are present or not
+     * @param   cached is a boolean that indicates whether the app has cached map tiles or not
+     * @type    {( cached: boolean )}
+     * @author  Dallas Richmond
+     */
+    const setMapsCache = (cached: boolean) => {
+      saveDataToLocalStorage(constants.MAPS_CACHED_KEY, cached);
+      dispatch({ type: SET_MAP_CACHED, payload: cached });
+    };
+
     return {
       setAppData,
       setCurrentLocation,
@@ -302,6 +314,7 @@ const useAppService = () => {
       setOfflineReports,
       setOnline,
       setAppInstall,
+      setMapsCache,
       state,
     };
   }, [state, dispatch]);

src/frontend-pwa/src/views/Eula/Eula.tsx

@@ -16,7 +16,12 @@ import OnlineCheck from '../../utils/OnlineCheck';
 
 export default function Eula() {
   const [termAgreement, setTermAgreement] = useState(false);
-  const { state, setEulaState, setAnalytics } = useAppService();
+  const {
+    state,
+    setEulaState,
+    setAnalytics,
+    setMapsCache,
+  } = useAppService();
   const { lang } = state.settings;
   const geolocationKnown = localStorageKeyExists(constants.CURRENT_LOCATION_KEY);
   const latitude = state.currentLocation ? state.currentLocation.lat : 49.2827;
@@ -27,6 +32,7 @@ export default function Eula() {
   };
 
   const handleButtonClick = () => {
+    setMapsCache(true);
     setEulaState();
     if (geolocationKnown) {
       const analytics = {