Feature/push notifications

config/webpack/base/webpack.base.client.config.js

@@ -36,13 +36,14 @@ module.exports = {
   plugins: [
     new WebpackPwaManifest({
       filename: 'manifest.json',
-      name: 'MMT Management Manager',
+      name: 'MMTPWA',
       short_name: 'MMTPWA',
       description: 'Manage your MMT Management in this PWA!',
       background_color: '#ffffff',
+      theme_color: '#ec2821',
       orientation: 'portrait',
       display: 'standalone',
-      publicPath: '/',
+      start_url: '/',
       icons: [
         {
           src: resolve('src/assets/mmt.png'),

src/components/Button/Button.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import './Button.scss'
+
+const Button = ({ isActive = false, buttonText = 'Submit', buttonAction = null}) => {
+  return (
+    <button styleName={`button ${isActive ? '' : 'is-active'}`} onClick={buttonAction}>
+      {buttonText}
+    </button>
+  )
+}
+
+export default Button

src/components/Button/Button.scss

@@ -0,0 +1,51 @@
+$activated-colour: #ec2821;
+$deactive-colour: grey;
+
+.button {
+  width: 100%;
+  display: block;
+  border: 2px solid $deactive-colour;
+  background-color: $deactive-colour;
+  padding: 12px;
+  text-transform: uppercase;
+  margin: 12px 0;
+  color: white;
+  transition: .3s;
+}
+
+.is-active {
+  width: 100%;
+  display: block;
+  border: 2px solid $activated-colour;
+  background-color: transparent;
+  padding: 12px;
+  text-transform: uppercase;
+  margin: 12px 0;
+  position: relative;
+  color: $activated-colour;
+  transition: .3s;
+  transform: translateZ(0);
+  overflow: hidden;
+  cursor: pointer;
+
+  &:after {
+    position: absolute;
+    content: '';
+    height: 100%;
+    width: 0;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: .3s;
+    background-color: $activated-colour;
+    z-index: -1;
+  }
+
+  &:hover {
+    color: white;
+
+    &:after {
+      width: 100%;
+    }
+  }
+}

src/components/PushSubscribeExample/PushSubscribeExample.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import { subscribeUser, swRegistration } from '../../services/serviceWorker/serviceWorker'
+import Button from '../Button/Button';
+
+class PushSubscribeExample extends Component {
+  state = {
+    userSubscribed : false
+  }
+
+  componentDidMount () {
+    navigator.serviceWorker.ready.then((swRegistration) => {
+      swRegistration.pushManager.getSubscription()
+      .then((subscription) => {
+        if(subscription) {
+          this.setState({
+            userSubscribed : true
+          })
+        }
+      })
+    })
+  }
+
+  buttonClicked = () => {
+    if(!this.state.userSubscribed) {
+      subscribeUser()
+      this.setState({
+        userSubscribed : true
+      })
+    }
+  }
+
+  render () {
+    return (
+      <div>
+        <Button isActive={this.state.userSubscribed} buttonText='Subscribe' buttonAction={this.buttonClicked} />
+      </div>
+    )
+  }
+}
+
+export default PushSubscribeExample

src/components/pushNotificationExample/PushNotificationExample.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react'
+import { swRegistration } from '../../services/serviceWorker/serviceWorker'
+import Button from '../Button/Button'
+import './PushNotificationExample.scss'
+
+class PushNotificationExample extends Component {
+  state = {
+    title: '',
+    message: ''
+  }
+
+  handleChange = ({ target }) => {
+    const { value, name } = target
+    this.setState({ [name] : value })
+  }
+
+  resetState () {
+    this.setState({
+      title: '',
+      message: ''
+    })
+  }
+
+  handleSubmit = (event) => {
+    event.preventDefault()
+    const title = this.state.title
+    const options = {
+      body: this.state.message,
+      icon: '../../assets/mmt.png',
+      badge: '../../assets/mmt.png'
+    }
+    swRegistration.showNotification(title, options)
+    this.resetState()
+  }
+
+  render () {
+    return (
+      <form onSubmit={this.handleSubmit} styleName='form'>
+        <input 
+          type='text'
+          name='title'
+          placeholder='MMT Push Title'
+          value={this.state.title} 
+          onChange={this.handleChange}
+          styleName='title'
+        />
+        <textarea 
+          name='message'
+          placeholder='Enter a nice message here'
+          value={this.state.message}
+          onChange={this.handleChange}
+          styleName='message'
+        />
+        <Button buttonType='submit' buttonText='Send Notification' />
+      </form>
+    )
+  }
+}
+
+export default PushNotificationExample

src/components/pushNotificationExample/PushNotificationExample.scss

@@ -0,0 +1,70 @@
+$primary-colour: #ec2821;
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.default {
+  padding: 5px;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid lightgrey;
+  margin-bottom: 12px;
+}
+
+.title {
+  composes: default;
+  padding: 8px 5px;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid lightgrey;
+  margin-bottom: 12px;
+}
+
+.message {
+  composes: default;
+  padding: 8px 5px;
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid lightgrey;
+  margin-bottom: 12px;
+  height: 100px;
+}
+
+.button {
+  width: 100%;
+  display: block;
+  border: 2px solid $primary-colour;
+  background-color: transparent;
+  padding: 8px;
+  text-transform: uppercase;
+  position: relative;
+  color: $primary-colour;
+  transition: .3s;
+  transform: translateZ(0);
+  overflow: hidden;
+  cursor: pointer;
+
+  &:after {
+    position: absolute;
+    content: '';
+    height: 100%;
+    width: 0;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: .3s;
+    background-color: $primary-colour;
+    z-index: -1;
+  }
+
+  &:hover {
+    color: white;
+
+    &:after {
+      width: 100%;
+    }
+  }
+}