use modified fallback for translations

This commit is contained in:
Dobromir Popov
2024-04-28 23:58:51 +03:00
parent 8d49f93bec
commit e39282a93e
2 changed files with 61 additions and 55 deletions

View File

@ -1,26 +1,26 @@
import axiosInstance from '../../../src/axiosSecure';
import common from '../../../src/helpers/common';
import { useState, useEffect } from 'react';
import { Availability, UserRole } from "@prisma/client";
import ProtectedRoute, { serverSideAuth } from "../../../components/protectedRoute";
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(() => {
console.log("Current locale:", locale, "Fetching translations...");
axiosInstance.get(`/api/translations/${locale}`).then(res => setTranslations(res.data));
}, [locale]);
const handleSave = () => {
axiosInstance.post(`/api/translations/${locale}`, translations).then(res => {
if (res.data.status === 'Updated') {
alert('Translations updated!');
}
});
axiosInstance.post(`/api/translations/${locale}/modified`, translations)
.then(res => {
if (res.data.status === 'Updated') {
alert('Translations updated!');
}
});
};
const handleChange = (key, value) => {
@ -28,30 +28,34 @@ const AdminTranslations = () => {
};
return (
<>
<ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}>
<div>
<h1>Edit Translations</h1>
<select onChange={e => setLocale(e.target.value)} value={locale}>
<option value="bg">BG</option>
<option value="en">English</option>
<option value="ru">RU</option>
{/* Add more options as needed */}
</select>
{Object.keys(translations).map(key => (
<div key={key}>
<label>{key}:</label>
<input
type="text"
value={translations[key]}
onChange={e => handleChange(key, e.target.value)}
/>
</div>
<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>
))}
<button onClick={handleSave}>Save Changes</button>
</div>
</ProtectedRoute>
</>
</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>
);
};