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

25% Statements 3/12
0% Branches 0/13
0% Functions 0/3
27.27% Lines 3/11

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                                                              1x                                                                                                                                                           1x                 1x            
import React, { useEffect } from "react";
import { Grid } from "@mui/material";
import { ConceptForm, ConceptSpeedDial } from "../components";
import { AppState } from "../../../redux";
import {
  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;
}
 
const ViewConceptPage: React.FC<Props> = ({
  retrieveConcept,
  concept,
  mappings,
  loading,
  errors,
  profile,
  usersOrgs,
  addConceptsToDictionary
}) => {
  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 backUrl = linkedDictionary
    ? `${linkedDictionary}concepts/`
    : dictionaryToAddTo
    ? undefined
    : `${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}
              addConceptsToDictionary={addConceptsToDictionary}
              conceptUrl={url}
            />
          )}
        </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
};
 
export default connect(mapStateToProps, mapActionsToProps)(ViewConceptPage);