edit pdfs

generalize PdfForm to work with edit + add
detroitledger · May 5, 2021 · b08caa1 · b08caa1
1 parent 4483546
commit b08caa1
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 34 deletions.
diff --git a/src/components/PdfForm.js b/src/components/PdfForm.js
@@ -5,18 +5,29 @@ import { bool, func, number, shape, string } from 'prop-types';
 import OrganizationSelector from '../containers/OrganizationSelector';
 import UserSelector from '../containers/UserSelector';
 
+const onNumericChange = (currentValue, setter) => (e) => {
+  const parsed = parseInt(e.target.value, 10);
+  isNaN(parsed) ? setter(currentValue) : setter(parsed);
+};
+
 const PdfForm = ({ onSubmit, defaultValues = {} }) => {
   const [organizationNameMatch, setOrganizationNameMatch] = useState(
-    defaultValues.organization && defaultValues.organization.name
+    defaultValues.organization && {
+      label: defaultValues.organization.name,
+      value: defaultValues.organization.uuid,
+    }
   );
   const [organization, setOrganization] = useState(
     defaultValues.organization && defaultValues.organization.uuid
   );
   const [userNameMatch, setUserNameMatch] = useState(
-    defaultValues.user && defaultValues.user.uuid
+    defaultValues.user && {
+      label: defaultValues.user.name,
+      value: defaultValues.user.uuid,
+    }
   );
   const [user, setUser] = useState(
-    defaultValues.user && defaultValues.user.name
+    defaultValues.user && defaultValues.user.uuid
   );
   const [year, setYear] = useState(defaultValues.year);
   const [url, setUrl] = useState(defaultValues.url);
@@ -35,6 +46,9 @@ const PdfForm = ({ onSubmit, defaultValues = {} }) => {
     });
   };
 
