Hugging Face's logo

Spaces:
cephalization
/
quack
Running

App Files Community
Tony Powell commited on
Commit
1a56472
·
1 Parent(s): 2dc9cf0

Persist dataset urls to url state

Browse files
Files changed (5) hide show
  1. dist/{index-C1aJHPqZ.js → index-p0KWNmoE.js} +0 -0
  2. dist/index.html +1 -1
  3. src/App.tsx +18 -3
  4. src/useSearchParams.ts +44 -0
  5. tsconfig.app.tsbuildinfo +1 -1
dist/{index-C1aJHPqZ.js → index-p0KWNmoE.js} RENAMED
The diff for this file is too large to render. See raw diff
 
dist/index.html CHANGED
@@ -6,7 +6,7 @@
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
  <title>Vite + React + TS</title>
8
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
9
- <script type="module" crossorigin src="/dist/index-C1aJHPqZ.js"></script>
10
  <link rel="stylesheet" crossorigin href="/dist/index-DSjPP0Hm.css">
11
  </head>
12
  <body>
 
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
  <title>Vite + React + TS</title>
8
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
9
+ <script type="module" crossorigin src="/dist/index-p0KWNmoE.js"></script>
10
  <link rel="stylesheet" crossorigin href="/dist/index-DSjPP0Hm.css">
11
  </head>
12
  <body>
src/App.tsx CHANGED
@@ -1,9 +1,10 @@
1
- import { useEffect, useState } from "react";
2
  import { createDb } from "./duck";
3
  import { Table } from "./table";
4
  import { AsyncDuckDBConnection } from "@duckdb/duckdb-wasm";
5
  import { Button } from "~/components/ui/button";
6
  import { Textarea } from "~/components/ui/textarea";
 
7
 
8
  const DEFAULT_DATASET_URL =
9
  "https://huggingface.co/datasets/openai/openai_humaneval/resolve/main/openai_humaneval/test-00000-of-00001.parquet";
@@ -16,10 +17,24 @@ const arrowResultToJson = (arrowResult: any) => {
16
  return arrowResult.toArray().map((row: any) => row.toJSON());
17
  };
18
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  function App() {
20
  const [loading, setLoading] = useState(false);
21
- const [datasetUrl, setDatasetUrl] = useState("");
22
- const [textField, setTextField] = useState("");
 
23
  const [db, setDb] = useState<Awaited<ReturnType<typeof createDb>> | null>(
24
  null
25
  );
 
1
+ import { useCallback, useEffect, useState } from "react";
2
  import { createDb } from "./duck";
3
  import { Table } from "./table";
4
  import { AsyncDuckDBConnection } from "@duckdb/duckdb-wasm";
5
  import { Button } from "~/components/ui/button";
6
  import { Textarea } from "~/components/ui/textarea";
7
+ import { useSearchParams } from "~/useSearchParams";
8
 
9
  const DEFAULT_DATASET_URL =
10
  "https://huggingface.co/datasets/openai/openai_humaneval/resolve/main/openai_humaneval/test-00000-of-00001.parquet";
 
17
  return arrowResult.toArray().map((row: any) => row.toJSON());
18
  };
19
 
20
+ const usePersistedTextfield = (fieldName: string) => {
21
+ const { searchParams, setSearchParams } = useSearchParams();
22
+ const searchParamsObj = new URLSearchParams(searchParams);
23
+ const textField = searchParamsObj.get(fieldName) || "";
24
+ const setTextField = useCallback(
25
+ (value: string) => {
26
+ setSearchParams({ [fieldName]: value });
27
+ },
28
+ [fieldName, setSearchParams]
29
+ );
30
+ return { textField, setTextField };
31
+ };
32
+
33
  function App() {
34
  const [loading, setLoading] = useState(false);
35
+ const { textField: datasetUrl, setTextField: setDatasetUrl } =
36
+ usePersistedTextfield("datasetUrl");
37
+ const [textField, setTextField] = useState(() => datasetUrl);
38
  const [db, setDb] = useState<Awaited<ReturnType<typeof createDb>> | null>(
39
  null
40
  );
src/useSearchParams.ts ADDED
@@ -0,0 +1,44 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { useSyncExternalStore } from "react";
2
+
3
+ const subscribe = (callback: (searchParams: string) => void) => {
4
+ const listener = () => {
5
+ callback(window.location.search);
6
+ };
7
+ window.addEventListener("popstate", listener);
8
+ return () => {
9
+ window.removeEventListener("popstate", listener);
10
+ };
11
+ };
12
+
13
+ const getSnapshot = () => {
14
+ return window.location.search;
15
+ };
16
+
17
+ const getServerSnapshot = () => {
18
+ return window.location.search;
19
+ };
20
+
21
+ const setSearchParams = (searchParams: Record<string, string>) => {
22
+ const url = new URL(window.location.href);
23
+ Object.entries(searchParams).forEach(([key, value]) => {
24
+ url.searchParams.set(key, value);
25
+ });
26
+ window.history.pushState({}, "", url);
27
+ window.dispatchEvent(new PopStateEvent("popstate"));
28
+ };
29
+
30
+ export const useSearchParams = () => {
31
+ // using useSyncExternalStore to get the search params
32
+ // when the url changes, emit the new value and convert it to an object
33
+ // return an additional setter to update the search params with an object that is converted to a string and merged with the existing search params
34
+ const searchParams = useSyncExternalStore(
35
+ subscribe,
36
+ getSnapshot,
37
+ getServerSnapshot
38
+ );
39
+
40
+ return {
41
+ searchParams,
42
+ setSearchParams,
43
+ };
44
+ };
tsconfig.app.tsbuildinfo CHANGED
@@ -1 +1 @@
1
- {"root":["./src/app.tsx","./src/duck.ts","./src/main.tsx","./src/table.tsx","./src/vite-env.d.ts","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/input.tsx","./src/components/ui/table.tsx","./src/components/ui/textarea.tsx","./src/components/ui/tooltip.tsx","./src/lib/utils.ts"],"version":"5.6.2"}
 
1
+ {"root":["./src/app.tsx","./src/duck.ts","./src/main.tsx","./src/table.tsx","./src/usesearchparams.ts","./src/vite-env.d.ts","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/input.tsx","./src/components/ui/table.tsx","./src/components/ui/textarea.tsx","./src/components/ui/tooltip.tsx","./src/lib/utils.ts"],"version":"5.6.2"}