Custom URL generator

client/src/App.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { WindowSize } from '@reach/window-size'
 import { ThemeProvider } from 'styled-components'
+// import { get } from './api/config'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import { FullScreen, useFullScreenHandle } from 'react-full-screen'
 import GlobalStyle, { theme } from './components/ui/GlobalStyle'
@@ -9,25 +10,26 @@ import LifelineCreation from './pages/lifelineCreation'
 import EnterFullScreen from './components/buttons/EnterFullscreen'
 import ExitFullScreen from './components/buttons/ExitFullscreen'
 import Home from './pages/Home'
-
 function App() {
   const [showFullscreenButton, setFullscreenButton] = useState(false)
-  /* Sets the lifeline modules upon load and every defaultLanguage change */
   const handle = useFullScreenHandle()
+
   return (
     <ThemeProvider theme={theme}>
       <FullScreen
         handle={handle}
         onChange={() => setFullscreenButton(!showFullscreenButton)}
       >
+        {' '}
         <BrowserRouter>
           <Routes>
-            <Route path="/settings" element={<LanguageCustomization />} />
-            <Route path="/lifelines" element={<LifelineCreation />} />
-            <Route path="/" element={<Home />} />
+            <Route path="/langForm/*" element={<LanguageCustomization />} />
+            <Route path="/moduleForm/*" element={<LifelineCreation />} />
+            <Route path="/settings/*" element={<LanguageCustomization />} />
+            <Route path="/lifelines/*" element={<LifelineCreation />} />
+            <Route path="/*" element={<Home />} />
           </Routes>
         </BrowserRouter>
-
         {showFullscreenButton ? (
           <EnterFullScreen handle={handle.enter} />
         ) : (

client/src/components/settings/LanguageCustomizationForm.tsx

@@ -1,11 +1,35 @@
-import { useState } from 'react'
-import { LANGUAGE_LOCAL_STORAGE_KEY } from '../../utils/constants'
+import { useState, useEffect } from 'react'
+import {
+  COMPRESSED_KEY,
+  LANGUAGE_LOCAL_STORAGE_KEY,
+  LIFELINES_LOCAL_STORAGE_KEY,
+} from '../../utils/constants'
+import { compressToEncodedURIComponent } from 'lz-string'
+import { useNavigate } from 'react-router-dom'
+import { UpdateURL } from '../../routing/UpdateURL'
+import { UpdateSettings } from '../../routing/UpdateSettings'
 
 const LanguageCustomization = () => {
+  const navigate = useNavigate()
   const [selectedLanguage, setSelectedLanguage] = useState<string>('')
 
+  useEffect(() => {
+    UpdateURL(navigate, selectedLanguage, null)
+    UpdateSettings(selectedLanguage, null)
+  }, [navigate, selectedLanguage])
+
   const formSubmit = (e: any) => {
     e.preventDefault()
+    if (selectedLanguage !== localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY)) {
+      let json = {
+        language: selectedLanguage,
+        lifelines: localStorage.getItem(LIFELINES_LOCAL_STORAGE_KEY),
+      }
+      const settings_json = JSON.stringify(json)
+      let compressed = compressToEncodedURIComponent(settings_json)
+      navigate(`${compressed}`)
+      localStorage.setItem(COMPRESSED_KEY, compressed)
+    }
     localStorage.setItem(LANGUAGE_LOCAL_STORAGE_KEY, selectedLanguage)
   }
 

client/src/components/settings/LifelineCreationForm.tsx

@@ -3,11 +3,16 @@ import {
   URL,
   ERROR_MSG,
   LIFELINES_LOCAL_STORAGE_KEY,
+  LANGUAGE_LOCAL_STORAGE_KEY,
+  COMPRESSED_KEY,
 } from '../../utils/constants'
+import { compressToEncodedURIComponent } from 'lz-string'
+import { useNavigate } from 'react-router-dom'
 import { ModuleResInterface } from '../../interfaces'
 import { getData } from '../../utils/utils'
 import DraggableLifelines from '../DraggableLifelines'
-
+import { UpdateURL } from '../../routing/UpdateURL'
+import { UpdateSettings } from '../../routing/UpdateSettings'
 const LifelineCreationForm = () => {
   /* Lifeline module properties */
   const flavor = 'Lifeline'
@@ -22,6 +27,7 @@ const LifelineCreationForm = () => {
   const [lifelineModules, setLifelineModules] = useState<ModuleResInterface[]>(
     [],
   )
+  const navigate = useNavigate()
 
   useEffect(() => {
     getData(
@@ -32,7 +38,9 @@ const LifelineCreationForm = () => {
       setModules,
       setLifelineModules,
     )
-  }, [])
+    UpdateURL(navigate, null, lifelineModules)
+    UpdateSettings(null, lifelineModules)
+  }, [navigate, lifelineModules])
 
   /* clearProperties
    *
@@ -52,6 +60,18 @@ const LifelineCreationForm = () => {
    */
   const formSubmit = (e: any) => {
     e.preventDefault()
+    /*const language: string | null = localStorage.getItem(
+      LANGUAGE_LOCAL_STORAGE_KEY,
+    )*/
+    let json = {
+      language: localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY),
+      lifelines: lifelineModules,
+    }
+    const settings_json = JSON.stringify(json)
+    let compressed = compressToEncodedURIComponent(settings_json)
+    navigate(`${compressed}`)
+    localStorage.setItem(COMPRESSED_KEY, compressed)
+
     const llModule: ModuleResInterface = {
       labels: [title] /* stored as array in API response */,
       flavor,

client/src/pages/Home.tsx

@@ -6,7 +6,9 @@ import { ERROR_MSG, URL, NUM_LIFELINES_DISPLAYED } from '../utils/constants'
 import { getData } from '../utils/utils'
 import Lifelines from '../components/lifelines/Lifelines'
 import { ModuleResInterface, NewsInterface } from '../interfaces/index'
-
+import { UpdateURL } from '../routing/UpdateURL'
+import { UpdateSettings } from '../routing/UpdateSettings'
+import { useNavigate } from 'react-router-dom'
 export default function Home() {
   const [defaultLanguage, setDefaultLanguage] = useState<string>('eng')
   const [modules, setModules] = useState<ModuleResInterface[]>([])
@@ -15,7 +17,8 @@ export default function Home() {
   )
   const [newsfeedModules, setNewsfeedModules] = useState<NewsInterface[]>([])
   const [errorFlag, setErrorFlag] = useState<boolean>(false)
-
+  const navigate = useNavigate()
+  //localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY),localStorage.getItem(LIFELINES_LOCAL_STORAGE_KEY)
   useEffect(() => {
     getData(
       URL,
@@ -26,7 +29,9 @@ export default function Home() {
       setLifelineModules,
       setNewsfeedModules,
     )
-  }, [defaultLanguage])
+    UpdateURL(navigate, defaultLanguage, lifelineModules)
+    UpdateSettings(defaultLanguage, lifelineModules)
+  }, [navigate, defaultLanguage, lifelineModules])
 
   return (
     <>

client/src/routing/UpdateSettings.tsx

@@ -0,0 +1,13 @@
+import { decompressFromEncodedURIComponent } from 'lz-string'
+import { COMPRESSED_KEY } from '../utils/constants'
+export const UpdateSettings = (selectLanguage, lifelineModules) => {
+  let decompressed = JSON.parse(
+    decompressFromEncodedURIComponent(localStorage.getItem(COMPRESSED_KEY)),
+  )
+  if (decompressed.language !== selectLanguage) {
+    selectLanguage = decompressed.language
+  }
+  if (lifelineModules != null && decompressed.lifelines !== lifelineModules) {
+    lifelineModules = decompressed.lifelines
+  }
+}

client/src/routing/UpdateURL.tsx

@@ -0,0 +1,19 @@
+import {
+  COMPRESSED_KEY,
+  LANGUAGE_LOCAL_STORAGE_KEY,
+  LIFELINES_LOCAL_STORAGE_KEY,
+} from '../utils/constants'
+export const UpdateURL = (navigate, language, lifelines) => {
+  if (
+    language &&
+    localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY) !== language
+  ) {
+    navigate(`${localStorage.getItem(COMPRESSED_KEY)}`)
+  }
+  if (
+    lifelines &&
+    localStorage.getItem(LIFELINES_LOCAL_STORAGE_KEY) !== lifelines
+  ) {
+    navigate(`${localStorage.getItem(COMPRESSED_KEY)}`)
+  }
+}

client/src/utils/constants.ts

@@ -3,3 +3,4 @@ export const NUM_LIFELINES_DISPLAYED = 3
 export const LIFELINES_LOCAL_STORAGE_KEY: string = 'lifelines'
 export const ERROR_MSG: string = 'Error retrieving module data from API...'
 export const URL: string = 'https://api.climateclock.world/v1/clock'
+export const COMPRESSED_KEY: string = ''

package.json

@@ -9,6 +9,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "lint-staged": "^12.3.3",
+    "lz-string": "^1.4.4",
     "mrm": "2",
     "prettier": "^2.5.1",
     "react": "^17.0.2",

yarn.lock

@@ -1879,6 +1879,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
+  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
+
 make-dir@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"