All files / src/apps/concepts/pages ViewConceptPage.tsx

23.08% Statements 3/13
0% Branches 0/13
0% Functions 0/3
25% Lines 3/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129                                                                      1x                                                                                                                                                         1x                 1x              
import React, { useEffect } from "react";
import { Grid } from "@material-ui/core";
import { ConceptForm, ConceptSpeedDial } from "../components";
import { AppState } from "../../../redux";
import {
  cloneConceptToDictionaryAction,
  retrieveConceptAction,
  viewConceptErrorsSelector,
  viewConceptLoadingSelector
} from "../redux";
import { APIConcept, apiConceptToConcept, APIMapping } from "../types";
import { useLocation, useParams } from "react-router";
import { connect } from "react-redux";
import Header from "../../../components/Header";
import { APIOrg, APIProfile, profileSelector } from "../../authentication";
import { orgsSelector } from "../../authentication/redux/reducer";
import { CONTEXT, ProgressOverlay, useQueryParams } from "../../../utils";
import { recursivelyAddConceptsToDictionaryAction } from "../../dictionaries/redux";
 
interface Props {
  loading: boolean;
  concept?: APIConcept;
  mappings: APIMapping[];
  errors?: {};
  retrieveConcept: (...args: Parameters<typeof retrieveConceptAction>) => void;
  profile?: APIProfile;
  usersOrgs?: APIOrg[];
  addConceptsToDictionary?: (
    ...args: Parameters<typeof recursivelyAddConceptsToDictionaryAction>
  ) => void;
  cloneConceptToDictionary?: (
    ...args: Parameters<typeof cloneConceptToDictionaryAction>
  ) => void;
}
 
const ViewConceptPage: React.FC<Props> = ({
  retrieveConcept,
  concept,
  mappings,
  loading,
  errors,
  profile,
  usersOrgs,
  addConceptsToDictionary,
  cloneConceptToDictionary
}) => {
  const { pathname: url } = useLocation();
  const { ownerType, owner } = useParams<{
    ownerType: string;
    owner: string;
  }>();
  const { linkedDictionary, dictionaryToAddTo } = useQueryParams<{
    linkedDictionary: string;
    dictionaryToAddTo: string;
  }>();
  const conceptSource = concept?.source_url;
 
  useEffect(() => {
    retrieveConcept(url);
  }, [url, retrieveConcept]);
 
  const fromDictionary = linkedDictionary ?? dictionaryToAddTo;
  const backUrl = `${fromDictionary ? fromDictionary : conceptSource}concepts/`;
 
  return (
    <>
      <Header
        allowImplicitNavigation
        title={
          concept && concept.display_name
            ? concept.display_name
            : "View concept"
        }
        backUrl={backUrl}
      >
        <ProgressOverlay
          delayRender
          loading={loading}
          error={
            errors
              ? "Could not retrieve concept. Refresh this page to retry."
              : undefined
          }
        >
          <Grid id="viewConceptPage" item xs={8} component="div">
            <ConceptForm
              context={CONTEXT.view}
              savedValues={apiConceptToConcept(concept, mappings)}
              errors={errors}
            />
          </Grid>
          {concept && conceptSource && (
            <ConceptSpeedDial
              concept={concept}
              conceptSource={conceptSource}
              ownerType={ownerType}
              owner={owner}
              profile={profile}
              usersOrgs={usersOrgs}
              linkedDictionary={linkedDictionary}
              dictionaryToAddTo={dictionaryToAddTo}
              conceptUrl={url}
              addConceptsToDictionary={addConceptsToDictionary}
              cloneConceptToDictionary={cloneConceptToDictionary}
            />
          )}
        </ProgressOverlay>
      </Header>
    </>
  );
};
 
const mapStateToProps = (state: AppState) => ({
  profile: profileSelector(state),
  usersOrgs: orgsSelector(state),
  concept: state.concepts.concept,
  mappings: state.concepts.mappings,
  loading: viewConceptLoadingSelector(state),
  errors: viewConceptErrorsSelector(state)
});
 
const mapActionsToProps = {
  retrieveConcept: retrieveConceptAction,
  addConceptsToDictionary: recursivelyAddConceptsToDictionaryAction,
  cloneConceptToDictionary: cloneConceptToDictionaryAction
};
 
export default connect(mapStateToProps, mapActionsToProps)(ViewConceptPage);