Admin UI: minor code cleanup, no functional changes

packages/app-admin-ui/client/components/ListTable.js

@@ -291,25 +291,23 @@ const SingleCell = ({ columns, children }) => (
   </tr>
 );
 
-export default function ListTable(props) {
-  const {
-    adminPath,
-    columnControl,
-    fields,
-    isFullWidth,
-    items,
-    queryErrors = [],
-    list,
-    onChange,
-    onSelectChange,
-    selectedItems,
-    currentPage,
-    filters,
-    search,
-    itemLink = ({ path, item }) => `${adminPath}/${path}/${item.id}`,
-    linkField = '_label_',
-  } = props;
-
+export default function ListTable({
+  adminPath,
+  columnControl,
+  fields,
+  isFullWidth,
+  items,
+  queryErrors = [],
+  list,
+  onChange,
+  onSelectChange,
+  selectedItems,
+  currentPage,
+  filters,
+  search,
+  itemLink = ({ path, item }) => `${adminPath}/${path}/${item.id}`,
+  linkField = '_label_',
+}) {
   const [sortBy, onSortChange] = useListSort();
 
   const handleSelectAll = () => {

packages/app-admin-ui/client/pages/Item/index.js

@@ -38,7 +38,7 @@ import { ItemTitle } from './ItemTitle';
 import { ItemProvider } from '../../providers/Item';
 import { useList } from '../../providers/List';
 
-let Render = ({ children }) => children();
+const Render = ({ children }) => children();
 
 const Form = styled.form({
   marginBottom: gridSize * 3,
@@ -61,14 +61,7 @@ const getRenderableFields = memoizeOne(list =>
     .filter(({ maybeAccess, config }) => !!maybeAccess.update || !!config.isReadOnly)
 );
 
-const ItemDetails = ({
-  list,
-  item: initialData,
-  itemErrors,
-  onUpdate,
-  updateItem,
-  updateInProgress,
-}) => {
+const ItemDetails = ({ list, item: initialData, itemErrors, onUpdate }) => {
   const [item, setItem] = useState(initialData);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [validationErrors, setValidationErrors] = useState({});
@@ -82,6 +75,11 @@ const ItemDetails = ({
 
   const { query: listQuery } = useList();
 
+  const [updateItem, { loading: updateInProgress }] = useMutation(list.updateMutation, {
+    errorPolicy: 'all',
+    onError: error => handleCreateUpdateMutationError({ error, addToast }),
+  });
+
   const getFieldsObject = memoizeOne(() =>
     arrayToObject(
       // NOTE: We _exclude_ read only fields
@@ -346,17 +344,16 @@ const ItemNotFound = ({ errorMessage, list }) => (
     <Button to={list.fullPath} variant="ghost">
       Back to List
     </Button>
-    {errorMessage ? (
-      <p style={{ fontSize: '0.75rem', marginTop: gridSize * 4 }}>
+    {errorMessage && (
+      <p style={{ fontSize: '0.75rem', marginTop: `${gridSize * 4}px` }}>
         <code>{errorMessage}</code>
       </p>
-    ) : null}
+    )}
   </PageError>
 );
 
 const ItemPage = ({ itemId }) => {
   const { list } = useList();
-  const { addToast } = useToasts();
 
   const itemQuery = list.getItemQuery(itemId);
 
@@ -369,11 +366,6 @@ const ItemPage = ({ itemId }) => {
     errorPolicy: 'all',
   });
 
-  const [updateItem, { loading: updateInProgress }] = useMutation(list.updateMutation, {
-    errorPolicy: 'all',
-    onError: error => handleCreateUpdateMutationError({ error, addToast }),
-  });
-
   // Now that the network request for data has been triggered, we
   // try to initialise the fields. They are Suspense capable, so may
   // throw Promises which will be caught by the wrapping <Suspense>
@@ -440,13 +432,10 @@ const ItemPage = ({ itemId }) => {
             itemErrors={itemErrors}
             key={itemId}
             list={list}
-            onUpdate={() =>
-              refetch().then(refetchedData =>
-                deserializeItem(list, refetchedData.data[list.gqlNames.itemQueryName])
-              )
-            }
-            updateInProgress={updateInProgress}
-            updateItem={updateItem}
+            onUpdate={async () => {
+              const { data } = await refetch();
+              return deserializeItem(list, data[list.gqlNames.itemQueryName]);
+            }}
           />
         </Container>
       </main>