Merge pull request #1 from ofostier/Hash-management

Hash management

src/App.js

@@ -6,77 +6,42 @@ import { Settings } from './components/Settings';
 import { WifiCard } from './components/WifiCard';
 import './style.css';
 import { Translations } from './translations';
+import {
+  getHashParam,
+  setHash,
+  stringToBoolean,
+} from './commons/HandleHashParameters';
 
 function App() {
-  const urlSearchString = window.location.search;
-  const params = new URLSearchParams(urlSearchString);
+  const hashQuery = getHashParam();
 
-  let pssid = params.get('ssid') || '';
-  let ppassword = params.get('password') || '';
-  let pencryptionMode =
-    params.get('encryptionMode') !== null
-      ? params.get('encryptionMode')
-      : 'WPA';
-  let peapMethod = params.get('eapMethod') || 'PWD';
-  let peapIdentity = params.get('eapIdentity') || '';
-  let phidePassword =
-    params.get('hidePassword') === null
-      ? false
-      : params.get('hidePassword').toLowerCase() === 'true'
-      ? true
-      : false;
-  let phiddenSSID =
-    params.get('hiddenSSID') === null
-      ? false
-      : params.get('hiddenSSID').toLowerCase() === 'true'
-      ? true
-      : false;
-  let pportrait =
-    params.get('portrait') === null
-      ? false
-      : params.get('portrait').toLowerCase() === 'true'
-      ? true
-      : false || false;
-  let padditionalCards = params.get('additionalCards') || 0;
-  let phideTip =
-    params.get('hideTip') === null
-      ? false
-      : params.get('hideTip').toLowerCase() === 'true'
-      ? true
-      : false;
-  let planguage =
-    params.get('lng') === null || params.get('lng').toLowerCase() === ''
-      ? 'en-US'
-      : params.get('lng');
-
-  // ########################
   const html = document.querySelector('html');
 
   const { t, i18n } = useTranslation();
   const firstLoad = useRef(true);
   const [settings, setSettings] = useState({
     // Network SSID name
-    ssid: pssid,
+    ssid: hashQuery.get('ssid') || '',
     // Network password
-    password: ppassword,
+    password: hashQuery.get('password') || '',
     // Settings: Network encryption mode
-    encryptionMode: pencryptionMode,
+    encryptionMode: hashQuery.get('encryptionMode') || 'WPA',
     // Settings: EAP Method
-    eapMethod: peapMethod,
+    eapMethod: hashQuery.get('eapMethod') || '',
     // Settings: EAP identity
-    eapIdentity: peapIdentity,
+    eapIdentity: hashQuery.get('eapIdentity') || '',
     // Settings: Hide password on the printed card
-    hidePassword: phidePassword,
+    hidePassword: stringToBoolean(hashQuery.get('hidePassword')) || false,
     // Settings: Mark your network as hidden SSID
-    hiddenSSID: phiddenSSID,
+    hiddenSSID: stringToBoolean(hashQuery.get('hiddenSSID')) || false,
     // Settings: Portrait orientation
-    portrait: pportrait,
+    portrait: stringToBoolean(hashQuery.get('portrait')) || false,
     // Settings: Additional cards
-    additionalCards: padditionalCards,
+    additionalCards: hashQuery.get('additionalCards') || 0,
     // Settings: Show tip (legend) on card
-    hideTip: phideTip,
+    hideTip: stringToBoolean(hashQuery.get('hideTip')) || false,
     // Display language
-    language: planguage,
+    lng: hashQuery.get('lng') || i18n.language,
   });
 
   const [errors, setErrors] = useState({
@@ -95,7 +60,7 @@ function App() {
     html.style.direction = htmlDirection(language);
     i18n.changeLanguage(language);
 
-    setSettings({ ...settings, language });
+    setSettings({ ...settings, lng: language });
   };
 
   const onPrint = () => {
@@ -190,6 +155,9 @@ function App() {
       html.style.direction = 'rtl';
     }
   });
+  useEffect(() => {
+    setHash(settings);
+  }, [settings]);
 
   return (
     <Pane>

src/commons/HandleHashParameters.js

@@ -0,0 +1,49 @@
+const getHashSearchParams = (location) => {
+  const hash = location.hash.slice(1);
+  const [prefix, query] = hash.split('?');
+
+  return [prefix, new URLSearchParams(query)];
+};
+
+export const getHashParam = (location = window.location) => {
+  const [, searchParams] = getHashSearchParams(location);
+  return searchParams;
+};
+
+export 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;
+};
+
+export const setHash = (settings) => {
+  Object.entries(settings).forEach(([k, v]) => {
+    setHashParam(k, v);
+  });
+};
+
+export const stringToBoolean = (stringValue) => {
+  switch (stringValue?.toLowerCase()?.trim()) {
+    case 'true':
+    case 'yes':
+    case '1':
+      return true;
+
+    case 'false':
+    case 'no':
+    case '0':
+    case null:
+    case undefined:
+      return false;
+
+    default:
+      return false;
+  }
+};

src/components/Settings.js

@@ -21,11 +21,11 @@ export const Settings = (props) => {
   const eapMethods = [{ label: 'PWD', value: 'PWD' }];
 
   const langSelectDefaultValue = () => {
-    const t = Translations.filter((t) => t.id === props.settings.language);
+    const t = Translations.filter((t) => t.id === props.settings.lng);
     if (t.length !== 1) {
       return 'en-US';
     }
-    return props.settings.language;
+    return props.settings.lng;
   };
 
   useEffect(() => {

src/components/WifiCard.js

@@ -47,7 +47,6 @@ export const WifiCard = (props) => {
     let data = '';
     Object.entries(opts).forEach(([k, v]) => (data += `${k}:${v};`));
     const qrval = `WIFI:${data};`;
-
     setQrvalue(qrval);
   }, [props.settings]);