#87 devops serveral things (#89)

* fix: remove husky folder from commited code

* refactor: use context

* fix: add output for errors on promises fetch

* feat: add strip comments plugin

* fix reverted login logic

---------

Co-authored-by: marcel panse <[email protected]>

Author: amoreaulemay

.gitignore

@@ -134,3 +134,5 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+.husky/*

.husky/_/pre-commit

@@ -61,6 +61,9 @@
       },
       "performance": {
         "noAccumulatingSpread": "off"
+      },
+      "nursery": {
+        "useSortedClasses": "error"
       }
     }
   },

.husky/_/prepare-commit-msg

@@ -14,38 +14,41 @@
   },
   "dependencies": {
     "@loadable/component": "^5.16.4",
-    "@radix-ui/react-dialog": "^1.1.5",
-    "@radix-ui/react-dropdown-menu": "^2.1.5",
-    "@radix-ui/react-navigation-menu": "^1.2.4",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-navigation-menu": "^1.2.5",
     "@radix-ui/react-progress": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-toast": "^1.2.5",
-    "@tailwindcss/vite": "^4.0.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toast": "^1.2.6",
+    "@tailwindcss/vite": "^4.0.5",
     "@tanstack/react-table": "^8.20.6",
-    "@tanstack/react-virtual": "^3.12.0",
+    "@tanstack/react-virtual": "^3.13.0",
     "@types/recharts": "^1.8.29",
     "appwrite": "^17.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.474.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "lucide-react": "^0.475.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-error-boundary": "^5.0.0",
     "react-router": "^7.1.5",
     "recharts": "^2.15.1",
     "tailwind-merge": "^3.0.1",
-    "tailwindcss": "^4.0.3",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss": "^4.0.5",
+    "tailwindcss-animate": "^1.0.7",
+    "valibot": "1.0.0-beta.15"
   },
   "devDependencies": {
     "@types/loadable__component": "^5.13.9",
-    "@types/node": "^22.13.0",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@types/node": "^22.13.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react-swc": "^3.7.2",
     "globals": "^15.14.0",
-    "typescript": "~5.6.2",
-    "vite": "^6.0.5"
+    "typescript": "~5.7.3",
+    "vite": "^6.1.0",
+    "vite-plugin-strip-comments": "^0.0.5"
   },
-  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
+  "packageManager": "pnpm@10.2.1"
 }

biome.json

@@ -1,12 +1,13 @@
-import { COLLECTION_ID, DATABASE_ID, getDatabase } from '@/lib/Auth'
 import { getUser } from '@/lib/Auth.ts'
 import type { CollectionRow } from '@/types'
 import loadable from '@loadable/component'
-import { type Models, Query } from 'appwrite'
 import { useEffect, useState } from 'react'
 import { Route, Routes } from 'react-router'
 import { Header } from './components/ui/Header.tsx'
 import { Toaster } from './components/ui/toaster.tsx'
+import { CollectionContext } from './lib/context/CollectionContext.ts'
+import { type User, UserContext } from './lib/context/UserContext.ts'
+import { fetchCollection } from './lib/fetchCollection.ts'
 
 // Lazy import for chunking
 const Overview = loadable(() => import('./pages/overview/Overview.tsx'))
@@ -15,44 +16,32 @@ const Collection = loadable(() => import('./pages/collection/Collection.tsx'))
 const Trade = loadable(() => import('./pages/trade/Trade.tsx'))
 
 function App() {
-  const [user, setUser] = useState<Models.User<Models.Preferences> | null>(null)
+  const [user, setUser] = useState<User | null>(null)
   const [ownedCards, setOwnedCards] = useState<CollectionRow[]>([])
 
   useEffect(() => {
-    getUser().then((user) => {
-      if (user) {
-        setUser(user)
-      }
-    })
+    getUser().then(setUser).catch(console.error)
   }, [])
 
   useEffect(() => {
     if (user) {
-      fetchCollection()
+      fetchCollection().then(setOwnedCards).catch(console.error)
     }
   }, [user])
 
-  const fetchCollection = async () => {
-    const db = await getDatabase()
-
-    // this gets all your cards at once (max 5k unique cards - there aren't that many unique cards yet), not sure what it does with performance, but we'll see ;-)
-    const { documents } = await db.listDocuments(DATABASE_ID, COLLECTION_ID, [Query.limit(5000)])
-
-    console.log('documents', documents)
-    setOwnedCards(documents as unknown as CollectionRow[])
-  }
-
   return (
-    <>
-      <Toaster />
-      <Header user={user} setUser={setUser} />
-      <Routes>
-        <Route path="/" element={<Overview user={user} ownedCards={ownedCards} />} />
-        <Route path="/verify" element={<Verify />} />
-        <Route path="/collection" element={<Collection user={user} ownedCards={ownedCards} setOwnedCards={setOwnedCards} />} />
-        <Route path="/trade" element={<Trade user={user} ownedCards={ownedCards} />} />
-      </Routes>
-    </>
+    <UserContext.Provider value={{ user, signOut: () => setUser(null) }}>
+      <CollectionContext.Provider value={{ ownedCards, setOwnedCards }}>
+        <Toaster />
+        <Header />
+        <Routes>
+          <Route path="/" element={<Overview />} />
+          <Route path="/verify" element={<Verify />} />
+          <Route path="/collection" element={<Collection />} />
+          <Route path="/trade" element={<Trade />} />
+        </Routes>
+      </CollectionContext.Provider>
+    </UserContext.Provider>
   )
 }
 

frontend/package.json

@@ -32,8 +32,8 @@ interface PercentageBarChartProps {
   footer?: string
 }
 export const BarChartComponent: FC<PercentageBarChartProps> = ({ title, data, config = {}, footer }) => (
-  <Card className="border-2 border-solid border-gray-500 rounded-4xl ">
-    <CardHeader className="text-center text-balance">
+  <Card className="rounded-4xl border-2 border-gray-500 border-solid ">
+    <CardHeader className="text-balance text-center">
       <CardTitle>{title}</CardTitle>
     </CardHeader>
     <CardContent>
@@ -46,7 +46,7 @@ export const BarChartComponent: FC<PercentageBarChartProps> = ({ title, data, co
         </BarChart>
       </ChartContainer>
     </CardContent>
-    <CardFooter className="flex-col flex-1 items-center gap-2">{footer}</CardFooter>
+    <CardFooter className="flex-1 flex-col items-center gap-2">{footer}</CardFooter>
   </Card>
 )
 

frontend/src/App.tsx

@@ -1,6 +1,6 @@
+import useMousePosition from '@/lib/hooks/useMousePosition'
 import type { Card } from '@/types'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import useMousePosition from '../lib/hooks/useMousePosition'
 
 // Generic throttle function with strict typing
 const throttle = <T extends unknown[]>(fn: (...args: T) => void, delay: number): ((...args: T) => void) => {

frontend/src/components/BarChart.tsx

@@ -1,50 +1,43 @@
 import { Button } from '@/components/ui/button.tsx'
 import { useToast } from '@/hooks/use-toast.ts'
+import { sendMagicLink } from '@/lib/Auth.ts'
 import { useState } from 'react'
-import { sendMagicLink } from '../lib/Auth.ts'
+import { email, maxLength, nonEmpty, pipe, safeParse, string } from 'valibot'
 import { Input } from './ui/input.tsx'
 
+const EmailSchema = pipe(string(), nonEmpty('Email is required'), email('Email must be valid'), maxLength(255, 'Email must be less than 255 characters'))
+
 export const Login = () => {
   const { toast } = useToast()
 
   const [emailInput, setEmailInput] = useState('')
   const [emailSent, setEmailSent] = useState(false)
 
+  if (emailSent) {
+    return <div className="pt-4">Thank you. Check your email for a magic login link!</div>
+  }
+
   return (
-    <>
-      {!emailSent && (
-        <div className="pt-4">
-          Fill in your email address to get a magic link to login. If you don't have an account yet, we will automatically create one for you.
-          <div className="flex align-center justify-center gap-2 pt-4">
-            <Input type="email" placeholder="Email" onChange={(e) => setEmailInput(e.target.value)} />
+    <div className="pt-4">
+      Fill in your email address to get a magic link to login. If you don't have an account yet, we will automatically create one for you.
+      <div className="flex justify-center gap-2 pt-4 align-center">
+        <Input type="email" placeholder="Email" onChange={(e) => setEmailInput(e.target.value)} />
 
-            <Button
-              onClick={async () => {
-                if (emailInput) {
-                  // TODO: validate email with regex
-                  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-                  if (!regex.test(emailInput)) {
-                    toast({
-                      title: 'Please enter a valid email address',
-                    })
-                    return
-                  }
+        <Button
+          onClick={async () => {
+            const result = safeParse(EmailSchema, emailInput)
+            if (!result.success) {
+              toast({ title: 'Please enter a valid email address' })
+              return
+            }
 
-                  setEmailSent(true)
-                  await sendMagicLink(emailInput)
-                } else {
-                  toast({
-                    title: 'Please enter an email address',
-                  })
-                }
-              }}
-            >
-              login / signup
-            </Button>
-          </div>
-        </div>
-      )}
-      {emailSent && <div className="pt-4">Thank you. Check your email for a magic login link!</div>}
-    </>
+            setEmailSent(true)
+            await sendMagicLink(emailInput)
+          }}
+        >
+          login / signup
+        </Button>
+      </div>
+    </div>
   )
 }

frontend/src/components/FancyCard.tsx

@@ -1,4 +1,3 @@
-'use client'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
 import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from 'recharts'