diff --git a/package.json b/package.json index d692ccb..f9e8588 100755 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@babel/preset-env": "^7.8.4", "@babel/preset-react": "^7.8.3", "@babel/types": "^7.9.5", + "@reduxjs/toolkit": "^2.2.5", "@sendgrid/mail": "^8.1.3", "@types/bcrypt": "^3.0.0", "@types/compression": "^1.7.0", @@ -92,14 +93,12 @@ "progress-stream": "^2.0.0", "prompts": "^2.3.1", "raf": "^3.4.1", - "react": "^16.12.0", - "react-circular-progressbar": "^2.0.3", - "react-contextmenu": "^2.13.0", - "react-dom": "^16.12.0", - "react-redux": "^7.2.0", - "react-router-dom": "^5.1.1", - "redux": "^4.0.5", - "redux-thunk": "^2.3.0", + "react": "^18.3.1", + "react-circular-progressbar": "^2.1.0", + "react-dom": "^18.3.1", + "react-redux": "^9.1.2", + "react-router-dom": "^6.23.1", + "redux": "^5.0.1", "regenerator-runtime": "^0.13.3", "request": "^2.88.2", "sharp": "^0.33.4", @@ -123,9 +122,6 @@ "css-loader": "^3.4.2", "dart-sass": "^1.25.0", "env-cmd": "^10.1.0", - "enzyme": "^3.11.0", - "enzyme-adapter-react-16": "^1.15.2", - "enzyme-to-json": "^3.4.4", "eslint": "^6.8.0", "eslint-plugin-import": "^2.20.1", "eslint-plugin-react": "^7.18.3", @@ -133,7 +129,6 @@ "json-loader": "^0.5.7", "live-server": "^1.2.1", "nodemon": "^3.1.3", - "react-test-renderer": "^16.12.0", "sass": "^1.77.4", "sass-loader": "^8.0.2", "style-loader": "^1.1.3", diff --git a/src/actions/auth.js b/src/actions/auth.js index 8522207..4b63b62 100755 --- a/src/actions/auth.js +++ b/src/actions/auth.js @@ -1,5 +1,5 @@ import { setLoginFailed } from "./main"; -import { history } from "../routers/AppRouter"; +// import { // history } from "../routers/AppRouter"; import { resetUpload } from "./uploads"; import axios from "../axiosInterceptor"; import env from "../enviroment/envFrontEnd"; @@ -15,40 +15,41 @@ export const logout = () => ({ }); export const startLogin = (email, password, currentRoute) => { - return (dispatch) => { + return async (dispatch) => { const dt = { email, password }; - axios - .post("/user-service/login", dt) - .then((response) => { - // console.log("USER SERVICE LOGIN RESPONSE") + try { + const response = await axios.post("/user-service/login", dt); + // console.log("USER SERVICE LOGIN RESPONSE") - const id = response.data.user._id; - const emailVerified = response.data.user.emailVerified; + const id = response.data.user._id; + const emailVerified = response.data.user.emailVerified; - env.googleDriveEnabled = response.data.user.googleDriveEnabled; - env.s3Enabled = response.data.user.s3Enabled; - env.activeSubscription = response.data.user.activeSubscription; - env.emailAddress = response.data.user.email; - env.name = response.data.user.name || ""; + env.googleDriveEnabled = response.data.user.googleDriveEnabled; + env.s3Enabled = response.data.user.s3Enabled; + env.activeSubscription = response.data.user.activeSubscription; + env.emailAddress = response.data.user.email; + env.name = response.data.user.name || ""; - //window.localStorage.setItem("token", token); + //window.localStorage.setItem("token", token); - if (emailVerified) { - dispatch(setLoginFailed(false)); - dispatch(login(id)); - history.push(currentRoute); - } else { - console.log("Email Not Verified"); - dispatch(setLoginFailed("Unverified Email", 404)); - } - }) - .catch((err) => { - console.log("USER SERVICE LOGIN ERROR", err); - const code = err.response?.status; - dispatch(setLoginFailed("Incorrect Email or Password", code)); - console.log(err); - }); + if (emailVerified) { + dispatch(setLoginFailed(false)); + dispatch(login(id)); + // history.push(currentRoute); + return true; + } else { + console.log("Email Not Verified"); + dispatch(setLoginFailed("Unverified Email", 404)); + return false; + } + } catch (err) { + console.log("USER SERVICE LOGIN ERROR", err); + const code = err.response?.status; + dispatch(setLoginFailed("Incorrect Email or Password", code)); + console.log(err); + return false; + } }; }; @@ -67,7 +68,7 @@ export const startCreateAccount = (email, password) => { if (emailVerified) { dispatch(setLoginFailed(false)); dispatch(login(id)); - history.push("/home"); + // history.push("/home"); } else { console.log("Email Not Verified"); dispatch(setLoginFailed("Unverified Email", 404)); @@ -99,43 +100,45 @@ const reload = () => { }; export const startLoginCheck = (currentRoute) => { - return (dispatch) => { - axios - .get("/user-service/user") - .then((response) => { - const emailVerified = response.data.emailVerified; + return async (dispatch) => { + try { + const response = await axios.get("/user-service/user"); - const id = response.data._id; + const emailVerified = response.data.emailVerified; - env.googleDriveEnabled = response.data.googleDriveEnabled; - env.s3Enabled = response.data.s3Enabled; - env.activeSubscription = response.data.activeSubscription; - env.emailAddress = response.data.email; - env.name = response.data.name || ""; + const id = response.data._id; - if (emailVerified) { - dispatch(setLoginFailed(false)); - dispatch(login(id)); - history.push(currentRoute); - } else { - console.log("Email Not Verified"); - dispatch(setLoginFailed("Unverified Email", 404)); - } + env.googleDriveEnabled = response.data.googleDriveEnabled; + env.s3Enabled = response.data.s3Enabled; + env.activeSubscription = response.data.activeSubscription; + env.emailAddress = response.data.email; + env.name = response.data.name || ""; - //reload(); - }) - .catch((err) => { - console.log( - "login check error", - err, - err.response?.data, - err.data, - err.response - ); - // window.localStorage.removeItem("token") - dispatch(setLoginFailed("Login Expired")); - // history.push("/login") - }); + console.log("login checked"); + + if (emailVerified) { + dispatch(setLoginFailed(false)); + dispatch(login(id)); + // history.push(currentRoute); + return true; + } else { + console.log("Email Not Verified"); + dispatch(setLoginFailed("Unverified Email", 404)); + return false; + } + } catch (err) { + console.log( + "login check error", + err, + err.response?.data, + err.data, + err.response + ); + // window.localStorage.removeItem("token") + dispatch(setLoginFailed("Login Expired")); + return false; + // // history.push("/login") + } }; }; @@ -150,7 +153,7 @@ export const startLogoutAll = () => { dispatch(setLoginFailed(false)); dispatch(logout()); - history.push("/"); + // history.push("/"); }) .catch((err) => { console.log(err); @@ -169,7 +172,7 @@ export const startLogout = () => { dispatch(setLoginFailed(false)); dispatch(logout()); - history.push("/"); + // history.push("/"); }) .catch((err) => { console.log(err); diff --git a/src/app.js b/src/app.js index 04c25cb..851cd21 100755 --- a/src/app.js +++ b/src/app.js @@ -1,26 +1,24 @@ import React from "react"; -import ReactDOM from "react-dom"; -import {Provider} from "react-redux" -import configStore from "./store/configureStore" -import AppRouter from "./routers/AppRouter" -import "normalize.css/normalize.css" +import ReactDOM from "react-dom/client"; +import { Provider } from "react-redux"; +import configStore from "./store/configureStore"; +import AppRouter from "./routers/AppRouter"; +import "normalize.css/normalize.css"; import "./styles/styles.scss"; import "core-js/stable"; import "regenerator-runtime/runtime"; -import 'react-circular-progressbar/dist/styles.css'; +import "react-circular-progressbar/dist/styles.css"; +import { AuthProvider } from "./providers/AuthProvider"; // import '../node_modules/@fortawesome/fontawesome-free/css/all.css'; // import '../node_modules/@fortawesome/fontawesome-free/js/all.js'; const store = configStore(); const jsxWrapper = ( - - - - -) - -ReactDOM.render(jsxWrapper, document.getElementById("app")) - - + + + +); +const root = ReactDOM.createRoot(document.getElementById("app")); +root.render(jsxWrapper); diff --git a/src/components/FolderTreeStorageSub/FolderTreeStorageSub.js b/src/components/FolderTreeStorageSub/FolderTreeStorageSub.js index 178234a..7939e0b 100644 --- a/src/components/FolderTreeStorageSub/FolderTreeStorageSub.js +++ b/src/components/FolderTreeStorageSub/FolderTreeStorageSub.js @@ -1,43 +1,57 @@ import React from "react"; +import { useNavigate } from "react-router-dom"; -const FolderTreeStorageSub = (props) => ( - +const FolderTreeStorageSub = (props) => { + const navigate = useNavigate(); + + const folderOnClick = () => { + navigate(`/folder/${props.folder._id}`); + }; + + return (
-
-
- {props.skipUpdate=false; props.clickEvent(e)}} className="folder-tree-sub__storage__image" src="/assets/arrowstructure.svg" style={props.state.open ? {'transform': 'rotate(90deg)'} : {}}/> -
-
- -
-
-

