Merge pull request #1661 from SeedCompany/grid/editing

Author: CarsonF

src/components/EngagementDataGrid/EngagementColumns.tsx

@@ -183,14 +183,12 @@ export const EngagementColumns: Array<GridColDef<Engagement>> = [
     headerName: 'MOU Start',
     field: 'startDate',
     ...dateColumn(),
-    valueGetter: dateColumn.valueGetter((_, { startDate }) => startDate.value),
     filterable: false,
   },
   {
     headerName: 'MOU End',
     field: 'endDate',
     ...dateColumn(),
-    valueGetter: dateColumn.valueGetter((_, { endDate }) => endDate.value),
     filterable: false,
   },
   {

src/components/EngagementDataGrid/useProcessEngagementUpdate.ts

@@ -1,62 +1,25 @@
-import { useMutation } from '@apollo/client';
-import { isEqual } from 'lodash';
-import { UpdateLanguageEngagement as UpdateLanguageEngagementInput } from '~/api/schema.graphql';
-import { EngagementDataGridRowFragment } from './engagementDataGridRow.graphql';
+import { useGridMutation } from '../Grid';
+import { EngagementDataGridRowFragmentDoc as EngagementGridRow } from './engagementDataGridRow.graphql';
 import { UpdateLanguageEngagementGridDocument as UpdateLanguageEngagement } from './UpdateLanguageEngagementGrid.graphql';
 
-export const useProcessEngagementUpdate = () => {
-  const [updateLanguageEngagement] = useMutation(UpdateLanguageEngagement);
-
-  return (
-    updated: EngagementDataGridRowFragment,
-    prev: EngagementDataGridRowFragment
-  ) => {
-    if (updated.__typename !== 'LanguageEngagement') {
-      return updated;
-    }
-
-    if (isEqual(updated, prev)) {
-      return updated;
+export const useProcessEngagementUpdate = () =>
+  useGridMutation(EngagementGridRow, UpdateLanguageEngagement, (row) => {
+    if (row.__typename !== 'LanguageEngagement') {
+      return undefined;
     }
-
-    const input: UpdateLanguageEngagementInput = {
-      id: updated.id,
-      milestoneReached: updated.milestoneReached.value,
-      usingAIAssistedTranslation: updated.usingAIAssistedTranslation.value,
-    };
-    // Don't wait for the mutation to finish/error, which allows
-    // the grid to close the editing state immediately.
-    // There shouldn't be any business errors from these current changes,
-    // and network errors are handled with snackbars.
-    // Additionally, MUI doesn't handle thrown errors either; it just gives
-    // them straight back to us on the `onProcessRowUpdateError` callback.
-    void updateLanguageEngagement({
-      variables: { input },
-      // Inform Apollo of these async/queued updates.
-      // This is important because users can make multiple changes
-      // quickly, since we don't `await` above.
-      // These optimistic updates are layered/stacked.
-      // So if two value changes are in flight, the value from the first
-      // API response isn't presented as the latest value,
-      // since there is still another optimistic update left.
-      // Said another way: this prevents the UI from presenting the final change,
-      // then looking like it reverted to the first change,
-      // and then flipping back to the final change again.
-      // This also ensures these pending updates are maintained
-      // even if the grid is unmounted/remounted.
+    return {
+      variables: {
+        input: {
+          id: row.id,
+          milestoneReached: row.milestoneReached.value,
+          usingAIAssistedTranslation: row.usingAIAssistedTranslation.value,
+        },
+      },
       optimisticResponse: {
         updateLanguageEngagement: {
           __typename: 'UpdateLanguageEngagementOutput',
-          // This is an easy/cheap/hacky way to "unparse" the date scalars
-          // before writing them to the cache.
-          // Our read policies expect them to be ISO strings as we receive
-          // them from the network this way.
-          // Since our temporal objects have a toJSON, this works fine to revert that.
-          engagement: JSON.parse(JSON.stringify(updated)),
+          engagement: row,
         },
       },
-    });
-
-    return updated;
-  };
-};
+    };
+  });

src/components/Grid/ColumnTypes/dateColumn.tsx

@@ -5,10 +5,10 @@ import {
   GridValidRowModel as RowModel,
   GridValueGetter as ValueGetter,
 } from '@mui/x-data-grid';
-import { Nil } from '@seedcompany/common';
+import { isObjectLike, Nil } from '@seedcompany/common';
 import { DateTime } from 'luxon';
 import { DateFilter } from '~/api/schema.graphql';
-import { CalendarDate, ISOString } from '~/common';
+import { CalendarDate, ISOString, unwrapSecured } from '~/common';
 import { GridHeaderAddFilterButton } from '../GridHeaderAddFilterButton';
 import { column, RowLike } from './definition.types';
 
@@ -21,6 +21,7 @@ export const dateColumn = <Row extends RowLike>() =>
   column<Row>()({
     type: 'date',
     valueGetter: dateColumn.valueGetter(defaultValueGetter),
+    valueSetter: defaultValueSetter,
     filterOperators,
     renderHeaderFilter: GridHeaderAddFilterButton,
   });
@@ -57,7 +58,24 @@ dateColumn.valueGetter =
     return value;
   };
 const defaultValueGetter: DateValueGetterInput = (_, row, column) =>
-  row[column.field];
+  unwrapSecured(row[column.field]);
+
+const defaultValueSetter = <R extends RowModel>(
+  raw: Date | null,
+  row: R,
+  column: ColDef<R>
+) => {
+  const value = raw ? CalendarDate.fromJSDate(raw) : null;
+  const field = row[column.field];
+  const wrapSecured =
+    isObjectLike(field) &&
+    '__typename' in field &&
+    typeof field.__typename === 'string' &&
+    field.__typename.startsWith('Secured')
+      ? { ...field, value }
+      : value;
+  return { ...row, [column.field]: wrapSecured };
+};
 
 const filterOpNameMap: Record<string, keyof DateFilter> = {
   after: 'after',

src/components/Grid/index.tsx

@@ -13,3 +13,4 @@ export * from './QuickFilters';
 export * from './ColumnTypes/multiEnumColumn';
 export * from './ColumnTypes/dateColumn';
 export * from './isCellEditable';
+export * from './useGridMutation';

src/components/Grid/useGridMutation.ts

@@ -0,0 +1,56 @@
+import { useMutation } from '@apollo/client';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+import { isEqual } from 'lodash';
+
+export const useGridMutation = <Row, MutationRes, Vars>(
+  rowShape: DocumentNode<Row>,
+  mutation: DocumentNode<MutationRes, Vars>,
+  makeInput: NoInfer<
+    (object: Row) =>
+      | {
+          variables: Vars;
+          optimisticResponse: MutationRes;
+        }
+      | undefined
+  >
+) => {
+  const [update] = useMutation(mutation);
+
+  return (updatedRow: Row, prevRow: Row) => {
+    const updatedInput = makeInput(updatedRow);
+    const prevInput = makeInput(prevRow);
+
+    if (!updatedInput || !prevInput) {
+      return updatedRow;
+    }
+
+    if (isEqual(updatedInput.variables, prevInput.variables)) {
+      return updatedRow;
+    }
+
+    // Don't wait for the mutation to finish/error, which allows
+    // the grid to close the editing state immediately.
+    // There shouldn't be any business errors from these current changes,
+    // and network errors are handled with snackbars.
+    // Additionally, MUI doesn't handle thrown errors either; it just gives
+    // them straight back to us on the `onProcessRowUpdateError` callback.
+    void update({
+      variables: updatedInput.variables,
+      // Inform Apollo of these async/queued updates.
+      // This is important because users can make multiple changes
+      // quickly, since we don't `await` above.
+      // These optimistic updates are layered/stacked.
+      // So if two value changes are in flight, the value from the first
+      // API response isn't presented as the latest value,
+      // since there is still another optimistic update left.
+      // Said another way: this prevents the UI from presenting the final change,
+      // then looking like it reverted to the first change,
+      // and then flipping back to the final change again.
+      // This also ensures these pending updates are maintained
+      // even if the grid is unmounted/remounted.
+      optimisticResponse: updatedInput.optimisticResponse,
+    });
+
+    return updatedRow;
+  };
+};

src/components/PartnersDataGrid/PartnerColumns.tsx

@@ -41,7 +41,6 @@ export const PartnerColumns: Array<GridColDef<Partner>> = [
     headerName: 'Start Date',
     field: 'startDate',
     ...dateColumn(),
-    valueGetter: dateColumn.valueGetter((_, { startDate }) => startDate.value),
     width: 130,
   },
   {

src/components/ProjectDataGrid/ProjectColumns.tsx

@@ -78,13 +78,11 @@ export const ProjectColumns: Array<GridColDef<Project>> = [
     headerName: 'MOU Start',
     field: 'mouStart',
     ...dateColumn(),
-    valueGetter: dateColumn.valueGetter((_, { mouStart }) => mouStart.value),
   },
   {
     headerName: 'MOU End',
     field: 'mouEnd',
     ...dateColumn(),
-    valueGetter: dateColumn.valueGetter((_, { mouEnd }) => mouEnd.value),
   },
   SensitivityColumn({}),
   {