All files / src/apps/sources/pages EditSourcePage.tsx

23.08% Statements 3/13
0% Branches 0/7
0% Functions 0/4
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                                                                                      1x                                                                                           1x               1x              
import React, { useEffect } from "react";
import { Grid, Paper } from "@mui/material";
import { connect } from "react-redux";
import { Redirect, useLocation } from "react-router-dom";
import {
  editSourceDispatchAction,
  editSourceErrorsSelector,
  editSourceLoadingSelector,
  resetEditSourceAction,
  retrieveSourceAndDetailsAction
} from "../redux";
import { APISource, apiSourceToSource } from "../types";
import {
  orgsSelector,
  profileSelector
} from "../../authentication/redux/reducer";
import { APIOrg, APIProfile } from "../../authentication";
import { CONTEXT, ProgressOverlay, usePrevious } from "../../../utils";
import SourceForm from "../components/SourceForm";
import Header from "../../../components/Header";
import { EditMenu } from "../../containers/components/EditMenu";
 
export interface StateProps {
  errors?: {};
  profile?: APIProfile;
  usersOrgs?: APIOrg[];
  loading: boolean;
  source: APISource;
  editedSource?: APISource;
}
 
export interface ActionProps {
  editSourceAction: (
    ...args: Parameters<typeof editSourceDispatchAction>
  ) => void;
 
  retrieveSourceAction: (
    ...args: Parameters<typeof retrieveSourceAndDetailsAction>
  ) => void;
}
 
type Props = StateProps & ActionProps;
 
const EditSourcePage: React.FC<Props> = ({
  profile,
  usersOrgs,
  errors,
  loading,
  source,
  editedSource,
  editSourceAction,
  retrieveSourceAction
}: Props) => {
  const previouslyLoading = usePrevious(loading);
  const { pathname: url } = useLocation();
  const sourceUrl = url.replace("edit/", "");
 
  useEffect(() => {
    retrieveSourceAction(sourceUrl);
  }, [sourceUrl, retrieveSourceAction]);
 
  if (!loading && previouslyLoading && editedSource) {
    return <Redirect to={editedSource.url} />;
  }
 
  return (
    <Header title="Edit Source" backUrl={sourceUrl} backText="Back to Source">
      <ProgressOverlay delayRender loading={loading}>
        <Grid id="edit-source-page" item xs={6} component="div">
          <Paper>
            <SourceForm
              context={CONTEXT.edit}
              errors={errors}
              profile={profile}
              usersOrgs={usersOrgs ? usersOrgs : []}
              loading={loading}
              savedValues={apiSourceToSource(source)}
              onSubmit={(values: APISource) =>
                editSourceAction(values, source.url)
              }
            />
          </Paper>
        </Grid>
        <EditMenu backUrl={sourceUrl} />
      </ProgressOverlay>
    </Header>
  );
};
 
export const mapStateToProps = (state: any) => ({
  profile: profileSelector(state),
  usersOrgs: orgsSelector(state),
  loading: editSourceLoadingSelector(state),
  editedSource: state.sources.editedSource,
  source: state.sources.source,
  errors: editSourceErrorsSelector(state)
});
export const mapActionsToProps = {
  editSourceAction: editSourceDispatchAction,
  resetEditSourceAction: resetEditSourceAction,
  retrieveSourceAction: retrieveSourceAndDetailsAction
};
 
export default connect(mapStateToProps, mapActionsToProps)(EditSourcePage);