validations

src/Components/ErrorAlert.jsx

@@ -0,0 +1,30 @@
+// import PropTypes from "prop-types";
+import { MdError } from "react-icons/md";
+import { Alert, List } from "@mantine/core";
+
+const statusToPlainLanguage = (status) => {
+  switch (status) {
+    case 422:
+      return "There were issues with the values you provided.";
+    default:
+      return "Something unexpected happened. Please try again.";
+  }
+};
+
+export default function ErrorAlert({ error }) {
+  const title = statusToPlainLanguage(error.status);
+
+  return (
+    <Alert icon={<MdError size="1.8rem" />} title={title} color="red">
+      <List>
+        {error.response.data.errors.map((error) => (
+          <List.Item key={error}>{error}</List.Item>
+        ))}
+      </List>
+    </Alert>
+  );
+}
+
+ErrorAlert.propTypes = {
+  // error: PropTypes.any
+};

src/Components/Grants/GrantForm.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Button, TextInput, Select, Stack, Flex, Group } from "@mantine/core";
-import { useForm } from "@mantine/form";
+import { Button, TextInput, Select, Stack, Flex } from "@mantine/core";
+import { useForm, hasLength } from "@mantine/form";
 import { DateTimePicker } from "@mantine/dates";
 import FundingOrgNew from "../FundingOrgs/FundingOrgNew";
 import "./GrantForm.css";
@@ -14,9 +14,9 @@ export default function GrantForm(props) {
       purpose: props.grant?.purpose || "",
       fundingOrgId: props.grant?.fundingOrgId || null,
     },
-    // validate: {
-    //   email: (value) => (/^\S+@\S+$/.test(value) ? null : "Invalid email"),
-    // },
+    validate: {
+      title: hasLength({ min: 2 }, "Title must be at least two characters"),
+    },
   });
   const [showingAddFundingOrgModal, setShowingAddFundingOrgModal] =
     useState(false);
@@ -29,7 +29,6 @@ export default function GrantForm(props) {
   };
 
   const handleSubmit = (grant) => {
-    console.log({ grant });
     props.onSubmit(grant);
   };
 
@@ -48,7 +47,7 @@ export default function GrantForm(props) {
                 label: fundingOrg.name,
               }))}
               searchable
-              nothingFound="No funding org found"
+              nothingFound="No funding organizations found"
               clearable
               {...form.getInputProps("fundingOrgId")}
             />

src/Components/Grants/GrantsNew.css

@@ -3,10 +3,6 @@
   width: 100%;
 }
 
-.grants-new__header {
-  margin: 1rem 0 3rem 0;
-}
-
 .grants-new__back-button {
   display: flex;
   text-decoration: none;

src/Components/Grants/GrantsNew.jsx

@@ -1,14 +1,16 @@
 import React, { useState } from "react";
 import { useQuery, useMutation } from "react-query";
+import { useHistory } from "react-router-dom";
+import { MdChevronLeft } from "react-icons/md";
+import { Title, Stack } from "@mantine/core";
+import ErrorAlert from "../ErrorAlert";
 import { useCurrentOrganization } from "../../Contexts/currentOrganizationContext";
 import * as GrantsService from "../../Services/Organizations/GrantsService";
 import * as FundingOrgsService from "../../Services/Organizations/FundingOrgsService";
-import { useHistory } from "react-router-dom";
-import { MdChevronLeft } from "react-icons/md";
 import Container from "../design/Container/Container";
-import "./GrantsNew.css";
 import GrantForm from "./GrantForm";
 import CurrentOrganizationLink from "../Helpers/CurrentOrganizationLink";
+import "./GrantsNew.css";
 
 export default function GrantsNew() {
   const history = useHistory();
@@ -22,8 +24,16 @@ export default function GrantsNew() {
     history.push(`/organizations/${currentOrganization.id}/grants`);
   };
 
-  const { mutate: createGrant } = useMutation(
-    (grantFields) => GrantsService.createGrant(organizationClient, grantFields),
+  const { mutate: createGrant, error } = useMutation(
+    (grantFields) =>
+      GrantsService.createGrant(organizationClient, {
+        title: grantFields.title,
+        fundingOrgId: grantFields.fundingOrgId,
+        rfpUrl: grantFields.rfpUrl,
+        purpose: grantFields.purpose,
+        deadline: grantFields.deadline,
+        totalWordCount: grantFields.totalWordCount,
+      }),
     {
       onSuccess: (newGrant) => {
         alert("Grant created!");
@@ -34,17 +44,6 @@ export default function GrantsNew() {
     }
   );
 
-  function handleCreateGrant(newGrantFields) {
-    createGrant({
-      title: newGrantFields.title,
-      fundingOrgId: newGrantFields.fundingOrgId,
-      rfpUrl: newGrantFields.rfpUrl,
-      purpose: newGrantFields.purpose,
-      deadline: newGrantFields.deadline,
-      totalWordCount: newGrantFields.totalWordCount,
-    });
-  }
-
   if (isLoading) {
     return "Loading...";
   }
@@ -63,15 +62,18 @@ export default function GrantsNew() {
           <MdChevronLeft />
           Back to All Grants
         </CurrentOrganizationLink>
-        <h1 className="grants-new__header">Add New Grant</h1>
-        <GrantForm
-          fundingOrgs={fundingOrgs}
-          onSubmit={handleCreateGrant}
-          onCancel={handleCancel}
-          handleFundingOrg={handleFundingOrg}
-          showingFundingOrgNew={showingFundingOrgNew}
-          setShowingFundingOrgNew={setShowingFundingOrgNew}
-        />
+        <Stack>
+          <Title order={1}>Add New Grant</Title>
+          {error && <ErrorAlert error={error} />}
+          <GrantForm
+            fundingOrgs={fundingOrgs}
+            onSubmit={createGrant}
+            onCancel={handleCancel}
+            handleFundingOrg={handleFundingOrg}
+            showingFundingOrgNew={showingFundingOrgNew}
+            setShowingFundingOrgNew={setShowingFundingOrgNew}
+          />
+        </Stack>
       </Container>
     </div>
   );