diff options
| -rw-r--r-- | src/App.js | 113 | ||||
| -rw-r--r-- | src/components/useHashParam.js | 48 |
2 files changed, 13 insertions, 148 deletions
| @@ -1,103 +1,29 @@ | |||
| 1 | import { Button, Heading, Link, Pane, Paragraph } from 'evergreen-ui'; | 1 | import { Button, Heading, Link, Pane, Paragraph } from 'evergreen-ui'; |
| 2 | import React, { useEffect, useRef, useState, useCallback } from 'react'; | 2 | import React, { useEffect, useRef, useState } from 'react'; |
| 3 | import { useTranslation } from 'react-i18next'; | 3 | import { useTranslation } from 'react-i18next'; |
| 4 | import logo from '../src/images/wifi.png'; | 4 | import logo from '../src/images/wifi.png'; |
| 5 | import { Settings } from './components/Settings'; | 5 | import { Settings } from './components/Settings'; |
| 6 | import { WifiCard } from './components/WifiCard'; | 6 | import { WifiCard } from './components/WifiCard'; |
| 7 | import './style.css'; | 7 | import './style.css'; |
| 8 | import { Translations } from './translations'; | 8 | import { Translations } from './translations'; |
| 9 | import useHashParam from './components/useHashParam'; | ||
| 10 | 9 | ||
| 11 | function App() { | 10 | function App() { |
| 12 | const getHashSearchParams = (location) => { | ||
| 13 | const hash = location.hash.slice(1); | ||
| 14 | const [prefix, query] = hash.split('?'); | ||
| 15 | |||
| 16 | return [prefix, new URLSearchParams(query)]; | ||
| 17 | }; | ||
| 18 | const getHashParam = (key, location = window.location) => { | ||
| 19 | const [_, searchParams] = getHashSearchParams(location); | ||
| 20 | return searchParams.get(key); | ||
| 21 | }; | ||
| 22 | const setHashParam = (key, value, location = window.location) => { | ||
| 23 | const [prefix, searchParams] = getHashSearchParams(location); | ||
| 24 | |||
| 25 | if (typeof value === 'undefined') { | ||
| 26 | searchParams.delete(key); | ||
| 27 | } else { | ||
| 28 | searchParams.set(key, value); | ||
| 29 | } | ||
| 30 | |||
| 31 | const search = searchParams.toString(); | ||
| 32 | location.hash = search ? `${prefix}?${search}` : prefix; | ||
| 33 | }; | ||
| 34 | |||
| 35 | let pssid = getHashParam('ssid'); //params.get('ssid') || ''; | ||
| 36 | let ppassword = getHashParam('password') || ''; | ||
| 37 | let pencryptionMode = | ||
| 38 | getHashParam('encryptionMode') !== null | ||
| 39 | ? getHashParam('encryptionMode') | ||
| 40 | : 'WPA'; | ||
| 41 | let peapMethod = getHashParam('eapMethod') || 'PWD'; | ||
| 42 | let peapIdentity = getHashParam('eapIdentity') || ''; | ||
| 43 | let phidePassword = | ||
| 44 | getHashParam('hidePassword') === null | ||
| 45 | ? false | ||
| 46 | : getHashParam('hidePassword').toLowerCase() === 'true' | ||
| 47 | ? true | ||
| 48 | : false; | ||
| 49 | let phiddenSSID = | ||
| 50 | getHashParam('hiddenSSID') === null | ||
| 51 | ? false | ||
| 52 | : getHashParam('hiddenSSID').toLowerCase() === 'true' | ||
| 53 | ? true | ||
| 54 | : false; | ||
| 55 | let pportrait = | ||
| 56 | getHashParam('portrait') === null | ||
| 57 | ? false | ||
| 58 | : getHashParam('portrait').toLowerCase() === 'true' | ||
| 59 | ? true | ||
| 60 | : false || false; | ||
| 61 | let padditionalCards = getHashParam('additionalCards') || 1; | ||
| 62 | let phideTip = | ||
| 63 | getHashParam('hideTip') === null | ||
| 64 | ? false | ||
| 65 | : getHashParam('hideTip').toLowerCase() === 'true' | ||
| 66 | ? true | ||
| 67 | : false; | ||
| 68 | let planguage = | ||
| 69 | getHashParam('lng') === null || getHashParam('lng').toLowerCase() === '' | ||
| 70 | ? 'en-US' | ||
| 71 | : getHashParam('lng'); | ||
| 72 | |||
| 73 | // ######################## | ||
| 74 | const html = document.querySelector('html'); | 11 | const html = document.querySelector('html'); |
| 75 | 12 | ||
| 76 | const { t, i18n } = useTranslation(); | 13 | const { t, i18n } = useTranslation(); |
| 77 | const firstLoad = useRef(true); | 14 | const firstLoad = useRef(true); |
| 78 | const [settings, setSettings] = useState({ | 15 | const [settings, setSettings] = useState({ |
| 79 | // Network SSID name | 16 | ssid: '', |
| 80 | ssid: pssid, | 17 | password: '', |
| 81 | // Network password | 18 | encryptionMode: 'WPA', |
| 82 | password: ppassword, | 19 | eapMethod: 'PWD', |
| 83 | // Settings: Network encryption mode | 20 | eapIdentity: '', |
| 84 | encryptionMode: pencryptionMode, | 21 | hidePassword: false, |
| 85 | // Settings: EAP Method | 22 | hiddenSSID: false, |
| 86 | eapMethod: peapMethod, | 23 | portrait: false, |
| 87 | // Settings: EAP identity | 24 | additionalCards: 1, |
| 88 | eapIdentity: peapIdentity, | 25 | hideTip: false, |
| 89 | // Settings: Hide password on the printed card | 26 | lng: 'en-US', |
| 90 | hidePassword: phidePassword, | ||
| 91 | // Settings: Mark your network as hidden SSID | ||
| 92 | hiddenSSID: phiddenSSID, | ||
| 93 | // Settings: Portrait orientation | ||
| 94 | portrait: pportrait, | ||
| 95 | // Settings: Additional cards | ||
| 96 | additionalCards: padditionalCards, | ||
| 97 | // Settings: Show tip (legend) on card | ||
| 98 | hideTip: phideTip, | ||
| 99 | // Display language | ||
| 100 | lng: planguage, | ||
| 101 | }); | 27 | }); |
| 102 | 28 | ||
| 103 | const [errors, setErrors] = useState({ | 29 | const [errors, setErrors] = useState({ |
| @@ -205,28 +131,15 @@ function App() { | |||
| 205 | firstLoad.current = false; | 131 | firstLoad.current = false; |
| 206 | }; | 132 | }; |
| 207 | 133 | ||
| 208 | const generateUrl = () => { | ||
| 209 | Object.entries(settings).map(([key, value]) => { | ||
| 210 | //console.log(key+" = " + value) | ||
| 211 | setHashParam(key, value); | ||
| 212 | if (key === 'ssid') setName(value); | ||
| 213 | return true; | ||
| 214 | }); | ||
| 215 | }; | ||
| 216 | const [name, setName] = useHashParam('name'); | ||
| 217 | |||
| 218 | useEffect(() => { | 134 | useEffect(() => { |
| 219 | // Ensure the page direction is set properly on first load | 135 | // Ensure the page direction is set properly on first load |
| 220 | if (htmlDirection() === 'rtl') { | 136 | if (htmlDirection() === 'rtl') { |
| 221 | html.style.direction = 'rtl'; | 137 | html.style.direction = 'rtl'; |
| 222 | } | 138 | } |
| 223 | generateUrl(); | 139 | }, []); |
| 224 | }); | ||
| 225 | 140 | ||
| 226 | return ( | 141 | return ( |
| 227 | <Pane> | 142 | <Pane> |
| 228 | Hello{' '} | ||
| 229 | {name ? name + '! You name is stored in hash params #️⃣' : 'visitor!'} | ||
| 230 | <Pane display="flex"> | 143 | <Pane display="flex"> |
| 231 | <img alt="icon" src={logo} width="32" height="32" /> | 144 | <img alt="icon" src={logo} width="32" height="32" /> |
| 232 | <Heading size={900} paddingRight={16} paddingLeft={16}> | 145 | <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 @@ | |||
| 1 | import { useState, useEffect, useCallback } from 'react'; | ||
| 2 | |||
| 3 | const getHashSearchParams = (location) => { | ||
| 4 | const hash = location.hash.slice(1); | ||
| 5 | const [prefix, query] = hash.split('?'); | ||
| 6 | |||
| 7 | return [prefix, new URLSearchParams(query)]; | ||
| 8 | }; | ||
| 9 | |||
| 10 | const getHashParam = (key, location = window.location) => { | ||
| 11 | const [_, searchParams] = getHashSearchParams(location); | ||
| 12 | return searchParams.get(key); | ||
| 13 | }; | ||
| 14 | |||
| 15 | const setHashParam = (key, value, location = window.location) => { | ||
| 16 | const [prefix, searchParams] = getHashSearchParams(location); | ||
| 17 | |||
| 18 | if (typeof value === 'undefined') { | ||
| 19 | searchParams.delete(key); | ||
| 20 | } else { | ||
| 21 | searchParams.set(key, value); | ||
| 22 | } | ||
| 23 | |||
| 24 | const search = searchParams.toString(); | ||
| 25 | location.hash = search ? `${prefix}?${search}` : prefix; | ||
| 26 | }; | ||
| 27 | |||
| 28 | const useHashParam = (key) => { | ||
| 29 | const [innerValue, setInnerValue] = useState(); | ||
| 30 | |||
| 31 | useEffect(() => { | ||
| 32 | const handleHashChange = () => setInnerValue(getHashParam(key)); | ||
| 33 | handleHashChange(); | ||
| 34 | window.addEventListener('hashchange', handleHashChange); | ||
| 35 | return () => window.removeEventListener('hashchange', handleHashChange); | ||
| 36 | }, [key]); | ||
| 37 | |||
| 38 | const setValue = useCallback( | ||
| 39 | (value) => { | ||
| 40 | setHashParam(key, value); | ||
| 41 | }, | ||
| 42 | [key] | ||
| 43 | ); | ||
| 44 | |||
| 45 | return [innerValue, setValue]; | ||
| 46 | }; | ||
| 47 | |||
| 48 | export default useHashParam; | ||
