From 7b7578173f3472062cc5458358f19a6d0a95f0ca Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Thu, 13 May 2021 01:30:34 +0300 Subject: [PATCH] ForwardOptionsContainer --- src/components/common/ActiveIcon.js | 10 +++- .../components/ActiveSessionContainer.js | 16 ++++--- src/features/session/actionCreators.js | 25 +++++++++- src/features/session/actionTypes.js | 3 ++ src/features/session/api.js | 8 +++- .../components/ForwardOptionsComponent.js | 11 +++-- .../components/ForwardOptionsContainer.js | 48 +++++++++++++++++++ .../components/ForwardOptionsDialog.js | 8 ++-- .../session/components/SessionContainer.js | 12 ++--- .../components/SessionForwardsComponent.js | 9 ++-- src/features/session/reducers.js | 23 +++++++++ src/redux/reducers/index.js | 4 +- src/redux/reducers/initialState.js | 1 + 13 files changed, 144 insertions(+), 34 deletions(-) create mode 100644 src/features/session/components/ForwardOptionsContainer.js diff --git a/src/components/common/ActiveIcon.js b/src/components/common/ActiveIcon.js index 361d34a..3274290 100644 --- a/src/components/common/ActiveIcon.js +++ b/src/components/common/ActiveIcon.js @@ -1,8 +1,13 @@ import React from "react"; import PropTypes from "prop-types"; import { CheckCircleOutlineRounded, RemoveRounded } from "@material-ui/icons"; +import { LinearProgress } from "@material-ui/core"; + +const ActiveIcon = ({ active, loading }) => { + if (loading && loading === true) { + return ; + } -const ActiveIcon = ({ active }) => { return active && active === true ? ( ) : ( @@ -11,7 +16,8 @@ const ActiveIcon = ({ active }) => { }; ActiveIcon.propTypes = { - active: PropTypes.bool + active: PropTypes.bool, + loading: PropTypes.bool }; export default ActiveIcon; diff --git a/src/features/server/components/ActiveSessionContainer.js b/src/features/server/components/ActiveSessionContainer.js index 59277b9..1ace773 100644 --- a/src/features/server/components/ActiveSessionContainer.js +++ b/src/features/server/components/ActiveSessionContainer.js @@ -11,7 +11,7 @@ import ForwardOptionsDialog from "../../session/components/ForwardOptionsDialog" const ActiveSessionContainer = ({ actions, session, forwards, domain }) => { const [expanded, setExpanded] = useState(false); const [optionsDialogOpen, setOptionsDialogOpen] = useState(false); - const [forwardOptions, setForwardOptions] = useState(null); + const [focusedForward, setFocusedForward] = useState(null); useEffect(() => { actions.loadActiveSession(); @@ -23,18 +23,20 @@ const ActiveSessionContainer = ({ actions, session, forwards, domain }) => { if (expand) actions.loadSessionForwards(session.sessionId); }; - const handleOptionsDialogOpen = (options) => () => { - setForwardOptions(options); + const handleOptionsDialogOpen = forward => () => { + setFocusedForward(forward); setOptionsDialogOpen(true); }; const handleOptionsDialogClose = () => { setOptionsDialogOpen(false); - setForwardOptions(null); + setFocusedForward(null); }; - const handleForwardClick = (forward) => (event) => { - const url = `${domain.scheme}://${domain.name}${forward.from}${forward.suffix || ""}`; + const handleForwardClick = forward => event => { + const url = `${domain.scheme}://${domain.name}${ + forward.from + }${forward.suffix || ""}`; window.open(url, "_blank"); event.preventDefault(); }; @@ -52,7 +54,7 @@ const ActiveSessionContainer = ({ actions, session, forwards, domain }) => { ); diff --git a/src/features/session/actionCreators.js b/src/features/session/actionCreators.js index d6a5aab..783a71d 100644 --- a/src/features/session/actionCreators.js +++ b/src/features/session/actionCreators.js @@ -3,7 +3,7 @@ import api from "./api"; import { sendHttpRequest } from "../../redux/actions/httpActions"; export function loadServerSessions() { - return async function (dispatch) { + return async function(dispatch) { try { dispatch({ type: types.LOAD_SERVER_SESSIONS_STARTED }); const data = await dispatch(sendHttpRequest(api.getServerSessions())); @@ -15,7 +15,7 @@ export function loadServerSessions() { } export function loadSessionForwards(sessionId) { - return async function (dispatch, getState) { + return async function(dispatch, getState) { try { const forwards = getState().forwards[sessionId]; if (forwards && (forwards.loading || forwards.loaded)) return; @@ -34,3 +34,24 @@ export function loadSessionForwards(sessionId) { } }; } + +export function loadForwardOptions(optionId) { + return async function(dispatch, getState) { + try { + const options = getState().options[optionId]; + if (options && (options.loading || options.loaded)) return; + + dispatch({ type: types.LOAD_FORWARD_OPTIONS_STARTED, id: optionId }); + const data = await dispatch( + sendHttpRequest(api.getForwardOptions(optionId)) + ); + dispatch({ + type: types.LOAD_FORWARD_OPTIONS_SUCCESS, + payload: data, + id: optionId + }); + } catch (error) { + throw error; + } + }; +} diff --git a/src/features/session/actionTypes.js b/src/features/session/actionTypes.js index ad67e26..023a04f 100644 --- a/src/features/session/actionTypes.js +++ b/src/features/session/actionTypes.js @@ -3,3 +3,6 @@ export const LOAD_SERVER_SESSIONS_SUCCESS = "LOAD_SERVER_SESSIONS_SUCCESS"; export const LOAD_SESSION_FORWARDS_STARTED = "LOAD_SESSION_FORWARDS_STARTED"; export const LOAD_SESSION_FORWARDS_SUCCESS = "LOAD_SESSION_FORWARDS_SUCCESS"; + +export const LOAD_FORWARD_OPTIONS_STARTED = "LOAD_FORWARD_OPTIONS_STARTED"; +export const LOAD_FORWARD_OPTIONS_SUCCESS = "LOAD_FORWARD_OPTIONS_SUCCESS"; diff --git a/src/features/session/api.js b/src/features/session/api.js index 4f4dad9..de95b3f 100644 --- a/src/features/session/api.js +++ b/src/features/session/api.js @@ -2,10 +2,14 @@ import { get } from "../../api/axiosApi"; const baseUrl = `${process.env.REVERSE_PROXY_API_URL}/server`; const getServerSessions = () => get(`${baseUrl}/sessions`); -const getSessionForwards = (sessionId) => +const getSessionForwards = sessionId => get(`${baseUrl}/session-forwards/${sessionId}`); +const getForwardOptions = optionId => + get(`${baseUrl}/forward-options/${optionId}`); + export default { getServerSessions, - getSessionForwards + getSessionForwards, + getForwardOptions }; diff --git a/src/features/session/components/ForwardOptionsComponent.js b/src/features/session/components/ForwardOptionsComponent.js index 5f3818e..fd4f3ec 100644 --- a/src/features/session/components/ForwardOptionsComponent.js +++ b/src/features/session/components/ForwardOptionsComponent.js @@ -21,10 +21,12 @@ import Typography from "@material-ui/core/Typography"; const useStyles = makeStyles(styles); -const ForwardOptionsComponent = ({ options }) => { +const ForwardOptionsComponent = ({ title, options }) => { const classes = useStyles(); const { t } = useTranslation(); + const loading = !options || options.loading; + return ( <> @@ -53,7 +55,7 @@ const ForwardOptionsComponent = ({ options }) => { - + @@ -65,20 +67,21 @@ const ForwardOptionsComponent = ({ options }) => { - + - {options.title} + {title} ); }; ForwardOptionsComponent.propTypes = { + title: PropTypes.string.isRequired, options: PropTypes.object.isRequired }; diff --git a/src/features/session/components/ForwardOptionsContainer.js b/src/features/session/components/ForwardOptionsContainer.js new file mode 100644 index 0000000..385bdbc --- /dev/null +++ b/src/features/session/components/ForwardOptionsContainer.js @@ -0,0 +1,48 @@ +import React, { useEffect } from "react"; +import { connect } from "react-redux"; +import { bindActionCreators } from "redux"; +import PropTypes from "prop-types"; +import { loadForwardOptions } from "../actionCreators"; +import ForwardOptionsComponent from "./ForwardOptionsComponent"; + +const ForwardOptionsContainer = ({ actions, forward, options }) => { + useEffect(() => { + actions.loadForwardOptions(forward.optionId); + }, []); + + const forwardOptions = options[forward.optionId]; + + return ( + <> + {forwardOptions && ( + >> ${forward.to}`} + options={forwardOptions} + /> + )} + + ); +}; + +ForwardOptionsContainer.propTypes = { + actions: PropTypes.object.isRequired, + forward: PropTypes.object.isRequired, + options: PropTypes.object.isRequired +}; + +function mapStateToProps(state) { + return { + options: state.options + }; +} + +function mapDispatchToProps(dispatch) { + return { + actions: bindActionCreators({ loadForwardOptions }, dispatch) + }; +} + +export default connect( + mapStateToProps, + mapDispatchToProps +)(ForwardOptionsContainer); diff --git a/src/features/session/components/ForwardOptionsDialog.js b/src/features/session/components/ForwardOptionsDialog.js index 2816c73..04e663a 100644 --- a/src/features/session/components/ForwardOptionsDialog.js +++ b/src/features/session/components/ForwardOptionsDialog.js @@ -8,9 +8,9 @@ import { DialogTitle } from "@material-ui/core"; import { useTranslation } from "react-i18next"; -import ForwardOptionsComponent from "./ForwardOptionsComponent"; +import ForwardOptionsContainer from "./ForwardOptionsContainer"; -const ForwardOptionsDialog = ({ open, handleClose, options }) => { +const ForwardOptionsDialog = ({ open, handleClose, forward }) => { const { t } = useTranslation(); return ( @@ -25,7 +25,7 @@ const ForwardOptionsDialog = ({ open, handleClose, options }) => { {t("Session.Forwards.Options.Title")} - {options ? : ""} + {forward ? : "N/A"}