Reinstate REST API

webapp/src/actions/updateTranslation.ts → webapp/src/app/api/projects/[projectName]/languages/[languageId]/messages/[messageId]/route.ts

@@ -1,9 +1,8 @@
-'use server';
+import { NextRequest, NextResponse } from 'next/server';
 
 import { RepoGit } from '@/RepoGit';
-import { Store } from '@/store/Store';
 import { ServerConfig } from '@/utils/serverConfig';
-import { MessageNotFound } from '@/errors';
+import { Store } from '@/store/Store';
 
 export type TranslationSuccess = {
   translationStatus: 'success';
@@ -41,41 +40,41 @@ export type TranslationState =
   | TranslationModified
   | TranslationError;
 
-export default async function updateTranslation(
-  projectName: string,
-  languageName: string,
-  messageId: string,
-  translation: string,
-  original: string,
-): Promise<TranslationState> {
-  'use server';
+export async function POST(
+  req: NextRequest,
+  context: {
+    params: { languageId: string; messageId: string; projectName: string };
+  },
+): Promise<NextResponse<TranslationState>> {
+  const { languageId, messageId, projectName } = context.params;
+  const { original, translation } = await req.json();
 
   const serverConfig = await ServerConfig.read();
   const project = serverConfig.projects.find(
     (project) => project.name === projectName,
   );
 
   if (!project) {
-    return {
+    return NextResponse.json({
       errorMessage: `Project not found: ${projectName}`,
       original,
       translationStatus: 'error',
       translationText: translation,
-    };
+    });
   }
 
   await RepoGit.cloneIfNotExist(project);
   const repoGit = await RepoGit.getRepoGit(project);
   const lyraConfig = await repoGit.getLyraConfig();
   const projectConfig = lyraConfig.getProjectConfigByPath(project.projectPath);
 
-  if (!projectConfig.isLanguageSupported(languageName)) {
-    return {
-      errorMessage: `Language not supported: ${languageName}`,
+  if (!projectConfig.isLanguageSupported(languageId)) {
+    return NextResponse.json({
+      errorMessage: `Language not supported: ${languageId}`,
       original,
       translationStatus: 'error',
       translationText: translation,
-    };
+    });
   }
 
   const projectStore = await Store.getProjectStore(projectConfig);
@@ -85,24 +84,27 @@ export default async function updateTranslation(
   const foundId = messageIds.find((id) => id == messageId);
 
   if (foundId === undefined) {
-    return {
+    return NextResponse.json({
       errorMessage: 'Message Id not found',
       original,
       translationStatus: 'error',
       translationText: translation,
-    };
+    });
   }
 
   try {
-    await projectStore.updateTranslation(languageName, messageId, translation);
+    await projectStore.updateTranslation(languageId, messageId, translation);
     await Store.persistToDisk();
   } catch (e) {
-    return {
+    return NextResponse.json({
       errorMessage: 'Failed to update translation',
       original,
       translationStatus: 'error',
       translationText: translation,
-    };
+    });
   }
-  return { translationStatus: 'success', translationText: translation };
+  return NextResponse.json({
+    translationStatus: 'success',
+    translationText: translation,
+  });
 }

webapp/src/actions/createPullRequest.ts → webapp/src/app/api/projects/[projectName]/pull-requests/route.ts

@@ -1,6 +1,4 @@
-'use server';
-
-import { notFound } from 'next/navigation';
+import { NextRequest, NextResponse } from 'next/server';
 import { randomUUID } from 'crypto';
 
 import { RepoGit } from '@/RepoGit';
@@ -34,14 +32,19 @@ export type PullRequestState =
   | PullRequestCreated
   | PullRequestError;
 
-export default async function sendPullRequest(
-  projectName: string,
-): Promise<PullRequestState> {
+export async function POST(
+  req: NextRequest,
+  context: { params: { projectName: string } },
+): Promise<NextResponse<PullRequestState>> {
+  const projectName = context.params.projectName;
   let serverProjectConfig: ServerProjectConfig;
   try {
     serverProjectConfig = await ServerConfig.getProjectConfig(projectName);
   } catch (e) {
-    return notFound();
+    return NextResponse.json(
+      { errorMessage: 'Not Found', pullRequestStatus: 'error' },
+      { status: 404 },
+    );
   }
   const repoPath = serverProjectConfig.repoPath;
 
@@ -50,10 +53,10 @@ export default async function sendPullRequest(
   }
 
   if (syncLock.get(repoPath) === true) {
-    return {
+    return NextResponse.json({
       errorMessage: `Another Request in progress for project: ${projectName} or a project that share same git repository`,
       pullRequestStatus: 'error',
-    };
+    });
   }
 
   try {
@@ -65,10 +68,10 @@ export default async function sendPullRequest(
     );
 
     if (!(await repoGit.statusChanged())) {
-      return {
+      return NextResponse.json({
         errorMessage: `There are no changes in ${baseBranch} branch`,
         pullRequestStatus: 'error',
-      };
+      });
     }
 
     const nowIso = new Date().toISOString().replace(/:/g, '').split('.')[0];
@@ -90,16 +93,16 @@ export default async function sendPullRequest(
       serverProjectConfig.githubToken,
     );
     await repoGit.checkoutBaseAndPull();
-    return {
+    return NextResponse.json({
       branchName,
       pullRequestStatus: 'success',
       pullRequestUrl,
-    };
+    });
   } catch (e) {
-    return {
+    return NextResponse.json({
       errorMessage: 'Error while creating pull request',
       pullRequestStatus: 'error',
-    };
+    });
   } finally {
     syncLock.set(repoPath, false);
   }

webapp/src/components/MessageForm.tsx

@@ -14,9 +14,7 @@ import { LoadingButton } from '@mui/lab';
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTheme } from '@mui/material';
 
-import updateTranslation, {
-  TranslationState,
-} from '@/actions/updateTranslation';
+import { type TranslationState } from '@/app/api/projects/[projectName]/languages/[languageId]/messages/[messageId]/route';
 import { type MessageData } from '@/utils/adapters';
 
 export type MessageFormLayout = 'linear' | 'grid';
@@ -89,18 +87,24 @@ const MessageForm: FC<MessageFormProps> = ({
      * its use below, or if you change our use below to be
      * affected by setState above.
      */
-    const response = await updateTranslation(
-      projectName,
-      languageName,
-      message.id,
-      state.translationText,
-      state.original,
-    );
+    const url = `/api/projects/${projectName}/languages/${languageName}/messages/${message.id}`;
+    const body = {
+      original: state.original,
+      translation: state.translationText,
+    };
+    const response = await fetch(url, {
+      body: JSON.stringify(body),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    });
+    const json = await response.json();
 
-    if (response.translationStatus === 'success') {
-      resetValue.current = response.translationText;
+    if (json.translationStatus === 'success') {
+      resetValue.current = json.translationText;
     }
-    setState(response);
+    setState(json);
   }, [languageName, message.id, projectName, state]);
 
   const onReset = useCallback(() => {

webapp/src/components/PullRequestButton.tsx

@@ -10,9 +10,7 @@ import {
 } from '@mui/material';
 import { FC, useCallback, useState } from 'react';
 
-import createPullRequest, {
-  type PullRequestState,
-} from '@/actions/createPullRequest';
+import { type PullRequestState } from '@/app/api/projects/[projectName]/pull-requests/route';
 
 type PullRequestButtonProps = {
   projectName: string;
@@ -25,8 +23,10 @@ const PullRequestButton: FC<PullRequestButtonProps> = ({ projectName }) => {
 
   const onClickSend = useCallback(async () => {
     setState({ pullRequestStatus: 'sending' });
-    const response = await createPullRequest(projectName);
-    setState(response);
+    const url = `/api/projects/${projectName}/pull-requests`;
+    const response = await fetch(url, { method: 'POST' });
+    const json = await response.json();
+    setState(json);
   }, [projectName]);
 
   const onDismissSnackbar = useCallback(() => {