React Cloud Account Information

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));
  };
}

--