All files / src/apps/organisations/pages CreateOrgPage.tsx

23.08% Statements 3/13
0% Branches 0/8
0% Functions 0/4
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                                                                    1x                                                                                   1x           1x                  
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { Redirect, useLocation } from "react-router-dom";
import { OrganisationForm } from "../components";
import { Grid, Paper } from "@mui/material";
import {
  createOrganisationErrorSelector,
  createOrganisationLoadingSelector
} from "../redux";
import { APIOrganisation, Organisation } from "../types";
import {
  createOrganisationAction,
  resetCreateOrganisationAction
} from "../redux/actions";
import { usePrevious } from "../../../utils";
import { AppState } from "../../../redux";
import Header from "../../../components/Header";
import { getOrganisationTypeFromPreviousPath } from "../utils";
 
interface Props {
  errors?: {};
  loading: boolean;
  newOrganisation?: APIOrganisation;
  username?: string;
  createOrganisation: (
    ...args: Parameters<typeof createOrganisationAction>
  ) => void;
  resetCreateOrganisation: () => void;
}
 
interface UseLocation {
  prevPath: string;
}
 
const CreateOrganisationPage: React.FC<Props> = ({
  errors,
  loading,
  newOrganisation,
  createOrganisation,
  resetCreateOrganisation
}: Props) => {
  const { state } = useLocation<UseLocation>();
  const previousPath = state ? state.prevPath : "";
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(() => resetCreateOrganisation(), []);
 
  const previouslyLoading = usePrevious(loading);
 
  if (!loading && previouslyLoading && newOrganisation && !errors) {
    // TODO Fix this when we have a working "My Organisation" page
    // return <Redirect to="/user/orgs" />
    return <Redirect to={newOrganisation.url} />;
  }
 
  return (
    <Header
      title={`${getOrganisationTypeFromPreviousPath(
        previousPath
      )} > Create Organisation`}
      backUrl="/orgs/"
      backText="Back to organisations"
      justifyChildren="space-around"
    >
      <Grid id="create-organisation-page" item xs={6} component="div">
        <Paper>
          <OrganisationForm
            errors={errors}
            loading={loading}
            onSubmit={(values: Organisation) => createOrganisation(values)}
          />
        </Paper>
      </Grid>
    </Header>
  );
};
 
const mapStateToProps = (state: AppState) => ({
  newOrganisation: state.organisations.newOrganisation,
  loading: createOrganisationLoadingSelector(state),
  username: state.auth.profile?.username,
  errors: createOrganisationErrorSelector(state)
});
const mapActionsToProps = {
  createOrganisation: createOrganisationAction,
  resetCreateOrganisation: resetCreateOrganisationAction
};
 
export default connect(
  mapStateToProps,
  mapActionsToProps
)(CreateOrganisationPage);