From 62ebfca6a38df6f4e4ce46a4e0e8164a5fc0ad4b Mon Sep 17 00:00:00 2001
From: subnub <kyle.hoell@gmail.com>
Date: Tue, 2 Jul 2024 02:35:06 -0400
Subject: [PATCH] removed more unneeded files, fixed mobile menu

---
 src/components/ContextMenu/index.jsx          |   2 +-
 src/components/Header/index.tsx               |  12 +-
 src/components/Homepage/HomePage.jsx          |  34 --
 src/components/Homepage/Homepage2.txt         |  84 -----
 src/components/Homepage/index.jsx             | 299 ------------------
 .../Homepage/{Homepage2.jsx => index.tsx}     |   1 -
 src/components/LeftSection/index.jsx          |  31 +-
 src/hooks/utils.ts                            |   2 +-
 src/routers/AppRouter.jsx                     |  18 +-
 9 files changed, 37 insertions(+), 446 deletions(-)
 delete mode 100644 src/components/Homepage/HomePage.jsx
 delete mode 100644 src/components/Homepage/Homepage2.txt
 delete mode 100644 src/components/Homepage/index.jsx
 rename src/components/Homepage/{Homepage2.jsx => index.tsx} (95%)

diff --git a/src/components/ContextMenu/index.jsx b/src/components/ContextMenu/index.jsx
index 7d89ebb..735a331 100644
--- a/src/components/ContextMenu/index.jsx
+++ b/src/components/ContextMenu/index.jsx
@@ -211,7 +211,7 @@ const ContextMenu = (props) => {
       onClick={props.stopPropagation}
       ref={wrapperRef}
       className={classNames(
-        "fixed min-w-[215px] bg-white shadow-[0px_2px_4px_rgba(0,0,0,0.15),_inset_0px_1px_0px_#f5f7fa] rounded-[4px] mt-[-5px] z-[2] ",
+        "fixed min-w-[215px] bg-white shadow-[0px_2px_4px_rgba(0,0,0,0.15),_inset_0px_1px_0px_#f5f7fa] rounded-[4px] mt-[-5px] z-50 ",
         props.contextSelected.selected ? "opacity-100" : "opacity-0"
       )}
       style={
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 640ade3..f41bd5b 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -10,11 +10,15 @@ const Header = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
-  const toggleDrawerClick = useCallback(() => {
-    dispatch(toggleDrawer());
-  }, [toggleDrawer]);
+  const toggleDrawerClick = useCallback(
+    (e: any) => {
+      e.stopPropagation();
+      dispatch(toggleDrawer());
+    },
+    [toggleDrawer]
+  );
   return (
-    <header>
+    <header id="header">
       <div className="px-6 flex justify-between min-h-[68px] items-center py-[15px]">
         <div className="items-center w-[260px] hidden mobileMode:flex">
           <a
diff --git a/src/components/Homepage/HomePage.jsx b/src/components/Homepage/HomePage.jsx
deleted file mode 100644
index 11aa675..0000000
--- a/src/components/Homepage/HomePage.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Header from "../Header/";
-import LeftSection from "../LeftSection";
-import MainSection from "../MainSection";
-import Uploader from "../Uploader";
-import React from "react";
-import PhotoViewer from "../PhotoViewer";
-import ShareModel from "../ShareModel";
-import UploadOverlay from "../UploadOverlay";
-import HomepageSpinner from "../HomepageSpinner";
-import MobileContextMenuContainer from "../MobileContextMenu";
-import ShareModelWrapper from "../ShareModelWrapper";
-
-const HomePage = (props) => (
-  <div>
-    <HomepageSpinner />
-
-    <div className="main-wrapper">
-      <Header goHome={props.goHome} />
-      <div className="main__wrapper--container">
-        <LeftSection goHome={props.goHome} />
-        <MainSection />
-        <Uploader />
-        {props.photoID.length === 0 ? undefined : <PhotoViewer />}
-      </div>
-    </div>
-
-    <UploadOverlay />
-    {/* <ShareModel /> */}
-    <ShareModelWrapper />
-    <MobileContextMenuContainer />
-  </div>
-);
-
-export default HomePage;
diff --git a/src/components/Homepage/Homepage2.txt b/src/components/Homepage/Homepage2.txt
deleted file mode 100644
index 305676e..0000000
--- a/src/components/Homepage/Homepage2.txt
+++ /dev/null
@@ -1,84 +0,0 @@
-import Header from "../Header";
-import LeftSection from "../LeftSection";
-import MainSection from "../MainSection";
-import Uploader from "../Uploader";
-import React from "react";
-import PhotoViewer from "../PhotoViewer";
-import UploadOverlay from "../UploadOverlay";
-import HomepageSpinner from "../HomepageSpinner";
-import MobileContextMenuContainer from "../MobileContextMenu";
-import ShareModelWrapper from "../ShareModelWrapper";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
-import { useSelector } from "react-redux";
-import { useInfiniteQuery, useQuery } from "react-query";
-import { getFilesListAPI } from "../../api/filesAPI";
-import { getFoldersListAPI } from "../../api/foldersAPI";
-import { useFiles } from "../../hooks/files";
-
-const Homepage2 = () => {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const params = useParams();
-  const photoID = useSelector((state) => state.photoViewer.id);
-  useInfiniteQuery({
-    queryKey: [
-      "files",
-      {
-        parent: params.id || "/",
-        search: "",
-        sortBy: undefined,
-        limit: undefined,
-      },
-    ],
-    queryFn: getFilesListAPI,
-    initialPageParam: {
-      startAtDate: undefined,
-      startAtName: undefined,
-    },
-    getNextPageParam: (lastPage, pages) => {
-      console.log("last page", lastPage);
-      return {
-        startAtDate: "test",
-        startAtName: "tes2",
-      };
-    },
-  });
-  useQuery(
-    [
-      "folders",
-      {
-        parent: params.id || "/",
-        search: "",
-        sortBy: undefined,
-        limit: undefined,
-      },
-    ],
-    getFoldersListAPI
-  );
-
-  const goHome = () => {
-    navigate("/home");
-  };
-
-  return (
-    <div>
-      <HomepageSpinner />
-
-      <div className="">
-        <Header goHome={goHome} />
-        <div className="flex space-between mt-20">
-          <LeftSection goHome={goHome} />
-          <MainSection />
-          <Uploader />
-          {/* {photoID.length === 0 ? undefined : <PhotoViewer />} */}
-        </div>
-      </div>
-
-      <UploadOverlay />
-      <ShareModelWrapper />
-      <MobileContextMenuContainer />
-    </div>
-  );
-};
-
-export default Homepage2;
diff --git a/src/components/Homepage/index.jsx b/src/components/Homepage/index.jsx
deleted file mode 100644
index 33a40ab..0000000
--- a/src/components/Homepage/index.jsx
+++ /dev/null
@@ -1,299 +0,0 @@
-import HomePage from "./HomePage";
-import { startSetStorage } from "../../actions/storage";
-import { startSetQuickFiles, setQuickFiles } from "../../actions/quickFiles";
-import {
-  resetSelectedItem,
-  resetSelected,
-  setLastSelected,
-  setRightSelected,
-} from "../../actions/selectedItem";
-import {
-  startSetFiles,
-  startSetAllItems,
-  startSetFileAndFolderItems,
-  startResetCache,
-} from "../../actions/files";
-import { startSetFolders } from "../../actions/folders";
-import {
-  goneSideBar,
-  loadMoreItems,
-  setCurrentRouteType,
-  setCachedSearch,
-} from "../../actions/main";
-import {
-  setFolderTreeID,
-  resetFolderTreeID,
-  setFirstLoadDetailsFolderTree,
-} from "../../actions/folderTree";
-import {
-  setParent,
-  resetParentList,
-  startSetParentList,
-  setParentList,
-  startResetParentList,
-} from "../../actions/parent";
-import {
-  enableListView,
-  setSearch,
-  setCurrentlySearching,
-  resetCurrentlySearching,
-  setIsGoogle,
-  setNotGoogle,
-} from "../../actions/filter";
-import { setCurrentRoute, resetCurrentRoute } from "../../actions/routes";
-// import { history } from "../../routers/AppRouter";
-import uuid from "uuid";
-import { connect } from "react-redux";
-import React from "react";
-import {
-  setStorageSwitcherStorage,
-  resetStorageSwitcherStorage,
-} from "../../actions/storageSwitcher";
-import env from "../../enviroment/envFrontEnd";
-import withNavigate from "../HocComponent";
-
-class HomePageContainer extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.lastLocationKey = "";
-
-    this.clearCache = false;
-  }
-
-  listStyleCheck = () => {
-    if (window.localStorage.getItem("list-style") === "List") {
-      this.props.dispatch(resetSelected());
-      this.props.dispatch(enableListView());
-    }
-  };
-
-  loginCheck = () => {
-    const pathname = this.props.location.pathname;
-
-    if (this.props.isAuthenticated) {
-      if (pathname === "/home") {
-        this.props.dispatch(setCurrentRouteType("home"));
-        this.getFiles(false);
-        this.props.dispatch(setParent("/"));
-        this.props.dispatch(startResetParentList());
-      } else if (pathname.includes("/search")) {
-        this.setSearchItems();
-        return;
-      } else if (pathname.includes("/folder")) {
-        this.setFolderItems();
-        return;
-      }
-
-      this.props.dispatch(resetCurrentRoute());
-      this.props.dispatch(startSetStorage());
-      this.props.dispatch(resetCurrentlySearching());
-      this.props.dispatch(startSetStorage());
-    } else {
-      // const currentPath = this.props.location.pathname;
-      // this.props.dispatch(setCurrentRoute(currentPath));
-      // console.log("navigate to login");
-      // this.props.navigate("/23123");
-    }
-  };
-
-  getStorageSwitcherType = (isGoogle, isPersonal) => {
-    if (isGoogle) {
-      return "drive";
-    } else if (isPersonal) {
-      return "s3";
-    } else {
-      return "stripe";
-    }
-  };
-
-  setFolderItems = (historyKey) => {
-    const sortBy = this.props.sortBy;
-    const idSplit = this.props.location.pathname.split("/folder/");
-    const id = idSplit[1];
-
-    this.props.dispatch(setSearch(""));
-    this.props.dispatch(setCurrentRouteType("folder"));
-    this.props.dispatch(setQuickFiles([]));
-    this.props.dispatch(setLastSelected(0));
-    this.props.dispatch(resetSelectedItem());
-    this.props.dispatch(resetCurrentlySearching());
-    this.props.dispatch(setLastSelected(0));
-    this.props.dispatch(resetSelected());
-    this.props.dispatch(setParent(id));
-    this.props.dispatch(startSetParentList(id));
-    this.props.dispatch(loadMoreItems(true));
-    // this.props.dispatch(startSetFolders(id, sortBy, undefined, isGoogle));
-    // this.props.dispatch(startSetFiles(id, sortBy, undefined, isGoogle));
-    this.props.dispatch(
-      startSetFileAndFolderItems(historyKey, id, sortBy, undefined)
-    );
-    this.props.dispatch(setFolderTreeID(id));
-    this.props.dispatch(setFirstLoadDetailsFolderTree({ _id: id }));
-    this.props.dispatch(setRightSelected(""));
-    this.props.dispatch(startSetStorage());
-    this.props.dispatch(
-      setStorageSwitcherStorage(this.getStorageSwitcherType(false))
-    );
-    env.uploadMode = this.getStorageSwitcherType(false);
-  };
-
-  historyUpdateCheck = () => {
-    console.log("history update check");
-
-    const pathname = this.props.location.pathname;
-
-    if (pathname === "/home") {
-      this.props.dispatch(setSearch(""));
-      this.getFiles();
-      this.props.dispatch(startSetStorage());
-      this.props.dispatch(resetCurrentlySearching());
-      this.props.dispatch(setParent("/"));
-      this.props.dispatch(resetParentList());
-      this.props.dispatch(startSetStorage());
-    } else if (pathname.includes("/folder")) {
-      this.setFolderItems();
-    } else {
-      const currentPathnameSplit = pathname.split("/search/");
-      const value = currentPathnameSplit[1];
-      const parent = "/";
-
-      this.props.dispatch(setCurrentlySearching());
-      this.props.dispatch(setParent(parent));
-      this.props.dispatch(loadMoreItems(true));
-      this.props.dispatch(startSetFiles(undefined, undefined, value));
-      this.props.dispatch(startSetFolders(undefined, undefined, value));
-      this.props.dispatch(setParent);
-      this.props.dispatch(setParentList(["/"], ["Home"]));
-      // this.props.dispatch(setSearch(""))
-      this.props.dispatch(startSetStorage());
-    }
-  };
-
-  componentDidMount = () => {
-    window.addEventListener("resize", () => {
-      this.props.dispatch(goneSideBar());
-    });
-
-    this.listStyleCheck();
-    this.loginCheck();
-    this.setSessionStorage();
-  };
-
-  setSessionStorage = () => {
-    window.sessionStorage.setItem("uuid", uuid.v4());
-  };
-
-  componentWillUnmount = () => {
-    window.removeEventListener("resize", () => {});
-  };
-
-  setSearchItems = () => {
-    const currentPathname = this.props.location.pathname;
-
-    const currentPathnameSplit = currentPathname.split("/search/");
-    const value = currentPathnameSplit[1];
-
-    const fullURL = window.location.href;
-
-    const url = new URL(fullURL);
-
-    const parent = url.searchParams.get("parent") || undefined;
-    const storageType = url.searchParams.get("storageType") || undefined;
-    const folderSearch = url.searchParams.get("folder_search") || undefined;
-
-    this.props.dispatch(startResetCache());
-    this.props.dispatch(setCurrentRouteType("search"));
-    this.props.dispatch(setCachedSearch(value));
-    this.props.dispatch(setNotGoogle());
-    this.props.dispatch(setParent("/"));
-    this.props.dispatch(loadMoreItems(true));
-    // this.props.dispatch(startSetFiles(parent, undefined, value, undefined, storageType));
-    // this.props.dispatch(startSetFolders(parent, undefined, value, undefined, storageType));
-    this.props.dispatch(
-      startSetFileAndFolderItems(
-        "",
-        parent,
-        undefined,
-        value,
-        undefined,
-        storageType,
-        folderSearch
-      )
-    );
-    this.props.dispatch(setCurrentlySearching());
-    parent
-      ? this.props.dispatch(startSetParentList(parent))
-      : this.props.dispatch(setParentList(["/"], ["Home"]));
-    this.props.dispatch(setSearch(value));
-    this.props.dispatch(startSetStorage());
-    this.props.dispatch(resetStorageSwitcherStorage());
-    this.props.dispatch(setQuickFiles([]));
-    //env.uploadMode = ""
-  };
-
-  historyUpdateCheckRefresh = () => {
-    const currentPathname = this.props.location.pathname;
-
-    console.log("history update check", this.props.location.key);
-
-    if (
-      this.lastLocationKey !== this.props.location.key &&
-      currentPathname !== "/home" &&
-      currentPathname.includes("/search")
-    ) {
-      this.setSearchItems();
-    } else if (
-      this.lastLocationKey !== this.props.location.key &&
-      this.props.location.pathnamee !== "/home"
-    ) {
-      this.setFolderItems(this.props.location.key);
-    } else if (this.lastLocationKey !== this.props.location.key) {
-      this.props.dispatch(setSearch(""));
-      this.props.dispatch(setCurrentRouteType("home"));
-      this.props.dispatch(setNotGoogle());
-      this.getFiles(this.clearCache);
-      this.props.dispatch(startSetStorage());
-      this.props.dispatch(resetCurrentlySearching());
-      this.props.dispatch(setParent("/"));
-      this.props.dispatch(startResetParentList());
-      this.props.dispatch(startSetStorage());
-      this.props.dispatch(resetFolderTreeID());
-      this.props.dispatch(resetStorageSwitcherStorage());
-      this.clearCache = false;
-      //env.uploadMode = ""
-    }
-
-    this.lastLocationKey = this.props.location.key;
-  };
-
-  componentDidUpdate = () => {
-    this.historyUpdateCheckRefresh();
-  };
-
-  getFiles = (clearCache) => {
-    const sortBy = this.props.sortBy;
-
-    // this.props.dispatch(startSetQuickFiles())
-    // this.props.dispatch(startSetFolders(undefined, sortBy));
-    // this.props.dispatch(startSetFiles(parent, sortBy))
-    this.props.dispatch(startSetAllItems(clearCache, undefined, sortBy));
-  };
-
-  goHome = () => {
-    this.clearCache = true;
-    this.props.navigate("/home");
-  };
-
-  render() {
-    return <HomePage goHome={this.goHome} {...this.state} {...this.props} />;
-  }
-}
-
-const mapStoreToProps = (state) => ({
-  sortBy: state.filter.sortBy,
-  isAuthenticated: !!state.auth.id,
-  photoID: state.photoViewer.id,
-});
-
-export default connect(mapStoreToProps)(withNavigate(HomePageContainer));
diff --git a/src/components/Homepage/Homepage2.jsx b/src/components/Homepage/index.tsx
similarity index 95%
rename from src/components/Homepage/Homepage2.jsx
rename to src/components/Homepage/index.tsx
index 02a0448..c13cdb6 100644
--- a/src/components/Homepage/Homepage2.jsx
+++ b/src/components/Homepage/index.tsx
@@ -23,7 +23,6 @@ const Homepage2 = () => {
 
       <UploadOverlay />
       <ShareModelWrapper />
-      <MobileContextMenuContainer />
     </div>
   );
 };
