feat: migrate all 5 Vite apps from react-router to TanStack Router
Migrated backoffice, hackathon, dimentorin, gacha, qrcampaign, and infra from custom react-router file-based routing to TanStack Router file-based routing following the tanstack-frontend-best-practice convention. Key changes per app: - New routes/ directory with __root.tsx, _public.tsx, _authenticated.tsx - Auth guards via beforeLoad (replaces old middleware.ts) - createFileRoute pattern for all page components - TanStackRouterVite plugin in vite.config for auto route generation - _components/_hooks folders colocated with routes (ignored by router) - routeTree.gen.ts auto-generated on dev/build Convention: - _public/* routes redirect to dashboard if authenticated - _authenticated/* routes redirect to /auth/login if not authenticated - $param for dynamic segments (was [param] in old convention) - _layout suffix for pathless layout routes Removed: - Old src/app/ directories from all apps - Old src/middleware.ts files - Custom convertPagesToRoute utility (no longer needed) - react-router dependency usage (kept in package.json for shared libs) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
maulanasdqn
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
86d9e759a6
commit
4240e8eb51
@@ -0,0 +1,149 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { useState } from 'react'
|
||||
import { Dropzone } from '../../app/features/watermark/components/Dropzone'
|
||||
import { Button } from '@imphnen-frontend-service/ui/atoms'
|
||||
import { toast } from 'sonner'
|
||||
import { api } from '../../app/features/auth/api/auth.service'
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/')({
|
||||
component: HomePage,
|
||||
})
|
||||
|
||||
function HomePage() {
|
||||
const [imageFile, setImageFile] = useState<File | null>(null)
|
||||
const [generatedImage, setGeneratedImage] = useState<string | null>(null)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
const handleImageDropped = (file: File) => {
|
||||
setImageFile(file)
|
||||
setGeneratedImage(null)
|
||||
toast.success('Image selected ready for generation!')
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
setImageFile(null)
|
||||
setGeneratedImage(null)
|
||||
}
|
||||
|
||||
const handleGenerate = async () => {
|
||||
if (!imageFile) return
|
||||
|
||||
setIsLoading(true)
|
||||
const formData = new FormData()
|
||||
formData.append('image', imageFile)
|
||||
|
||||
try {
|
||||
const response = await api.post('/campaigns/process-image', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
responseType: 'blob',
|
||||
})
|
||||
|
||||
const imageUrl = URL.createObjectURL(response.data)
|
||||
setGeneratedImage(imageUrl)
|
||||
toast.success('QR Code generated successfully!')
|
||||
} catch (error: any) {
|
||||
console.error(error)
|
||||
const message =
|
||||
error.response?.data?.message || 'Failed to generate QR code.'
|
||||
toast.error(message)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDownload = () => {
|
||||
if (!generatedImage) return
|
||||
const link = document.createElement('a')
|
||||
link.href = generatedImage
|
||||
link.download = `qr-campaign-${Date.now()}.png`
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto py-8 px-4 flex flex-col gap-8">
|
||||
<header className="text-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">
|
||||
QR Code Generator
|
||||
</h1>
|
||||
<p className="text-gray-600">
|
||||
Upload your image to add the campaign QR code watermark.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
|
||||
{!imageFile ? (
|
||||
<Dropzone onImageDropped={handleImageDropped} />
|
||||
) : (
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="relative w-full max-w-2xl bg-gray-50 rounded-lg overflow-hidden border border-gray-200">
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-20 gap-4">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
|
||||
<p className="text-gray-500 font-medium">
|
||||
Processing image...
|
||||
</p>
|
||||
</div>
|
||||
) : generatedImage ? (
|
||||
<img
|
||||
src={generatedImage}
|
||||
alt="Generated with QR"
|
||||
className="w-full h-auto object-contain max-h-[600px]"
|
||||
/>
|
||||
) : (
|
||||
<div className="relative">
|
||||
<img
|
||||
src={URL.createObjectURL(imageFile)}
|
||||
alt="Original"
|
||||
className="w-full h-auto object-contain max-h-[400px]"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/5 flex items-center justify-center pointer-events-none">
|
||||
<span className="bg-black/60 text-white px-3 py-1 rounded-2xl text-sm">
|
||||
Original Image
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
{!generatedImage && !isLoading && (
|
||||
<>
|
||||
<Button
|
||||
variant="bordered"
|
||||
onClick={handleReset}
|
||||
className="w-32"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleGenerate}
|
||||
className="w-40"
|
||||
disabled={isLoading}
|
||||
>
|
||||
Generate QR
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{generatedImage && (
|
||||
<>
|
||||
<Button variant="bordered" onClick={handleReset}>
|
||||
Upload Another
|
||||
</Button>
|
||||
<Button variant="primary" onClick={handleDownload}>
|
||||
Download
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user