refactor(PlayerProviders): lastUsedProvider local storage

app/components/contexts/PlayerProviders.tsx

@@ -3,18 +3,27 @@ import type { ReactNode } from "@tanstack/react-router";
 
 import providers from "@/providers";
 import { IProviderClient } from "@/types/providers/client";
+import { useLocalStorage } from "usehooks-ts";
 
 const PlayerProvidersContext = createContext<{
   [key: string]: IProviderClient;
 }>({});
 
+type LastUsedProvider = {
+  id: string;
+  date: number;
+} | null;
+
 export function PlayerProvidersProvider({
   children,
 }: Readonly<{
   children: ReactNode;
 }>) {
+  const [_lastUsed, setLastUsed, _removeLastUsed] =
+    useLocalStorage<LastUsedProvider>("lastUsedProvider", null);
+
   const handleAuth = useCallback((provider: string) => {
-    console.log("auth", provider);
+    setLastUsed({ id: provider, date: Date.now() });
   }, []);
 
   const value = useMemo(() => {
@@ -38,5 +47,10 @@ export function PlayerProvidersProvider({
 }
 
 export function usePlayerProviders() {
-  return useContext(PlayerProvidersContext);
+  const [lastUsed] = useLocalStorage<LastUsedProvider>("lastUsed", null);
+
+  return {
+    lastUsedProvider: lastUsed,
+    providers: useContext(PlayerProvidersContext),
+  };
 }

app/routes/auth/callback.$provider.tsx

@@ -1,6 +1,5 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 
-import providers from "@/providers";
 import { useEffect } from "react";
 import { usePlayerProviders } from "@/components/contexts/PlayerProviders";
 
@@ -12,7 +11,7 @@ function RouteComponent() {
   const { provider } = Route.useParams();
   const navigate = useNavigate();
 
-  const providers = usePlayerProviders();
+  const { providers } = usePlayerProviders();
 
   if (!providers[provider]) {
     return <h1>Provider not found</h1>;

app/routes/index.tsx

@@ -7,7 +7,7 @@ export const Route = createFileRoute("/")({
 });
 
 function Home() {
-  const providers = usePlayerProviders();
+  const { providers } = usePlayerProviders();
 
   return (
     <main className="flex flex-col items-center justify-center h-screen gap-12">

package.json

@@ -23,6 +23,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "usehooks-ts": "^3.1.0",
     "vinxi": "^0.4.3",
     "zod": "^3.23.8"
   },