diff --git a/src/components/LeftSection/index.jsx b/src/components/LeftSection/index.jsx
index 979e149..3f1b26d 100644
--- a/src/components/LeftSection/index.jsx
+++ b/src/components/LeftSection/index.jsx
@@ -33,32 +33,37 @@ const LeftSection = (props) => {
   }, []);
 
   const goHome = () => {
-    closeDrawerEvent();
+    dispatch(closeDrawer());
     navigate("/home");
   };
 
   const goTrash = () => {
-    closeDrawerEvent();
+    dispatch(closeDrawer());
     navigate("/trash");
   };
 
   const goMedia = () => {
-    closeDrawerEvent();
+    dispatch(closeDrawer());
     navigate("/media");
   };
 
-  const closeDrawerEvent = (e) => {
-    if (
-      e &&
-      (!leftSectionOpen ||
+  const closeDrawerEvent = useCallback(
+    (e) => {
+      console.log("close", e?.target.id);
+      if (
+        !e ||
+        !leftSectionOpen ||
         e.target.id === "search-bar" ||
-        e.target.id === "menu-icon")
-    ) {
-      return;
-    }
+        e.target.id === "menu-icon" ||
+        e.target.id === "header"
+      ) {
+        return;
+      }
 
-    dispatch(closeDrawer());
-  };
+      dispatch(closeDrawer());
+    },
+    [closeDrawer, leftSectionOpen]
+  );
 
   const { wrapperRef } = useClickOutOfBounds(closeDrawerEvent);
 
