Remove hash params feature

The hash params implementation was buggy and auto-polluting the URL bar
with all settings on every render. Removing it entirely for now until a
cleaner approach is designed.

2 files changed, 13 insertions, 148 deletions

diff --git a/src/App.js b/src/App.js
index 94a3e97..9bde98d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,103 +1,29 @@
 import { Button, Heading, Link, Pane, Paragraph } from 'evergreen-ui';
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import logo from '../src/images/wifi.png';
 import { Settings } from './components/Settings';
 import { WifiCard } from './components/WifiCard';
 import './style.css';
 import { Translations } from './translations';
-import useHashParam from './components/useHashParam';
 
 function App() {
-  const getHashSearchParams = (location) => {
-    const hash = location.hash.slice(1);
-    const [prefix, query] = hash.split('?');
-
-    return [prefix, new URLSearchParams(query)];
-  };
-  const getHashParam = (key, location = window.location) => {
-    const [_, searchParams] = getHashSearchParams(location);
-    return searchParams.get(key);
-  };
-  const setHashParam = (key, value, location = window.location) => {
-    const [prefix, searchParams] = getHashSearchParams(location);
-
-    if (typeof value === 'undefined') {
-      searchParams.delete(key);
-    } else {
-      searchParams.set(key, value);
-    }
-
-    const search = searchParams.toString();
-    location.hash = search ? `${prefix}?${search}` : prefix;
-  };
-
-  let pssid = getHashParam('ssid'); //params.get('ssid') || '';
-  let ppassword = getHashParam('password') || '';
-  let pencryptionMode =
-    getHashParam('encryptionMode') !== null
-      ? getHashParam('encryptionMode')
-      : 'WPA';
-  let peapMethod = getHashParam('eapMethod') || 'PWD';
-  let peapIdentity = getHashParam('eapIdentity') || '';
-  let phidePassword =
-    getHashParam('hidePassword') === null
-      ? false
-      : getHashParam('hidePassword').toLowerCase() === 'true'
-        ? true
-        : false;
-  let phiddenSSID =
-    getHashParam('hiddenSSID') === null
-      ? false
-      : getHashParam('hiddenSSID').toLowerCase() === 'true'
-        ? true
-        : false;
-  let pportrait =
-    getHashParam('portrait') === null
-      ? false
-      : getHashParam('portrait').toLowerCase() === 'true'
-        ? true
-        : false || false;
-  let padditionalCards = getHashParam('additionalCards') || 1;
-  let phideTip =
-    getHashParam('hideTip') === null
-      ? false
-      : getHashParam('hideTip').toLowerCase() === 'true'
-        ? true
-        : false;
-  let planguage =
-    getHashParam('lng') === null || getHashParam('lng').toLowerCase() === ''
-      ? 'en-US'
-      : getHashParam('lng');
-
-  // ########################
   const html = document.querySelector('html');
 
   const { t, i18n } = useTranslation();
   const firstLoad = useRef(true);
   const [settings, setSettings] = useState({
-    // Network SSID name
-    ssid: pssid,
-    // Network password
-    password: ppassword,
-    // Settings: Network encryption mode
-    encryptionMode: pencryptionMode,
-    // Settings: EAP Method
-    eapMethod: peapMethod,
-    // Settings: EAP identity
-    eapIdentity: peapIdentity,
-    // Settings: Hide password on the printed card
-    hidePassword: phidePassword,
-    // Settings: Mark your network as hidden SSID
-    hiddenSSID: phiddenSSID,
-    // Settings: Portrait orientation
-    portrait: pportrait,
-    // Settings: Additional cards
-    additionalCards: padditionalCards,
-    // Settings: Show tip (legend) on card
-    hideTip: phideTip,
-    // Display language
-    lng: planguage,
+    ssid: '',
+    password: '',
+    encryptionMode: 'WPA',
+    eapMethod: 'PWD',
+    eapIdentity: '',
+    hidePassword: false,
+    hiddenSSID: false,
+    portrait: false,
+    additionalCards: 1,
+    hideTip: false,
+    lng: 'en-US',
   });
 
   const [errors, setErrors] = useState({
@@ -205,28 +131,15 @@ function App() {
     firstLoad.current = false;
   };
 
-  const generateUrl = () => {
-    Object.entries(settings).map(([key, value]) => {
-      //console.log(key+" = " + value)
-      setHashParam(key, value);
-      if (key === 'ssid') setName(value);
-      return true;
-    });
-  };
-  const [name, setName] = useHashParam('name');
-
   useEffect(() => {
     // Ensure the page direction is set properly on first load
     if (htmlDirection() === 'rtl') {
       html.style.direction = 'rtl';
     }
-    generateUrl();
-  });
+  }, []);
 
   return (
     <Pane>
-      Hello{' '}
-      {name ? name + '! You name is stored in hash params #️⃣' : 'visitor!'}
       <Pane display="flex">
         <img alt="icon" src={logo} width="32" height="32" />
         <Heading size={900} paddingRight={16} paddingLeft={16}>
diff --git a/src/components/useHashParam.js b/src/components/useHashParam.js
deleted file mode 100644
index e43e1e4..0000000
--- a/src/components/useHashParam.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-
-const getHashSearchParams = (location) => {
-  const hash = location.hash.slice(1);
-  const [prefix, query] = hash.split('?');
-
-  return [prefix, new URLSearchParams(query)];
-};
-
-const getHashParam = (key, location = window.location) => {
-  const [_, searchParams] = getHashSearchParams(location);
-  return searchParams.get(key);
-};
-
-const setHashParam = (key, value, location = window.location) => {
-  const [prefix, searchParams] = getHashSearchParams(location);
-
-  if (typeof value === 'undefined') {
-    searchParams.delete(key);
-  } else {
-    searchParams.set(key, value);
-  }
-
-  const search = searchParams.toString();
-  location.hash = search ? `${prefix}?${search}` : prefix;
-};
-
-const useHashParam = (key) => {
-  const [innerValue, setInnerValue] = useState();
-
-  useEffect(() => {
-    const handleHashChange = () => setInnerValue(getHashParam(key));
-    handleHashChange();
-    window.addEventListener('hashchange', handleHashChange);
-    return () => window.removeEventListener('hashchange', handleHashChange);
-  }, [key]);
-
-  const setValue = useCallback(
-    (value) => {
-      setHashParam(key, value);
-    },
-    [key]
-  );
-
-  return [innerValue, setValue];
-};
-
-export default useHashParam;