@wix/patterns 1.459.0 → 1.460.0

package/dist/docs/useOptimisticActions/error-handling-and-retries.tsx

@@ -0,0 +1,175 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  OffsetQuery,
+  PrimaryActionButton,
+  useTableCollection,
+  useOptimisticActions,
+} from '@wix/patterns';
+import { Delete } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function ErrorHandlingAndRetries() {
+
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-ErrorHandlingAndRetries',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+  });
+
+  const collection = state.collection;
+
+  const optimisticActions = useOptimisticActions(collection);
+
+  const _createContact = () => {
+    const newContact = {
+      id: new window.Date().toString(),
+      info: {
+        name: {
+          first: 'New',
+          last: 'Contact',
+        },
+      },
+    };
+
+    optimisticActions.createOne(newContact, {
+      errorToast: (err) => 'failed to create a contact',
+      onError: (err) => {
+        // report error to server
+        console.log('error');
+      },
+      onTryAgain: () => {
+        // report error to server
+        console.log('try again');
+      },
+      submit: async (contacts) => {
+        return new Promise((resolve, reject) => {
+          window.setTimeout(() => {
+            reject(new Error('error'));
+          }, 1000);
+        });
+      },
+    });
+  };
+
+  const _updateContact = (contact: contacts.Contact) => {
+    const updatedContact = {
+      ...contact,
+      info: {
+        ...contact.info,
+        jobTitle: 'Ultimate',
+      },
+    };
+    optimisticActions.updateOne(updatedContact, {
+      errorToast: (err) => 'failed to update a contact',
+      onError: (err) => {
+        // report error to server
+        console.log('error');
+      },
+      onTryAgain: () => {
+        // report error to server
+        console.log('try again');
+      },
+      submit: async (contacts) => {
+        return new Promise((resolve, reject) => {
+          window.setTimeout(() => {
+            reject(new Error('error'));
+          }, 1000);
+        });
+      },
+    });
+  };
+
+  const _deleteContact = (contact: contacts.Contact) => {
+    optimisticActions.deleteOne(contact, {
+      errorToast: (err) => 'failed to delete a contact',
+      onError: (err) => {
+        // report error to server
+        console.log('error');
+      },
+      onTryAgain: () => {
+        // report error to server
+        console.log('try again');
+      },
+      submit: async (contacts) => {
+        return new Promise((resolve, reject) => {
+          window.setTimeout(() => {
+            reject(new Error('error'));
+          }, 1000);
+        });
+      },
+    });
+  };
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={collection}
+          primaryActionButton={<PrimaryActionButton onClick={_createContact} />}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          actionCell={(contact) => ({
+            primaryAction: {
+              text: 'Update',
+              onClick: () => {
+                _updateContact(contact);
+              },
+            },
+            secondaryActions: [
+              {
+                icon: <Delete />,
+                text: 'Delete',
+                onClick: () => {
+                  _deleteContact(contact);
+                },
+              },
+            ],
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/useOptimisticActions/items-orders.tsx

@@ -0,0 +1,165 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  OffsetQuery,
+  PrimaryActionButton,
+  useTableCollection,
+  useOptimisticActions,
+} from '@wix/patterns';
+import { Delete } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function UndoAfterSuccess() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-UndoAfterSuccess',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, sort, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      queryBuilder = queryBuilder.ascending('info.name.first');
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+  });
+
+  const collection = state.collection;
+
+  const optimisticActions = useOptimisticActions(collection, {
+    orderBy: ({ sort }) => [
+      ...(sort || []),
+      {
+        fieldName: (item) => item.info?.name?.first || '',
+        order: 'asc',
+      },
+    ],
+  });
+
+  const _createContact = () => {
+    const newContact = {
+      id: new window.Date().toString(),
+      info: {
+        name: {
+          first: 'Aaa',
+          last: 'Contact',
+        },
+      },
+    };
+
+    optimisticActions.createOne(newContact, {
+      submit: async (_contacts) => {
+        const response = (await Promise.all(
+          _contacts.map((contact) =>
+            contacts.createContact(contact.info as contacts.ContactInfo),
+          ),
+        )) as contacts.CreateContactResponse[];
+
+        return response.map(({ contact }) => contact as contacts.Contact);
+      },
+    });
+  };
+
+  const _updateContact = (contact: contacts.Contact) => {
+    const updatedContact = {
+      ...contact,
+      info: {
+        ...contact.info,
+        jobTitle: 'Ultimate',
+      },
+    };
+
+    optimisticActions.updateOne(updatedContact, {
+      submit: async (_contacts) => {
+        const response = (await Promise.all(
+          _contacts.map((contact) =>
+            contacts.updateContact(
+              contact._id as string,
+              contact.info as contacts.ContactInfo,
+              contact.revision as number,
+            ),
+          ),
+        )) as contacts.UpdateContactResponse[];
+
+        return response.map(({ contact }) => contact as contacts.Contact);
+      },
+    });
+  };
+
+  const _deleteContact = (contact: contacts.Contact) => {
+    optimisticActions.deleteOne(contact, {
+      submit: async (_contacts) =>
+        Promise.all(
+          _contacts.map((contact) =>
+            contacts.deleteContact(contact._id as string),
+          ),
+        ),
+    });
+  };
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={collection}
+          primaryActionButton={<PrimaryActionButton onClick={_createContact} />}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          actionCell={(contact) => ({
+            primaryAction: {
+              text: 'Update',
+              onClick: () => {
+                _updateContact(contact);
+              },
+            },
+            secondaryActions: [
+              {
+                icon: <Delete />,
+                text: 'Delete',
+                onClick: () => {
+                  _deleteContact(contact);
+                },
+              },
+            ],
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/useOptimisticActions/revision-handling.tsx

@@ -0,0 +1,109 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  OffsetQuery,
+  useTableCollection,
+  useOptimisticActions,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function RevisionHandling() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-RevisionHandling',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+  });
+
+  const collection = state.collection;
+
+  const optimisticActions = useOptimisticActions(collection);
+
+  const _updateContact = (contact: contacts.Contact) => {
+    const updatedContact = {
+      ...contact,
+      info: {
+        ...contact.info,
+        jobTitle: 'Ultimate',
+      },
+      revision: +contact.revision! + 1,
+    } as Partial<contacts.Contact>;
+
+    optimisticActions.updateOne(updatedContact, {
+      submit: async (_contacts) => {
+        const response = (await Promise.all(
+          _contacts.map((contact) =>
+            contacts.updateContact(
+              contact._id as string,
+              contact.info as contacts.ContactInfo,
+              contact.revision as number,
+            ),
+          ),
+        )) as contacts.UpdateContactResponse[];
+
+        return response.map(({ contact }) => contact as contacts.Contact);
+      },
+    });
+  };
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={collection}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          actionCell={(contact) => ({
+            primaryAction: {
+              text: 'Update',
+              onClick: () => {
+                _updateContact(contact);
+              },
+            },
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/useOptimisticActions/success-toast-with-undo.tsx

@@ -0,0 +1,164 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  OffsetQuery,
+  PrimaryActionButton,
+  useTableCollection,
+  useOptimisticActions,
+} from '@wix/patterns';
+import { Delete } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function UndoBeforeSending() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-UndoBeforeSending',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+  });
+
+  const collection = state.collection;
+
+  const optimisticActions = useOptimisticActions(collection);
+
+  const _createContact = () => {
+    const newContact = {
+      id: new window.Date().toString(),
+      info: {
+        name: {
+          first: 'New',
+          last: 'Contact',
+        },
+      },
+    };
+
+    optimisticActions.createOne(newContact, {
+      showUndoToast: true,
+      showUndoSuccessToast: true,
+      successToast: 'New contact is created',
+      submit: async (_contacts) => {
+        const response = (await Promise.all(
+          _contacts.map((contact) =>
+            contacts.createContact(contact.info as contacts.ContactInfo),
+          ),
+        )) as contacts.CreateContactResponse[];
+
+        return response.map(({ contact }) => contact as contacts.Contact);
+      },
+    });
+  };
+
+  const _updateContact = (contact: contacts.Contact) => {
+    const updatedContact = {
+      ...contact,
+      info: {
+        ...contact.info,
+        jobTitle: 'Ultimate',
+      },
+    };
+
+    optimisticActions.updateOne(updatedContact, {
+      showUndoToast: true,
+      showUndoSuccessToast: true,
+      successToast: 'A contact has been updated',
+      submit: async (_contacts) => {
+        const response = (await Promise.all(
+          _contacts.map((contact) =>
+            contacts.updateContact(
+              contact._id as string,
+              contact.info as contacts.ContactInfo,
+              contact.revision as number,
+            ),
+          ),
+        )) as contacts.UpdateContactResponse[];
+
+        return response.map(({ contact }) => contact as contacts.Contact);
+      },
+    });
+  };
+
+  const _deleteContact = (contact: contacts.Contact) => {
+    optimisticActions.deleteOne(contact, {
+      showUndoToast: true,
+      showUndoSuccessToast: true,
+      successToast: 'A contact was deleted',
+      submit: async (_contacts) =>
+        Promise.all(
+          _contacts.map((contact) =>
+            contacts.deleteContact(contact._id as string),
+          ),
+        ),
+    });
+  };
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={collection}
+          primaryActionButton={<PrimaryActionButton onClick={_createContact} />}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          actionCell={(contact) => ({
+            primaryAction: {
+              text: 'Update',
+              onClick: () => {
+                _updateContact(contact);
+              },
+            },
+            secondaryActions: [
+              {
+                icon: <Delete />,
+                text: 'Delete',
+                onClick: () => {
+                  _deleteContact(contact);
+                },
+              },
+            ],
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}