+  const onYearChange = onNumericChange(year, setYear);
+  const onCurrentPageChange = onNumericChange(currentPage, setCurrentPage);
+
   return (
     <form onSubmit={handleSubmit}>
       <div className="form-group">
@@ -59,10 +73,7 @@ const PdfForm = ({ onSubmit, defaultValues = {} }) => {
         <label htmlFor="year">Year</label>
         <input
           value={year}
-          onChange={(e) => {
-            const parsed = parseInt(e.target.value, 10);
-            isNaN(parsed) ? setYear(year) : setYear(parsed);
-          }}
+          onChange={onYearChange}
           name="year"
           type="number"
           min={1900}
@@ -87,12 +98,7 @@ const PdfForm = ({ onSubmit, defaultValues = {} }) => {
           min={1}
           value={currentPage}
           name="currentPage"
-          onChange={(e) => {
-            const parsed = parseInt(e.target.value, 10);
-            isNaN(parsed)
-              ? setCurrentPage(currentPage)
-              : setCurrentPage(parsed);
-          }}
+          onChange={onCurrentPageChange}
         />
       </div>
 
@@ -106,7 +112,7 @@ const PdfForm = ({ onSubmit, defaultValues = {} }) => {
         />
       </div>
 
-      <button type="submit">Add PDF</button>
+      <button type="submit">{defaultValues.uuid ? 'Update' : 'Add'} PDF</button>
     </form>
   );
 };

diff --git a/src/containers/EditPdf.js b/src/containers/EditPdf.js
@@ -1,11 +1,76 @@
 import React from 'react';
+import { string } from 'prop-types';
 
 import { useParams } from 'react-router-dom';
 
+import { gql, useMutation, useQuery } from '@apollo/client';
+
+import PdfForm from '../components/PdfForm';
+
+const GET_PDF = gql`
+  query getPdf($uuid: String) {
+    pdf(uuid: $uuid) {
+      organization {
+        name
+        uuid
+      }
+      user {
+        uuid
+        name
+      }
+      url
+      uuid
+      year
+      done
+    }
+  }
+`;
+
+const UPDATE_PDF = gql`
+  mutation updatePdf($input: PdfInput!) {
+    upsertPdf(input: $input) {
+      uuid
+    }
+  }
+`;
+
 const EditPdf = () => {
-  const { pdfId } = useParams();
+  const { uuid } = useParams();
+
+  const { loading, error, data } = useQuery(GET_PDF, {
+    variables: { uuid },
+  });
+
+  const [
+    updatePdf,
+    { loading: updatePdfLoading, error: updatePdfError, data: updatePdfData },
+  ] = useMutation(UPDATE_PDF);
 
-  return <>{pdfId}</>;
+  if (loading) return <>Loading...</>;
+
+  if (error) throw new Error('todo catch these?');
+
+  const updateError = updatePdfError && <p>{updatePdfError.message}</p>;
+  const updated = updatePdfData && <p>Updated PDF</p>;
+
+  const onSubmit = (input) => {
+    updatePdf({
+      variables: {
+        input: { ...input, uuid },
+      },
+    });
+  };
+
+  return (
+    <>
+      <PdfForm defaultValues={data.pdf} onSubmit={onSubmit} />
+      {updated}
+      {updatePdfLoading && 'Loading...'}
+      {updateError}
+    </>
+  );
 };
 
+EditPdf.propTypes = { uuid: string.isRequired };
+
 export default EditPdf;
diff --git a/src/containers/ListPdfs.js b/src/containers/ListPdfs.js
@@ -7,7 +7,7 @@ import OrgLink from '../components/OrgLink';
 
 const LIST_PDFS_QUERY = gql`
   query pdfs {
-    pdfs(limitToCurrentUser: false) {
+    pdfs(limit: 9999, limitToCurrentUser: false) {
       organization {
         name
         uuid

diff --git a/src/containers/ManagePdfs.js b/src/containers/ManagePdfs.js
@@ -8,19 +8,19 @@ import ListPdfs from './ListPdfs';
 
 const ADD_PDF = gql`
   mutation addPdf($input: PdfInput!) {
-    addPdf(input: $input) {
+    upsertPdf(input: $input) {
       uuid
     }
   }
 `;
 
 const ADD_PDF_OPTS = {
-  update(cache, { data: { addPdf } }) {
+  update(cache, { data: { upsertPdf } }) {
     cache.modify({
       fields: {
         pdfs(existingPdfs = []) {
           const newPdfRef = cache.writeFragment({
-            data: addPdf,
+            data: upsertPdf,
             fragment: gql`
               fragment NewPdf on Pdf {
                 id
@@ -53,7 +53,7 @@ const ManagePdfs = () => {
     );
   }
   const error = addPdfError && <p>{addPdfError.message}</p>;
-  const created = addPdfData && <p>Added PDF {addPdfData.addPdf.uuid}</p>;
+  const created = addPdfData && <p>Added PDF {addPdfData.upsertPdf.uuid}</p>;
 
   const onSubmit = (input) => {
     addPdf({

diff --git a/src/containers/OrganizationSelector.js b/src/containers/OrganizationSelector.js
@@ -33,12 +33,12 @@ const OrganizationSelector = ({ onOrgSelected, setValue, value }) => {
     debugger;
   }
 
-  const options = data.organizations.map(({ name, uuid }) => {
-    return {
-      label: name,
-      value: uuid,
-    };
-  });
+  const options = data.organizations
+    ? data.organizations.map(({ name, uuid }) => ({
+        label: name,
+        value: uuid,
+      }))
+    : [value];
 
   const handleInputChange = (inputValue) => {
     setValue(inputValue);
@@ -52,6 +52,7 @@ const OrganizationSelector = ({ onOrgSelected, setValue, value }) => {
   return (
     <Select
       isClearable
+      value={value || undefined}
       onChange={handleChange}
       onInputChange={handleInputChange}
       className="basic-single"

diff --git a/src/containers/UserSelector.js b/src/containers/UserSelector.js
@@ -23,12 +23,12 @@ const UserSelector = ({ onUserSelected, setValue, value }) => {
 
   if (loading) return <>Loading...</>;
 
-  const options = data.users.map(({ name, uuid }) => {
-    return {
-      label: name,
-      value: uuid,
-    };
-  });
+  const options = data.users
+    ? data.users.map(({ name, uuid }) => ({
+        label: name,
+        value: uuid,
+      }))
+    : [value];
 
   const handleInputChange = (inputValue) => {
     setValue(inputValue);
@@ -41,6 +41,7 @@ const UserSelector = ({ onUserSelected, setValue, value }) => {
   return (
     <Select
       isClearable
+      value={value || undefined}
       onChange={handleChange}
       onInputChange={handleInputChange}
       className="basic-single"

diff --git a/src/index.js b/src/index.js
@@ -71,7 +71,7 @@ ReactDOM.render(
             <Route exact path="/admin" component={Admin} />
             <PrivateRoute exact path="/admin/grants/add" component={AddGrant} />
             <PrivateRoute exact path={'/admin/pdfs'} component={ManagePdfs} />
-            <PrivateRoute path={'/admin/pdfs/:pdfId'} component={EditPdf} />
+            <PrivateRoute path={'/admin/pdfs/:uuid'} component={EditPdf} />
           </div>
           <Footer />
         </div>