90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { getSigns, addSign, downloadSigns, deleteSign } from '../services/signs';
|
|
import { Sign } from '../types/sign';
|
|
import SignComponent from './SignComponent';
|
|
|
|
|
|
const SignsPage: React.FC = () => {
|
|
const [signs, setSigns] = useState<Sign[]>([]);
|
|
const [newSign, setNewSign] = useState('');
|
|
const [newSignError, setNewSignError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const handleAddSign = async () => {
|
|
addSign(newSign).then((sign) => {
|
|
setSigns([...signs, sign]);
|
|
setNewSign('');
|
|
setNewSignError(null);
|
|
}).catch((error) => {
|
|
setNewSignError(error.message);
|
|
});
|
|
};
|
|
|
|
const handleDownloadData = async () => {
|
|
downloadSigns().then((blob: Blob) => {
|
|
const url = window.URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.setAttribute('download', 'data.zip');
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
link.remove();
|
|
}).catch((error: Error) => {
|
|
console.log(error);
|
|
});
|
|
|
|
};
|
|
|
|
const handleDeleteSign = async (id: number) => {
|
|
deleteSign(id).then(() => {
|
|
setSigns(signs.filter((sign) => sign.id !== id));
|
|
});
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
// get the signs from the api
|
|
getSigns().then((signs) => {
|
|
console.log(signs)
|
|
setSigns(signs);
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex flex-col items-left bg-gray-100 min-h-screen">
|
|
<div className="bg-white p-6 rounded-lg shadow-md">
|
|
<div className="mb-4">
|
|
<input
|
|
className="border border-gray-400 p-2 rounded-lg w-full"
|
|
type="text"
|
|
value={newSign}
|
|
onChange={(event) => setNewSign(event.target.value)}
|
|
placeholder="Enter sign url"
|
|
/>
|
|
</div>
|
|
<button className="bg-indigo-500 text-white py-2 px-4 rounded-lg hover:bg-indigo-600" onClick={handleAddSign}>
|
|
Add Sign
|
|
</button>
|
|
<button className="bg-indigo-500 text-white py-2 px-4 rounded-lg hover:bg-indigo-600 ml-2" onClick={handleDownloadData}>
|
|
Download Data
|
|
</button>
|
|
</div>
|
|
{newSignError && <p className="text-red-500">{newSignError}</p>}
|
|
|
|
{!loading ?
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-5 mt-5">
|
|
{
|
|
signs.map((sign) => <SignComponent deleteSign={handleDeleteSign} key={sign.id} sign={sign} />)
|
|
}
|
|
</div>
|
|
|
|
:
|
|
<p>Loading...</p>
|
|
}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SignsPage;
|