Update parent url when page changes (#26)

* update parent URL on each new page

* remove Link component

as we send an update on each page load, we can use <a> elements
or cahnge window.location directly.

Author: severo

src/components/App/App.tsx

@@ -78,6 +78,18 @@ export default function App() {
     return <div>Could not load a data source. You have to pass a valid source in the url, eg: <a href={defaultUrl}>{defaultUrl}</a>.</div>
   }
 
+  /* Send a message to the parent window to synchronize the query string
+   *
+   * Hugging Face Space impose some restrictions to the static apps that are hosted on their platform,
+   * with respect to the URLs. Only hash and query strings can be changed, and doing so requires
+   * some custom code:
+   *   https://huggingface.co/docs/hub/spaces-handle-url-parameters
+   *
+   * Note that the iframe has no access to the parent window's location, so
+   * it might already by in sync, we just don't know.
+   */
+  window.parent.postMessage({ queryString: window.location.search }, 'https://huggingface.co')
+
   return <ConfigProvider value={config}>
     <Page source={source} navigation={{ row, col }} />
   </ConfigProvider>

src/components/Home/Home.tsx

@@ -2,7 +2,6 @@ import { OAuthResult } from '@huggingface/hub'
 import { FormEvent, useEffect } from 'react'
 import HFLoginIcon from '../../assets/sign-in-with-huggingface-lg.svg'
 import { login, logout } from '../../lib/auth.js'
-import { changeQueryString } from '../../lib/huggingfaceSource.js'
 import Search from '../Search/Search.js'
 import styles from './Home.module.css'
 
@@ -17,7 +16,7 @@ export default function Home({ auth }: { auth: OAuthResult | undefined }) {
   function onUrlSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault()
     const url = new FormData(event.currentTarget).get('url') as string
-    changeQueryString(`?url=${url}`)
+    window.location.href = `/?url=${url}`
   }
 
   // pre-dismiss the welcome popup since user landed on the home page

src/components/Link/Link.tsx

@@ -1,7 +1,6 @@
 import { DatasetEntry, listDatasets } from '@huggingface/hub'
 import { ChangeEvent, useEffect, useState } from 'react'
 import { baseUrl } from '../../lib/huggingfaceSource.js'
-import Link from '../Link/Link.js'
 import styles from './Search.module.css'
 
 export default function Search({ accessToken } : { accessToken?: string }) {
@@ -38,7 +37,7 @@ export default function Search({ accessToken } : { accessToken?: string }) {
       <ul className={styles.refList}>
         {datasets.map((dataset) =>
           <li key={dataset.name}>
-            <Link url={`${baseUrl}/${dataset.name}`}>{dataset.name}</Link>
+            <a href={`/?url=${baseUrl}/${dataset.name}`}>{dataset.name}</a>
           </li>,
         )}
       </ul>

src/components/Search/Search.tsx

@@ -4,17 +4,6 @@ import { getFileName } from 'hyperparam'
 
 export const baseUrl = 'https://huggingface.co/datasets'
 
-// Hugging Face Space impose some restrictions to the static apps that are hosted on their platform,
-// with respect to the URLs. Only hash and query strings can be changed, and doing so requires
-// some custom code:
-//   https://huggingface.co/docs/hub/spaces-handle-url-parameters
-export function changeQueryString(queryString: string) {
-  const url = new URL(window.location.href)
-  url.search = queryString
-  window.parent.postMessage({ queryString }, 'https://huggingface.co')
-  window.location.assign(url)
-}
-
 function getSourceParts(url: HFUrl): SourcePart[] {
   const sourceParts: SourcePart[] = [{
     sourceId: `${baseUrl}/${url.repo}/tree/${url.branch}/`,