Added live updates to vendors in client

client/public/locales/en/common.json

@@ -227,6 +227,9 @@
             "list": "Vendors",
             "show": "Show Vendor",
             "show_title": "[Vendor #{{id}}] {{name}}"
+        },
+        "form": {
+            "vendor_updated": "This vendor has been updated by someone/something else since you opened this page. Saving will overwrite those changes!"
         }
     },
     "table": {

client/src/pages/vendors/edit.tsx

@@ -1,18 +1,28 @@
-import React from "react";
+import React, { useState } from "react";
 import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Edit, useForm } from "@refinedev/antd";
-import { Form, Input, DatePicker } from "antd";
+import { Form, Input, DatePicker, message, Alert } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import { IVendor } from "./model";
 
 export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
+  const [messageApi, contextHolder] = message.useMessage();
+  const [hasChanged, setHasChanged] = useState(false);
 
-  const { formProps, saveButtonProps } = useForm<IVendor>();
+  const { formProps, saveButtonProps } = useForm<IVendor>({
+    liveMode: "manual",
+    onLiveEvent() {
+      // Warn the user if the vendor has been updated since the form was opened
+      messageApi.warning(t("vendor.form.vendor_updated"));
+      setHasChanged(true);
+    },
+  });
 
   return (
     <Edit saveButtonProps={saveButtonProps}>
+      {contextHolder}
       <Form {...formProps} layout="vertical">
         <Form.Item
           label={t("vendor.fields.id")}
@@ -62,6 +72,7 @@ export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
           <TextArea maxLength={1024} />
         </Form.Item>
       </Form>
+      {hasChanged && <Alert description={t("vendor.form.vendor_updated")} type="warning" showIcon />}
     </Edit>
   );
 };

client/src/pages/vendors/list.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { IResourceComponentsProps, BaseRecord, useTranslate } from "@refinedev/core";
+import { IResourceComponentsProps, BaseRecord, useTranslate, useInvalidate } from "@refinedev/core";
 import { useTable, List, EditButton, ShowButton, CloneButton } from "@refinedev/antd";
 import { Table, Space, Button, Dropdown } from "antd";
 import dayjs from "dayjs";
@@ -8,6 +8,7 @@ import { IVendor } from "./model";
 import { TableState, useInitialTableState, useStoreInitialState } from "../../utils/saveload";
 import { EditOutlined, FilterOutlined } from "@ant-design/icons";
 import { DateColumn, RichColumn, SortedColumn } from "../../components/column";
+import { useLiveify } from "../../components/liveify";
 
 dayjs.extend(utc);
 
@@ -15,6 +16,7 @@ const namespace = "vendorList-v2";
 
 export const VendorList: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
+  const invalidate = useInvalidate();
 
   // Load initial state
   const initialState = useInitialTableState(namespace);
@@ -35,6 +37,16 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
       mode: "server",
       initial: initialState.filters,
     },
+    liveMode: "manual",
+    onLiveEvent(event) {
+      if (event.type === "created" || event.type === "deleted") {
+        // updated is handled by the liveify
+        invalidate({
+          resource: "vendor",
+          invalidates: ["list"],
+        });
+      }
+    },
   });
 
   // Create state for the columns to show
@@ -51,10 +63,11 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
   useStoreInitialState(namespace, tableState);
 
   // Collapse the dataSource to a mutable list
-  const dataSource: IVendor[] = React.useMemo(
+  const queryDataSource: IVendor[] = React.useMemo(
     () => (tableProps.dataSource || []).map((record) => ({ ...record })),
     [tableProps.dataSource]
   );
+  const dataSource = useLiveify("vendor", queryDataSource, (record: IVendor) => record);
 
   if (tableProps.pagination) {
     tableProps.pagination.showSizeChanger = true;

client/src/pages/vendors/show.tsx

@@ -14,7 +14,9 @@ const { Title } = Typography;
 export const VendorShow: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
 
-  const { queryResult } = useShow<IVendor>();
+  const { queryResult } = useShow<IVendor>({
+    liveMode: "auto",
+  });
   const { data, isLoading } = queryResult;
 
   const record = data?.data;