use modified fallback for translations

pages/api/translations/[...locale].ts

@@ -1,35 +1,37 @@
 import fs from 'fs';
 import path from 'path';
 import { NextApiRequest, NextApiResponse } from 'next';
-type Translations = {
-    [key: string]: string;
-};
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-    const { locale } = req.query;
 
-    const filePath = path.join(process.cwd(), `content/i18n/${locale}.json`);
-    const translations: Translations = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    const { locale, type } = req.query;
+    const baseFilePath = path.join(process.cwd(), `content/i18n/${locale}.json`);
+    const modifiedFilePath = path.join(process.cwd(), `content/i18n/${locale}.modified.json`);
+
+    let translations = {};
+
+    try {
+        translations = JSON.parse(fs.readFileSync(baseFilePath, 'utf8'));
+        if (fs.existsSync(modifiedFilePath)) {
+            const modifiedTranslations = JSON.parse(fs.readFileSync(modifiedFilePath, 'utf8'));
+            translations = { ...translations, ...modifiedTranslations };
+        }
+    } catch (error) {
+        console.error('Error loading translation files:', error);
+    }
 
     switch (req.method) {
         case 'GET':
+            res.status(200).json(translations);
+            break;
+        case 'POST':
             try {
-                res.status(200).json(translations);
+                fs.writeFileSync(modifiedFilePath, JSON.stringify(req.body, null, 2), 'utf8');
+                res.status(200).json({ status: 'Updated' });
             } catch (error) {
-                console.error('Error reading translation file:', error);
-                res.status(500).json({ error: 'Failed to read translation file' });
+                console.error('Error writing modified translation file:', error);
+                res.status(500).json({ error: 'Failed to update translation file' });
             }
             break;
-
-        case 'POST': try {
-            const newTranslations = req.body;
-            fs.writeFileSync(filePath, JSON.stringify(newTranslations, null, 2), 'utf8');
-            res.status(200).json({ status: 'Updated' });
-        } catch (error) {
-            console.error('Error writing translation file:', error);
-            res.status(500).json({ error: 'Failed to update translation file' });
-        }
-            break;
-
         default:
             res.setHeader('Allow', ['GET', 'POST']);
             res.status(405).end(`Method ${req.method} Not Allowed`);

pages/cart/translations/index.tsx

@@ -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>
     );
 };