oxmc/myDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed more unneeded files, fixed mobile menu

Browse Source
This commit is contained in:
subnub
2024-07-02 02:35:06 -04:00
parent 4a8794b7be
commit 62ebfca6a3
9 changed files with 37 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ContextMenu/index.jsx
+1 -1
View File
@@ -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={
src/components/Header/index.tsx
+8 -4
View File
@@ -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
src/components/Homepage/HomePage.jsx
-34
View File
@@ -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;
src/components/Homepage/Homepage2.txt
-84
View File
@@ -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;
src/components/Homepage/index.jsx
-299
View File
@@ -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));
src/components/Homepage/Homepage2.jsx → src/components/Homepage/index.tsx
-1
View File
@@ -23,7 +23,6 @@ const Homepage2 = () => {
<UploadOverlay />
<ShareModelWrapper />
<MobileContextMenuContainer />
</div>
);
};
src/components/LeftSection/index.jsx
+18 -13
View File
@@ -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);
src/hooks/utils.ts
+1 -1
View File
@@ -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);
src/routers/AppRouter.jsx
+9 -9
View File
@@ -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>
}
/>