Develop QR code generator app for campaign
This commit is contained in:
Hafid Nur
@@ -1,52 +1,144 @@
|
||||
// Uncomment this line to use CSS modules
|
||||
// import styles from './app.module.css';
|
||||
import NxWelcome from './nx-welcome';
|
||||
import { useState } from 'react';
|
||||
import { Dropzone } from './features/watermark/components/Dropzone';
|
||||
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from './features/auth/api/auth.service';
|
||||
|
||||
import { Route, Routes, Link } from 'react-router-dom';
|
||||
export default 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); // Reset previous result
|
||||
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);
|
||||
};
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<div>
|
||||
<NxWelcome title="qrcampaign" />
|
||||
<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>
|
||||
|
||||
{/* START: routes */}
|
||||
{/* These routes and navigation have been generated for you */}
|
||||
{/* Feel free to move and update them to fit your needs */}
|
||||
<br />
|
||||
<hr />
|
||||
<br />
|
||||
<div role="navigation">
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/">Home</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/page-2">Page 2</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
<Routes>
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<div>
|
||||
This is the generated root route.{' '}
|
||||
<Link to="/page-2">Click here for page 2.</Link>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/page-2"
|
||||
element={
|
||||
<div>
|
||||
<Link to="/">Click here to go back to root page.</Link>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
{/* END: routes */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
Reference in New Issue
Block a user