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