refactor: Replace LocalStorage get/set with LOCALSTORAGE constants

PopStackHack · Oct 17, 2020 · c21b99d · c21b99d
1 parent a2f8456
commit c21b99d
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 16 deletions.
diff --git a/pages/candidates/index.js b/pages/candidates/index.js
@@ -11,9 +11,11 @@ import ConstituencyPlace from '../../components/Candidates/ConstituencyPlace/Con
 import CandidateList from '../../components/Candidates/CandidateList/CandidateList';
 import StateRegionCandidateList from '../../components/Candidates/StateRegionCandidateList/StateRegionCandidateList';
 import { hasFullLocation } from '../../utils/helpers';
+import { LOCALSTORAGE_KEYS } from '../../utils/constants';
 
 import './candidates.module.scss';
 import useAPI from '../../hooks/useAPI';
+import Prompt from '../../components/Common/Prompt/Prompt';
 
 const { TabPanel, Tab } = Tabs;
 
@@ -24,16 +26,17 @@ const Candidates = () => {
   const [stateCandidates, setStateCandidates] = useState(null);
   const [stateOrRegion, setStateOrRegion] = useState('');
   const [shouldShowLocationLink, setShowLocationLink] = useState(true);
+  const [isPromptDismissed, setPromptDismissed] = useState(false);
   const [, fetchData] = useAPI();
 
   function getConstituency(house) {
     return constituencies.find(constituency => constituency.house === house);
   }
 
   async function fetchWardDetails() {
-    const stateRegion = localStorage.getItem('stateRegion');
-    const township = localStorage.getItem('township');
-    const ward = localStorage.getItem('wardVillage');
+    const stateRegion = localStorage.getItem(LOCALSTORAGE_KEYS.STATE_REGION);
+    const township = localStorage.getItem(LOCALSTORAGE_KEYS.TOWNSHIP);
+    const ward = localStorage.getItem(LOCALSTORAGE_KEYS.WARD_VILLAGE);
 
     const { data } = await fetchData('/api/locations', {
       type: 'details',
@@ -99,24 +102,32 @@ const Candidates = () => {
   }
 
   function isNPT() {
-    const stateRegion = localStorage.getItem('stateRegion');
-    const township = localStorage.getItem('township');
-    const wardVillage = localStorage.getItem('wardVillage');
+    const stateRegion = localStorage.getItem(LOCALSTORAGE_KEYS.STATE_REGION);
+    const township = localStorage.getItem(LOCALSTORAGE_KEYS.TOWNSHIP);
+    const wardVillage = localStorage.getItem(LOCALSTORAGE_KEYS.WARD_VILLAGE);
     return stateRegion.includes('နေပြည်တော်') || township === wardVillage;
   }
 
   // Pre-fetch constituencies
   useEffect(() => {
     ReactGA.pageview(window.location.pathname);
 
+    const candidatePromptDismissed = localStorage.getItem(
+      LOCALSTORAGE_KEYS.CANDIDATE_PROMPT_DISMISS
+    );
+
+    if (candidatePromptDismissed) {
+      setPromptDismissed(true);
+    }
+
     // Because we can't access localStorage before React is initiated.
     if (hasFullLocation()) {
       setShowLocationLink(false);
     } else {
       return;
     }
 
-    const stateRegion = localStorage.getItem('stateRegion');
+    const stateRegion = localStorage.getItem(LOCALSTORAGE_KEYS.STATE_REGION);
 
     if (isNPT()) {
       setStateOrRegion('တိုင်းဒေသကြီး'); // NPT defaults to တိုင်းဒေသ
@@ -136,6 +147,11 @@ const Candidates = () => {
     }
   }, [constituencies]);
 
+  function dismissPrompt() {
+    localStorage.setItem(LOCALSTORAGE_KEYS.CANDIDATE_PROMPT_DISMISS, true);
+    setPromptDismissed(true);
+  }
+
   function onClickTab(value) {
     // Fetch each candidates filtered on values
     const constituency = getConstituency(value);
@@ -283,6 +299,20 @@ const Candidates = () => {
           </TabPanel>
         </div>
       )}
+      <div className="my-2">
+        {!isPromptDismissed && (
+          <Prompt onClose={dismissPrompt}>
+            <span className="color-white">
+              ကိုယ်စားလှယ်လောင်းမည်သူမဆို ၎င်း၏ ကိုယ်ရေးအချက်အလက်များကို
+              အများပြည်သူထံ မထုတ်ပြန်စေလိုပါက
+              ပြည်ထောင်စုရွေးကောက်ပွဲကော်မရှင်သို့ စာဖြင့်
+              တင်ပြတောင်းဆိုနိုင်ပါသည်။ ပြည်ထောင်စုရွေးကောက်ပွဲကော်မရှင်သည်
+              mVoter2020 အက်ပလီကေးရှင်းမှ ၎င်း၏ ကိုယ်ရေးအချက်အလက်များကို
+              ဖယ်ရှားရန် ဆောင်ရွက်သွားမည် ဖြစ်ပါသည်။
+            </span>
+          </Prompt>
+        )}
+      </div>
     </Layout>
   );
 };

diff --git a/pages/location/index.js b/pages/location/index.js
@@ -12,6 +12,7 @@ import WardVillageModal from '../../components/Location/WardVillageModal';
 
 import './location.module.scss';
 import { hasFullLocation } from '../../utils/helpers';
+import { LOCALSTORAGE_KEYS } from '../../utils/constants';
 
 const Location = () => {
   const [townshipModalOpen, setTownshipModalOpen] = useState(false);
@@ -25,16 +26,16 @@ const Location = () => {
   useEffect(() => {
     if (hasFullLocation()) {
       setIsAppStart(false);
-      setStateRegion(localStorage.getItem('stateRegion'));
-      setTownship(localStorage.getItem('township'));
-      setWardVillage(localStorage.getItem('wardVillage'));
+      setStateRegion(localStorage.getItem(LOCALSTORAGE_KEYS.STATE_REGION));
+      setTownship(localStorage.getItem(LOCALSTORAGE_KEYS.TOWNSHIP));
+      setWardVillage(localStorage.getItem(LOCALSTORAGE_KEYS.WARD_VILLAGE));
     }
   }, []);
 
   function onClickDone() {
-    localStorage.setItem('stateRegion', stateRegion);
-    localStorage.setItem('township', township);
-    localStorage.setItem('wardVillage', wardVillage);
+    localStorage.setItem(LOCALSTORAGE_KEYS.STATE_REGION, stateRegion);
+    localStorage.setItem(LOCALSTORAGE_KEYS.TOWNSHIP, township);
+    localStorage.setItem(LOCALSTORAGE_KEYS.WARD_VILLAGE, wardVillage);
     router.push('/candidates');
   }
 

diff --git a/utils/helpers.js b/utils/helpers.js
@@ -1,10 +1,11 @@
 import moment from 'moment';
+import { LOCALSTORAGE_KEYS } from './constants';
 
 export function hasFullLocation() {
   return (
-    localStorage.getItem('stateRegion') &&
-    localStorage.getItem('township') &&
-    localStorage.getItem('wardVillage')
+    localStorage.getItem(LOCALSTORAGE_KEYS.STATE_REGION) &&
+    localStorage.getItem(LOCALSTORAGE_KEYS.TOWNSHIP) &&
+    localStorage.getItem(LOCALSTORAGE_KEYS.WARD_VILLAGE)
   );
 }