Enhance addItemToList to sort items by with nested paths & unwrap secured values / lists

This allows `engagements.total` to match the correct value.

Along with `engagements.language.name`,
which actually traverses as `engagements.items.language.value.name.value`

Author: CarsonF

src/api/caching/lists/addItemToList.ts

@@ -3,9 +3,9 @@ import {
   MutationUpdaterFunction,
   Reference,
 } from '@apollo/client';
-import { sortBy } from '@seedcompany/common';
+import { isObjectLike, sortBy } from '@seedcompany/common';
 import { Except } from 'type-fest';
-import { unwrapSecured } from '~/common';
+import { unwrapSecuredEdge } from '~/common';
 import { modifyChangesetDiff } from '../../changesets';
 import type { Entity } from '../../schema';
 import type { Order } from '../../schema.graphql';
@@ -96,10 +96,19 @@ export const addItemToList =
       if (sort && order) {
         newList = sortBy(newList, [
           (ref) => {
-            const field = readField(sort, ref);
-            const fieldVal = unwrapSecured(field);
+            const fieldVal = sort.split('.').reduce((val, key, i, parts) => {
+              if (!val) {
+                return val;
+              }
+              const raw = readField(key, val);
+              const nextKey = parts[i + 1];
+              if (nextKey && isObjectLike(raw) && nextKey in raw) {
+                return raw;
+              }
+              return unwrapSecuredEdge(raw);
+            }, ref as any);
             // Unsafely assume this value is sortable
-            return fieldVal as any;
+            return fieldVal;
           },
           order.toLowerCase() as Lowercase<Order>,
         ]);

src/common/secured.ts

@@ -1,4 +1,4 @@
-import { Nil } from '@seedcompany/common';
+import { isObjectLike, Nil } from '@seedcompany/common';
 import { ConditionalKeys } from 'type-fest';
 
 interface Readable {
@@ -21,16 +21,43 @@ export const isSecured = <T>(value: unknown): value is SecuredProp<T> =>
   'canEdit' in value &&
   'canRead' in value;
 
+/**
+ * @deprecated unsafely assumes canRead/Edit
+ */
 export const unwrapSecured = <T>(value: T) =>
-  (!!value &&
-  typeof value === 'object' &&
-  '__typename' in value &&
-  typeof value.__typename === 'string' &&
+  (isObjectLike(value) &&
+  hasTypename(value) &&
   value.__typename.startsWith('Secured') &&
   'value' in value
     ? value.value
     : value) as T extends SecuredProp<infer U> ? U : T;
 
+export const unwrapSecuredEdge = <T>(
+  value: T
+): T extends { __typename: `Secured${string}` }
+  ? T extends { value: infer U }
+    ? U
+    : T extends { items: infer U }
+    ? U
+    : T
+  : T => {
+  if (
+    isObjectLike(value) &&
+    hasTypename(value) &&
+    value.__typename.startsWith('Secured')
+  ) {
+    return 'value' in value
+      ? value.value
+      : 'items' in value && Array.isArray(value.items)
+      ? value.items
+      : (value as any);
+  }
+  return value as any;
+};
+
+const hasTypename = (value: object): value is { __typename: string } =>
+  '__typename' in value && typeof value.__typename === 'string';
+
 /**
  * Can the user read any of the fields of this object?
  * If no keys are specified all "secured" properties will be checked.

src/components/ProjectDataGrid/ProjectColumns.tsx

@@ -67,7 +67,7 @@ export const ProjectColumns: Array<GridColDef<Project>> = [
     width: 160,
   },
   {
-    field: 'engagements',
+    field: 'engagements.total',
     type: 'number',
     valueGetter: (_, { engagements }) => engagements.total,
     filterable: false,