diff --git a/package.json b/package.json index 9c136bf..671e14c 100755 --- a/package.json +++ b/package.json @@ -120,6 +120,7 @@ }, "devDependencies": { "@eslint/js": "^9.6.0", + "@types/bytes": "^3.1.4", "@types/fluent-ffmpeg": "^2.1.24", "@types/lodash": "^4.17.5", "concurrently": "^8.2.2", diff --git a/src/components/FileItem/index.tsx b/src/components/FileItem/index.tsx index 74aea55..efe23ba 100644 --- a/src/components/FileItem/index.tsx +++ b/src/components/FileItem/index.tsx @@ -1,15 +1,12 @@ import capitalize from "../../utils/capitalize"; import moment from "moment"; -import React, { memo, useCallback, useMemo, useRef } from "react"; +import React, { memo, useMemo, useRef } from "react"; import ContextMenu from "../ContextMenu"; -import mobilecheck from "../../utils/mobileCheck"; import { useContextMenu } from "../../hooks/contextMenu"; -import { useDispatch, useSelector } from "react-redux"; +import { useSelector } from "react-redux"; import classNames from "classnames"; import { useThumbnail } from "../../hooks/files"; import { getFileColor, getFileExtension } from "../../utils/files"; -import { startSetSelectedItem } from "../../actions/selectedItem"; -import { setPopupFile } from "../../actions/popupFile"; import bytes from "bytes"; import { useAppDispatch, useAppSelector } from "../../hooks/store"; import { setMainSelect, setMultiSelectMode } from "../../reducers/selected"; @@ -98,9 +95,7 @@ const FileItem: React.FC = memo((props) => { return; } - const isMobile = mobilecheck(); - - if (isMobile || currentDate - lastSelected.current < 1500) { + if (currentDate - lastSelected.current < 1500) { dispatch(setPopupSelect({ type: "file", file })); } diff --git a/src/components/Files/index.tsx b/src/components/Files/index.tsx index 45f617c..91cc7f2 100644 --- a/src/components/Files/index.tsx +++ b/src/components/Files/index.tsx @@ -8,30 +8,25 @@ import FileItem from "../FileItem"; import ParentBar from "../ParentBar"; import { useParams } from "react-router-dom"; import classNames from "classnames"; +import { useAppDispatch, useAppSelector } from "../../hooks/store"; +import { toggleListView } from "../../reducers/filter"; const Files = memo(() => { const { data: files } = useFiles(false); - const listView = useSelector((state) => state.filter.listView); - const search = useSelector((state) => state.filter.search); + const listView = useAppSelector((state) => state.filter.listView); const { isHome } = useUtils(); - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const changeListViewMode = () => { - if (!listView) { - dispatch(enableListView()); - } else { - dispatch(disableListView()); - } + dispatch(toggleListView()); }; return (
{isHome && ( -

- {search !== "" ? "Files" : "Home Files"} -

+

Home Files

)} {!isHome && ( diff --git a/src/components/Folders/index.tsx b/src/components/Folders/index.tsx index 73fa0b9..3361774 100644 --- a/src/components/Folders/index.tsx +++ b/src/components/Folders/index.tsx @@ -1,17 +1,18 @@ import { useDispatch, useSelector } from "react-redux"; import { useFolders } from "../../hooks/folders"; -import { setSortBy } from "../../actions/filter"; import FolderItem from "../FolderItem"; import { memo, useCallback, useEffect } from "react"; import ParentBar from "../ParentBar"; import classNames from "classnames"; import { useUtils } from "../../hooks/utils"; +import { useAppDispatch, useAppSelector } from "../../hooks/store"; +import { setSortBy } from "../../reducers/filter"; const Folders = memo(() => { const { data: folders } = useFolders(false); const { isHome } = useUtils(); - const sortBy = useSelector((state) => state.filter.sortBy); - const dispatch = useDispatch(); + const sortBy = useAppSelector((state) => state.filter.sortBy); + const dispatch = useAppDispatch(); const switchOrderSortBy = useCallback(() => { let newSortBy = ""; diff --git a/src/components/PhotoViewerPopup/index.tsx b/src/components/PhotoViewerPopup/index.tsx index 1f7360d..52defc5 100644 --- a/src/components/PhotoViewerPopup/index.tsx +++ b/src/components/PhotoViewerPopup/index.tsx @@ -256,7 +256,7 @@ const PhotoViewerPopup = memo(() => { />
-
+
{ const [searchText, setSearchText] = useState(""); @@ -71,7 +70,7 @@ const SearchBar = memo(() => { }; const fileClick = (file: FileInterface) => { - dispatch(setPopupFile({ showPopup: true, ...file })); + dispatch(setPopupSelect({ type: "file", file })); resetState(); }; diff --git a/src/hooks/files.ts b/src/hooks/files.ts index 660e8cc..39c4c7c 100644 --- a/src/hooks/files.ts +++ b/src/hooks/files.ts @@ -22,7 +22,7 @@ import { FileInterface } from "../types/file"; export const useFiles = (enabled = true) => { const params = useParams(); // TODO: Remove any - const sortBy = useSelector((state: any) => state.filter.sortBy); + const sortBy = useAppSelector((state) => state.filter.sortBy); const { isTrash, isMedia } = useUtils(); const limit = isMedia ? 100 : 50; const filesReactQuery: UseInfiniteQueryResult = diff --git a/src/reducers/filter.js b/src/reducers/filter.js deleted file mode 100644 index d479f3e..0000000 --- a/src/reducers/filter.js +++ /dev/null @@ -1,101 +0,0 @@ -const gridView = window.localStorage.getItem("grid-mode"); - -const sortBy = window.localStorage.getItem("name-mode") -? window.localStorage.getItem("asc-mode") ? 'alp_asc' : 'alp_desc' : window.localStorage.getItem("asc-mode") ? 'date_asc' : 'date_desc'; - -const defaultState = { - sortBy: sortBy, - limit: 50, - search: "", - listView: !gridView, - currentlySearching: false, - isGoogle: false -} - -export default (state = defaultState, action) => { - - switch(action.type) { - - case "ENABLE_LIST_VIEW": { - - return { - ...state, - listView: true - } - } - - case "DISABLE_LIST_VIEW": { - - return { - ...state, - listView: false - } - } - - case "SET_SORT_BY": { - - return { - ...state, - sortBy: action.sortBy - } - - } - - case "RESET_Filters": { - return defaultState - } - - case "SET_LIMIT": - - return { - ...state, - limit: action.limit - } - - case "SET_SEARCH": - - return { - ...state, - search: action.search - } - - case "RESET_SEARCH": - - return { - ...state, - search: "" - } - - case "SET_CURRENTLY_SEARCHING": - - return { - ...state, - currentlySearching: true - } - - case "RESET_CURRENTLY_SEARCHING": - - return { - ...state, - currentlySearching: false - } - - case "SET_IS_GOOGLE": - - return { - ...state, - isGoogle: true - } - - case "SET_NOT_GOOGLE": - - return { - ...state, - isGoogle: false - } - - default: - return state; - } - -} \ No newline at end of file diff --git a/src/reducers/filter.ts b/src/reducers/filter.ts new file mode 100644 index 0000000..5a9d482 --- /dev/null +++ b/src/reducers/filter.ts @@ -0,0 +1,35 @@ +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; + +const gridView = window.localStorage.getItem("grid-mode"); + +const sortBy = window.localStorage.getItem("name-mode") + ? window.localStorage.getItem("asc-mode") + ? "alp_asc" + : "alp_desc" + : window.localStorage.getItem("asc-mode") + ? "date_asc" + : "date_desc"; + +const initialState = { + sortBy: sortBy, + limit: 50, + search: "", + listView: !gridView, +}; + +const leftSectionSlice = createSlice({ + name: "selected", + initialState, + reducers: { + toggleListView: (state) => { + state.listView = !state.listView; + }, + setSortBy: (state, action: PayloadAction) => { + state.sortBy = action.payload; + }, + }, +}); + +export const { toggleListView, setSortBy } = leftSectionSlice.actions; + +export default leftSectionSlice.reducer; diff --git a/src/utils/capitalize.js b/src/utils/capitalize.js deleted file mode 100644 index 26ea026..0000000 --- a/src/utils/capitalize.js +++ /dev/null @@ -1,12 +0,0 @@ -export default (name) => { - - if (name.length <= 1) { - - return name.toUpperCase(); - - } else { - - return name.substring(0,1).toUpperCase() + name.substring(1); - } - -} \ No newline at end of file diff --git a/src/utils/capitalize.ts b/src/utils/capitalize.ts new file mode 100644 index 0000000..9cfe04a --- /dev/null +++ b/src/utils/capitalize.ts @@ -0,0 +1,9 @@ +const capitalize = (name: string) => { + if (name.length <= 1) { + return name.toUpperCase(); + } else { + return name.substring(0, 1).toUpperCase() + name.substring(1); + } +}; + +export default capitalize; diff --git a/src/utils/mobileCheck.js b/src/utils/mobileCheck.js deleted file mode 100644 index 67876d7..0000000 --- a/src/utils/mobileCheck.js +++ /dev/null @@ -1,6 +0,0 @@ -const mobilecheck = () => { - var check = false; - (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera); - return check; - }; -export default mobilecheck; diff --git a/src/utils/mobileCheck.ts b/src/utils/mobileCheck.ts new file mode 100644 index 0000000..8e9b37a --- /dev/null +++ b/src/utils/mobileCheck.ts @@ -0,0 +1,17 @@ +const mobilecheck = () => { + var check = false; + (function (a) { + if ( + /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test( + a + ) || + /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test( + a.substr(0, 4) + ) + ) + check = true; + // @ts-ignore + })(navigator.userAgent || navigator.vendor || window?.opera); + return check; +}; +export default mobilecheck;