popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

translation system working now

Browse Source
This commit is contained in:
Dobromir Popov
2024-04-29 01:28:59 +03:00
parent e39282a93e
commit c779eba469
3 changed files with 114 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
pages/cart/translations/index.tsx
View File

@ -2,16 +2,22 @@ import axiosInstance from '../../../src/axiosSecure';
import { useState, useEffect } from 'react';
import ProtectedRoute from "../../../components/protectedRoute";
import { UserRole } from "@prisma/client";
import Layout from 'components/layout';
import { useRouter } from "next/router";
// Simulate importing locales from a config or define directly here
const locales = ['en', 'bg', 'ru'];
const locales = ['bg', 'en', 'ru'];
const AdminTranslations = () => {
const [translations, setTranslations] = useState({});
const [locale, setLocale] = useState('en');
// set locale to the current locale by default. get it from the useRouter
let router = useRouter();
const [locale, setLocale] = useState(router.locale);
const [baseTranslations, setBaseTranslations] = useState(locales[0]);
useEffect(() => {
axiosInstance.get(`/api/translations/${locale}`).then(res => setTranslations(res.data));
axiosInstance.get(`/api/translations/${locale}?flat=true`).then(res => setTranslations(res.data));
axiosInstance.get(`/api/translations/${locales[0]}?flat=true`).then(res => setBaseTranslations(res.data));
}, [locale]);
const handleSave = () => {
@ -28,34 +34,38 @@ const AdminTranslations = () => {
};
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>
<Layout>
<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>
))}
</tbody>
</table>
<button onClick={handleSave}>Save Changes</button>
</div>
</ProtectedRoute>
</select>
<table>
<tbody>
{Object.entries(translations).map(([key, value]) => (
<tr key={key}>
<td>{key}</td>
<td>{baseTranslations[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>
</Layout>
);
};