internationalized added

frontend/package.json

@@ -21,7 +21,8 @@
   },
   "dependencies": {
     "react-icons": "^5.4.0",
-    "react-collapsed": "^4.2.0"
+    "react-collapsed": "^4.2.0",
+    "react-intl": "^7.1.5"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

frontend/src/App.jsx

@@ -158,6 +158,7 @@ function App() {
           height="100%"
           width="100%"
           initialPath=""
+          locale='en-US' // tr-TR, en-US
         />
       </div>
     </div>

frontend/src/FileManager/Actions/Actions.jsx

@@ -5,6 +5,7 @@ import UploadFileAction from "./UploadFile/UploadFile.action";
 import PreviewFileAction from "./PreviewFile/PreviewFile.action";
 import { useSelection } from "../../contexts/SelectionContext";
 import { useShortcutHandler } from "../../hooks/useShortcutHandler";
+import {injectIntl} from "react-intl";
 
 const Actions = ({
   fileUploadConfig,
@@ -17,6 +18,7 @@ const Actions = ({
   filePreviewComponent,
   acceptedFileTypes,
   triggerAction,
+  intl
 }) => {
   const [activeAction, setActiveAction] = useState(null);
   const { selectedFiles } = useSelection();
@@ -26,7 +28,7 @@ const Actions = ({
 
   const actionTypes = {
     uploadFile: {
-      title: "Upload",
+      title: intl.formatMessage({id: `upload`}),
       component: (
         <UploadFileAction
           fileUploadConfig={fileUploadConfig}
@@ -39,7 +41,7 @@ const Actions = ({
       width: "35%",
     },
     delete: {
-      title: "Delete",
+      title: intl.formatMessage({id: `delete`}),
       component: <DeleteAction triggerAction={triggerAction} onDelete={onDelete} />,
       width: "25%",
     },
@@ -59,7 +61,7 @@ const Actions = ({
     if (triggerAction.isActive) {
       const actionType = triggerAction.actionType;
       if (actionType === "previewFile") {
-        actionTypes[actionType].title = selectedFiles?.name ?? "Preview";
+        actionTypes[actionType].title = selectedFiles?.name ?? intl.formatMessage({id: `preview`});
       }
       setActiveAction(actionTypes[actionType]);
     } else {
@@ -81,4 +83,4 @@ const Actions = ({
   }
 };
 
-export default Actions;
+export default injectIntl(Actions);

frontend/src/FileManager/Actions/CreateFolder/CreateFolder.action.jsx

@@ -6,10 +6,11 @@ import ErrorTooltip from "../../../components/ErrorTooltip/ErrorTooltip";
 import { useFileNavigation } from "../../../contexts/FileNavigationContext";
 import { useLayout } from "../../../contexts/LayoutContext";
 import { validateApiCallback } from "../../../utils/validateApiCallback";
+import {injectIntl} from "react-intl";
 
 const maxNameLength = 220;
 
-const CreateFolderAction = ({ filesViewRef, file, onCreateFolder, triggerAction }) => {
+const CreateFolderAction = ({ filesViewRef, file, onCreateFolder, triggerAction, intl }) => {
   const [folderName, setFolderName] = useState(file.name);
   const [folderNameError, setFolderNameError] = useState(false);
   const [folderErrorMessage, setFolderErrorMessage] = useState("");
@@ -49,7 +50,7 @@ const CreateFolderAction = ({ filesViewRef, file, onCreateFolder, triggerAction
     if (invalidCharsRegex.test(e.key)) {
       e.preventDefault();
       setFolderErrorMessage(
-        "A file name can't contain any of the following characters: \\ / : * ? \" < > |"
+        intl.formatMessage({id: `folderErrorMessage`})+" \\ / : * ? \" < > |"
       );
       setFolderNameError(true);
     } else {
@@ -80,7 +81,7 @@ const CreateFolderAction = ({ filesViewRef, file, onCreateFolder, triggerAction
     });
 
     if (alreadyExists) {
-      setFolderErrorMessage(`This destination already contains a folder named '${newFolderName}'.`);
+      setFolderErrorMessage(intl.formatMessage({id: `folderNameAlreadyContains`})+'${newFolderName}');
       setFolderNameError(true);
       outsideClick.ref.current?.focus();
       outsideClick.ref.current?.select();
@@ -89,7 +90,7 @@ const CreateFolderAction = ({ filesViewRef, file, onCreateFolder, triggerAction
     }
 
     if (newFolderName === "") {
-      newFolderName = duplicateNameHandler("New Folder", true, syncedCurrPathFiles);
+      newFolderName = duplicateNameHandler(intl.formatMessage({id: `newFolder`}), true, syncedCurrPathFiles);
     }
 
     validateApiCallback(onCreateFolder, "onCreateFolder", newFolderName, currentFolder);
@@ -154,4 +155,4 @@ const CreateFolderAction = ({ filesViewRef, file, onCreateFolder, triggerAction
   );
 };
 
-export default CreateFolderAction;
+export default injectIntl(CreateFolderAction);

frontend/src/FileManager/Actions/Delete/Delete.action.jsx

@@ -2,8 +2,9 @@ import React, { useEffect, useState } from "react";
 import Button from "../../../components/Button/Button";
 import { useSelection } from "../../../contexts/SelectionContext";
 import "./Delete.action.scss";
+import {injectIntl} from "react-intl";
 
-const DeleteAction = ({ triggerAction, onDelete }) => {
+const DeleteAction = ({ triggerAction, onDelete, intl }) => {
   const [deleteMsg, setDeleteMsg] = useState("");
   const { selectedFiles, setSelectedFiles } = useSelection();
 
@@ -28,14 +29,14 @@ const DeleteAction = ({ triggerAction, onDelete }) => {
       <p className="file-delete-confirm-text">{deleteMsg}</p>
       <div className="file-delete-confirm-actions">
         <Button type="secondary" onClick={() => triggerAction.close()}>
-          Cancel
+          {intl.formatMessage({id: `cancel`})}
         </Button>
         <Button type="danger" onClick={handleDeleting}>
-          Delete
+          {intl.formatMessage({id: `delete`})}
         </Button>
       </div>
     </div>
   );
 };
 
-export default DeleteAction;
+export default injectIntl(DeleteAction);

frontend/src/FileManager/Actions/PreviewFile/PreviewFile.action.jsx

@@ -8,6 +8,7 @@ import { MdOutlineFileDownload } from "react-icons/md";
 import { useFileIcons } from "../../../hooks/useFileIcons";
 import { FaRegFileAlt } from "react-icons/fa";
 import "./PreviewFile.action.scss";
+import {injectIntl} from "react-intl";
 
 const imageExtensions = ["jpg", "jpeg", "png"];
 const videoExtensions = ["mp4", "mov", "avi"];
@@ -66,7 +67,7 @@ const PreviewFileAction = ({ filePreviewPath, filePreviewComponent }) => {
             <Button onClick={handleDownload} padding="0.45rem .9rem">
               <div className="download-btn">
                 <MdOutlineFileDownload size={18} />
-                <span>Download</span>
+                <span>{intl.formatMessage({id: `download`})}</span>
               </div>
             </Button>
           </div>
@@ -105,4 +106,4 @@ const PreviewFileAction = ({ filePreviewPath, filePreviewComponent }) => {
   );
 };
 
-export default PreviewFileAction;
+export default injectIntl(PreviewFileAction);

frontend/src/FileManager/Actions/Rename/Rename.action.jsx

@@ -9,10 +9,11 @@ import ErrorTooltip from "../../../components/ErrorTooltip/ErrorTooltip";
 import { useFileNavigation } from "../../../contexts/FileNavigationContext";
 import { useLayout } from "../../../contexts/LayoutContext";
 import { validateApiCallback } from "../../../utils/validateApiCallback";
+import {injectIntl} from "react-intl";
 
 const maxNameLength = 220;
 
-const RenameAction = ({ filesViewRef, file, onRename, triggerAction }) => {
+const RenameAction = ({ filesViewRef, file, onRename, triggerAction, intl }) => {
   const [renameFile, setRenameFile] = useState(file?.name);
   const [renameFileWarning, setRenameFileWarning] = useState(false);
   const [fileRenameError, setFileRenameError] = useState(false);
@@ -56,7 +57,7 @@ const RenameAction = ({ filesViewRef, file, onRename, triggerAction }) => {
     if (invalidCharsRegex.test(e.key)) {
       e.preventDefault();
       setRenameErrorMessage(
-        "A file name can't contain any of the following characters: \\ / : * ? \" < > |"
+        intl.formatMessage({id: `folderErrorMessage`})+"\\ / : * ? \" < > |"
       );
       setFileRenameError(true);
     } else {
@@ -91,7 +92,7 @@ const RenameAction = ({ filesViewRef, file, onRename, triggerAction }) => {
       return;
     } else if (currentPathFiles.some((file) => file.name === renameFile)) {
       setFileRenameError(true);
-      setRenameErrorMessage(`This destination already contains a folder named '${renameFile}'.`);
+      setRenameErrorMessage(intl.formatMessage({id: `folderNameAlreadyContains`})+'${renameFile}');
       outsideClick.setIsClicked(false);
       return;
     } else if (!file.isDirectory && !isConfirmed) {
@@ -187,8 +188,7 @@ const RenameAction = ({ filesViewRef, file, onRename, triggerAction }) => {
             <div className="fm-rename-warning">
               <IoWarningOutline size={70} color="orange" />
               <div>
-                If you change a file name extension, the file might become unusable. Are you sure
-                you want to change it?
+                {intl.formatMessage({id: `fileNameChangeWarning`})}
               </div>
             </div>
           </div>
@@ -208,7 +208,7 @@ const RenameAction = ({ filesViewRef, file, onRename, triggerAction }) => {
                 triggerAction.close();
               }}
             >
-              No
+              {intl.formatMessage({id: `no`})}
             </Button>
             <Button
               type="danger"
@@ -217,7 +217,7 @@ const RenameAction = ({ filesViewRef, file, onRename, triggerAction }) => {
                 handleFileRenaming(true);
               }}
             >
-              Yes
+              {intl.formatMessage({id: `yes`})}
             </Button>
           </div>
         </div>
@@ -226,4 +226,4 @@ const RenameAction = ({ filesViewRef, file, onRename, triggerAction }) => {
   );
 };
 
-export default RenameAction;
+export default injectIntl(RenameAction);

frontend/src/FileManager/Actions/UploadFile/UploadFile.action.jsx

@@ -8,13 +8,15 @@ import { getFileExtension } from "../../../utils/getFileExtension";
 import { getDataSize } from "../../../utils/getDataSize";
 import { useFiles } from "../../../contexts/FilesContext";
 import "./UploadFile.action.scss";
+import {injectIntl} from "react-intl";
 
 const UploadFileAction = ({
   fileUploadConfig,
   maxFileSize,
   acceptedFileTypes,
   onFileUploading,
   onFileUploaded,
+  intl
 }) => {
   const [files, setFiles] = useState([]);
   const [isDragging, setIsDragging] = useState(false);
@@ -33,16 +35,16 @@ const UploadFileAction = ({
   const checkFileError = (file) => {
     if (acceptedFileTypes) {
       const extError = !acceptedFileTypes.includes(getFileExtension(file.name));
-      if (extError) return "File type is not allowed.";
+      if (extError) return intl.formatMessage({id: `fileTypeNotAllowed`});
     }
 
     const fileExists = currentPathFiles.some(
       (item) => item.name.toLowerCase() === file.name.toLowerCase() && !item.isDirectory
     );
-    if (fileExists) return "File already exists.";
+    if (fileExists) return intl.formatMessage({id: `fileAlreadyExist`});
 
     const sizeError = maxFileSize && file.size > maxFileSize;
-    if (sizeError) return `Maximum upload size is ${getDataSize(maxFileSize, 0)}.`;
+    if (sizeError) return intl.formatMessage({id: `maxUploadSize`})+" "+getDataSize(maxFileSize, 0);
   };
 
   const setSelectedFiles = (selectedFiles) => {
@@ -110,12 +112,12 @@ const UploadFileAction = ({
         >
           <div className="input-text">
             <AiOutlineCloudUpload size={30} />
-            <span>Drag files to upload</span>
+            <span>{intl.formatMessage({id: `dragFileToUpload`})}</span>
           </div>
         </div>
         <div className="btn-choose-file">
           <Button padding="0" onKeyDown={handleChooseFileKeyDown}>
-            <label htmlFor="chooseFile">Choose File</label>
+            <label htmlFor="chooseFile">{intl.formatMessage({id: `chooseFile`})}</label>
             <input
               ref={fileInputRef}
               type="file"
@@ -137,7 +139,7 @@ const UploadFileAction = ({
                 <Loader loading={true} className="upload-loading" />
               </>
             ) : (
-              <h2>Completed</h2>
+              <h2>{intl.formatMessage({id: `completed`})}</h2>
             )}
           </div>
           <ul>
@@ -160,4 +162,4 @@ const UploadFileAction = ({
   );
 };
 
-export default UploadFileAction;
+export default injectIntl(UploadFileAction);

frontend/src/FileManager/Actions/UploadFile/UploadItem.jsx

@@ -8,6 +8,7 @@ import { getDataSize } from "../../../utils/getDataSize";
 import { FaRegCheckCircle } from "react-icons/fa";
 import { IoMdRefresh } from "react-icons/io";
 import { useFiles } from "../../../contexts/FilesContext";
+import {injectIntl} from "react-intl";
 
 const UploadItem = ({
   index,
@@ -17,6 +18,7 @@ const UploadItem = ({
   fileUploadConfig,
   onFileUploaded,
   handleFileRemove,
+  intl
 }) => {
   const [uploadProgress, setUploadProgress] = useState(0);
   const [isUploaded, setIsUploaded] = useState(false);
@@ -34,7 +36,7 @@ const UploadItem = ({
     }));
     const error = {
       type: "upload",
-      message: "Upload failed.",
+      message: intl.formatMessage({id: `uploadFail`}),
       response: {
         status: xhr.status,
         statusText: xhr.statusText,
@@ -173,13 +175,13 @@ const UploadItem = ({
             <span className="file-size">{getDataSize(fileData.file?.size)}</span>
           </div>
           {isUploaded ? (
-            <FaRegCheckCircle title="Uploaded" className="upload-success" />
+            <FaRegCheckCircle title={intl.formatMessage({id: `uploaded`})} className="upload-success" />
           ) : isCanceled || uploadFailed ? (
             <IoMdRefresh className="retry-upload" title="Retry" onClick={handleRetry} />
           ) : (
             <div
               className="rm-file"
-              title={`${!!fileData.error ? "Remove" : "Abort Upload"}`}
+              title={`${!!fileData.error ? intl.formatMessage({id: `remove`}) : intl.formatMessage({id: `abortUpload`})}`}
               onClick={!!fileData.error ? () => handleFileRemove(index) : handleAbortUpload}
             >
               <AiOutlineClose />
@@ -197,4 +199,4 @@ const UploadItem = ({
   );
 };
 
-export default UploadItem;
+export default injectIntl(UploadItem);

frontend/src/FileManager/BreadCrumb/BreadCrumb.jsx

@@ -3,8 +3,9 @@ import { MdHome, MdMoreHoriz, MdOutlineNavigateNext } from "react-icons/md";
 import { useFileNavigation } from "../../contexts/FileNavigationContext";
 import { useDetectOutsideClick } from "../../hooks/useDetectOutsideClick";
 import "./BreadCrumb.scss";
+import {injectIntl} from "react-intl";
 
-const BreadCrumb = () => {
+const BreadCrumb = ({intl}) => {
   const [folders, setFolders] = useState([]);
   const [hiddenFolders, setHiddenFolders] = useState([]);
   const [hiddenFoldersWidth, setHiddenFoldersWidth] = useState([]);
@@ -23,7 +24,7 @@ const BreadCrumb = () => {
       let path = "";
       return currentPath?.split("/").map((item) => {
         return {
-          name: item || "Home",
+          name: item || intl.formatMessage({id: `home`}),
           path: item === "" ? item : (path += `/${item}`),
         };
       });
@@ -92,7 +93,7 @@ const BreadCrumb = () => {
                 className="folder-name folder-name-btn"
                 onClick={() => setShowHiddenFolders(true)}
                 ref={moreBtnRef}
-                title="Show more folders"
+                title={intl.formatMessage({id: `showMoreFolder`})}
               >
                 <MdMoreHoriz size={22} className="hidden-folders" />
               </button>
@@ -122,4 +123,4 @@ const BreadCrumb = () => {
 
 BreadCrumb.displayName = "BreadCrumb";
 
-export default BreadCrumb;
+export default injectIntl(BreadCrumb);