feat: support resume book sponsors (companies) 📚

apps/admin-dashboard/app/routes/_dashboard.resume-books.create.tsx

@@ -4,20 +4,29 @@ import {
   type LoaderFunctionArgs,
   redirect,
 } from '@remix-run/node';
-import { Form as RemixForm, useActionData } from '@remix-run/react';
+import { Form as RemixForm, useActionData, useFetcher } from '@remix-run/react';
+import { useEffect } from 'react';
 
 import {
   Button,
+  ComboboxPopover,
   DatePicker,
+  Divider,
   Form,
   getErrors,
   Input,
   Modal,
+  MultiCombobox,
+  MultiComboboxDisplay,
+  MultiComboboxItem,
+  MultiComboboxSearch,
+  MultiComboboxValues,
   validateForm,
 } from '@oyster/ui';
 
 import { createResumeBook } from '@/member-profile.server';
 import { CreateResumeBookInput } from '@/member-profile.ui';
+import { type SearchCompaniesResult } from '@/routes/api.companies.search';
 import { Route } from '@/shared/constants';
 import {
   commitSession,
@@ -48,6 +57,7 @@ export async function action({ request }: ActionFunctionArgs) {
     airtableTableId: data.airtableTableId,
     endDate: data.endDate,
     name: data.name,
+    sponsors: data.sponsors,
     startDate: data.startDate,
   });
 
