fix: ssr origin

Author: gregnr

apps/web/app/export/page.tsx

@@ -10,6 +10,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/u
 import { Progress } from '~/components/ui/progress'
 import { DbManager } from '~/lib/db'
 import { countFiles, listFiles } from '~/lib/files'
+import { useOrigin } from '~/lib/hooks'
 import {
   fileFromStream,
   fileToTarStreamFile,
@@ -22,6 +23,7 @@ import { downloadFile } from '~/lib/util'
 export default function Page() {
   const { dbManager } = useApp()
   const [progress, setProgress] = useState<number>()
+  const origin = useOrigin()
 
   return (
     <>
@@ -104,7 +106,7 @@ export default function Page() {
                 along with any files that you imported or exported in your chats.
               </li>
               <li>
-                Navigate to <Link href="/import">{window.location.origin}/import</Link> and click{' '}
+                Navigate to <Link href="/import">{origin ?? ''}/import</Link> and click{' '}
                 <strong>Import</strong>.
               </li>
             </ol>

apps/web/app/import/page.tsx

@@ -14,6 +14,7 @@ import { useRouter } from 'next/navigation'
 import { getDatabasesQueryKey } from '~/data/databases/databases-query'
 import { DbManager } from '~/lib/db'
 import { hasFile, saveFile } from '~/lib/files'
+import { useOrigin } from '~/lib/hooks'
 import { tarStreamEntryToFile, waitForChunk } from '~/lib/streams'
 import { requestFileUpload, stripSuffix } from '~/lib/util'
 
@@ -22,6 +23,7 @@ export default function Page() {
   const router = useRouter()
   const queryClient = useQueryClient()
   const [progress, setProgress] = useState<number>()
+  const origin = useOrigin()
 
   return (
     <>
@@ -45,7 +47,7 @@ export default function Page() {
             <h4 className="mb-4">How to export and import your databases</h4>
             <ol>
               <li>
-                Navigate to <Link href={'/export'}>{window.location.origin}/export</Link> and click{' '}
+                Navigate to <Link href="/export">{origin ?? ''}/export</Link> and click{' '}
                 <strong>Export</strong> to download all of your databases into a single tarball.
               </li>
               <li>

apps/web/lib/hooks.ts

@@ -611,3 +611,17 @@ export function useQueryEvent(event: string, callback: (params: URLSearchParams)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router, params])
 }
+
+/**
+ * Get the origin of the current window in a
+ * SSR/hydration safe way.
+ */
+export function useOrigin() {
+  const [origin, setOrigin] = useState<string>()
+
+  useEffect(() => {
+    setOrigin(window.location.origin)
+  }, [])
+
+  return origin
+}