explore back button

package.json

@@ -15,6 +15,7 @@
     "@formkit/auto-animate": "^0.7.0",
     "@reduxjs/toolkit": "^1.9.5",
     "@tauri-apps/api": "^1.4.0",
+    "lodash": "^4.17.21",
     "redux": "^4.2.1",
     "svelte-icons-pack": "^2.1.0",
     "svelte-loading-spinners": "^0.3.4",

src/App.svelte

@@ -8,7 +8,7 @@
     import Titlebar from './widget/Titlebar/Titlebar.svelte';
 
     import { Router, Link, Route, navigate } from "svelte-routing";
-    import RouteStore from './store/RouteStore';
+    import RouteStore, { route } from './store/RouteStore';
     import Background from './widget/Background/Background.svelte';
     import Explore from './page/Explore/Explore.svelte';
     import Sidebar from './widget/Sidebar/Sidebar.svelte';
@@ -31,7 +31,7 @@
     });
     RouteStore.dispatch({ type: 'setPath', path: '/load' })
 
-    setTimeout(() => { RouteStore.dispatch({ type: 'setPath', path: '/' }) }, 3000)
+    setTimeout(() => { route('/') }, 3000)
     setCSSVariableFor('sidebar-width', '0px', 3000);
 </script>
 

src/page/Explore/Explore.svelte

@@ -6,7 +6,7 @@
     import VscArrowLeft from "svelte-icons-pack/vsc/VscArrowLeft";
 
     import { invoke } from '@tauri-apps/api/tauri';
-    import { route } from '../../store/RouteStore';
+    import { back } from '../../store/RouteStore';
     
 
     let list = [];
@@ -40,7 +40,7 @@
 <div class={style.root}>
 
     <p style='margin:8px'>
-        <button aria-label="back" class={style.backbtn} on:click={(_) => { route('/') }}>
+        <button aria-label="back" class={style.backbtn} on:click={(_) => { back() }}>
             <Icon src={VscArrowLeft} color='#b2b2b2' size='17px' />
         </button>
     </p>

src/page/SignIn/SignIn.svelte

@@ -2,6 +2,7 @@
     import style from './style.module.scss';
 
     import AccountStore from '../../store/AccountStore';
+    import { route } from '../../store/RouteStore';
 
     let homeserver = AccountStore.getState().homeserver;
     let homeserverValid = homeserver.match(/.+(\..+){1,}/gm) !== null;
@@ -22,7 +23,7 @@
         <br/>
 
         <button>What is a homeserver?</button>
-        <button>Explore homeservers</button>
+        <button on:click={() => {route('/explore')}}>Explore homeservers</button>
     </p>
     <p style="text-align:center">
         <button class="primary">Choose {homeserver}</button>

src/shared/Link.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-    import RouteState from "../store/RouteStore";
+    import RouteState, { route } from "../store/RouteStore";
     export let href = '#';
     
     function setUrl() {
-        RouteState.dispatch({ type: 'setPath', path: href });
+        if (!href.startsWith('/')) return;
+        
+        route(href)
     }
 </script>
 

src/store/RouteStore.ts

@@ -1,7 +1,9 @@
 import { configureStore } from '@reduxjs/toolkit';
+import _ from 'lodash';
 
 export interface RouteState {
-    path: string
+    path: string,
+    history: string[]
 }
 
 const store = configureStore({
@@ -9,6 +11,22 @@ const store = configureStore({
         path: (state = '/load', action) => {
             if (action.type != 'setPath') return state;
             return action.path ?? state;
+        },
+        history: (state = ['/load'], action) => {
+
+            let new_state: string[] = _.cloneDeep(state);
+
+            if (action.type == 'addHistory') {
+                // detect attempts to add same as last url
+                if (new_state[new_state.length - 1] == action.path)
+                    return new_state;
+                
+                new_state.push(action.path);
+            }
+            if (action.type == 'popHistory') {
+                new_state.pop();
+            }
+            return new_state;
         }
     },
 });
@@ -17,4 +35,12 @@ export default store;
 
 export function route(path) {
     store.dispatch({ type: 'setPath', path });
+    store.dispatch({ type: 'addHistory', path });
+}
+
+export function back() {
+    const history: string[] = store.getState().history;
+    console.log(history[history.length - 2]);
+    store.dispatch({ type: 'setPath', path: history[history.length - 2] });
+    store.dispatch({ type: 'popHistory' });
 }

yarn.lock

@@ -521,6 +521,11 @@ kleur@^4.1.5:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 magic-string@^0.27.0:
   version "0.27.0"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.27.0.tgz#e4a3413b4bab6d98d2becffd48b4a257effdbbf3"