@@ -77,41 +87,13 @@ export default function CreateResumeBookModal() {
 
       <RemixForm className="form" method="post">
         <Form.Field
+          description="Example: Spring '24"
           error={errors.name}
           label="Name"
           labelFor={keys.name}
           required
         >
-          <Input
-            id={keys.name}
-            name={keys.name}
-            required
-            placeholder="Spring '24"
-          />
-        </Form.Field>
-
-        <Form.Field
-          description="This is the ID of the Airtable base that the resume book responses will be sent to."
-          error={errors.airtableBaseId}
-          label="Airtable Base ID"
-          labelFor={keys.airtableBaseId}
-          required
-        >
-          <Input id={keys.airtableBaseId} name={keys.airtableBaseId} required />
-        </Form.Field>
-
-        <Form.Field
-          description="This is the ID of the Airtable table that the resume book responses will be sent to."
-          error={errors.airtableTableId}
-          label="Airtable Table ID"
-          labelFor={keys.airtableTableId}
-          required
-        >
-          <Input
-            id={keys.airtableTableId}
-            name={keys.airtableTableId}
-            required
-          />
+          <Input id={keys.name} name={keys.name} required />
         </Form.Field>
 
         <Form.Field
@@ -144,6 +126,34 @@ export default function CreateResumeBookModal() {
           />
         </Form.Field>
 
+        <SponsorsField />
+
+        <Divider />
+
+        <Form.Field
+          description="This is the ID of the Airtable base that the resume book responses will be sent to."
+          error={errors.airtableBaseId}
+          label="Airtable Base ID"
+          labelFor={keys.airtableBaseId}
+          required
+        >
+          <Input id={keys.airtableBaseId} name={keys.airtableBaseId} required />
+        </Form.Field>
+
+        <Form.Field
+          description="This is the ID of the Airtable table that the resume book responses will be sent to."
+          error={errors.airtableTableId}
+          label="Airtable Table ID"
+          labelFor={keys.airtableTableId}
+          required
+        >
+          <Input
+            id={keys.airtableTableId}
+            name={keys.airtableTableId}
+            required
+          />
+        </Form.Field>
+
         <Form.ErrorMessage>{error}</Form.ErrorMessage>
 
         <Button.Group>
@@ -153,3 +163,58 @@ export default function CreateResumeBookModal() {
     </Modal>
   );
 }
+
+function SponsorsField() {
+  const fetcher = useFetcher<SearchCompaniesResult>();
+  const { errors } = getErrors(useActionData<typeof action>());
+
+  useEffect(() => {
+    fetcher.load('/api/companies/search');
+  }, []);
+
+  const companies = fetcher.data?.companies || [];
+
+  return (
+    <Form.Field
+      description="Please choose all of the companies that are sponsoring this resume book."
+      error={errors.sponsors}
+      label="Sponsors"
+      labelFor={keys.sponsors}
+      required
+    >
+      <MultiCombobox>
+        <MultiComboboxDisplay>
+          <MultiComboboxValues name={keys.sponsors} />
+          <MultiComboboxSearch
+            id="search"
+            onChange={(e) => {
+              fetcher.submit(
+                { search: e.currentTarget.value },
+                {
+                  action: '/api/companies/search',
+                  method: 'get',
+                }
+              );
+            }}
+          />
+        </MultiComboboxDisplay>
+
+        <ComboboxPopover>
+          <ul>
+            {companies.map((company) => {
+              return (
+                <MultiComboboxItem
+                  key={company.id}
+                  label={company.name}
+                  value={company.id}
+                >
+                  {company.name}
+                </MultiComboboxItem>
+              );
+            })}
+          </ul>
+        </ComboboxPopover>
+      </MultiCombobox>
+    </Form.Field>
+  );
+}

apps/admin-dashboard/app/routes/_dashboard.resume-books.tsx

@@ -6,9 +6,9 @@ import {
 import { Link, Outlet, useLoaderData } from '@remix-run/react';
 import dayjs from 'dayjs';
 import { useState } from 'react';
-import { Menu, Plus } from 'react-feather';
+import { ExternalLink, Menu, Plus } from 'react-feather';
 
-import { db } from '@oyster/db';
+import { listResumeBooks } from '@oyster/core/resume-books.server';
 import {
   Dashboard,
   Dropdown,
@@ -26,20 +26,9 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
   const timezone = getTimezone(request);
 
-  const records = await db
-    .selectFrom('resumeBooks')
-    .select([
-      'airtableBaseId',
-      'airtableTableId',
-      'endDate',
-      'id',
-      'name',
-      'startDate',
-    ])
-    .orderBy('startDate', 'desc')
-    .execute();
-
-  const resumeBooks = records.map(
+  const _resumeBooks = await listResumeBooks();
+
+  const resumeBooks = _resumeBooks.map(
     ({ airtableBaseId, airtableTableId, endDate, startDate, ...record }) => {
       const format = 'MM/DD/YY @ h:mm A';
 
@@ -116,9 +105,14 @@ function ResumeBooksTable() {
   const columns: TableColumnProps<ResumeBookInView>[] = [
     {
       displayName: 'Name',
-      size: '160',
+      size: '200',
       render: (resumeBook) => resumeBook.name,
     },
+    {
+      displayName: '# of Submissions',
+      size: '160',
+      render: (resumeBook) => Number(resumeBook.submissions),
+    },
     {
       displayName: 'Start Date',
       size: '200',
@@ -131,11 +125,15 @@ function ResumeBooksTable() {
     },
     {
       displayName: 'Airtable Link',
-      size: null,
+      size: '160',
       render: (resumeBook) => {
         return (
-          <Link className="link" to={resumeBook.airtableUri} target="_blank">
-            {resumeBook.airtableUri}
+          <Link
+            className="link flex items-center gap-1"
+            to={resumeBook.airtableUri}
+            target="_blank"
+          >
+            Airtable <ExternalLink size="16" />
           </Link>
         );
       },

apps/admin-dashboard/app/routes/api.companies.search.tsx

@@ -0,0 +1,33 @@
+import {
+  json,
+  type LoaderFunctionArgs,
+  type SerializeFrom,
+} from '@remix-run/node';
+
+import { listCompanies } from '@oyster/core/employment.server';
+
+import { ensureUserAuthenticated } from '@/shared/session.server';
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  await ensureUserAuthenticated(request);
+
+  const url = new URL(request.url);
+
+  const search = url.searchParams.get('search') || '';
+
+  const { companies } = await listCompanies({
+    orderBy: 'most_employees',
+    pagination: {
+      limit: 100,
+      page: 1,
+    },
+    select: ['companies.id', 'companies.name'],
+    where: { search },
+  });
+
+  return json({
+    companies,
+  });
+}
+
+export type SearchCompaniesResult = SerializeFrom<typeof loader>;