diff --git a/src/hooks/utils.ts b/src/hooks/utils.ts
index 0777b47..9ececf0 100644
--- a/src/hooks/utils.ts
+++ b/src/hooks/utils.ts
@@ -27,7 +27,6 @@ export const useUtils = () => {
 };
 
 export const useClickOutOfBounds = (outOfBoundsCallback: (e: any) => any) => {
-  console.log("out");
   const wrapperRef = useRef<HTMLDivElement>(null);
   // TODO: Remove this any
   const outOfBoundsClickCheck = useCallback(
@@ -40,6 +39,7 @@ export const useClickOutOfBounds = (outOfBoundsCallback: (e: any) => any) => {
   );
 
   useEffect(() => {
+    console.log("useeffect");
     document.addEventListener("mousedown", outOfBoundsClickCheck);
     document.addEventListener("touchstart", outOfBoundsClickCheck);
 
diff --git a/src/routers/AppRouter.jsx b/src/routers/AppRouter.jsx
index 0b9d448..20c5867 100755
--- a/src/routers/AppRouter.jsx
+++ b/src/routers/AppRouter.jsx
@@ -17,7 +17,7 @@ import ResetPasswordPage from "../components/ResetPasswordPage";
 import GoogleAccountPage from "../components/GoogleAccountPage";
 import AddStoragePage from "../components/AddStoragePage";
 import SettingsPage from "../components/SettingsPage";
-import Homepage2 from "../components/Homepage/Homepage2";
+import Homepage from "../components/Homepage";
 
 // export const history = createHistory();
 
@@ -31,7 +31,7 @@ const AppRouter = () => {
           path="/home"
           element={
             <PrivateRoute>
-              <Homepage2 />
+              <Homepage />
             </PrivateRoute>
           }
         />
@@ -44,7 +44,7 @@ const AppRouter = () => {
           path="/folder/:id"
           element={
             <PrivateRoute>
-              <Homepage2 />
+              <Homepage />
             </PrivateRoute>
           }
         />
@@ -53,7 +53,7 @@ const AppRouter = () => {
           path="/search/:query"
           element={
             <PrivateRoute>
-              <Homepage2 />
+              <Homepage />
             </PrivateRoute>
           }
         />
@@ -62,7 +62,7 @@ const AppRouter = () => {
           path="/search-trash/:query"
           element={
             <PrivateRoute>
-              <Homepage2 />
+              <Homepage />
             </PrivateRoute>
           }
         />
@@ -71,7 +71,7 @@ const AppRouter = () => {
           path="/media"
           element={
             <PrivateRoute>
-              <Homepage2 />
+              <Homepage />
             </PrivateRoute>
           }
         />
@@ -80,7 +80,7 @@ const AppRouter = () => {
           path="/search-media/:query"
           element={
             <PrivateRoute>
-              <Homepage2 />
+              <Homepage />
             </PrivateRoute>
           }
         />
@@ -89,7 +89,7 @@ const AppRouter = () => {
           path="/trash"
           element={
             <PrivateRoute>
-              <Homepage2 />
+              <Homepage />
             </PrivateRoute>
           }
         />
@@ -98,7 +98,7 @@ const AppRouter = () => {
           path="/folder-trash/:id"
           element={
             <PrivateRoute>
-              <Homepage2 />
+              <Homepage />
             </PrivateRoute>
           }
         />