refactor: migrate from supabase to pocketbase and improve dashboard UI
This commit is contained in:
parent
15a7cf3ac4
commit
979516b681
@ -2,7 +2,8 @@
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import QRCode from 'qrcode';
|
||||
import { supabase } from '~/lib/supabase';
|
||||
import { pb } from '~/lib/pocketbase';
|
||||
import { ImageOff } from 'lucide-react';
|
||||
|
||||
export default function Dashboard() {
|
||||
const [name, setName] = useState('');
|
||||
@ -12,12 +13,15 @@ export default function Dashboard() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetchAssets = async () => {
|
||||
const { data } = await supabase
|
||||
.from('ar_assets')
|
||||
.select('*')
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
setAssets(data || []);
|
||||
try {
|
||||
const records = await pb.collection('ar_assets').getFullList({
|
||||
sort: '-created',
|
||||
});
|
||||
setAssets(records);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch assets:', err);
|
||||
setAssets([]);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -25,31 +29,21 @@ export default function Dashboard() {
|
||||
}, []);
|
||||
|
||||
const createAsset = async () => {
|
||||
if (!name || !glbUrl || !usdzUrl) {
|
||||
alert('Fill all fields');
|
||||
if (!name || !glbUrl) {
|
||||
alert('Please provide a name and a GLB URL');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('ar_assets')
|
||||
.insert({
|
||||
try {
|
||||
const record = await pb.collection('ar_assets').create({
|
||||
name,
|
||||
glb_url: glbUrl,
|
||||
usdz_url: usdzUrl,
|
||||
})
|
||||
.select()
|
||||
.single();
|
||||
usdz_url: usdzUrl || '',
|
||||
});
|
||||
|
||||
if (error || !data) {
|
||||
alert(error?.message);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// const qrUrl = `http://10.20.2.107:5173/ar/${data.id}`;
|
||||
const qrUrl = `${window.location.origin}/ar/${data.id}`;
|
||||
const qrUrl = `${import.meta.env.VITE_FRONTEND_URL}/ar/${record.id}`;
|
||||
|
||||
const qrImage = await QRCode.toDataURL(qrUrl, {
|
||||
width: 512,
|
||||
@ -57,30 +51,23 @@ export default function Dashboard() {
|
||||
});
|
||||
|
||||
const qrBlob = await (await fetch(qrImage)).blob();
|
||||
const filePath = `${data.id}.png`;
|
||||
|
||||
await supabase.storage.from('qr-codes').upload(filePath, qrBlob, {
|
||||
upsert: true,
|
||||
contentType: 'image/png',
|
||||
});
|
||||
const qrFormData = new FormData();
|
||||
qrFormData.append('qr_url', qrUrl);
|
||||
qrFormData.append('qr_image', new File([qrBlob], `${record.id}.png`, { type: 'image/png' }));
|
||||
|
||||
const { data: publicUrl } = supabase.storage
|
||||
.from('qr-codes')
|
||||
.getPublicUrl(filePath);
|
||||
|
||||
await supabase
|
||||
.from('ar_assets')
|
||||
.update({
|
||||
qr_url: qrUrl,
|
||||
qr_image_url: publicUrl.publicUrl,
|
||||
})
|
||||
.eq('id', data.id);
|
||||
await pb.collection('ar_assets').update(record.id, qrFormData);
|
||||
|
||||
setName('');
|
||||
setGlbUrl('');
|
||||
setUsdzUrl('');
|
||||
setLoading(false);
|
||||
|
||||
fetchAssets();
|
||||
} catch (err: any) {
|
||||
alert(err?.message || 'Failed to create asset');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@ -101,25 +88,36 @@ export default function Dashboard() {
|
||||
</h2>
|
||||
|
||||
<div className='grid gap-4 md:grid-cols-3 text-black'>
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-semibold text-gray-600 ml-1">Asset Name</label>
|
||||
<input
|
||||
className='rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
|
||||
className='w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
|
||||
placeholder='Asset name'
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-semibold text-gray-600 ml-1">GLB URL (Android/Web)</label>
|
||||
<input
|
||||
className='rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
|
||||
placeholder='GLB URL'
|
||||
type="url"
|
||||
className='w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
|
||||
placeholder='https://example.com/model.glb'
|
||||
value={glbUrl}
|
||||
onChange={(e) => setGlbUrl(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-semibold text-gray-600 ml-1">USDZ URL (iOS) - Optional</label>
|
||||
<input
|
||||
className='rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
|
||||
type="url"
|
||||
className='w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-black focus:outline-none'
|
||||
placeholder='USDZ URL'
|
||||
value={usdzUrl}
|
||||
onChange={(e) => setUsdzUrl(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={createAsset}
|
||||
@ -150,15 +148,16 @@ export default function Dashboard() {
|
||||
{asset?.name}
|
||||
</h3>
|
||||
|
||||
{asset?.qr_image_url ? (
|
||||
{asset?.qr_image ? (
|
||||
<img
|
||||
src={asset?.qr_image_url}
|
||||
src={pb.files.getURL(asset, asset.qr_image)}
|
||||
alt={asset?.name}
|
||||
className='mx-auto w-40 rounded-lg'
|
||||
/>
|
||||
) : (
|
||||
<div className='flex h-40 items-center justify-center rounded-lg bg-gray-100 text-sm text-gray-400'>
|
||||
No QR
|
||||
<div className='mx-auto flex h-40 w-40 flex-col items-center justify-center space-y-2 rounded-lg bg-gray-50 text-gray-400'>
|
||||
<ImageOff size={32} strokeWidth={1.5} />
|
||||
<span className='text-xs font-medium'>No QR Image</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -170,3 +169,4 @@ export default function Dashboard() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user