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