Start providers setup

front/app/_layout.tsx

@@ -1,5 +1,25 @@
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Slot } from "one";
+import { Providers } from "~/providers";
 
 export default function Layout() {
-	return <Slot />;
+	return (
+		<>
+			{typeof document !== "undefined" && (
+				<>
+					<title>Kyoo</title>
+					<meta name="description" content="A portable and vast media library solution." />
+					<link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png" />
+					<link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png" />
+					<link rel="icon" type="image/png" sizes="64x64" href="/icon-64x64.png" />
+					<link rel="icon" type="image/png" sizes="128x128" href="/icon-128x128.png" />
+					<link rel="icon" type="image/png" sizes="256x256" href="/icon-256x256.png" />
+				</>
+			)}
+			<Providers>
+				<Slot />
+				<ReactQueryDevtools initialIsOpen={false} />
+			</Providers>
+		</>
+	);
 }

front/bun.lock

@@ -3,6 +3,7 @@
   "workspaces": {
     "": {
       "dependencies": {
+        "@tanstack/react-query": "^5.62.15",
         "expo": "~52.0.17",
         "expo-build-properties": "^0.13.1",
         "expo-localization": "^16.0.0",
@@ -16,6 +17,9 @@
       },
       "devDependencies": {
         "@biomejs/biome": "1.9.4",
+        "@tanstack/react-query-devtools": "^5.62.15",
+        "@types/react": "^19.0.2",
+        "@types/react-dom": "^19.0.2",
         "typescript": "5.7.2",
         "vite": "^6",
       },
@@ -616,6 +620,14 @@
 
     "@tamagui/react-native-svg": ["@tamagui/[email protected]", "", {}, "sha512-IMDW8Hl71I1brgu5b+6G9fs9lT3Wz+BcoYXhUvt0LI+C3N06q842Ph8d8hiol4oA77rRGBj2szVzRIpyMMO9ig=="],
 
+    "@tanstack/query-core": ["@tanstack/[email protected]", "", {}, "sha512-wT20X14CxcWY8YLJ/1pnsXn/y1Q2uRJZYWW93PWRtZt+3/JlGZyiyTcO4pGnqycnP7CokCROAyatsraosqZsDA=="],
+
+    "@tanstack/query-devtools": ["@tanstack/[email protected]", "", {}, "sha512-b1NZzDLVf6laJsB1Cfm3ieuYzM+WqoO8qpm9v+3Etwd+Ph4zkhUMiT+wcWj5AhEPsXiRodKYiiW048VDNdBxNg=="],
+
+    "@tanstack/react-query": ["@tanstack/[email protected]", "", { "dependencies": { "@tanstack/query-core": "5.62.15" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-Ny3xxsOWmEQCFyHiV3CF7t6+QAV+LpBEREiXyllKR4+tStyd8smOAa98ZHmEx0ZNy36M31K8enifB5wTSYAKJw=="],
+
+    "@tanstack/react-query-devtools": ["@tanstack/[email protected]", "", { "dependencies": { "@tanstack/query-devtools": "5.62.9" }, "peerDependencies": { "@tanstack/react-query": "^5.62.15", "react": "^18 || ^19" } }, "sha512-8aE7uD45NHZgNtHMVQC7PvM9f72mKK4bqcpHr9La8TsTRX7x8dy2Kdu2ReFNLCrdlEWkxdP5843tc/lHg+Q/rg=="],
+
     "@tybys/wasm-util": ["@tybys/[email protected]", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw=="],
 
     "@types/babel__core": ["@types/[email protected]", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
@@ -644,6 +656,10 @@
 
     "@types/node-forge": ["@types/[email protected]", "", { "dependencies": { "@types/node": "*" } }, "sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ=="],
 
+    "@types/react": ["@types/[email protected]", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg=="],
+
+    "@types/react-dom": ["@types/[email protected]", "", { "peerDependencies": { "@types/react": "^19.0.0" } }, "sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg=="],
+
     "@types/resolve": ["@types/[email protected]", "", {}, "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="],
 
     "@types/stack-utils": ["@types/[email protected]", "", {}, "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="],
@@ -902,6 +918,8 @@
 
     "css-in-js-utils": ["[email protected]", "", { "dependencies": { "hyphenate-style-name": "^1.0.3" } }, "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A=="],
 
+    "csstype": ["[email protected]", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
+
     "cuint": ["[email protected]", "", {}, "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw=="],
 
     "debug": ["[email protected]", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA=="],

front/package.json

@@ -13,6 +13,7 @@
 		"format:fix": "biome format . --write"
 	},
 	"dependencies": {
+		"@tanstack/react-query": "^5.62.15",
 		"expo": "~52.0.17",
 		"expo-build-properties": "^0.13.1",
 		"expo-localization": "^16.0.0",
@@ -25,8 +26,11 @@
 		"react-native-web": "^0.19.12"
 	},
 	"devDependencies": {
-		"vite": "^6",
 		"@biomejs/biome": "1.9.4",
-		"typescript": "5.7.2"
+		"@tanstack/react-query-devtools": "^5.62.15",
+		"@types/react": "^19.0.2",
+		"@types/react-dom": "^19.0.2",
+		"typescript": "5.7.2",
+		"vite": "^6"
 	}
 }

front/src/providers.tsx

@@ -0,0 +1,35 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ComponentType, ReactNode, useState } from "react";
+
+const QueryProvider = ({ children }: { children: ReactNode }) => {
+	// const [queryClient] = useState(() => createQueryClient());
+	const [queryClient] = useState(() => new QueryClient({}));
+	return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+};
+
+type ProviderComponent<P = {}> = ComponentType<{ children: ReactNode } & P>;
+type Provider = ProviderComponent;
+
+const withProviders = (
+	providers: Provider[],
+): ComponentType<{
+	children: ReactNode;
+}> => {
+	const ProviderImpl = ({ children }: { children: ReactNode }) => {
+		return providers.reduceRight((acc, Prov) => <Prov>{acc}</Prov>, children);
+	};
+	return ProviderImpl;
+};
+
+export const Providers = withProviders([
+	QueryProvider,
+	// AccountProvider,
+	// HydratationBoundary,
+	// [ThemeSelector, }],
+	// PortalProvider,
+	// SnackbarProvider
+	// ConnectionErrorVerifier
+	// DownloadProvider
+	// NavigationThemeProvider
+	// WithLayout
+]);

front/tsconfig.json

@@ -3,7 +3,7 @@
 		"baseUrl": ".",
 		"paths": {
 			"~/*": [
-				"./*"
+				"./src/*"
 			]
 		},
 		"strict": true,
@@ -14,7 +14,7 @@
 		"preserveSymlinks": true,
 		"skipLibCheck": true,
 		"jsx": "react-jsx",
-		"noImplicitAny": false,
+		"forceConsistentCasingInFileNames": true,
 		"types": [
 			"node",
 			"react",
@@ -25,6 +25,10 @@
 			"esnext"
 		]
 	},
+	"include": [
+		"**/*.ts",
+		"**/*.tsx"
+	],
 	"exclude": [
 		"node_modules",
 		".expo",

front/vite.config.ts

@@ -3,5 +3,9 @@ import type { UserConfig } from "vite";
 import { one } from "one/vite";
 
 export default {
+	ssr: {
+		// needed to fix ssr error of react-query
+		noExternal: true,
+	},
 	plugins: [one()],
 } satisfies UserConfig;