Merge pull request #51 from sunnybraille/transcription

fix: api endpoint update
sunnybraille · Mar 11, 2024 · 2b4dd74 · 2b4dd74
2 parents d1d37ba + 11566c8
commit 2b4dd74
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 21 deletions.
diff --git a/my-app/src/components/DownloadButton.tsx b/my-app/src/components/DownloadButton.tsx
@@ -27,7 +27,9 @@ const DownloadButton = () => {
       const apiUrl = process.env.REACT_APP_API_URL;
 
       // File Name setting
-      const metadataResponse = await fetch(`${apiUrl}/translations/${fileId}`);
+      const metadataResponse = await fetch(
+        `${apiUrl}/transcriptions/${fileId}`
+      );
       if (!metadataResponse.ok) {
         throw new Error("Metadata not found on server");
       }

diff --git a/my-app/src/components/FileNameDisplay.tsx b/my-app/src/components/FileNameDisplay.tsx
@@ -22,7 +22,7 @@ const FileNameDisplay: React.FC<FileNameDisplayProps> = ({ fileId }) => {
 
       try {
         const apiUrl = process.env.REACT_APP_API_URL; // API 주소
-        const response = await axios.get(`${apiUrl}/translations/${fileId}`);
+        const response = await axios.get(`${apiUrl}/transcriptions/${fileId}`);
         const originalFileName = response.data.originalFileName;
 
         const fileNameWithoutExtension = originalFileName

diff --git a/my-app/src/components/TranslationProgress.tsx b/my-app/src/components/TranslationProgress.tsx
@@ -4,8 +4,8 @@ import { useNavigate } from "react-router-dom";
 import ProgressStatus from "./ProgressStatus";
 import { useLanguage } from "../LanguageContext";
 
-interface TranslationProgressProps {
-  translationsId: string;
+interface TranscriptionsProgressProps {
+  transcriptionsId: string;
 }
 
 const ProgressOverlay: React.FC<{
@@ -15,19 +15,20 @@ const ProgressOverlay: React.FC<{
   const { language } = useLanguage();
   const textClassName = language === "ko" ? "font-kor" : "font-eng";
 
-
   return (
     <div className="fixed inset-0 bg-white bg-opacity-75 flex justify-center items-center z-10">
       <div className="text-center">
-        <div className={`${textClassName} mb-4 text-lg font-semibold`}>{progressMessage}</div>
+        <div className={`${textClassName} mb-4 text-lg font-semibold`}>
+          {progressMessage}
+        </div>
         {children}
       </div>
     </div>
   );
 };
 
-const TranslationProgress: React.FC<TranslationProgressProps> = ({
-  translationsId,
+const TranscriptionsProgress: React.FC<TranscriptionsProgressProps> = ({
+  transcriptionsId,
 }) => {
   const { language } = useLanguage();
   const [ocrProgress, setOcrProgress] = useState<number>(0);
@@ -61,7 +62,7 @@ const TranslationProgress: React.FC<TranslationProgressProps> = ({
     const checkStatus = async () => {
       try {
         const apiUrl = process.env.REACT_APP_API_URL;
-        const url = `${apiUrl}/translations/${translationsId}/status`;
+        const url = `${apiUrl}/transcriptions/${transcriptionsId}/status`;
         const response = await axios.get(url);
         const data = response.data;
 
@@ -85,7 +86,7 @@ const TranslationProgress: React.FC<TranslationProgressProps> = ({
             language === "ko" ? "변환이 완료되었습니다" : "Conversion completed"
           );
           setTimeout(
-            () => navigate(`/download?fileId=${translationsId}`),
+            () => navigate(`/download?fileId=${transcriptionsId}`),
             2000
           );
         }
@@ -100,7 +101,14 @@ const TranslationProgress: React.FC<TranslationProgressProps> = ({
     };
 
     checkStatus();
-  }, [translationsId, navigate, dots, ocrProgress, brailleProgress, language]);
+  }, [
+    transcriptionsId,
+    navigate,
+    dots,
+    ocrProgress,
+    brailleProgress,
+    language,
+  ]);
 
   return (
     <ProgressOverlay progressMessage={progressMessage}>
@@ -121,4 +129,4 @@ const TranslationProgress: React.FC<TranslationProgressProps> = ({
     </ProgressOverlay>
   );
 };
-export default TranslationProgress;
+export default TranscriptionsProgress;
diff --git a/my-app/src/components/UploadFileButton.tsx b/my-app/src/components/UploadFileButton.tsx
@@ -34,7 +34,7 @@ const UploadFileButton: React.FC = () => {
     originalFileName: null,
   });
 
-  const [translationsId, setTranslationsId] = useState<string | null>(null);
+  const [transcriptionsId, setTranscriptionsId] = useState<string | null>(null);
 
   const handlePdfChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = e.target.files && e.target.files[0];
@@ -58,7 +58,7 @@ const UploadFileButton: React.FC = () => {
     form_data.append("file", pdf, pdf.name);
 
     let apiUrl = process.env.REACT_APP_API_URL;
-    let url = `${apiUrl}/translations`;
+    let url = `${apiUrl}/transcriptions`;
 
     try {
       const response = await axios.post(url, form_data, {
@@ -70,7 +70,7 @@ const UploadFileButton: React.FC = () => {
       if (response.status === 201) {
         const originalFileNameFromResponse = response.data.originalFileName;
         const locationHeader = response.headers["location"];
-        const translationsId = locationHeader.split("/").pop();
+        const transcriptionsId = locationHeader.split("/").pop();
 
         if (originalFileNameFromResponse) {
           setUploadInfo({ originalFileName: originalFileNameFromResponse });
@@ -80,8 +80,8 @@ const UploadFileButton: React.FC = () => {
         const confirmConversion = window.confirm(
           uploadSuccess(originalFileNameFromResponse)
         );
-        if (confirmConversion && translationsId) {
-          startConversion(translationsId);
+        if (confirmConversion && transcriptionsId) {
+          startConversion(transcriptionsId);
         }
       } else if (response.status === 401) {
         alert(AuthFail);
@@ -93,8 +93,8 @@ const UploadFileButton: React.FC = () => {
   };
 
   // Store the ID to trigger rendering the progress component
-  const startConversion = (translationsId: string) => {
-    setTranslationsId(translationsId);
+  const startConversion = (transcriptionsId: string) => {
+    setTranscriptionsId(transcriptionsId);
   };
 
   return (
@@ -160,8 +160,8 @@ const UploadFileButton: React.FC = () => {
       </div>
 
       <div>
-        {translationsId && (
-          <TranslationProgress translationsId={translationsId} />
+        {transcriptionsId && (
+          <TranslationProgress transcriptionsId={transcriptionsId} />
         )}
       </div>
     </div>