added navigation fixes, improved loading, env example improvments

backend/config/.env.production.example

@@ -0,0 +1,23 @@
+MONGODB_URL=
+DB_TYPE=
+HTTP_PORT=
+HTTPS_PORT=
+PASSWORD_ACCESS=
+PASSWORD_REFRESH=
+PASSWORD_COOKIE=
+_SECURE_COOKIES=
+FS_DIRECTORY=
+KEY=
+EMAIL_VERIFICATION=
+EMAIL_DOMAIN=
+EMAIL_ADDRESS=
+EMAIL_API_KEY=
+EMAIL_HOST=
+REMOTE_URL=
+S3_ID=
+S3_KEY=
+S3_BUCKET=
+URL=
+TEMP_DIRECTORY=
+VIDEO_THUMBNAILS_ENABLED=
+TEMP_VIDEO_THUMBNAIL_LIMIT=

src/components/Dataform/Dataform.tsx

@@ -11,6 +11,7 @@ import classNames from "classnames";
 import { useDragAndDrop } from "../../hooks/utils";
 import MultiSelectBar from "../MultiSelectBar/MultiSelectBar";
 import { useFolders } from "../../hooks/folders";
+import { removeNavigationMap } from "../../reducers/selected";
 
 const DataForm = memo(
   ({ scrollDivRef }: { scrollDivRef: React.RefObject<HTMLDivElement> }) => {
@@ -47,9 +48,10 @@ const DataForm = memo(
 
     useEffect(() => {
       if (!isLoading && navigationMap) {
-        scrollDivRef.current?.scrollTo(0, navigationMap.scrollTop);
-      } else if (!isLoading) {
-        scrollDivRef.current?.scrollTo(0, 0);
+        const scrollTop = navigationMap.scrollTop;
+        scrollDivRef.current?.scrollTo(0, scrollTop);
+        console.log("navigation map", navigationMap, scrollTop);
+        dispatch(removeNavigationMap(window.location.pathname));
       }
     }, [isLoading, navigationMap]);
 
@@ -105,7 +107,6 @@ const DataForm = memo(
         {/* @ts-ignore  */}
         <div ref={sentinelRef} className="h-1"></div>
 
-        {/* TODO: Change this spinner name */}
         {isFetchingNextPage && (
           <div className="w-full flex justify-center items-center mt-4">
             <Spinner />

src/components/Medias/Medias.tsx

@@ -6,6 +6,8 @@ import MultiSelectBar from "../MultiSelectBar/MultiSelectBar";
 import { useInfiniteScroll } from "../../hooks/infiniteScroll";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
 import { setMediaFilter, setSortBy } from "../../reducers/filter";
+import Spinner from "../Spinner/Spinner";
+import { removeNavigationMap } from "../../reducers/selected";
 
 const Medias = memo(
   ({ scrollDivRef }: { scrollDivRef: React.RefObject<HTMLDivElement> }) => {
@@ -40,8 +42,7 @@ const Medias = memo(
     useEffect(() => {
       if (!initialLoad && navigationMap) {
         scrollDivRef.current?.scrollTo(0, navigationMap.scrollTop);
-      } else if (!initialLoad) {
-        scrollDivRef.current?.scrollTo(0, 0);
+        dispatch(removeNavigationMap(window.location.pathname));
       }
     }, [initialLoad, navigationMap, window.location.pathname]);
 
@@ -131,22 +132,34 @@ const Medias = memo(
             </select>
           </div>
         </div>
-        <div
-          className={classNames(
-            "grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-[10px]"
-          )}
-        >
-          <div className="fixed bottom-0 flex justify-center items-center right-0 left-0 z-10">
-            <MultiSelectBar />
+        {!isLoadingFiles && (
+          <div
+            className={classNames(
+              "grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-[10px]"
+            )}
+          >
+            <div className="fixed bottom-0 flex justify-center items-center right-0 left-0 z-10">
+              <MultiSelectBar />
+            </div>
+            {files?.pages.map((filePage, index) => (
+              <React.Fragment key={index}>
+                {filePage.map((file) => (
+                  <MediaItem file={file} key={file._id} />
+                ))}
+              </React.Fragment>
+            ))}
           </div>
-          {files?.pages.map((filePage, index) => (
-            <React.Fragment key={index}>
-              {filePage.map((file) => (
-                <MediaItem file={file} key={file._id} />
-              ))}
-            </React.Fragment>
-          ))}
-        </div>
+        )}
+        {isLoadingFiles && (
+          <div className="w-full flex justify-center items-center h-full">
+            <Spinner />
+          </div>
+        )}
+        {isFetchingNextPage && (
+          <div className="w-full flex justify-center items-center mt-4">
+            <Spinner />
+          </div>
+        )}
         {/* @ts-ignore */}
         <div ref={sentinelRef} className="h-1"></div>
       </div>

src/components/SettingsPage/SettingsAccountSection.tsx

@@ -150,7 +150,7 @@ const SettingsPageAccount: React.FC<SettingsPageAccountProps> = ({
           </button>
         </div>
         <div className="px-3 py-4 flex flex-row justify-between items-center border-b border-gray-secondary">
-          <p className="text-gray-primary">Logout all accounts</p>
+          <p className="text-gray-primary">Logout all sessions</p>
           <button
             className="text-primary hover:text-primary-hover cursor-pointer"
             onClick={logoutAllClick}

src/config/.env.production.example

@@ -0,0 +1 @@
+VITE_BACKEND_URL=http://localhost:5173/api

src/hooks/files.ts

@@ -54,7 +54,10 @@ export const useFiles = (enabled = true) => {
       {
         getNextPageParam: (lastPage, pages) => {
           const lastElement = lastPage[lastPage.length - 1];
-          if (!lastElement) return undefined;
+          const hasPageWithoutMaxItemLength = pages.some(
+            (page) => page.length < limit
+          );
+          if (!lastElement || hasPageWithoutMaxItemLength) return undefined;
           return {
             startAtDate: lastElement.uploadDate,
             startAtName: lastElement.filename,

src/reducers/selected.ts

@@ -164,6 +164,11 @@ const selectedSlice = createSlice({
       };
       state.navigationMap = navigationMap;
     },
+    removeNavigationMap: (state, action: PayloadAction<string>) => {
+      const navigationMap = state.navigationMap;
+      delete navigationMap[action.payload];
+      state.navigationMap = navigationMap;
+    },
   },
 });
 
@@ -179,6 +184,7 @@ export const {
   setMoveModal,
   resetMoveModal,
   addNavigationMap,
+  removeNavigationMap,
 } = selectedSlice.actions;
 
 export default selectedSlice.reducer;

vite.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: "http://192.168.86.105:3000", // The port where your backend is running
+        target: "htto://localhost:3000", // The port where your backend is running
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ""),
       },