React Cloud Account Information
How can we get the information for a specific cloud account?
These code snippets demonstrate how the React application gets the cloud account information for a particular user and a particular cloud account. Note that this code will NOT succeed unless a valid Rosetta JWT is presented at the API endpoint along with this request. Also note that a cloud account is synonymous with a target site...the idea is that users are targeting the sites where their cloud accounts exist.
--
src/component/ShowSites.js
--
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Typography from '@material-ui/core/Typography';
import { connect } from 'react-redux'
import {
targetSiteSelectTargetAndPreloadSiteSpec,
} from '../redux/actions'
const useStyles = makeStyles((theme) => ({
list: {
width: '100%',
position: 'relative',
overflow: 'auto',
maxHeight: 350,
},
}));
function TargetSites(props) {
const classes = useStyles();
const handleSelectSite = (siteSpec, event) => {
props.targetSiteSelectTargetAndPreloadSiteSpec(siteSpec);
}
return (
<React.Fragment>
<Grid container spacing={3}>
<Grid item xs={12}>
<Typography variant="h6" gutterBottom>
Choose target site
</Typography>
</Grid>
<Grid item xs={12}>
{props.siteSpecs.length > 0 ? (
<Typography variant="body1" gutterBottom>
Choose a target site and then click the next button to copy its information.
Alternatively, refresh the target sites, add new sites, or delete the selected site from the toolbar.
</Typography>
) : (
<Typography variant="body1" gutterBottom>
Add a new site by clicking that action from the toolbar.
</Typography>
)}
</Grid>
<Grid item xs={12}>
<List className={classes.list}>
{
props.siteSpecs.map((siteSpec) =>
<ListItem
button
key={siteSpec.siteId}
selected={siteSpec.siteId === props.selectedTargetSiteSpec.siteId}
onClick={(event) => handleSelectSite(siteSpec, event)}
>
<ListItemText primary={siteSpec.siteName} />
</ListItem>
)
}
</List>
</Grid>
</Grid>
</React.Fragment>
);
}
const mapStateToProps = (state /*, ownProps*/) => {
return {
selectedTargetSiteSpec: state.targetSiteReducer.selectedTargetSiteSpec,
siteSpecs: state.targetSiteReducer.potentialTargetSiteSpecs,
}
}
const mapDispatchToProps = {
targetSiteSelectTargetAndPreloadSiteSpec,
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(TargetSites)
--
src/redux/actions.js
--
import {
SERVER_TOKEN_SET_TOKEN_EXPIRED,
TARGET_PASSWORD_LOAD_SPEC_ERROR,
TARGET_PASSWORD_LOAD_SPEC_STARTED,
TARGET_PASSWORD_LOAD_SPEC_SUCCESS,
TARGET_SITE_SELECT_TARGET
} from './actionTypes'
import axios from 'axios'
export function commonCreateAxiosClientWithTranslateToken(state) {
const axiosClient = axios.create();
axiosClient.defaults.baseURL = state.serverTokenReducer.serverBaseUri;
axiosClient.defaults.headers.common['Authorization'] = "Bearer " + state.serverTokenReducer.serverTokenValue;
axiosClient.defaults.headers.common['X-Device-Id'] = state.serverTokenReducer.deviceId;
return axiosClient;
}
export function commonIsTranslateTokenExpired(state) {
return isTokenExpired(state.serverTokenReducer.serverTokenExpirationSeconds);
}
export function isTokenExpired(tokenExpirationSeconds) {
let currentEpochSeconds = Date.now() / 1000;
return tokenExpirationSeconds <= currentEpochSeconds;
}
export function targetPasswordLoadSpec(siteId) {
return (dispatch, getState) => {
// guard clause - translate token already expired
if (commonIsTranslateTokenExpired(getState())) {
dispatch(serverTokenSetTokenExpired());
return;
}
dispatch(targetPasswordLoadSpecStarted());
const axiosClient = commonCreateAxiosClientWithTranslateToken(getState());
axiosClient
.get("/api/target-sites/" + siteId)
.then(res => { dispatch(targetPasswordLoadSpecSuccess(res.data)); })
.catch(err => { dispatch(targetPasswordLoadSpecError(err.response)); });
};
}
export function targetPasswordLoadSpecError(errorResponse) {
return { type: TARGET_PASSWORD_LOAD_SPEC_ERROR, errorResponse }
}
export function targetPasswordLoadSpecStarted() {
return { type: TARGET_PASSWORD_LOAD_SPEC_STARTED }
}
export function targetPasswordLoadSpecSuccess(selectedTargetSiteInfo) {
return { type: TARGET_PASSWORD_LOAD_SPEC_SUCCESS, selectedTargetSiteInfo }
}
export function serverTokenSetTokenExpired() {
return { type: SERVER_TOKEN_SET_TOKEN_EXPIRED }
}
export function targetSiteSelectTarget(selectedTargetSiteSpec) {
return { type: TARGET_SITE_SELECT_TARGET, selectedTargetSiteSpec }
}
export function targetSiteSelectTargetAndPreloadSiteSpec(selectedTargetSiteSpec) {
return (dispatch) => {
dispatch(targetSiteSelectTarget(selectedTargetSiteSpec));
dispatch(targetPasswordLoadSpec(selectedTargetSiteSpec.siteId));
};
}
--