add crud for user pdfs

package.json

@@ -79,12 +79,6 @@
       "plugin:prettier/recommended"
     ]
   },
-  "ava": {
-    "require": [
-      "babel-register"
-    ],
-    "babel": "inherit"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

src/components/OrgLink.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { string } from 'prop-types';
+
+import { Link } from 'react-router-dom';
+
+import { slugify } from '../utils';
+
+const OrgLink = ({ name, uuid }) => (
+  <Link to={`/organizations/${slugify(name)}/${uuid}`}>
+    <strong>{name}</strong>
+  </Link>
+);
+
+OrgLink.propTypes = {
+  name: string.isRequired,
+  uuid: string.isRequired,
+};
+
+export default OrgLink;

src/components/PdfForm.js

@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+
+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 && {
+      label: defaultValues.organization.name,
+      value: defaultValues.organization.uuid,
+    }
+  );
+  const [organization, setOrganization] = useState(
+    defaultValues.organization && defaultValues.organization.uuid
+  );
+  const [userNameMatch, setUserNameMatch] = useState(
+    defaultValues.user && {
+      label: defaultValues.user.name,
+      value: defaultValues.user.uuid,
+    }
+  );
+  const [user, setUser] = useState(
+    defaultValues.user && defaultValues.user.uuid
+  );
+  const [year, setYear] = useState(defaultValues.year);
+  const [url, setUrl] = useState(defaultValues.url);
+  const [currentPage, setCurrentPage] = useState(defaultValues.currentPage);
+  const [done, setDone] = useState(defaultValues.done);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit({
+      organization,
+      user,
+      url,
+      done: !!done,
+      year,
+      current_page: currentPage,
+    });
+  };
+
+  const onYearChange = onNumericChange(year, setYear);
+  const onCurrentPageChange = onNumericChange(currentPage, setCurrentPage);
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="form-group">
+        <label htmlFor="organization">Organization</label>
+        <OrganizationSelector
+          value={organizationNameMatch}
+          setValue={setOrganizationNameMatch}
+          onOrgSelected={setOrganization}
+        />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="user">User</label>
+        <UserSelector
+          value={userNameMatch}
+          setValue={setUserNameMatch}
+          onUserSelected={setUser}
+        />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="year">Year</label>
+        <input
+          value={year}
+          onChange={onYearChange}
+          name="year"
+          type="number"
+          min={1900}
+          max={new Date().getUTCFullYear() + 1}
+        />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="url">Url</label>
+        <input
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          name="url"
+          type="url"
+        />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="currentPage">Current Page</label>
+        <input
+          type="number"
+          min={1}
+          value={currentPage}
+          name="currentPage"
+          onChange={onCurrentPageChange}
+        />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="done">Done?</label>
+        <input
+          type="checkbox"
+          checked={!!done}
+          name="done"
+          onChange={(e) => setDone(e.target.checked)}
+        />
+      </div>
+
+      <button type="submit">{defaultValues.uuid ? 'Update' : 'Add'} PDF</button>
+    </form>
+  );
+};
+
+PdfForm.propTypes = {
+  onSubmit: func.isRequired,
+  defaultValues: shape({
+    organization: shape({
+      uuid: string,
+      name: string,
+    }),
+    user: shape({
+      uuid: string,
+      name: string,
+    }),
+    url: string,
+    done: bool,
+    year: number,
+    currentPage: number,
+  }),
+};
+
+PdfForm.defaultProps = {
+  defaultValues: {
+    url: '',
+    done: false,
+    year: new Date().getUTCFullYear(),
+    currentPage: 1,
+  },
+};
+
+export default PdfForm;

src/containers/AdminLinks.js

@@ -7,6 +7,7 @@ const AdminLinks = ({ user }) =>
   user ? (
     <>
       <NavbarLink title="Add grant" href="/admin/grants/add" />
+      <NavbarLink title="Manage PDFs" href="/admin/pdfs" />
       <NavbarLink title="Account" href="/admin" />
     </>
   ) : (

src/containers/EditPdf.js

@@ -0,0 +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 { uuid } = useParams();
+
+  const { loading, error, data } = useQuery(GET_PDF, {
+    variables: { uuid },
+  });
+
+  const [
+    updatePdf,
+    { loading: updatePdfLoading, error: updatePdfError, data: updatePdfData },
+  ] = useMutation(UPDATE_PDF);
+
+  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;

src/containers/ListPdfs.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { gql, useQuery } from '@apollo/client';
+
+import { Link } from 'react-router-dom';
+
+import OrgLink from '../components/OrgLink';
+
+const LIST_PDFS_QUERY = gql`
+  query pdfs {
+    pdfs(limit: 9999, limitToCurrentUser: false) {
+      organization {
+        name
+        uuid
+      }
+      user {
+        uuid
+        name
+      }
+      url
+      uuid
+      year
+      done
+    }
+  }
+`;
+
+const ListPdfs = () => {
+  const { loading, error, data } = useQuery(LIST_PDFS_QUERY);
+
+  if (loading) return <>Loading...</>;
+
+  if (error) throw new Error('todo catch these?');
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>User</th>
+          <th>Organization</th>
+          <th>PDF URL</th>
+          <th>Year</th>
+          <th>Done?</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.pdfs.map(({ url, uuid, year, done, organization, user }) => (
+          <tr key={uuid}>
+            <td>{user ? user.name : '-'}</td>
+            <td>
+              <OrgLink name={organization.name} uuid={organization.uuid} />
+            </td>
+            <td>
+              <a href={url}>{url}</a>
+            </td>
+            <td>{year}</td>
+            <td>{done ? '✔️' : ''}</td>
+            <td>
+              <Link to={`/admin/pdfs/${uuid}`}>edit</Link>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default ListPdfs;