{props.folder.name}

-
-
+
+
+ { + props.skipUpdate = false; + props.clickEvent(e); + }} + className="folder-tree-sub__storage__image" + src="/assets/arrowstructure.svg" + style={props.state.open ? { transform: "rotate(90deg)" } : {}} + /> +
+
+ +
+
+

+ {props.folder.name} +

+
+
-
-
- {props.state.open ? props.renderFolders() : undefined} -
-
+
+
+ {props.state.open ? props.renderFolders() : undefined} +
+
+ ); +}; - // return - - //
- //
- //
- // {props.skipUpdate=false; props.clickEvent(e)}}>arrowstructure - //
- //

{props.folder.name}

- //
- //
- - // {/* CHILDREN GO HERE */} - // {props.state.open ? props.renderFolders() : undefined} - - //
- //
-) - -export default FolderTreeStorageSub \ No newline at end of file +export default FolderTreeStorageSub; diff --git a/src/components/FolderTreeStorageSub/index.js b/src/components/FolderTreeStorageSub/index.js index bcfd94d..93a17b4 100644 --- a/src/components/FolderTreeStorageSub/index.js +++ b/src/components/FolderTreeStorageSub/index.js @@ -1,314 +1,312 @@ import env from "../../enviroment/envFrontEnd"; -import axios from "../../axiosInterceptor" +import axios from "../../axiosInterceptor"; import React from "react"; -import {setFolderTreeID, removeFolderTreeID, removeNewFolderTreeID, removeDeleteFolderTreeID, removeMoveFolderTreeID, addNewFolderTreeID, removeRenameFolderTreeID, setInsertedFolderTreeID} from "../../actions/folderTree"; -import {history} from "../../routers/AppRouter"; -import {connect} from "react-redux" +import { + setFolderTreeID, + removeFolderTreeID, + removeNewFolderTreeID, + removeDeleteFolderTreeID, + removeMoveFolderTreeID, + addNewFolderTreeID, + removeRenameFolderTreeID, + setInsertedFolderTreeID, +} from "../../actions/folderTree"; +// import { history } from "../../routers/AppRouter"; +import { connect } from "react-redux"; import FolderTreeStorageSub2 from ".././FolderTreeStorageSub"; import FolderTreeStorageSub from "./FolderTreeStorageSub"; class FolderTreeStorageSubContainer extends React.Component { - - constructor(props) { - super(props); + constructor(props) { + super(props); - this.state = { - folders: [], - open: false, - loaded: false, - forceUpdate: "" - } + this.state = { + folders: [], + open: false, + loaded: false, + forceUpdate: "", + }; - this.cachedFolders = { + this.cachedFolders = {}; - } + this.ignoreNewList = {}; - this.ignoreNewList = { + this.ignoreDeleteList = {}; - } + this.ignoreMoveList = {}; - this.ignoreDeleteList = { + this.ignoreRenameList = {}; - } + this.ignoreInsertList = {}; - this.ignoreMoveList = { + this.launchedByMain = false; + this.skipUpdate = false; + } - } - - this.ignoreRenameList = { - - } - - this.ignoreInsertList = { - - } - - this.launchedByMain = false; - this.skipUpdate = false; + componentDidUpdate = () => { + if ( + this.props.selectedIDs[this.props.folder._id] && + !this.state.open && + !this.state.loaded && + this.props.folder._id === this.props.selectedID + ) { + this.skipUpdate = true; + this.getFolders(); + } else if ( + this.props.selectedIDs[this.props.folder._id] && + !this.state.open && + this.props.folder._id === this.props.selectedID + ) { + this.skipUpdate = true; + this.setState(() => { + return { + ...this.state, + open: true, + }; + }); + } else if ( + this.props.selectedIDs[this.props.folder._id] === undefined && + this.state.open + ) { + this.setState(() => { + return { + ...this.state, + open: false, + }; + }); } - componentDidUpdate = () => { + this.addNewFolders(); + this.deleteRemovedFolders(); + this.moveMovedFolders(); + this.renameRenamedFolders(); + this.insertInsertedFolders(); + }; - if (this.props.selectedIDs[this.props.folder._id] - && !this.state.open - && !this.state.loaded - && this.props.folder._id === this.props.selectedID) { - this.skipUpdate = true; - this.getFolders() - } else if (this.props.selectedIDs[this.props.folder._id] - && !this.state.open - && this.props.folder._id === this.props.selectedID) { - - this.skipUpdate = true; - this.setState(() => { - return { - ...this.state, - open: true,} - }) - } else if (this.props.selectedIDs[this.props.folder._id] === undefined && this.state.open) { - this.setState(() => { - return { - ...this.state, - open: false,} - }) - } + addNewFolders = () => { + for (let currentKey in this.props.newIDs) { + const currentObj = this.props.newIDs[currentKey]; + if ( + currentObj.parent === this.props.folder._id && + !this.ignoreNewList[currentObj._id] + ) { + this.ignoreNewList[currentObj._id] = true; - this.addNewFolders() - this.deleteRemovedFolders() - this.moveMovedFolders(); - this.renameRenamedFolders(); - this.insertInsertedFolders(); + this.props.dispatch(removeNewFolderTreeID(currentObj._id)); + + this.setState(() => { + return { + ...this.state, + folders: [...this.state.folders, currentObj], + }; + }); + } } + }; - addNewFolders = () => { + insertInsertedFolders = () => { + for (let currentKey in this.props.insertedIDs) { + const currentObj = this.props.insertedIDs[currentKey]; - for (let currentKey in this.props.newIDs) { - - const currentObj = this.props.newIDs[currentKey]; - if (currentObj.parent === this.props.folder._id && !this.ignoreNewList[currentObj._id]) { - - this.ignoreNewList[currentObj._id] = true; + if ( + currentObj.parent === this.props.folder._id && + !this.ignoreInsertList[currentObj._id] + ) { + this.ignoreInsertList[currentObj._id] = true; - this.props.dispatch(removeNewFolderTreeID(currentObj._id)) + let tempInsertIDsList = this.props.insertedIDs; + tempInsertIDsList = [ + ...tempInsertIDsList.slice(0, currentKey), + ...tempInsertIDsList.splice(currentKey + 1, tempInsertIDsList.length), + ]; - this.setState(() => { + this.props.dispatch(setFolderTreeID(this.props.folder._id)); - return { - ...this.state, - folders: [...this.state.folders, currentObj] - } - }) + this.setState( + () => { + return { + ...this.state, + folders: currentObj.subFolders, + open: true, + loaded: true, + }; + }, + () => { + if (tempInsertIDsList.length !== 0) { + const newID = tempInsertIDsList[0]; + this.props.dispatch( + setInsertedFolderTreeID(newID, tempInsertIDsList) + ); } + } + ); + break; + } + } + }; + + deleteRemovedFolders = () => { + for (let currentKey in this.props.deleteIDs) { + const currentObj = this.props.deleteIDs[currentKey]; + + if ( + this.cachedFolders[currentObj._id] && + !this.ignoreDeleteList[currentObj._id] + ) { + this.ignoreDeleteList[currentObj._id] = true; + + const tempFolderList = this.state.folders.filter((currentFolder) => { + return currentObj._id !== currentFolder._id; + }); + + this.props.dispatch(removeDeleteFolderTreeID(currentObj._id)); + + this.setState(() => { + return { + ...this.state, + folders: tempFolderList, + }; + }); + } + } + }; + + moveMovedFolders = () => { + for (let currentKey in this.props.moveIDs) { + const currentObj = this.props.moveIDs[currentKey]; + + if ( + this.cachedFolders[currentObj._id] && + !this.ignoreMoveList[currentObj._id] + ) { + this.ignoreMoveList[currentObj._id] = true; + + let movedValue = {}; + const tempFolderList = this.state.folders.filter((currentFolder) => { + if (currentObj._id === currentFolder._id) movedValue = currentFolder; + return currentObj._id !== currentFolder._id; + }); + + movedValue.parent = currentObj.parent; + + this.props.dispatch(removeMoveFolderTreeID(currentObj._id)); + this.props.dispatch(addNewFolderTreeID(currentObj._id, movedValue)); + + this.setState(() => { + return { + ...this.state, + folders: tempFolderList, + }; + }); + } + } + }; + + renameRenamedFolders = () => { + for (let currentKey in this.props.renameIDs) { + const currentObj = this.props.renameIDs[currentKey]; + + if ( + this.cachedFolders[currentObj._id] && + !this.ignoreRenameList[currentObj._id] + ) { + this.ignoreRenameList[currentObj._id] = true; + + let tempList = []; + + for (let currentValue of this.state.folders) { + if (currentValue._id === currentObj._id) { + currentValue.name = currentObj.name; + } + tempList.push(Object.assign({}, currentValue)); } + + this.props.dispatch(removeRenameFolderTreeID(currentObj._id)); + + this.setState(() => { + return { + ...this.state, + folders: [...tempList], + }; + }); + } } + }; - insertInsertedFolders = () => { + getFolders = () => { + const parent = this.props.folder._id; - for (let currentKey in this.props.insertedIDs) { + const url = + this.props.type === "drive" + ? `/folder-service-google/list?parent=${parent}` + : `/folder-service/list?parent=${parent}`; + axios.get(url).then((response) => { + this.setState(() => { + return { + folders: response.data, + open: true, + loaded: true, + }; + }); + }); + }; - const currentObj = this.props.insertedIDs[currentKey]; - - if (currentObj.parent === this.props.folder._id && !this.ignoreInsertList[currentObj._id]) { - - this.ignoreInsertList[currentObj._id] = true; - - let tempInsertIDsList = this.props.insertedIDs; - tempInsertIDsList = [...tempInsertIDsList.slice(0, currentKey), ...tempInsertIDsList.splice(currentKey+1, tempInsertIDsList.length)] - - this.props.dispatch(setFolderTreeID(this.props.folder._id)) - - this.setState(() => { - - return { - ...this.state, - folders: currentObj.subFolders, - open: true, - loaded: true - } - - }, () => { - - if (tempInsertIDsList.length !== 0) { - const newID = tempInsertIDsList[0]; - this.props.dispatch(setInsertedFolderTreeID(newID, tempInsertIDsList)) - } - }) - break; - } - } + clickEvent = () => { + if (!this.state.open) { + this.props.dispatch(setFolderTreeID(this.props.folder._id)); + } else { + this.props.dispatch(removeFolderTreeID(this.props.folder._id)); + this.setState(() => { + return { + ...this.state, + open: false, + }; + }); } + }; - deleteRemovedFolders = () => { + renderFolders = () => { + this.cachedFolders = {}; - for (let currentKey in this.props.deleteIDs) { + return this.state.folders.map((folder) => { + this.cachedFolders[folder._id] = true; + return ( + + ); + }); + }; - const currentObj = this.props.deleteIDs[currentKey]; - - if (this.cachedFolders[currentObj._id] && !this.ignoreDeleteList[currentObj._id]) { - - this.ignoreDeleteList[currentObj._id] = true; - - const tempFolderList = this.state.folders.filter((currentFolder) => { - return currentObj._id !== currentFolder._id - }) - - this.props.dispatch(removeDeleteFolderTreeID(currentObj._id)); - - this.setState(() => { - - return { - ...this.state, - folders: tempFolderList, - } - }) - } - } - } - - moveMovedFolders = () => { - - for (let currentKey in this.props.moveIDs) { - const currentObj = this.props.moveIDs[currentKey]; - - if (this.cachedFolders[currentObj._id] && !this.ignoreMoveList[currentObj._id]) { - - this.ignoreMoveList[currentObj._id] = true; - - let movedValue = {} - const tempFolderList = this.state.folders.filter((currentFolder) => { - - if (currentObj._id === currentFolder._id) movedValue = currentFolder; - return currentObj._id !== currentFolder._id - }) - - movedValue.parent = currentObj.parent; - - this.props.dispatch(removeMoveFolderTreeID(currentObj._id)); - this.props.dispatch(addNewFolderTreeID(currentObj._id, movedValue)) - - this.setState(() => { - - return { - ...this.state, - folders: tempFolderList - } - }) - - } - } - } - - renameRenamedFolders = () => { - - for (let currentKey in this.props.renameIDs) { - const currentObj = this.props.renameIDs[currentKey]; - - if (this.cachedFolders[currentObj._id] && !this.ignoreRenameList[currentObj._id]) { - - this.ignoreRenameList[currentObj._id] = true; - - let tempList = []; - - for (let currentValue of this.state.folders) { - - if (currentValue._id === currentObj._id) { - currentValue.name = currentObj.name; - } - tempList.push(Object.assign({}, currentValue)); - } - - this.props.dispatch(removeRenameFolderTreeID(currentObj._id)); - - this.setState(() => { - - return { - ...this.state, - folders: [...tempList], - } - }) - - } - } - } - - folderClick = () => { - - const id = this.props.folder._id; - const folderPush = this.props.type === "drive" ? `/folder-google/${id}` : this.props.type === "mongo" ? `/folder/${id}` : `/folder-personal/${id}`; - history.push(folderPush) - } - - getFolders = () => { - - const parent = this.props.folder._id; - - const url = this.props.type === "drive" ? `/folder-service-google/list?parent=${parent}` : `/folder-service/list?parent=${parent}`; - axios.get(url).then((response) => { - - this.setState(() => { - return { - folders: response.data, - open: true, - loaded: true - } - }) - }) - } - - clickEvent = () => { - - if (!this.state.open) { - this.props.dispatch(setFolderTreeID(this.props.folder._id)) - } else { - this.props.dispatch(removeFolderTreeID(this.props.folder._id)); - this.setState(() => { - return { - ...this.state, - open: false, - } - }) - } - } - - renderFolders = () => { - - this.cachedFolders = {} - - return this.state.folders.map((folder) => { - this.cachedFolders[folder._id] = true; - return - }) - } - - render () { - - return ( - - - ) - } + render() { + return ( + + ); + } } const connectStoreToProp = (state) => ({ - selectedID: state.folderTree.id, - selectedIDs: state.folderTree.openIDs, - newIDs: state.folderTree.newIDs, - newID: state.folderTree.newID, - deleteIDs: state.folderTree.deleteIDs, - deleteID: state.folderTree.deleteID, - moveIDs: state.folderTree.moveIDs, - moveID: state.folderTree.moveID, - renameIDs: state.folderTree.renameIDs, - renameID: state.folderTree.renameID, - insertedIDs: state.folderTree.insertedIDs, - insertedID: state.folderTree.insertedID -}) + selectedID: state.folderTree.id, + selectedIDs: state.folderTree.openIDs, + newIDs: state.folderTree.newIDs, + newID: state.folderTree.newID, + deleteIDs: state.folderTree.deleteIDs, + deleteID: state.folderTree.deleteID, + moveIDs: state.folderTree.moveIDs, + moveID: state.folderTree.moveID, + renameIDs: state.folderTree.renameIDs, + renameID: state.folderTree.renameID, + insertedIDs: state.folderTree.insertedIDs, + insertedID: state.folderTree.insertedID, +}); -export default connect(connectStoreToProp)(FolderTreeStorageSubContainer); \ No newline at end of file +export default connect(connectStoreToProp)(FolderTreeStorageSubContainer); diff --git a/src/components/Header/index.js b/src/components/Header/index.js index e37f7d0..0f4f213 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -7,10 +7,10 @@ import { setParent, resetParentList } from "../../actions/parent"; import { startSetFiles } from "../../actions/files"; import { startSetFolders } from "../../actions/folders"; import env from "../../enviroment/envFrontEnd"; -import { history } from "../../routers/AppRouter"; import axios from "../../axiosInterceptor"; import { connect } from "react-redux"; import React from "react"; +import withNavigate from "../HocComponent"; const currentURL = env.url; @@ -71,7 +71,7 @@ class HeaderContainer extends React.Component { }; selectSuggested = () => { - history.push(`/search/${this.searchValue}`); + this.props.navigate(`/search/${this.searchValue}`); this.searchValue = ""; @@ -135,7 +135,7 @@ class HeaderContainer extends React.Component { const parent = this.props.parent; - history.push( + this.props.navigate( `/search/${this.searchValue}?parent=${parent}&folder_search=true` ); @@ -153,7 +153,7 @@ class HeaderContainer extends React.Component { }; selectSuggestedByStorageType = () => { - history.push(`/search/${this.searchValue}?storageType=stripe`); + this.props.navigate(`/search/${this.searchValue}?storageType=stripe`); this.searchValue = ""; @@ -169,7 +169,7 @@ class HeaderContainer extends React.Component { }; goToSettings = () => { - history.push("/settings"); + this.props.navigate("/settings"); }; getProfilePic = () => { @@ -210,4 +210,4 @@ const connectPropToStore = (state) => ({ parent: state.parent.parent, }); -export default connect(connectPropToStore)(HeaderContainer); +export default connect(connectPropToStore)(withNavigate(HeaderContainer)); diff --git a/src/components/HocComponent/index.js b/src/components/HocComponent/index.js new file mode 100644 index 0000000..5d0c3f6 --- /dev/null +++ b/src/components/HocComponent/index.js @@ -0,0 +1,11 @@ +import { useLocation, useNavigate } from "react-router-dom"; + +const withNavigate = (Component) => { + return (props) => { + const navigate = useNavigate(); + const location = useLocation(); + return ; + }; +}; + +export default withNavigate; diff --git a/src/components/Homepage/index.js b/src/components/Homepage/index.js index 4b68d71..b5ea0d5 100644 --- a/src/components/Homepage/index.js +++ b/src/components/Homepage/index.js @@ -1,276 +1,300 @@ 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 { 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 { connect } from "react-redux"; import React from "react"; -import { setStorageSwitcherStorage, resetStorageSwitcherStorage } from "../../actions/storageSwitcher"; +import { + setStorageSwitcherStorage, + resetStorageSwitcherStorage, +} from "../../actions/storageSwitcher"; import env from "../../enviroment/envFrontEnd"; +import withNavigate from "../HocComponent"; class HomePageContainer extends React.Component { + constructor(props) { + super(props); - constructor(props) { - super(props); + this.lastLocationKey = ""; - this.lastLocationKey = ""; + this.clearCache = false; + } - this.clearCache = false; + listStyleCheck = () => { + if (window.localStorage.getItem("list-style") === "List") { + this.props.dispatch(resetSelected()); + this.props.dispatch(enableListView()); + } + }; + + loginCheck = () => { + console.log("props", this.props); + 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 = "" } - listStyleCheck = () => { + this.lastLocationKey = this.props.location.key; + }; - if (window.localStorage.getItem("list-style") === "List") { + componentDidUpdate = () => { + this.historyUpdateCheckRefresh(); + }; - this.props.dispatch(resetSelected()) - this.props.dispatch(enableListView()) - } - } + getFiles = (clearCache) => { + const sortBy = this.props.sortBy; - loginCheck = () => { + // this.props.dispatch(startSetQuickFiles()) + // this.props.dispatch(startSetFolders(undefined, sortBy)); + // this.props.dispatch(startSetFiles(parent, sortBy)) + this.props.dispatch(startSetAllItems(clearCache, undefined, sortBy)); + }; - const pathname = history.location.pathname; + goHome = () => { + this.clearCache = true; + this.props.navigate("/home"); + }; - 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 = history.location.pathname; - this.props.dispatch(setCurrentRoute(currentPath)) - history.push("/") - } - - } - - getStorageSwitcherType = (isGoogle, isPersonal) => { - - if (isGoogle) { - return "drive"; - } else if (isPersonal) { - return "s3"; - } else { - return "stripe" - } - } - - setFolderItems = (historyKey) => { - - const isGoogle = history.location.pathname.includes("folder-google"); - const isPersonal = history.location.pathname.includes("folder-personal"); - - const sortBy = this.props.sortBy - const idSplit = isGoogle ? history.location.pathname.split("/folder-google/") : isPersonal ? history.location.pathname.split("/folder-personal/") : history.location.pathname.split("/folder/"); - const id = idSplit[1]; - - this.props.dispatch(setSearch("")) - this.props.dispatch(setCurrentRouteType("folder")) - isGoogle ? this.props.dispatch(setIsGoogle()) : this.props.dispatch(setNotGoogle()) - 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, isGoogle)) - 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, isGoogle)) - this.props.dispatch(setFolderTreeID(id)) - this.props.dispatch(setFirstLoadDetailsFolderTree({_id: id, isGoogle, isPersonal})) - this.props.dispatch(setRightSelected("")) - this.props.dispatch(startSetStorage()); - this.props.dispatch(setStorageSwitcherStorage(this.getStorageSwitcherType(isGoogle, isPersonal))) - env.uploadMode = this.getStorageSwitcherType(isGoogle, isPersonal) - } - - historyUpdateCheck = () => { - - console.log("history update check"); - - const pathname = history.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 = history.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 = history.location.pathname - - console.log("history update check", history.location.key) - - if (this.lastLocationKey !== history.location.key && currentPathname !== "/home" && currentPathname.includes("/search")) { - - this.setSearchItems() - - } else if (this.lastLocationKey !== history.location.key && history.location.pathname !== "/home") { - - - this.setFolderItems(history.location.key) - - } else if (this.lastLocationKey !== history.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 = history.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; - history.push("/home") - } - - render() { - - return - } + render() { + return ; + } } const mapStoreToProps = (state) => ({ - sortBy: state.filter.sortBy, - isAuthenticated: !!state.auth.id, - photoID: state.photoViewer.id, -}) + sortBy: state.filter.sortBy, + isAuthenticated: !!state.auth.id, + photoID: state.photoViewer.id, +}); -export default connect(mapStoreToProps)(HomePageContainer); \ No newline at end of file +export default connect(mapStoreToProps)(withNavigate(HomePageContainer)); diff --git a/src/components/LoginPage/index.js b/src/components/LoginPage/index.js index f48c1b8..a3d008b 100644 --- a/src/components/LoginPage/index.js +++ b/src/components/LoginPage/index.js @@ -1,264 +1,256 @@ import LoginPage from "./LoginPage"; -import {startLogin, startLoginCheck, startCreateAccount} from "../../actions/auth" -import {setLoginFailed, setCreateNewAccount} from "../../actions/main"; -import {connect} from "react-redux"; +import { + startLogin, + startLoginCheck, + startCreateAccount, +} from "../../actions/auth"; +import { setLoginFailed, setCreateNewAccount } from "../../actions/main"; +import { connect } from "react-redux"; import React from "react"; import axios from "../../axiosInterceptor"; import Swal from "sweetalert2"; import env from "../../enviroment/envFrontEnd"; +import withNavigate from "../HocComponent"; class LoginPageContainer extends React.Component { + constructor(props) { + super(props); - constructor(props) { - super(props); + this.state = { + value: undefined, + loginMode: true, + email: "", + password: "", + verifyPassword: "", + resetPasswordMode: false, + verifyEmailResent: false, + verifyEmailResentTimer: 0, + verifyEmailResentTimerStarted: false, + }; - this.state = { - value: undefined, - loginMode: true, - email: "", - password: "", - verifyPassword: "", - resetPasswordMode: false, - verifyEmailResent: false, - verifyEmailResentTimer: 0, - verifyEmailResentTimerStarted: false - } + this.timer; + } - this.timer; + loginWithToken = async () => { + const loginSuccessful = await this.props.dispatch(startLoginCheck()); + console.log("login check"); + if (loginSuccessful) { + this.props.navigate(this.props.currentRoute); } + }; - loginWithToken = () => { + componentDidUpdate = () => { + if (this.props.createNewAccount) { + this.props.dispatch(setCreateNewAccount(false)); - this.props.dispatch(startLoginCheck(this.props.currentRoute)) + Swal.fire({ + icon: "info", + title: "Email Verification Sent", + text: "Sent Email Verification, Please Check Your Inbox.", + }); } + }; - componentDidUpdate = () => { + login = async (e) => { + e.preventDefault(); - if (this.props.createNewAccount) { - this.props.dispatch(setCreateNewAccount(false)); + const email = this.state.email; + const password = this.state.password; + const verifyPassword = this.state.verifyPassword; - Swal.fire({ - icon: 'info', - title: 'Email Verification Sent', - text: 'Sent Email Verification, Please Check Your Inbox.', - }) - } - } - - login = (e) => { - - e.preventDefault(); - - const email = this.state.email - const password = this.state.password - const verifyPassword = this.state.verifyPassword; - - if (this.state.resetPasswordMode) { - - const data = { - email, - } - axios.post("/user-service/send-password-reset", data).then((response) => { - - Swal.fire( - 'Check your email', - 'If the email address matches any in our database, we’ll send you an email with instructions on how to reset your password.', - 'success' - ) - - }).catch((err) => { - console.log("Reset Password Err", err); - }) - - } else if (this.state.loginMode) { - - this.props.dispatch(startLogin(email, password, this.props.currentRoute)) - - } else if (password === verifyPassword) { - - this.props.dispatch(startCreateAccount(email, password)); - - } else { - - this.props.dispatch(setLoginFailed("Passwords Do Not Match")); - } - } - - switchResetPasswordMode = () => { - - this.setState(() => { - return { - ...this.state, - resetPasswordMode: !this.state.resetPasswordMode - } + if (this.state.resetPasswordMode) { + const data = { + email, + }; + axios + .post("/user-service/send-password-reset", data) + .then((response) => { + Swal.fire( + "Check your email", + "If the email address matches any in our database, we’ll send you an email with instructions on how to reset your password.", + "success" + ); }) + .catch((err) => { + console.log("Reset Password Err", err); + }); + } else if (this.state.loginMode) { + const loginSuccessful = await this.props.dispatch( + startLogin(email, password, this.props.currentRoute) + ); + if (loginSuccessful) { + this.props.navigate(this.props.currentRoute); + } + } else if (password === verifyPassword) { + this.props.dispatch(startCreateAccount(email, password)); + } else { + this.props.dispatch(setLoginFailed("Passwords Do Not Match")); + } + }; + + switchResetPasswordMode = () => { + this.setState(() => { + return { + ...this.state, + resetPasswordMode: !this.state.resetPasswordMode, + }; + }); + }; + + switchLoginMode = () => { + this.setState(() => { + return { + ...this.state, + loginMode: !this.state.loginMode, + }; + }); + }; + + emailOnChange = (e) => { + const value = e.target.value; + + this.setState(() => ({ + ...this.state, + email: value, + })); + }; + + passwordOnChange = (e) => { + const value = e.target.value; + + this.setState(() => ({ + ...this.state, + password: value, + })); + }; + + verifyPasswordOnChange = (e) => { + const value = e.target.value; + + this.setState(() => ({ + ...this.state, + verifyPassword: value, + })); + }; + + startVerifyEmailTimer = () => { + this.timer = window.setInterval(this.decreaseVerifyTimer, 1000); + }; + + decreaseVerifyTimer = () => { + if ( + this.state.verifyEmailResentTimer <= 0 && + this.state.verifyEmailResentTimerStarted + ) { + clearInterval(this.timer); + return this.setState(() => { + return { + ...this.state, + verifyEmailResentTimerStarted: false, + verifyEmailResentTimer: 0, + verifyEmailResent: false, + }; + }); } - switchLoginMode = () => { + this.setState(() => { + return { + ...this.state, + verifyEmailResentTimer: this.state.verifyEmailResentTimer - 1, + }; + }); + }; - this.setState(() => { - - return { - ...this.state, - loginMode: !this.state.loginMode - } - }) + resendEmail = () => { + if (this.state.verifyEmailResentTimer !== 0) { + console.log("verify email timer not at 0 yet"); + return; } - emailOnChange = (e) => { - - const value = e.target.value; - - this.setState(() => ({ + axios.post("/user-service/resend-verify-email").then((response) => { + this.setState( + () => { + return { ...this.state, - email: value - - })) - - } - - passwordOnChange = (e) => { - - const value = e.target.value; - - this.setState(() => ({ - ...this.state, - password: value - })) - - } - - verifyPasswordOnChange = (e) => { - - const value = e.target.value; - - this.setState(() => ({ - ...this.state, - verifyPassword: value - })) - } - - startVerifyEmailTimer = () => { - - this.timer = window.setInterval(this.decreaseVerifyTimer, 1000) - - } - - decreaseVerifyTimer = () => { - - if (this.state.verifyEmailResentTimer <= 0 && this.state.verifyEmailResentTimerStarted) { - clearInterval(this.timer); - return this.setState(() => { - return { - ...this.state, - verifyEmailResentTimerStarted: false, - verifyEmailResentTimer: 0, - verifyEmailResent: false - } - }) + verifyEmailResent: true, + verifyEmailResentTimer: 59, + verifyEmailResentTimerStarted: true, + }; + }, + () => { + this.startVerifyEmailTimer(); } + ); + }); + }; - this.setState(() => { + logout = () => { + // window.localStorage.removeItem("token"); - return { - ...this.state, - verifyEmailResentTimer: this.state.verifyEmailResentTimer - 1 - } - }) - } + axios + .post("/user-service/logout") + .then((response) => { + console.log("user logged out verify email"); - resendEmail = () => { + //this.props.dispatch(setLoginFailed(false)) - if (this.state.verifyEmailResentTimer !== 0) { - console.log("verify email timer not at 0 yet"); - return; - } + window.location.reload(); - axios.post("/user-service/resend-verify-email").then((response) => { - - this.setState(() => { - return { - ...this.state, - verifyEmailResent: true, - verifyEmailResentTimer: 59, - verifyEmailResentTimerStarted: true - } - }, () => { - this.startVerifyEmailTimer() - }) - }) - } + // this.setState(() => { + // return { + // ...this.state, + // value: undefined, + // loginMode: true, + // email: "", + // password: "", + // verifyPassword: "", + // resetPasswordMode: false, + // verifyEmailResent: false, + // verifyEmailResentTimer: 0, + // verifyEmailResentTimerStarted: false, + // } + // }) + }) + .catch((e) => { + window.location.reload(); + console.log("Cannot logout user verify email"); + }); + }; - logout = () => { - - // window.localStorage.removeItem("token"); - - axios.post("/user-service/logout").then((response) => { - - console.log("user logged out verify email"); - - //this.props.dispatch(setLoginFailed(false)) - - window.location.reload(); - - // this.setState(() => { - // return { - // ...this.state, - // value: undefined, - // loginMode: true, - // email: "", - // password: "", - // verifyPassword: "", - // resetPasswordMode: false, - // verifyEmailResent: false, - // verifyEmailResentTimer: 0, - // verifyEmailResentTimerStarted: false, - // } - // }) - - }).catch((e) => { - window.location.reload(); - console.log("Cannot logout user verify email"); - }) - - } - - componentDidMount = () => { - - env.emailAddress = ""; - this.setState(() => ({ - ...this.state, - email: "", - })) - this.loginWithToken(); - - } - - render() { - - return - - } + componentDidMount = () => { + env.emailAddress = ""; + this.setState(() => ({ + ...this.state, + email: "", + })); + this.loginWithToken(); + }; + render() { + return ( + + ); + } } const mapStateToProps = (state) => ({ - id: state.auth.id, - loginFailed: state.main.loginFailed, - loginFailedCode: state.main.loginFailedCode, - currentRoute: state.routes.currentRoute, - createNewAccount: state.main.createNewAccount, -}) + id: state.auth.id, + loginFailed: state.main.loginFailed, + loginFailedCode: state.main.loginFailedCode, + currentRoute: state.routes.currentRoute, + createNewAccount: state.main.createNewAccount, +}); -export default connect(mapStateToProps)(LoginPageContainer) \ No newline at end of file +export default connect(mapStateToProps)(withNavigate(LoginPageContainer)); diff --git a/src/components/MainSection/index.js b/src/components/MainSection/index.js index abf3fbe..1bd7bd7 100644 --- a/src/components/MainSection/index.js +++ b/src/components/MainSection/index.js @@ -14,9 +14,10 @@ import MainSection from "./MainSection"; import env from "../../enviroment/envFrontEnd"; import axios from "../../axiosInterceptor"; import { connect } from "react-redux"; -import { history } from "../../routers/AppRouter"; +// import { history } from "../../routers/AppRouter"; import React from "react"; import { getUpdateSettingsID } from "../../utils/updateSettings"; +import withNavigate from "../HocComponent"; class MainSectionContainer extends React.Component { constructor(props) { @@ -39,12 +40,7 @@ class MainSectionContainer extends React.Component { (mobile && !doubleClickMobile) || bypass ) { - const folderPush = folder.drive - ? `/folder-google/${id}` - : folder.personalFolder - ? `/folder-personal/${id}` - : `/folder/${id}`; - history.push(folderPush); + this.props.navigate(`/folder/${id}`); } else { const isGoogleDrive = folder.drive; @@ -309,4 +305,4 @@ const connectPropToState = (state) => ({ // resetSettingsMain: state.main.resetSettingsMain }); -export default connect(connectPropToState)(MainSectionContainer); +export default connect(connectPropToState)(withNavigate(MainSectionContainer)); diff --git a/src/components/ParentBar/index.js b/src/components/ParentBar/index.js index d21b593..283587b 100644 --- a/src/components/ParentBar/index.js +++ b/src/components/ParentBar/index.js @@ -1,40 +1,50 @@ import React from "react"; -import {connect} from "react-redux" +import { connect } from "react-redux"; import env from "../../enviroment/envFrontEnd"; -import {history} from "../../routers/AppRouter" +// import { history } from "../../routers/AppRouter"; import ParentBar from "./ParentBar"; +import withNavigate from "../HocComponent"; class ParentBarContainer extends React.Component { + constructor(props) { + super(props); + } - constructor(props) { - super(props) - } + onFolderClick = () => { + const id = + this.props.parentList.length !== 0 + ? this.props.parentList[this.props.parentList.length - 1] + : ""; + const url = + env.uploadMode === "drive" + ? `/folder-google/${id}` + : env.uploadMode === "s3" + ? `/folder-personal/${id}` + : `/folder/${id}`; - onFolderClick = () => { + if (id.length === 0) return; - const id = this.props.parentList.length !== 0 ? this.props.parentList[this.props.parentList.length - 1] : ""; - const url = env.uploadMode === "drive" ? `/folder-google/${id}` : env.uploadMode === "s3" ? `/folder-personal/${id}` : `/folder/${id}`; + this.props.navigate(url); + }; - if (id.length === 0) return; + homeClick = () => { + this.props.navigate("/home"); + }; - history.push(url) - } - - homeClick = () => { - history.push("/home") - } - - render() { - return - } + render() { + return ( + + ); + } } const connectStoreToProp = (state) => ({ - parentNameList: state.parent.parentNameList, - parentList: state.parent.parentList -}) + parentNameList: state.parent.parentNameList, + parentList: state.parent.parentList, +}); -export default connect(connectStoreToProp)(ParentBarContainer); \ No newline at end of file +export default connect(connectStoreToProp)(withNavigate(ParentBarContainer)); diff --git a/src/components/SettingsPage/index.js b/src/components/SettingsPage/index.js index 822e5fc..5c73f88 100644 --- a/src/components/SettingsPage/index.js +++ b/src/components/SettingsPage/index.js @@ -19,7 +19,7 @@ import InvoiceItem from "../InvoiceItem"; import { setUpdateSettingsID } from "../../utils/updateSettings"; import HomepageSpinner from "../HomepageSpinner"; import { setLoading } from "../../actions/main"; -import { history } from "../../routers/AppRouter"; +import withNavigate from "../HocComponent"; // import {updateSettingsID} from "../MainSection" // import { resetSettingsMain } from "../../actions/main"; @@ -483,7 +483,7 @@ class SettingsPageContainer extends React.Component { }; goHome = () => { - history.push("/"); + this.props.navigate("/"); }; onChangeOldPassword = (e) => { @@ -644,7 +644,7 @@ class SettingsPageContainer extends React.Component { }; goHome = () => { - history.push("/"); + this.props.navigate("/"); }; downloadPersonalFileList = (e) => { @@ -1483,7 +1483,7 @@ class SettingsPageContainer extends React.Component {

