added option to change backend base URL

.gitignore

@@ -3,6 +3,9 @@ public/dist/
 config/dev.env
 config/prod.env
 config/test.env
+config/.env.development
+config/.env.test
+config/.env.production
 .env.development
 .env.test
 .env.production

src/api/filesAPI.ts

@@ -1,6 +1,7 @@
 import { QueryFunctionContext } from "react-query";
 import axios from "../axiosInterceptor";
 import { getUserToken } from "./user";
+import getBackendURL from "../utils/getBackendURL";
 
 interface QueryKeyParams {
   parent: string;
@@ -68,8 +69,7 @@ export const getQuickFilesListAPI = async () => {
 export const downloadFileAPI = async (fileID: string) => {
   await getUserToken();
 
-  // TODO: Change this
-  const url = `http://localhost:5173/api/file-service/download/${fileID}`;
+  const url = `${getBackendURL()}/file-service/download/${fileID}`;
 
   const link = document.createElement("a");
   document.body.appendChild(link);
@@ -80,8 +80,7 @@ export const downloadFileAPI = async (fileID: string) => {
 };
 
 export const getFileThumbnailAPI = async (thumbnailID: string) => {
-  // TODO: Change this
-  const url = `http://localhost:5173/api/file-service/thumbnail/${thumbnailID}`;
+  const url = `${getBackendURL()}/file-service/thumbnail/${thumbnailID}`;
 
   const response = await axios.get(url, {
     responseType: "arraybuffer",
@@ -94,7 +93,7 @@ export const getFileThumbnailAPI = async (thumbnailID: string) => {
 };
 
 export const getFileFullThumbnailAPI = async (fileID: string) => {
-  const url = `http://localhost:5173/api/file-service/full-thumbnail/${fileID}`;
+  const url = `${getBackendURL()}/file-service/full-thumbnail/${fileID}`;
 
   const response = await axios.get(url, {
     responseType: "arraybuffer",
@@ -146,7 +145,7 @@ export const downloadPublicFileAPI = async (
   await getUserToken();
 
   // TODO: Change this
-  const url = `http://localhost:5173/api/file-service/public/download/${fileID}/${tempToken}`;
+  const url = `${getBackendURL()}/file-service/public/download/${fileID}/${tempToken}`;
 
   const link = document.createElement("a");
   document.body.appendChild(link);

src/api/foldersAPI.ts

@@ -1,6 +1,7 @@
 import { QueryFunctionContext } from "react-query";
 import axios from "../axiosInterceptor";
 import { getUserToken } from "./user";
+import getBackendURL from "../utils/getBackendURL";
 
 interface QueryKeyParams {
   parent: string;
@@ -68,8 +69,7 @@ export const downloadZIPAPI = async (
 ) => {
   await getUserToken();
 
-  // TODO: Change this
-  let url = `http://localhost:5173/api/folder-service/download-zip?`;
+  let url = `${getBackendURL()}/folder-service/download-zip?`;
 
   for (const folderID of folderIDs) {
     url += `folderIDs[]=${folderID}&`;

src/axiosInterceptor/index.ts

@@ -1,5 +1,6 @@
 import axios from "axios";
 import uuid from "uuid";
+import getBackendURL from "../utils/getBackendURL";
 
 let browserIDCheck = localStorage.getItem("browser-id");
 
@@ -11,9 +12,9 @@ const sleep = () => {
   });
 };
 
-const axiosRetry = axios.create({ baseURL: "http://localhost:5173/api" });
-const axiosNoRetry = axios.create({ baseURL: "http://localhost:5173/api" });
-const axios3 = axios.create({ baseURL: "http://localhost:5173/api" });
+const axiosRetry = axios.create({ baseURL: getBackendURL() });
+const axiosNoRetry = axios.create({ baseURL: getBackendURL() });
+const axios3 = axios.create({ baseURL: getBackendURL() });
 
 axiosRetry.interceptors.request.use(
   (config) => {

src/components/Folders/Folders.tsx

@@ -111,7 +111,7 @@ const Folders = memo(() => {
             </svg>
           </a>
           <select
-            className="text-sm font-medium"
+            className="text-sm font-medium appearance-none bg-white"
             onChange={switchTypeOrderBy}
             value={
               sortBy === "alp_desc" || sortBy === "alp_asc" ? "name" : "date"

src/components/MoverPopup/MoverPopup.tsx

@@ -99,20 +99,20 @@ const MoverPopup = () => {
 
   const moveText = useMemo(() => {
     if (selectedFolder?._id && selectedFolder?.name) {
-      let reducedLengthFileName = selectedFolder.name;
-      if (reducedLengthFileName.length > 10)
-        reducedLengthFileName = reducedLengthFileName.substring(0, 10) + "...";
-      return `Move to ${reducedLengthFileName}`;
+      return `Move to ${selectedFolder.name}`;
     } else if (!parent) {
       return "Move to home";
     } else {
       const lastParent = parentList[parentList.length - 1];
-      let reducedLengthFileName = lastParent.name;
-      if (reducedLengthFileName.length > 10)
-        reducedLengthFileName = reducedLengthFileName.substring(0, 10) + "...";
-      return `Move to ${reducedLengthFileName}`;
+      return `Move to ${lastParent.name}`;
     }
-  }, [selectedFolder?._id, selectedFolder?.name, parent?._id]);
+  }, [
+    selectedFolder?._id,
+    selectedFolder?.name,
+    parent?._id,
+    parentList[parentList.length - 1],
+    parentList.length,
+  ]);
 
   const headerText = useMemo(() => {
     if (parent) {
@@ -255,6 +255,11 @@ const MoverPopup = () => {
             </div>
           )}
         </div>
+        <div className="mt-4">
+          <p className="text-sm overflow-hidden text-ellipsis whitespace-nowrap">
+            {moveText}
+          </p>
+        </div>
         <div className="flex justify-end mt-4">
           <button
             className={classNames(
@@ -266,7 +271,7 @@ const MoverPopup = () => {
             onClick={onMoveClick}
             disabled={isLoadingMove}
           >
-            {moveText}
+            Confirm
           </button>
         </div>
       </div>

src/components/PhotoViewerPopup/PhotoViewerPopup.tsx

@@ -18,6 +18,7 @@ import { InfiniteData } from "react-query";
 import { getFileColor, getFileExtension } from "../../utils/files";
 import Spinner from "../Spinner/Spinner";
 import { toast } from "react-toastify";
+import getBackendURL from "../../utils/getBackendURL";
 
 interface PhotoViewerPopupProps {
   file: FileInterface;
@@ -62,9 +63,10 @@ const PhotoViewerPopup: React.FC<PhotoViewerPopupProps> = memo((props) => {
     try {
       setIsVideoLoading(true);
       setVideo("");
-      // TODO: Change this
       await getVideoTokenAPI();
-      const videoURL = `http://localhost:5173/api/file-service/stream-video/${file._id}`;
+      const videoURL = `${getBackendURL()}/file-service/stream-video/${
+        file._id
+      }`;
       console.log("video url", videoURL);
       setVideo(videoURL);
       setIsVideoLoading(false);

src/components/SharePopup/SharePopup.tsx

@@ -21,6 +21,7 @@ import {
   setShareModal,
 } from "../../reducers/selected";
 import { toast } from "react-toastify";
+import getBackendURL from "../../utils/getBackendURL";
 
 const SharePopup = memo(() => {
   const file = useAppSelector((state) => state.selected.shareModal.file)!;
@@ -155,7 +156,9 @@ const SharePopup = memo(() => {
 
   useEffect(() => {
     if (!file.metadata.link) return;
-    const url = `${window.location.origin}/public-download/${file._id}/${file.metadata.link}`;
+    const url = `${getBackendURL()}/public-download/${file._id}/${
+      file.metadata.link
+    }`;
     setShareLink(url);
   }, [file.metadata.link]);
 

src/utils/getBackendURL.ts

@@ -0,0 +1,18 @@
+const getBackendURL = () => {
+  // @ts-ignore
+  const envURL = import.meta.env.VITE_BACKEND_URL;
+
+  if (envURL) {
+    return envURL;
+  }
+
+  const mode = process.env.NODE_ENV;
+
+  if (mode === "development") {
+    return "http://localhost:5173/api";
+  }
+
+  return window.location.origin;
+};
+
+export default getBackendURL;

vite.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
   resolve: {
     extensions: [".js", ".jsx", ".ts", ".tsx"], // Include these extensions
   },
+  envDir: "./src/config/",
   server: {
     proxy: {
       "/api": {