From b961e1696c1b960e49968610edf112af64b38c8e Mon Sep 17 00:00:00 2001
From: Aratramba <aratramba@gmail.com>
Date: Mon, 25 Jan 2021 15:25:47 +0100
Subject: [PATCH 1/2] add listener for delete/create/update events on assets

---
 src/App.tsx | 67 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index abb3cb1..01d68f5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -54,6 +54,24 @@ export const App = ({ onClose, onSelect, selectedAssets, tool }: Props) => {
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [sort, setSort] = useState<SortOption>('date');
 
+  const types = tool ? '"sanity.imageAsset", "sanity.fileAsset"' : '"sanity.imageAsset"';
+  const includedFields = [
+    '_createdAt',
+    '_id',
+    '_type',
+    'alt',
+    'extension',
+    'metadata',
+    'originalFilename',
+    'title',
+    'size',
+    'tags',
+    'url',
+    ...customFields.map(({ name }: { name: string }) => name),
+  ];
+
+  const query = `*[_type in [${types}]] { ${includedFields.join(',')} }`;
+
   useEffect(() => {
     let newFilteredAssets = [...assets];
 
@@ -114,23 +132,7 @@ export const App = ({ onClose, onSelect, selectedAssets, tool }: Props) => {
   async function fetchAssets() {
     try {
       setLoading(true);
-      const types = tool ? '"sanity.imageAsset", "sanity.fileAsset"' : '"sanity.imageAsset"';
-      const includedFields = [
-        '_createdAt',
-        '_id',
-        '_type',
-        'alt',
-        'extension',
-        'metadata',
-        'originalFilename',
-        'title',
-        'size',
-        'tags',
-        'url',
-        ...customFields.map(({ name }: { name: string }) => name),
-      ];
-
-      const newAssets: Array<Asset> = await client.fetch(`*[_type in [${types}]] { ${includedFields.join(',')} }`, {});
+      const newAssets: Array<Asset> = await client.fetch(query, {});
       setAssets(newAssets);
     } catch (e) {
       handleError(e);
@@ -139,6 +141,33 @@ export const App = ({ onClose, onSelect, selectedAssets, tool }: Props) => {
     }
   }
 
+  useEffect(() => {
+    const subscription = client
+      .listen(query)
+      .subscribe(({ transition, documentId, result }: { transition: string; documentId: string; result: Asset }) => {
+        if (transition === 'disappear') {
+          setAssets((assets) => [...assets].filter(({ _id }) => _id !== documentId));
+          return;
+        }
+
+        if (transition === 'update') {
+          setAssets((assets) => {
+            return [...assets].map((asset) => {
+              return asset._id === documentId ? result : asset;
+            });
+          });
+          return;
+        }
+
+        if (transition === 'appear') {
+          setAssets((assets) => [...assets, result]);
+          return;
+        }
+      });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
   async function onUpload(files: FileList) {
     try {
       setLoading(true);
@@ -157,7 +186,6 @@ export const App = ({ onClose, onSelect, selectedAssets, tool }: Props) => {
           client.assets.upload(file.type.indexOf('image') > -1 ? 'image' : 'file', file)
         )
       );
-      await fetchAssets();
     } catch (e: any) {
       handleError(e);
     } finally {
@@ -207,7 +235,6 @@ export const App = ({ onClose, onSelect, selectedAssets, tool }: Props) => {
       }));
 
       await Promise.all(idsWithNewTags.map(({ _id, tags }) => client.patch(_id).set({ tags }).commit()));
-      await fetchAssets();
     } catch (e) {
       handleError(e);
     } finally {
@@ -265,7 +292,6 @@ export const App = ({ onClose, onSelect, selectedAssets, tool }: Props) => {
             onClose={() => setAssetToEdit(null)}
             onSaveComplete={() => {
               setAssetToEdit(null);
-              fetchAssets();
             }}
             setLoading={setLoading}
           />
@@ -278,7 +304,6 @@ export const App = ({ onClose, onSelect, selectedAssets, tool }: Props) => {
             onClose={() => setAssetsToDelete(null)}
             onDeleteComplete={() => {
               setAssetsToDelete(null);
-              fetchAssets();
             }}
             setLoading={setLoading}
           />

From 71d193a174bc9f4b373f051459d59b0ab9568957 Mon Sep 17 00:00:00 2001
From: Dennis Passway <dennispassway@gmail.com>
Date: Thu, 28 Jan 2021 13:01:59 +0100
Subject: [PATCH 2/2] Refactor effect to subscribeToAssetChanges

---
 src/App.tsx | 46 +++++++++++++++++++++++++---------------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 01d68f5..7b2581f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -125,6 +125,7 @@ export const App = ({ onClose, onSelect, selectedAssets, tool }: Props) => {
     setLocalSelectedAssets(assetsToSelect);
   }, [assets, selectedAssets]);
 
+  useEffect(subscribeToAssetChanges, []);
   useEffect(() => {
     fetchAssets();
   }, []);
@@ -141,32 +142,35 @@ export const App = ({ onClose, onSelect, selectedAssets, tool }: Props) => {
     }
   }
 
-  useEffect(() => {
+  function subscribeToAssetChanges() {
     const subscription = client
       .listen(query)
-      .subscribe(({ transition, documentId, result }: { transition: string; documentId: string; result: Asset }) => {
-        if (transition === 'disappear') {
-          setAssets((assets) => [...assets].filter(({ _id }) => _id !== documentId));
-          return;
-        }
-
-        if (transition === 'update') {
-          setAssets((assets) => {
-            return [...assets].map((asset) => {
-              return asset._id === documentId ? result : asset;
-            });
-          });
-          return;
-        }
-
-        if (transition === 'appear') {
-          setAssets((assets) => [...assets, result]);
-          return;
+      .subscribe(
+        ({
+          documentId,
+          result,
+          transition,
+        }: {
+          documentId: string;
+          result: Asset;
+          transition: 'disappear' | 'update' | 'appear';
+        }) => {
+          if (transition === 'disappear') {
+            return setAssets((assets) => [...assets].filter(({ _id }) => _id !== documentId));
+          }
+
+          if (transition === 'update') {
+            return setAssets((assets) => [...assets].map((asset) => (asset._id === documentId ? result : asset)));
+          }
+
+          if (transition === 'appear') {
+            return setAssets((assets) => [...assets, result]);
+          }
         }
-      });
+      );
 
     return () => subscription.unsubscribe();
-  }, []);
+  }
 
   async function onUpload(files: FileList) {
     try {