History

-
+
@@ -1975,4 +1975,4 @@ const connectStoreToProp = (state) => ({ loading: state.main.loading, }); -export default connect(connectStoreToProp)(SettingsPageContainer); +export default connect(connectStoreToProp)(withNavigate(SettingsPageContainer)); diff --git a/src/components/Subbar/index.js b/src/components/Subbar/index.js index 76f9b34..843f43e 100644 --- a/src/components/Subbar/index.js +++ b/src/components/Subbar/index.js @@ -1,176 +1,172 @@ import Subbar from "./Subbar"; -import {showSideBar, hideSideBar} from "../../actions/main"; -import {showAddOptions2} from "../../actions/addOptions"; -import {startAddFile, setFiles, startSetFiles} from "../../actions/files"; -import {startAddFolder, setFolders, startSetFolders} from "../../actions/folders" -import {enableListView, disableListView} from "../../actions/filter"; -import {resetSelected} from "../../actions/selectedItem"; +import { showSideBar, hideSideBar } from "../../actions/main"; +import { showAddOptions2 } from "../../actions/addOptions"; +import { startAddFile, setFiles, startSetFiles } from "../../actions/files"; +import { + startAddFolder, + setFolders, + startSetFolders, +} from "../../actions/folders"; +import { enableListView, disableListView } from "../../actions/filter"; +import { resetSelected } from "../../actions/selectedItem"; import Swal from "sweetalert2"; -import {connect} from "react-redux"; -import {history} from "../../routers/AppRouter"; +import { connect } from "react-redux"; +// import { history } from "../../routers/AppRouter"; import React from "react"; import mobileCheck from "../../utils/mobileCheck"; +import withNavigate from "../HocComponent"; class SubbarContainer extends React.Component { + constructor(props) { + super(props); - constructor(props) { - super(props); + this.uploadInput = React.createRef(); + this.wrapperRef = React.createRef(); + this.isMobile = mobileCheck(); + } - this.uploadInput = React.createRef(); - this.wrapperRef = React.createRef(); - this.isMobile = mobileCheck(); - } - + createFolder = async (e) => { + let inputValue = ""; - createFolder = async(e) => { - - let inputValue = "" - - const { value: folderName} = await Swal.fire({ - title: 'Enter Folder Name', - input: 'text', - inputValue: inputValue, - showCancelButton: true, - inputValidator: (value) => { - if (!value) { - return 'Please Enter a Name' - } - } - }) - - if (folderName === undefined || folderName === null) { - - return; + const { value: folderName } = await Swal.fire({ + title: "Enter Folder Name", + input: "text", + inputValue: inputValue, + showCancelButton: true, + inputValidator: (value) => { + if (!value) { + return "Please Enter a Name"; } + }, + }); - const parent = this.props.parent; - const owner = this.props.auth.id; - const parentList = this.props.parentList; - - this.props.dispatch(startAddFolder(folderName, owner, parent, parentList)); + if (folderName === undefined || folderName === null) { + return; } - handleClickOutside = (e) => { + const parent = this.props.parent; + const owner = this.props.auth.id; + const parentList = this.props.parentList; - if (this.wrapperRef && !this.wrapperRef.current.contains(event.target) && this.props.showAddOptions2) { - this.addButtonEvent(); - } + this.props.dispatch(startAddFolder(folderName, owner, parent, parentList)); + }; + + handleClickOutside = (e) => { + if ( + this.wrapperRef && + !this.wrapperRef.current.contains(event.target) && + this.props.showAddOptions2 + ) { + this.addButtonEvent(); } - - componentDidMount = () => { + }; - if (this.isMobile) { - document.addEventListener('mousedown', this.handleClickOutside); - } + componentDidMount = () => { + if (this.isMobile) { + document.addEventListener("mousedown", this.handleClickOutside); + } + }; + + componentWillUnmount = () => { + if (this.isMobile) { + document.removeEventListener("mousedown", this.handleClickOutside); + } + }; + + addButtonEvent = () => { + const currentAddOptions = !this.props.showAddOptions2; + + this.props.dispatch(showAddOptions2(currentAddOptions)); + }; + + handleUpload = (e) => { + e.preventDefault(); + + this.props.dispatch( + startAddFile( + this.uploadInput.current, + this.props.parent, + this.props.parentList + ) + ); + this.uploadInput.current.value = ""; + }; + + showSideBarEvent = () => { + let show = this.props.showSideBar; + + if (show === "gone") { + show = false; } - componentWillUnmount = () => { - - if (this.isMobile) { - document.removeEventListener('mousedown', this.handleClickOutside); - } + if (show) { + this.props.dispatch(hideSideBar()); + } else { + this.props.dispatch(showSideBar()); } + }; - addButtonEvent = () => { - - const currentAddOptions = !this.props.showAddOptions2 - - this.props.dispatch(showAddOptions2(currentAddOptions)) + showListViewEvent = () => { + let listView = this.props.listView; + const parent = this.props.parent; + const sortBy = this.props.sortBy; + const search = this.props.search; + + if (listView) { + this.props.dispatch(resetSelected()); + this.props.dispatch(setFiles([])); + this.props.dispatch(setFolders([])); + this.props.dispatch(disableListView()); + this.props.dispatch(startSetFiles(parent, sortBy, search)); + this.props.dispatch(startSetFolders(parent, sortBy, search)); + } else { + this.props.dispatch(resetSelected()); + this.props.dispatch(setFiles([])); + this.props.dispatch(setFolders([])); + this.props.dispatch(enableListView()); + this.props.dispatch(startSetFiles(parent, sortBy, search)); + this.props.dispatch(startSetFolders(parent, sortBy, search)); } + }; - handleUpload = (e) => { - e.preventDefault(); - - this.props.dispatch(startAddFile(this.uploadInput.current, this.props.parent, this.props.parentList)) - this.uploadInput.current.value = "" - } - - showSideBarEvent = () => { - - let show = this.props.showSideBar; - - if (show === "gone") { - show = false; - } - - if (show) { - this.props.dispatch(hideSideBar()) - } else { - this.props.dispatch(showSideBar()) - } - } - - showListViewEvent = () => { - - let listView = this.props.listView; - const parent = this.props.parent; - const sortBy = this.props.sortBy; - const search = this.props.search; - - if (listView) { - this.props.dispatch(resetSelected()) - this.props.dispatch(setFiles([])); - this.props.dispatch(setFolders([])); - this.props.dispatch(disableListView()) - this.props.dispatch(startSetFiles(parent, sortBy, search)); - this.props.dispatch(startSetFolders(parent, sortBy, search)); - - } else { - this.props.dispatch(resetSelected()) - this.props.dispatch(setFiles([])); - this.props.dispatch(setFolders([])); - this.props.dispatch(enableListView()) - this.props.dispatch(startSetFiles(parent, sortBy, search)); - this.props.dispatch(startSetFolders(parent, sortBy, search)); - } - } - - itemClick = (id) => { - - if (id === "/") { - - history.push("/home") - - } else { - - if (this.props.isGoogle) { - history.push(`/folder-google/${id}`) - } else { - history.push(`/folder/${id}`) - } - } - - } - - render() { - - return + itemClick = (id) => { + if (id === "/") { + this.props.navigate("/home"); + } else { + this.props.navigate(`/folder/${id}`); } + }; + render() { + return ( + + ); + } } const connectPropToState = (state) => ({ - auth: state.auth, - listView: state.filter.listView, - parentList: state.parent.parentList, - parentNameList: state.parent.parentNameList, - parent: state.parent.parent, - sortBy: state.filter.sortBy, - showAddOptions2: state.addOptions.showAddOptions2, - showSideBar: state.main.showSideBar, - currentlySearching: state.filter.currentlySearching, - search: state.filter.search, - isGoogle: state.filter.isGoogle -}) + auth: state.auth, + listView: state.filter.listView, + parentList: state.parent.parentList, + parentNameList: state.parent.parentNameList, + parent: state.parent.parent, + sortBy: state.filter.sortBy, + showAddOptions2: state.addOptions.showAddOptions2, + showSideBar: state.main.showSideBar, + currentlySearching: state.filter.currentlySearching, + search: state.filter.search, + isGoogle: state.filter.isGoogle, +}); -export default connect(connectPropToState)(SubbarContainer) \ No newline at end of file +export default connect(connectPropToState)(withNavigate(SubbarContainer)); diff --git a/src/providers/AuthProvider.js b/src/providers/AuthProvider.js new file mode 100644 index 0000000..76eaecf --- /dev/null +++ b/src/providers/AuthProvider.js @@ -0,0 +1,19 @@ +import React, { createContext, useState, useContext, useEffect } from "react"; +import { useSelector } from "react-redux"; +import { useLocation, useNavigate } from "react-router-dom"; + +const AuthContext = createContext(); + +export const AuthProvider = ({ children }) => { + const authenticated = useSelector((state) => !!state.auth.id); + const location = useLocation(); + const navigate = useNavigate(); + console.log("isAuthenticated", isAuthenticated); + if (!authenticated && location.pathname !== "/") { + navigate("/"); + } + + return {children}; +}; + +export const useAuth = () => useContext(AuthContext); diff --git a/src/reducers/folderTree.js b/src/reducers/folderTree.js index 8afcbbb..8c858ed 100644 --- a/src/reducers/folderTree.js +++ b/src/reducers/folderTree.js @@ -1,197 +1,149 @@ const defaultState = { - id: "", - openIDs: { + id: "", + openIDs: {}, + newIDs: {}, + newID: "", + deleteIDs: {}, + deleteID: "", + moveIDs: {}, + moveID: "", + renameIDs: {}, + renameID: "", + firstLoadDetails: {}, + insertedIDs: {}, + insertedID: "", +}; - }, - newIDs: { +export default (state = defaultState, action) => { + switch (action.type) { + case "SET_ID": + return { + ...state, + id: action.id, + openIDs: { + ...state.openIDs, + [action.id]: true, + }, + }; - }, - newID: "", - deleteIDs: { + case "SET_FIRST_LOAD_DETAILS": + return { + ...state, + firstLoadDetails: action.firstLoadDetails, + }; - }, - deleteID: "", - moveIDs: { + case "ADD_NEW_IDS": + return { + ...state, + newID: action.id, + newIDs: { + ...state.newIDs, + [action.id]: action.addData, + }, + }; - }, - moveID: "", - renameIDs: { + case "REMOVE_NEW_IDS": { + const { [action.id]: _, ...nonRemovedIds } = state.newIDs; - }, - renameID: "", - firstLoadDetails: { - - }, - insertedIDs: { - - }, - insertedID: "" -} - -export default (state=defaultState, action) => { - - switch (action.type) { - - case "SET_ID": - - let tempIDS = state.openIDs; - tempIDS[action.id] = true; - - return { - ...state, - id: action.id, - openIDs: tempIDS - } - - case "SET_FIRST_LOAD_DETAILS": - - return { - ...state, - firstLoadDetails: action.firstLoadDetails - } - - case "ADD_NEW_IDS": - - let tempNewIDs = state.newIDs; - tempNewIDs[action.id] = action.addData; - - return { - ...state, - newID: action.id, - newIDs: tempNewIDs - } - - case "REMOVE_NEW_IDS": { - - //console.log("remove new id", action.id, state.newIDs); - let tempRemoveNewIDS = state.newIDs; - delete tempRemoveNewIDS[action.id]; - //console.log("removed new id", tempRemoveNewIDS); - - return { - ...state, - newIDs: tempRemoveNewIDS, - newID: "" - } - } - - case "SET_INSERT_IDS": { - - return { - ...state, - insertedIDs: action.insertedList, - insertedID: action.id, - } - - } - - case "REMOVE_INSERT_IDS": { - - return { - - } - } - - case "ADD_DELETE_IDS": { - - //console.log("delete ids", action.id); - let tempDeleteIDs = state.deleteIDs; - tempDeleteIDs[action.id] = action.deleteData; - - return { - ...state, - deleteID: action.id, - deleteIDs: tempDeleteIDs - } - } - - case "REMOVE_DELETE_IDS": { - - let tempDeleteIDs = state.deleteIDs; - delete tempDeleteIDs[action.id]; - - return { - ...state, - deleteIDs: tempDeleteIDs, - deleteID: "" - } - } - - case "ADD_MOVE_IDS": { - - let tempMoveIDs = state.moveIDs; - tempMoveIDs[action.id] = action.moveData; - - return { - ...state, - moveID: action.id, - moveIDs: tempMoveIDs - } - } - - case "REMOVE_MOVE_IDS": { - - let tempMoveIDs = state.moveIDs; - delete tempMoveIDs[action.id]; - - return { - ...state, - moveID: "", - moveIDs: tempMoveIDs - } - - } - - case "ADD_RENAME_IDS": { - - console.log("add rename", action.renameData) - let tempRenameIDs = state.renameIDs; - tempRenameIDs[action.id] = action.renameData; - - return { - ...state, - renameID: action.id, - renameIDs: tempRenameIDs - } - } - - case "REMOVE_RENAME_IDS": { - - console.log("remove rename", state.renameIDs) - let tempRenameIDs = state.renameIDs; - delete tempRenameIDs[action.id]; - - return { - ...state, - renameID: "", - renameIDs: tempRenameIDs - } - - } - - case "REMOVE_ID": - - console.log("before remove", state.openIDs) - let tempRemoveIDS = state.openIDs; - delete tempRemoveIDS[action.id]; - - console.log("removed id", action.id, tempRemoveIDS) - - return { - ...state, - id: "-", - openIDs: tempRemoveIDS - } - - case "RESET_ID": - - return { - ...state, - id: "", - openIDs: {} - } - - default: - return state + return { + ...state, + newIDs: nonRemovedIds, + newID: "", + }; } -} \ No newline at end of file + + case "SET_INSERT_IDS": { + return { + ...state, + insertedIDs: action.insertedList, + insertedID: action.id, + }; + } + + case "REMOVE_INSERT_IDS": { + return {}; + } + + case "ADD_DELETE_IDS": { + return { + ...state, + deleteID: action.id, + deleteIDs: { + ...state.deleteIDs, + [action.id]: action.deleteData, + }, + }; + } + + case "REMOVE_DELETE_IDS": { + const { [action.id]: _, ...nonRemovedIds } = state.deleteIDs; + + return { + ...state, + deleteIDs: nonRemovedIds, + deleteID: "", + }; + } + + case "ADD_MOVE_IDS": { + return { + ...state, + moveID: action.id, + moveIDs: { + ...state.moveIDs, + [action.id]: action.moveData, + }, + }; + } + + case "REMOVE_MOVE_IDS": { + const { [action.id]: _, ...nonRemovedIds } = state.moveIDs; + + return { + ...state, + moveID: "", + moveIDs: nonRemovedIds, + }; + } + + case "ADD_RENAME_IDS": { + return { + ...state, + renameID: action.id, + renameIDs: { + ...state.renameIDs, + [action.id]: action.renameData, + }, + }; + } + + case "REMOVE_RENAME_IDS": { + const { [action.id]: _, ...nonRemovedIds } = state.renameIDs; + + return { + ...state, + renameID: "", + renameIDs: nonRemovedIds, + }; + } + + case "REMOVE_ID": + const { [action.id]: _, ...nonRemovedIds } = state.openIDs; + + return { + ...state, + id: "-", + openIDs: nonRemovedIds, + }; + + case "RESET_ID": + return { + ...state, + id: "", + openIDs: {}, + }; + + default: + return state; + } +}; diff --git a/src/routers/AppRouter.js b/src/routers/AppRouter.js index fb913a0..99db7a7 100755 --- a/src/routers/AppRouter.js +++ b/src/routers/AppRouter.js @@ -1,40 +1,64 @@ import React from "react"; -import {Router, Route, Switch} from "react-router-dom"; -import LoginPage from "../components/LoginPage" -import createHistory from "history/createBrowserHistory" -import HomePage from "../components/Homepage" +import { + BrowserRouter, + Route, + Routes, + Navigate, + useLocation, +} from "react-router-dom"; +import LoginPage from "../components/LoginPage"; +import HomePage from "../components/Homepage"; import PrivateRoute from "./PrivateRoute"; import PublicRoute from "./PublicRoute"; import DownloadPage from "../components/DownloadPage"; import VerifyEmailPage from "../components/VerifyEmailPage"; -import uuid from "uuid" +import uuid from "uuid"; import ResetPasswordPage from "../components/ResetPasswordPage"; import GoogleAccountPage from "../components/GoogleAccountPage"; import AddStoragePage from "../components/AddStoragePage"; import SettingsPage from "../components/SettingsPage"; -export const history = createHistory() +// export const history = createHistory(); -const AppRouter = () => ( - - - - - - - - - - - - - - - - - - - -) +const AppRouter = () => { + return ( + + + } /> + + + + } + /> + } + /> + } /> + } /> + } /> + } /> + } /> + + + ); +}; export default AppRouter; +{ + /* + + + + + + + + + + */ +} diff --git a/src/routers/PrivateRoute.js b/src/routers/PrivateRoute.js index 6fc490f..aea95f7 100644 --- a/src/routers/PrivateRoute.js +++ b/src/routers/PrivateRoute.js @@ -1,18 +1,15 @@ import React from "react"; -import {connect} from "react-redux"; -import {Route, Redirect} from "react-router-dom"; +import { connect, useSelector } from "react-redux"; +import { Route, Navigate } from "react-router-dom"; -export const PrivateRoute = ({isAuthenticated, component: Component, ...rest}) => ( +const PrivateRoute = ({ children }) => { + const isAuthenticated = useSelector((state) => !!state.auth.id); + console.log("auth", isAuthenticated); + if (!isAuthenticated) { + return ; + } -
- ( - isAuthenticated ? () : () - )}/> -
-) + return children; +}; -const mapStateToProps = (state) => ({ - isAuthenticated: !!state.auth.id -}) - -export default connect(mapStateToProps)(PrivateRoute) \ No newline at end of file +export default PrivateRoute; diff --git a/src/routers/PublicRoute.js b/src/routers/PublicRoute.js index bac70dc..502a78e 100644 --- a/src/routers/PublicRoute.js +++ b/src/routers/PublicRoute.js @@ -1,15 +1,21 @@ -import {connect} from "react-redux"; +import { connect } from "react-redux"; import React from "react"; -import {Route, Redirect} from "react-router-dom" +import { Route, Navigate } from "react-router-dom"; -export const PublicRoute = ({isAuthenticated, component: Component}, ...rest) => ( - ( - isAuthenticated ? () : () - )}/> -) +export const PublicRoute = ( + { isAuthenticated, component: Component }, + ...rest +) => ( + + isAuthenticated ? : + } + /> +); const connectStateToProps = (state) => ({ - isAuthenticated: !!state.auth.id -}) + isAuthenticated: !!state.auth.id, +}); -export default connect(connectStateToProps)(PublicRoute) \ No newline at end of file +export default connect(connectStateToProps)(PublicRoute); diff --git a/src/store/configureStore.js b/src/store/configureStore.js index e08e144..7d02b80 100755 --- a/src/store/configureStore.js +++ b/src/store/configureStore.js @@ -1,9 +1,8 @@ -import {createStore, combineReducers, applyMiddleware} from "redux" -import thunk from "redux-thunk"; +import { configureStore } from "@reduxjs/toolkit"; import authReducer from "../reducers/auth"; import mainReducer from "../reducers/main"; -import fileReducer from "../reducers/files" -import folderReducer from "../reducers/folders" +import fileReducer from "../reducers/files"; +import folderReducer from "../reducers/folders"; import filterReducer from "../reducers/filter"; import selectedItemReducer from "../reducers/selectedItem"; import uploadsReducer from "../reducers/uploads"; @@ -16,40 +15,36 @@ import addOptionsReducer from "../reducers/addOptions"; import photoViewerReducer from "../reducers/photoViewer"; import routesReducer from "../reducers/routes"; import moverReducer from "../reducers/mover"; -import folderTreeReducer from "../reducers/folderTree" +import folderTreeReducer from "../reducers/folderTree"; import uploadStorageSwitcherReducer from "../reducers/uploadStorageSwitcher"; import mobileContextMenuReducer from "../reducers/mobileContextMenu"; //const composeEnchancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; export default () => { + const store = configureStore({ + reducer: { + auth: authReducer, + main: mainReducer, + files: fileReducer, + folders: folderReducer, + filter: filterReducer, + selectedItem: selectedItemReducer, + uploads: uploadsReducer, + storage: storageReducer, + quickFiles: quickFilesReducer, + popupFile: popupFilesReducer, + settings: settingsReducer, + parent: parentReducer, + addOptions: addOptionsReducer, + photoViewer: photoViewerReducer, + routes: routesReducer, + mover: moverReducer, + folderTree: folderTreeReducer, + storageSwitcher: uploadStorageSwitcherReducer, + mobileContextMenu: mobileContextMenuReducer, + }, + }); - const store = createStore( - combineReducers({ - auth: authReducer, - main:mainReducer, - files: fileReducer, - folders: folderReducer, - filter: filterReducer, - selectedItem: selectedItemReducer, - uploads: uploadsReducer, - storage: storageReducer, - quickFiles: quickFilesReducer, - popupFile: popupFilesReducer, - settings: settingsReducer, - parent: parentReducer, - addOptions: addOptionsReducer, - photoViewer: photoViewerReducer, - routes: routesReducer, - mover: moverReducer, - folderTree: folderTreeReducer, - storageSwitcher: uploadStorageSwitcherReducer, - mobileContextMenu: mobileContextMenuReducer, - }), - - applyMiddleware(thunk) - //composeEnchancers(applyMiddleware(thunk)) - ) - - return store; -} \ No newline at end of file + return store; +}; diff --git a/tests/setupTests.js b/tests/setupTests.js index f33165a..da3b4db 100644 --- a/tests/setupTests.js +++ b/tests/setupTests.js @@ -1,10 +1,10 @@ -import Enzyme from "enzyme" -import Adapter from "enzyme-adapter-react-16" -import DotEnv from "dotenv" -import "babel-polyfill"; +// import Enzyme from "enzyme" +// import Adapter from "enzyme-adapter-react-16" +// import DotEnv from "dotenv" +// import "babel-polyfill"; -Enzyme.configure({ - adapter: new Adapter() -}) +// Enzyme.configure({ +// adapter: new Adapter() +// }) -DotEnv.config({path: ".env.test"}) \ No newline at end of file +// DotEnv.config({path: ".env.test"}) diff --git a/vite.config.js b/vite.config.js index d480832..f178272 100644 --- a/vite.config.js +++ b/vite.config.js @@ -4,15 +4,9 @@ import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react()], esbuild: { + include: /\.js$/, + exclude: [], loader: "jsx", - include: [ - // Process all .js files in the src directory as JSX - /src\/.*\.js$/, - ], - exclude: [ - // Exclude node_modules from processing - /node_modules/, - ], }, server: { proxy: {
DATE