chore: update react, react-query. Use retry

sinpapeles · Feb 21, 2024 · 144b3ff · 144b3ff
1 parent c541df6
commit 144b3ff
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 219 deletions.
diff --git a/package.json b/package.json
@@ -10,13 +10,13 @@
   "dependencies": {
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.6",
+    "@tanstack/react-query": "^5.22.2",
     "express": "^4.17.3",
     "hip2-dane": "github:sinpapeles/hip2-dane#02868f66feeaa8e73f14cf86ed99fa2de46652c5",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.0.4",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-loading-skeleton": "^3.4.0",
-    "react-query": "^3.34.16",
     "react-use": "^17.3.2"
   },
   "devDependencies": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,41 +1,40 @@
-import { useEffect, useState, FC } from 'react';
-import { useQueryClient } from 'react-query';
+import { useEffect, useState } from 'react';
+
+import { useQuery } from '@tanstack/react-query';
 import useDebounce from 'react-use/lib/useDebounce';
 import useSearchParam from 'react-use/lib/useSearchParam';
-import { Address } from './Address';
+import { ResultBox } from './ResultBox';
 import { Status } from './Status';
 import { Token } from './Token';
-import Skeleton from 'react-loading-skeleton';
 
 function App() {
-  const initalName = useSearchParam('name') || '';
-  const initalToken = useSearchParam('token') || 'HNS';
+  const initialName = useSearchParam('name') || '';
+  const initialToken = useSearchParam('token') || 'HNS';
 
-  const [token, setToken] = useState(initalToken.toUpperCase());
-  const [value, setValue] = useState(initalName);
+  const [token, setToken] = useState(initialToken.toUpperCase());
+  const [value, setValue] = useState(initialName);
   const [name, setName] = useState('');
-  const [loading, setLoading] = useState(false);
-  const queryClient = useQueryClient();
   const [addr, setAddr] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const { refetch } = useQuery({
+    queryKey: [token, name],
+    queryFn: () =>
+      fetch(`/api?name=${name}&token=${token}`).then((r) => {
+        if (!r.ok) throw new Error('Network response was not ok');
+        return r.json();
+      }),
+    enabled: false,
+  });
 
   useDebounce(() => setName(value), 350, [value]);
 
-  const loadData = async () =>
-    queryClient.fetchQuery(['hip2', name, token], () =>
-      Promise.resolve()
-        .then(() => {
-          setLoading(true);
-          history.pushState(
-            { name, token },
-            '',
-            `?name=${name}&token=${token}`
-          );
-        })
-        .then(() => fetch(`/api?name=${name}&token=${token}`))
-        .then((r) => r.json())
-        .then((r) => setAddr(r.addr))
-        .finally(() => setLoading(false))
-    );
+  const loadData = async () => {
+    setLoading(true);
+    const { data } = await refetch();
+    setAddr(data.addr);
+    setLoading(false);
+  };
 
   useEffect(() => {
     if (name) loadData();
@@ -61,25 +60,7 @@ function App() {
               <Token value={token} onChange={setToken} />
             </div>
             <Status {...{ name, loading, setValue, addr }} />
-            {loading && (
-              <div className="py-5">
-                <Skeleton height={35} />
-                <Skeleton height={35} />
-                <Skeleton height={15} width={100} className="mb-5" />
-                <Skeleton height={220} width={220} />
-              </div>
-            )}
-            {addr && (
-              <>
-                <Address value={addr} />
-                <div className="flex justify-center py-5">
-                  <img
-                    src={`https://api.qrserver.com/v1/create-qr-code/?data=${addr}&size=220x220&margin=0`}
-                    alt=""
-                  />
-                </div>
-              </>
-            )}
+            {(loading || addr) && <ResultBox addr={addr} />}
           </div>
         </div>
         <span className="mt-2 text-sm text-center text-gray-200 transition duration-200 ">

diff --git a/src/ResultBox.tsx b/src/ResultBox.tsx
@@ -0,0 +1,21 @@
+import Skeleton from 'react-loading-skeleton';
+import { Address } from './Address';
+
+export interface ResultBoxProps {
+  addr?: string;
+}
+export const ResultBox = ({ addr }: ResultBoxProps) => (
+  <>
+    {addr ? <Address value={addr} /> : <Skeleton height={35} count={2} />}
+    <div className="flex justify-center py-5">
+      {addr ? (
+        <img
+          src={`https://api.qrserver.com/v1/create-qr-code/?data=${addr}&size=220x220&margin=0`}
+          alt={`Address: ${addr}`}
+        />
+      ) : (
+        <Skeleton height={220} width={220} count={1} />
+      )}
+    </div>
+  </>
+);
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import App from './App';
 import './index.css';
-import 'react-loading-skeleton/dist/skeleton.css'
+import 'react-loading-skeleton/dist/skeleton.css';
 
 const queryClient = new QueryClient();
 

diff --git a/vite.config.ts b/vite.config.ts
@@ -6,7 +6,6 @@ export default defineConfig({
     proxy: {
       '/api': {
         target: 'http://localhost:3001',
-        rewrite: (path) => path.replace(/^\/api/, ''),
       },
     },
   },