Feature implementation from commits 7ce106a..390abb1

.github/dependabot.yml

@@ -0,0 +1,37 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 10
+  reviewers:
+  - dunky11
+  ignore:
+  - dependency-name: "@date-io/date-fns"
+    versions:
+    - ">= 2.3.a, < 2.4"
+  - dependency-name: "@date-io/date-fns"
+    versions:
+    - ">= 2.4.a, < 2.5"
+  - dependency-name: "@date-io/date-fns"
+    versions:
+    - ">= 2.a, < 3"
+  - dependency-name: workbox-strategies
+    versions:
+    - 6.1.5
+  - dependency-name: "@testing-library/react"
+    versions:
+    - 11.2.6
+  - dependency-name: "@testing-library/user-event"
+    versions:
+    - 12.6.3
+    - 12.7.2
+    - 13.0.10
+    - 13.0.13
+    - 13.0.6
+    - 13.0.7
+  - dependency-name: workbox-google-analytics
+    versions:
+    - 6.1.1

README.md

@@ -4,7 +4,6 @@ Remains of a SaaS business I once tried to build. Now transformed into a templat
 [**Check out the demo**](https://reactsaastemplate.com)
 
 ![Node.js CI](https://github.com/dunky11/react-saas-template/workflows/Node.js%20CI/badge.svg)
-[![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=dunky11/react-saas-template)](https://dependabot.com)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 
 [<img src="/.github/gifs/showcase.gif">](https://reactsaastemplate.com "Go to demo website")
@@ -51,13 +50,13 @@ Your browser should now open and show the app. Otherwise open http://localhost:3
 
 If you are new to React, you should watch a [basic React tutorial](https://www.youtube.com/results?search_query=react+tutorial) first.
 
-If you already know React, then most of the information you need is in the [Material-UI documentation](https://material-ui.com/getting-started/usage/).
+If you know React, then most of the information you need is in the [Material-UI documentation](https://material-ui.com/getting-started/usage/).
 
 You can go into [src/theme.js](/src/theme.js) and change the primary and secondary color codes at the top of the script to the values you like and some magic will happen.
 
 ## Deployment
 
-If you are happy with the state of your website you can run:
+If you are satisfied with the state of your website you can run:
 
 ```
 npm run build 

package.json

@@ -10,11 +10,11 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/pickers": "^3.3.10",
     "@material-ui/system": "^4.11.3",
-    "@stripe/react-stripe-js": "^1.4.0",
-    "@stripe/stripe-js": "^1.14.0",
+    "@stripe/react-stripe-js": "^1.4.1",
+    "@stripe/stripe-js": "^1.15.0",
     "aos": "^2.3.4",
     "classnames": "^2.3.1",
-    "date-fns": "^2.21.1",
+    "date-fns": "^2.22.1",
     "emoji-mart": "^3.0.1",
     "js-cookie": "^2.2.0",
     "prop-types": "^15.7.2",
@@ -40,9 +40,9 @@
     "workbox-streams": "^6.1.5"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^13.1.8"
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.1.9"
   },
   "scripts": {
     "start": "react-scripts start",

src/logged_in/components/Routing.js

@@ -6,6 +6,7 @@ import Dashboard from "./dashboard/Dashboard";
 import Posts from "./posts/Posts";
 import Subscription from "./subscription/Subscription";
 import PropsRoute from "../../shared/components/PropsRoute";
+import useLocationBlocker from "../../shared/functions/useLocationBlocker";
 
 const styles = (theme) => ({
   wrapper: {
@@ -64,6 +65,7 @@ function Routing(props) {
     selectSubscription,
     openAddBalanceDialog,
   } = props;
+  useLocationBlocker();
   return (
     <div className={classes.wrapper}>
       <Switch>

src/logged_out/components/Routing.js

@@ -5,9 +5,11 @@ import PropsRoute from "../../shared/components/PropsRoute";
 import Home from "./home/Home";
 import Blog from "./blog/Blog";
 import BlogPost from "./blog/BlogPost";
+import useLocationBlocker from "../../shared/functions/useLocationBlocker";
 
 function Routing(props) {
   const { blogPosts, selectBlog, selectHome } = props;
+  useLocationBlocker();
   return (
     <Switch>
       {blogPosts.map((post) => (