Handle Query parameters

package.json

@@ -45,4 +45,4 @@
   "repository": "[email protected]:bndw/wifi-card.git",
   "author": "bndw <[email protected]>",
   "license": "MIT"
-}
+}

src/App.js

@@ -6,33 +6,44 @@ 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 hashQuery = getHashParam();
+
   const html = document.querySelector('html');
+
   const { t, i18n } = useTranslation();
   const firstLoad = useRef(true);
   const [settings, setSettings] = useState({
     // Network SSID name
-    ssid: '',
+    ssid: hashQuery.get('ssid') || '',
     // Network password
-    password: '',
+    password: hashQuery.get('password') || '',
     // Settings: Network encryption mode
-    encryptionMode: 'WPA',
+    encryptionMode: hashQuery.get('encryptionMode') || 'WPA',
     // Settings: EAP Method
-    eapMethod: 'PWD',
+    eapMethod: hashQuery.get('eapMethod') || '',
     // Settings: EAP identity
-    eapIdentity: '',
+    eapIdentity: hashQuery.get('eapIdentity') || '',
     // Settings: Hide password on the printed card
-    hidePassword: false,
+    hidePassword: stringToBoolean(hashQuery.get('hidePassword')) || false,
     // Settings: Mark your network as hidden SSID
-    hiddenSSID: false,
+    hiddenSSID: stringToBoolean(hashQuery.get('hiddenSSID')) || false,
     // Settings: Portrait orientation
-    portrait: false,
+    portrait: stringToBoolean(hashQuery.get('portrait')) || false,
     // Settings: Additional cards
-    additionalCards: 0,
+    additionalCards: hashQuery.get('additionalCards') || 0,
     // Settings: Show tip (legend) on card
-    hideTip: false,
+    hideTip: stringToBoolean(hashQuery.get('hideTip')) || false,
+    // Display language
+    lng: hashQuery.get('lng') || i18n.language,
   });
+
   const [errors, setErrors] = useState({
     ssidError: '',
     passwordError: '',
@@ -48,6 +59,8 @@ function App() {
   const onChangeLanguage = (language) => {
     html.style.direction = htmlDirection(language);
     i18n.changeLanguage(language);
+
+    setSettings({ ...settings, lng: language });
   };
 
   const onPrint = () => {
@@ -142,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

@@ -7,7 +7,6 @@ import {
 } from 'evergreen-ui';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import i18n from '../i18n';
 import { Translations } from '../translations';
 import './style.css';
 
@@ -20,12 +19,13 @@ export const Settings = (props) => {
     { label: 'WEP', value: 'WEP' },
   ];
   const eapMethods = [{ label: 'PWD', value: 'PWD' }];
+
   const langSelectDefaultValue = () => {
-    const t = Translations.filter((t) => t.id === i18n.language);
+    const t = Translations.filter((t) => t.id === props.settings.lng);
     if (t.length !== 1) {
       return 'en-US';
     }
-    return t[0].id;
+    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]);