63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import axiosInstance from '../../../src/axiosSecure';
|
|
import { useState, useEffect } from 'react';
|
|
import ProtectedRoute from "../../../components/protectedRoute";
|
|
import { UserRole } from "@prisma/client";
|
|
|
|
// Simulate importing locales from a config or define directly here
|
|
const locales = ['en', 'bg', 'ru'];
|
|
|
|
const AdminTranslations = () => {
|
|
const [translations, setTranslations] = useState({});
|
|
const [locale, setLocale] = useState('en');
|
|
|
|
useEffect(() => {
|
|
axiosInstance.get(`/api/translations/${locale}`).then(res => setTranslations(res.data));
|
|
}, [locale]);
|
|
|
|
const handleSave = () => {
|
|
axiosInstance.post(`/api/translations/${locale}/modified`, translations)
|
|
.then(res => {
|
|
if (res.data.status === 'Updated') {
|
|
alert('Translations updated!');
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleChange = (key, value) => {
|
|
setTranslations(prev => ({ ...prev, [key]: value }));
|
|
};
|
|
|
|
return (
|
|
<ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}>
|
|
<div>
|
|
<h1>Edit Translations</h1>
|
|
<select onChange={e => setLocale(e.target.value)} value={locale}>
|
|
{locales.map(l => (
|
|
<option key={l} value={l}>{l.toUpperCase()}</option>
|
|
))}
|
|
</select>
|
|
<table>
|
|
<tbody>
|
|
{Object.entries(translations).map(([key, value]) => (
|
|
<tr key={key}>
|
|
<td>{key}</td>
|
|
<td>
|
|
<input
|
|
type="text"
|
|
value={value}
|
|
onChange={e => handleChange(key, e.target.value)}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
<button onClick={handleSave}>Save Changes</button>
|
|
</div>
|
|
</ProtectedRoute>
|
|
);
|
|
};
|
|
|
|
export default AdminTranslations;
|