fixed issue with scrolling, also made it so vite config can access env variables

backend/server/server-start.ts

@@ -28,7 +28,7 @@ const serverStart = async () => {
     const port = process.env.HTTP_PORT || process.env.PORT;
 
     server.listen(port, process.env.URL, () => {
-      console.log("Development Backend Server Running On Port:", port);
+      console.log("Development Backend Server Running On :", port);
     });
   }
 };

src/components/Dataform/Dataform.tsx

@@ -3,10 +3,17 @@ import Folders from "../Folders/Folders";
 import { useFiles, useQuickFiles, useUploader } from "../../hooks/files";
 import { useInfiniteScroll } from "../../hooks/infiniteScroll";
 import Files from "../Files/Files";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import Spinner from "../Spinner/Spinner";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import classNames from "classnames";
 import { useDragAndDrop } from "../../hooks/utils";
 import MultiSelectBar from "../MultiSelectBar/MultiSelectBar";
@@ -29,10 +36,12 @@ const DataForm = memo(
     const [initialLoad, setInitialLoad] = useState(true);
     const params = useParams();
     const { uploadFiles } = useUploader();
-    const navigationMap = useAppSelector((state) => {
-      return state.selected.navigationMap[window.location.pathname];
-    });
     const isFetchingNextPage = useRef(false);
+    const prevPathname = useRef("");
+    const location = useLocation();
+    const navigationMap = useAppSelector((state) => {
+      return state.selected.navigationMap[location.pathname];
+    });
 
     const isLoading =
       isLoadingFiles ||
@@ -59,9 +68,13 @@ const DataForm = memo(
       if (!isLoading && navigationMap) {
         const scrollTop = navigationMap.scrollTop;
         scrollDivRef.current?.scrollTo(0, scrollTop);
-        dispatch(removeNavigationMap(window.location.pathname));
+        dispatch(removeNavigationMap(location.pathname));
+        prevPathname.current = location.pathname;
+      } else if (!isLoading && prevPathname.current !== location.pathname) {
+        scrollDivRef.current?.scrollTo(0, 0);
+        prevPathname.current = location.pathname;
       }
-    }, [isLoading, navigationMap]);
+    }, [isLoading, navigationMap, location.pathname]);
 
     const addFile = useCallback(
       (files: FileList) => {

vite.config.ts

@@ -1,30 +1,34 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 import { visualizer } from "rollup-plugin-visualizer";
 
-// Here you can set the proxy URL if you are using a proxy server
-// This is only used for development
-const proxyURL = "http://localhost:3000";
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, "./src/config/");
 
-export default defineConfig({
-  plugins: [react(), visualizer()],
-  build: {
-    outDir: "dist-frontend",
-  },
-  resolve: {
-    extensions: [".js", ".jsx", ".ts", ".tsx"], // Include these extensions
-  },
-  envDir: "./src/config/",
-  server: {
-    proxy: proxyURL
-      ? {
-          "/api": {
-            target: proxyURL, // The port where your backend is running
-            changeOrigin: true,
-            rewrite: (path) => path.replace(/^\/api/, ""),
-          },
-        }
-      : undefined,
-    host: proxyURL ? true : undefined,
-  },
+  const proxyURL = env.VITE_PROXY_URL || "http://localhost:3000";
+
+  console.log(`\nBackend Development Proxy URL: ${proxyURL}/api\n`);
+
+  return {
+    plugins: [react(), visualizer()],
+    build: {
+      outDir: "dist-frontend",
+    },
+    resolve: {
+      extensions: [".js", ".jsx", ".ts", ".tsx"], // Include these extensions
+    },
+    envDir: "./src/config/",
+    server: {
+      proxy: proxyURL
+        ? {
+            "/api": {
+              target: proxyURL, // The port where your backend is running
+              changeOrigin: true,
+              rewrite: (path) => path.replace(/^\/api/, ""),
+            },
+          }
+        : undefined,
+      host: proxyURL ? true : undefined,
+    },
+  };
 });