Merge pull request #30 from chaaals/feat/add-reset-button

feat: implemented a reset feature when a user has selected a province

src/App.css

@@ -34,6 +34,40 @@ body {
   display: table-cell;
 }
 
+.Map-cta {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.Map-cta-button-container {
+  display: flex;
+  flex-wrap: wrap;
+
+  box-sizing: border-box;
+  gap: 1rem;
+}
+
+.Map-cta-toast {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  width: 100%;
+  padding: .5rem;
+
+  background-color: #C1E1C1;
+  animation: slidein 250ms ease-in-out;
+}
+
 .Map-padding {
   background-color: #9dc3fb;
   padding-top: 20px;
@@ -116,27 +150,30 @@ svg#svg574 .province-layer path:hover {
   background-color: lightgray;
 }
 
-.save-image-button, .share-fb-button {
+.save-image-button, .reset-button, .share-fb-button {
   position: relative;
   background-color: white;
   border-radius: 10px;
+  border: none;
+  cursor: pointer;
   min-height: 30px;
   align-items: center;
   text-align: center;
   display: flex;
   width: 100px;
   justify-content: center;
-  left: 50%;
-  margin-left: -50px;
-  margin-bottom: 10px;
   padding: 3px;
 }
 
-.save-image-button:hover {
+.save-image-button:hover, .reset-button:hover {
   cursor: pointer;
   background-color: lightgray;
 }
 
+.reset-button:disabled {
+  cursor: not-allowed;
+}
+
 .share-fb-button {
   color: white;
   background: #4267b3;
@@ -232,3 +269,12 @@ svg#svg574 .province-layer path:hover {
     transform: rotate(360deg);
   }
 }
+
+@keyframes slidein {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}

src/context/app.context.js

@@ -0,0 +1,23 @@
+import { createContext, useState } from "react";
+import { PROVINCES_LENGTH } from "../utils/constants";
+
+const AppContext = createContext();
+
+export const AppProvider = ({ children }) => {
+  const [provinceLevels, setProvinceLevels] = useState(
+    new Array(PROVINCES_LENGTH).fill(0)
+  );
+
+  return (
+    <AppContext.Provider
+      value={{
+        provinceLevels,
+        setProvinceLevels,
+      }}
+    >
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+export default AppContext;

src/index.js

@@ -4,10 +4,14 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+import { AppProvider } from './context/app.context';
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <AppProvider>
+      <App />
+    </AppProvider>
   </React.StrictMode>
 );
 

src/pages/Map.js

@@ -1,21 +1,22 @@
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import React, { useMemo, useState, useEffect, useCallback, useContext } from 'react';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 
 import PhilippinesMapJSX from '../PhilippinesMapJSX';
-import { PROVINCES, MENU_OPTIONS, PROVINCES_LENGTH } from '../utils/constants';
+import { PROVINCES, MENU_OPTIONS } from '../utils/constants';
 import '.././App.css';
 import {
   levelArrayToString,
   levelStringToArray,
 } from '../utils/levelConverter';
 
+import AppContext from '../context/app.context';
+
 const PhilippinesMap = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
 
-  const [provinceLevels, setProvinceLevels] = useState(
-    new Array(PROVINCES_LENGTH).fill(0)
-  );
+  const { provinceLevels, setProvinceLevels } = useContext(AppContext)
+
   const [selectedProvinceIndex, setSelectedProvinceIndex] = useState(0);
   const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
   const [menuVisible, setMenuVisible] = useState(false);

src/pages/MapPage.js

@@ -1,4 +1,4 @@
-import React, {  useCallback, useRef } from 'react';
+import React, { useState, useCallback, useRef, useContext } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toJpeg } from 'html-to-image'
 
@@ -7,10 +7,18 @@ import FacebookLogo from '../components/FacebookLogo'
 import { FB_SHARE_URL } from '../utils/constants'
 import '.././App.css'
 
+import AppContext from '../context/app.context';
+
 function MapPage() {
     const divRef = useRef(null);
     const location = useLocation();
+
+    const [isResetMapToastVisible, setIsResetMapToastVisible] = useState(false);
+
+    const { provinceLevels, setProvinceLevels } = useContext(AppContext);
 
+    const noProvinceSelected = provinceLevels.every(level => level === 0);
+
     const fileName = 'phMap.jpg'
 
     const downloadJpg = useCallback(() => {
@@ -33,6 +41,14 @@ function MapPage() {
       const navUrl = FB_SHARE_URL + window.location.href;
       window.open(navUrl, 'mywindow', 'width=350,height=250');
     }, [location.search]);
+
+    const handleReset = () => {
+      if(noProvinceSelected) return;
+
+      setProvinceLevels(provinceLevels => provinceLevels.map(_ => 0))
+      setIsResetMapToastVisible(true)
+      setTimeout(() => setIsResetMapToastVisible(false), 2500)
+    };
 
     return (
         <section>
@@ -41,10 +57,17 @@ function MapPage() {
                 <section className='Map-padding' ref={divRef}>
                     <Map/>
                 </section>
-                <section className='save-image-button' onClick={downloadJpg}>Save Image</section>
-                <section className='share-fb-button' onClick={handleFacebookShare}>
-                  <FacebookLogo />
-                  Share
+
+                <section className='Map-cta'>
+                  <section className='Map-cta-button-container'>
+                    <button className='save-image-button' onClick={downloadJpg}>Save Image</button>
+                    <button className='reset-button' onClick={handleReset} disabled={noProvinceSelected}>Reset</button>
+                  </section>
+
+                  <button className='share-fb-button' onClick={handleFacebookShare}>
+                    <FacebookLogo />
+                    Share
+                  </button>
                 </section>
             </section>
 
@@ -73,7 +96,9 @@ function MapPage() {
                 <img src='https://s11.flagcounter.com/count2/s6dX/bg_FFFFFF/txt_000000/border_CCCCCC/columns_4/maxflags_16/viewers_3/labels_0/pageviews_1/flags_0/percent_0/' alt='Flag Counter' border='0'/>
             </a>
         </div>
-        </section>
+
+        {isResetMapToastVisible && <div className='Map-cta-toast'>Map has been reset</div>}
+      </section>
     );
 };