Merge pull request #148 from mark-szabo/v2.2

V2.3.10 Version and build numbers

.github/workflows/mimosonk.yml

@@ -18,6 +18,11 @@ jobs:
       uses: actions/setup-dotnet@v3
       with:
         dotnet-version: ${{ env.DOTNET_CORE_VERSION }}
+    - name: Read version number from package.json
+      id: build_number
+      run: echo "BUILD_NUMBER=$(jq -r .version ${{ env.WORKING_DIRECTORY }}/ClientApp/package.json)" >> $GITHUB_ENV
+    - name: Create .env file with build number
+      run: echo "REACT_APP_BUILD_NUMBER=${{ steps.build_number.outputs.BUILD_NUMBER }}" > ${{ env.WORKING_DIRECTORY }}/.env
     - name: Restore
       run: dotnet restore "${{ env.WORKING_DIRECTORY }}"
     - name: Build

CarWash.ClassLibrary/Models/CarWashConfiguration.cs

@@ -150,6 +150,16 @@ public class CarWashConfiguration
         /// </summary>
         public CalendarServiceConfiguration CalendarService { get; set; } = new CalendarServiceConfiguration();
 
+        /// <summary>
+        /// Generated build number during CI/CD.
+        /// </summary>
+        public string BuildNumber { get; set; } = "";
+
+        /// <summary>
+        /// Application version number.
+        /// </summary>
+        public string Version { get; set; } = "";
+
         /// <summary>
         /// CarWash app settings referring to reservations.
         /// </summary>

CarWash.ClassLibrary/Models/WellKnown.cs

@@ -35,5 +35,15 @@ public class WellKnown
         /// CarWash app settings referring to reservations.
         /// </summary>
         public CarWashConfiguration.ReservationSettings ReservationSettings { get; set; } = new CarWashConfiguration.ReservationSettings();
+
+        /// <summary>
+        /// Build number.
+        /// </summary>
+        public string BuildNumber { get; set; }
+
+        /// <summary>
+        /// Application version number.
+        /// </summary>
+        public string Version { get; set; }
     }
 }

CarWash.PWA/ClientApp/package.json

@@ -1,6 +1,6 @@
 {
     "name": "carwash_pwa",
-    "version": "2.3.0",
+    "version": "2.3.10",
     "private": true,
     "description": "This app is intended to help employees working in Graphisoft park (Budapest, Hungary) reserve car washing services.",
     "repository": {

CarWash.PWA/ClientApp/public/sw.js

@@ -16,7 +16,7 @@ workbox.core.setCacheNameDetails({
 // Don't forget to increase the revision number of index.html (aka. '/')
 // as it is needed to include the newly genereted js and css files.
 // Error would be thrown: Refused to execute script from '...' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
-const build = '2.2.1';
+const build = '2.3.10';
 console.log(`Build: ${build}`);
 workbox.precaching.precacheAndRoute([
     { url: '/', revision: build.replace(/\./g, '') },
@@ -33,6 +33,15 @@ workbox.precaching.precacheAndRoute([
 
 const bgSyncPlugin = new workbox.backgroundSync.Plugin('bgSyncQueue');
 
+// [NETWORK FIRST] Cache index.html from 'GET /'
+workbox.routing.registerRoute(
+    ({ url }) => url.pathname === '/',
+    workbox.strategies.networkFirst({
+        cacheName: 'html-cache',
+        plugins: [bgSyncPlugin],
+    })
+);
+
 // [NETWORK FIRST] Cache reservation list from 'GET /api/reservations'
 workbox.routing.registerRoute(
     ({ url }) => url.pathname === '/api/reservations',
@@ -171,7 +180,7 @@ self.addEventListener('notificationclick', event => {
             .then(clientList => {
                 for (let i = 0; i < clientList.length; i++) {
                     const client = clientList[i];
-                    if (client.url === 'https://carwashu.azurewebsites.net/' && 'focus' in client) return client.focus();
+                    if (client.url === 'https://mimosonk.hu/' && 'focus' in client) return client.focus();
                 }
                 if (clients.openWindow) return clients.openWindow('/');
                 return null;

CarWash.PWA/ClientApp/src/App.js

@@ -461,7 +461,7 @@ export default class App extends Component {
                 <ThemeProvider theme={theme}>
                     <CssBaseline enableColorScheme />
                     <ErrorBoundary>
-                        <Layout user={user}>
+                        <Layout user={user} configuration={configuration}>
                             <Switch>
                                 <Route
                                     exact

CarWash.PWA/ClientApp/src/components/Layout.js

@@ -165,7 +165,7 @@ class Layout extends React.Component {
     }
 
     render() {
-        const { classes, theme, user } = this.props;
+        const { classes, theme, configuration, user } = this.props;
         const refresh = this.getRefreshFunc();
 
         const drawer = (
@@ -179,7 +179,7 @@ class Layout extends React.Component {
                 <List className={classes.menuList}>{drawerItems(this.handleDrawerClose, user)}</List>
                 <Divider />
                 <List className={classes.menuList}>{otherDrawerItems(this.handleDrawerClose)}</List>
-                <div className={classes.footer}>
+                <div className={classes.footer}> 
                     <a href="https://go.microsoft.com/fwlink/?LinkID=206977" className={classes.link}>
                         Terms of use
                     </a>
@@ -188,6 +188,9 @@ class Layout extends React.Component {
                         Privacy & cookies policy
                     </a>
                     <br />
+                    <span className={classes.madeWithLove}>
+                        Version: {process.env.REACT_APP_BUILD_NUMBER} {process.env.REACT_APP_BUILD_NUMBER !== configuration.buildNumber && (<>- Update available!</>)}
+                    </span>
                     <span className={classes.madeWithLove}>
                         Made with <FavoriteIcon className={classes.loveIcon} /> by friends at Microsoft
                     </span>
@@ -255,6 +258,7 @@ Layout.propTypes = {
     classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
     theme: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
     location: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    configuration: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
     user: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 

CarWash.PWA/Controllers/WellKnownController.cs

@@ -30,6 +30,8 @@ public async Task<ActionResult<WellKnown>> GetConfigurationAsync()
                 Garages = configuration.Garages,
                 Services = configuration.Services,
                 ReservationSettings = configuration.Reservation,
+                BuildNumber = configuration.BuildNumber,
+                Version = configuration.Version
             };
 
             return Ok(wellKnown);

CarWash.PWA/Startup.cs

@@ -71,6 +71,8 @@ public void ConfigureServices(IServiceCollection services)
             {
                 config.Services = JsonSerializer.Deserialize<List<Service>>(Configuration.GetValue<string>("Services"), jsonOptions);
             }
+            config.BuildNumber = Configuration.GetValue<string>("BUILD_NUMBER");
+            config.Version = Configuration.GetValue<string>("BUILD_NUMBER");
 
             // Add application services
             services.AddSingleton(Configuration);