feat: add swal; fix:Dockerfile; feat: add nginx

Mannan-Goyal · Sep 8, 2021 · 19414fa · 19414fa
1 parent 49b6b35
commit 19414fa
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 31 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:14.17.5
+FROM node:14.17.5 as build
 
 # set working directory
 WORKDIR /app
@@ -14,6 +14,10 @@ RUN npm install --silent
 # add app
 COPY . ./
 RUN npm run build
-RUN serve -s build -p 3000 &
-
 
+FROM nginx:1.17.8-alpine
+COPY --from=build /app/build /usr/share/nginx/html
+RUN rm /etc/nginx/conf.d/default.conf
+COPY nginx/nginx.conf /etc/nginx/conf.d
+EXPOSE 3000
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/nginx/nginx.conf b/nginx/nginx.conf
@@ -0,0 +1,21 @@
+server {
+
+  listen 3000;
+
+  location / {
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+
+    # to redirect all the requests to index.html, 
+    # useful when you are using react-router
+
+    try_files $uri /index.html; 
+  }
+
+  error_page   500 502 503 504  /50x.html;
+
+  location = /50x.html {
+    root   /usr/share/nginx/html;
+  }
+
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "react-scripts": "4.0.3",
     "react-toastify": "^7.0.4",
     "serve": "^12.0.0",
+    "sweetalert": "^2.1.2",
     "use-breakpoint": "^2.0.1",
     "web-vitals": "^1.1.2",
     "workbox-core": "^5.1.4",

diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
@@ -9,6 +9,7 @@ import { useEffect } from "react";
 import listPlugin from "@fullcalendar/list";
 import { isMobile } from "react-device-detect";
 import "./styles.css";
+import swal from "sweetalert";
 
 const Home = () => {
   const [showModal, setShowModal] = useState(false);
@@ -33,32 +34,43 @@ const Home = () => {
         setEvents(res);
       };
       AsyncEvent();
-      let deferredPrompt;
-      const addBtn = document.querySelector(".add-button");
-      addBtn.style.display = "none";
-      window.addEventListener("beforeinstallprompt", (e) => {
-        e.preventDefault();
-        deferredPrompt = e;
-        addBtn.style.display = "block";
-        addBtn.addEventListener("click", (e) => {
-          addBtn.style.display = "none";
-          deferredPrompt.prompt();
-          deferredPrompt.userChoice.then((choiceResult) => {
-            if (choiceResult.outcome === "accepted") {
-              console.log("User accepted the A2HS prompt");
-            } else {
-              console.log("User dismissed the A2HS prompt");
-            }
-            deferredPrompt = null;
+      var promptEvent;
+      let rejectApp = localStorage.getItem("rejectApp");
+      if (!rejectApp) {
+        window.addEventListener("beforeinstallprompt", function (e) {
+          e.preventDefault();
+          promptEvent = e;
+          swal({
+            title: "Add Evie to Home Screen",
+            buttons: {
+              Remember: "No and Remember!",
+              "Nope!": true,
+              "Yup!": true,
+            },
+          }).then((value) => {
+            console.log(value);
+            if (value === "Yup!") presentAddToHome();
+            else if (value === "Remember")
+              localStorage.setItem("rejectApp", true);
           });
         });
-      });
+      }
+
+      function presentAddToHome() {
+        promptEvent.prompt(); // Wait for the user to respond to the prompt
+        promptEvent.userChoice.then((choice) => {
+          if (choice.outcome === "accepted") {
+            console.log("User accepted");
+          } else {
+            console.log("User dismissed");
+          }
+        });
+      }
     }
   }, [finalDate]);
 
   return (
     <div className="md:mx-auto box overflow-x-hidden">
-      <button class="add-button">Add Evie to home screen</button>
       <FullCalendar
         plugins={[dayGridPlugin, interactionPlugin, listPlugin]}
         events={events}

diff --git a/src/pages/Home/styles.css b/src/pages/Home/styles.css
@@ -163,23 +163,23 @@ table {
 .fc-header-toolbar {
   margin: 2px 50px !important;
 }
-.add-button {
-  position: absolute;
+.swal-button {
   padding: 14px 29px !important;
   background-color: #383844;
   border-radius: 0.25em;
   white-space:nowrap;
-  z-index: 1000;
   transition: all 0.3s;
-  position: absolute;
-  top: 5%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
 }
-.add-button:hover{
+.swal-button:hover{
   background-color: #22242d !important;
 }
+.swal-modal {
+  background-color: #16151C;
+  color:aliceblue;
+}
+.swal-title {
+  color:#FFFFFF !important;
+}
 .fc td,
 .fc th {
   border-style: none;