feat: Adding tanstack query

package.json

@@ -1,44 +1,48 @@
 {
-    "name": "huehuehue",
-    "private": true,
-    "version": "0.0.4",
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "tsc && vite build",
-        "preview": "vite preview",
-        "tauri": "tauri",
-        "bindings:debug": "cd src-tauri && cargo run -q -- generate-bindings --only",
-        "bindings:release": "cd src-tauri && cargo run -q --release -- generate-bindings --only"
-    },
-    "dependencies": {
-        "@radix-ui/react-slot": "^1.1.0",
-        "@tauri-apps/api": "^1.6.0",
-        "@vitejs/plugin-react": "^4.3.1",
-        "class-variance-authority": "^0.7.0",
-        "clsx": "^2.1.1",
-        "lucide-react": "^0.400.0",
-        "prettier": "^2.8.8",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "tailwind-merge": "^2.3.0",
-        "tailwindcss-animate": "^1.0.7"
-    },
-    "devDependencies": {
-        "@tauri-apps/cli": "^1.4.0",
-        "@types/node": "^18.7.10",
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
-        "@typescript-eslint/eslint-plugin": "^5.45.0",
-        "@typescript-eslint/parser": "^5.45.0",
-        "autoprefixer": "^10.4.14",
-        "postcss": "^8.4.23",
-        "postcss-load-config": "^4.0.1",
-        "standard-version": "^9.5.0",
-        "tailwind-scrollbar": "^3.0.4",
-        "tailwindcss": "^3.3.1",
-        "tslib": "^2.4.1",
-        "typescript": "^5.0.0",
-        "vite": "^4.3.6"
-    }
+  "name": "huehuehue",
+  "private": true,
+  "version": "0.0.4",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "tauri": "tauri",
+    "bindings:debug": "cd src-tauri && cargo run -q -- generate-bindings --only",
+    "bindings:release": "cd src-tauri && cargo run -q --release -- generate-bindings --only"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.1.0",
+    "@tanstack/react-query": "^5.49.2",
+    "@tauri-apps/api": "^1.6.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.400.0",
+    "next-themes": "^0.3.0",
+    "prettier": "^2.8.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sonner": "^1.5.0",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@tanstack/eslint-plugin-query": "^5.50.0",
+    "@tauri-apps/cli": "^1.4.0",
+    "@types/node": "^18.7.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.23",
+    "postcss-load-config": "^4.0.1",
+    "standard-version": "^9.5.0",
+    "tailwind-scrollbar": "^3.0.4",
+    "tailwindcss": "^3.3.1",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.3.6"
+  }
 }

src/App.tsx

@@ -8,8 +8,7 @@ function App() {
         <div className="container">
             <h1>Welcome to Tauri!</h1>
             <Button>gaggi</Button>
-            <div className='flex'>
-            </div>
+            <div className="flex"></div>
         </div>
     );
 }

src/components/ui/sonner.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/main.tsx

@@ -2,9 +2,20 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
+import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { toast } from 'sonner';
+
+const queryClient = new QueryClient({
+    queryCache: new QueryCache({
+        onError: (error) =>
+            toast.error(`Something went wrong: ${error.message}`),
+    }),
+});
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <React.StrictMode>
-        <App />
+        <QueryClientProvider client={queryClient}>
+            <App />
+        </QueryClientProvider>
     </React.StrictMode>
 );