fix: browser history

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios --simulator=\"iPhone 14\"",
-    "web": "webpack-dev-server --config ./web/webpack.config.js -d inline-source-map --hot --color",
+    "web": "webpack-dev-server --config ./web/webpack.config.js -d inline-source-map --hot --color --history-api-fallback",
     "start": "react-native start",
     "clean-cache": "rm -rf node_modules/.cache/babel-loader/*",
     "test": "jest --forceExit --testTimeout=20000 --bail",
@@ -39,6 +39,7 @@
     "base64-js": "^1.5.1",
     "email-validator": "^2.0.4",
     "he": "^1.2.0",
+    "history": "^5.3.0",
     "lodash.chunk": "^4.2.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.5.0",

src/App.web.tsx

@@ -1,5 +1,6 @@
 import React, {useState, useEffect} from 'react'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
+import {getInitialURL} from 'platform/urls'
 import * as view from './view/index'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import {WebShell} from './view/shell/web'
@@ -13,7 +14,14 @@ function App() {
   // init
   useEffect(() => {
     view.setup()
-    setupState().then(setRootStore)
+    setupState().then(store => {
+      setRootStore(store)
+      getInitialURL().then(url => {
+        if (url) {
+          store.nav.handleLink(url)
+        }
+      })
+    })
   }, [])
 
   // show nothing prior to init

src/platform/urls.tsx

@@ -1,31 +1,20 @@
 import {Linking} from 'react-native'
-import {isIOS, isAndroid, isNative, isWeb} from './detection'
+import {createBrowserHistory, createMemoryHistory} from 'history'
+import {isNative, isWeb} from './detection'
 
-export function makeAppUrl(path = '') {
-  if (isIOS) {
-    return `bskyapp://${path}`
-  } else if (isAndroid) {
-    return `bsky://app${path}`
-  } else {
-    // @ts-ignore window exists -prf
-    return `${window.location.origin}${path}`
-  }
-}
-
-export function extractHashFragment(url: string): string {
-  return url.split('#')[1] || ''
-}
-
-export async function getInitialURL(): Promise<string> {
+export async function getInitialURL(): Promise<string | undefined> {
   if (isNative) {
     const url = await Linking.getInitialURL()
     if (url) {
       return url
     }
-    return makeAppUrl()
+    return undefined
   } else {
     // @ts-ignore window exists -prf
-    return window.location.toString()
+    if (window.location.pathname !== '/') {
+      return window.location.pathname
+    }
+    return undefined
   }
 }
 
@@ -35,3 +24,11 @@ export function clearHash() {
     window.location.hash = ''
   }
 }
+
+export function getHistory() {
+  if (isWeb) {
+    return createBrowserHistory()
+  } else {
+    return createMemoryHistory()
+  }
+}

src/state/models/navigation.ts

@@ -2,6 +2,7 @@ import {RootStoreModel} from './root-store'
 import {makeAutoObservable} from 'mobx'
 import {TABS_ENABLED} from 'lib/build-flags'
 import {segmentClient} from 'lib/analytics'
+import {getHistory} from 'platform/urls'
 
 let __id = 0
 function genId() {
@@ -41,6 +42,7 @@ export type HistoryPtr = string // `{tabId}-{historyId}`
 export class NavigationTabModel {
   id = genId()
   history: HistoryItem[]
+  browserHistory: any
   index = 0
   isNewTab = false
 
@@ -48,6 +50,7 @@ export class NavigationTabModel {
     this.history = [
       {url: TabPurposeMainPath[fixedTabPurpose], ts: Date.now(), id: genId()},
     ]
+    this.browserHistory = getHistory()
     makeAutoObservable(this, {
       serialize: false,
       hydrate: false,
@@ -122,6 +125,7 @@ export class NavigationTabModel {
         this.history.push({url: fixedUrl, ts: Date.now(), id: genId()})
       }
       this.history.push({url, title, ts: Date.now(), id: genId()})
+      this.browserHistory.push(url)
       this.index = this.history.length - 1
     }
   }
@@ -142,6 +146,7 @@ export class NavigationTabModel {
   goBack() {
     if (this.canGoBack) {
       this.index--
+      this.browserHistory.back()
     }
   }
 
@@ -155,12 +160,14 @@ export class NavigationTabModel {
   goForward() {
     if (this.canGoForward) {
       this.index++
+      this.browserHistory.forward()
     }
   }
 
   goToIndex(index: number) {
     if (index >= 0 && index <= this.history.length - 1) {
       this.index = index
+      this.browserHistory.go(index)
     }
   }
 

src/state/models/root-store.ts

@@ -120,7 +120,6 @@ export class RootStoreModel {
   async handleSessionChange(agent: AtpAgent) {
     this.log.debug('RootStoreModel:handleSessionChange')
     this.agent = agent
-    this.nav.clear()
     this.me.clear()
     await this.me.load()
   }