Added live updates to filaments in client

client/public/locales/en/common.json

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

client/src/pages/filaments/edit.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Edit, useForm, useSelect } from "@refinedev/antd";
-import { Form, Input, DatePicker, Select, InputNumber, ColorPicker } from "antd";
+import { Form, Input, DatePicker, Select, InputNumber, ColorPicker, message, Alert } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import { numberFormatter, numberParser } from "../../utils/parsing";
@@ -10,8 +10,17 @@ import { IFilament } from "./model";
 
 export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
+  const [messageApi, contextHolder] = message.useMessage();
+  const [hasChanged, setHasChanged] = useState(false);
 
-  const { formProps, saveButtonProps } = useForm<IFilament>();
+  const { formProps, saveButtonProps } = useForm<IFilament>({
+    liveMode: "manual",
+    onLiveEvent() {
+      // Warn the user if the filament has been updated since the form was opened
+      messageApi.warning(t("filament.form.filament_updated"));
+      setHasChanged(true);
+    },
+  });
 
   const { selectProps } = useSelect<IVendor>({
     resource: "vendor",
@@ -24,6 +33,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
 
   return (
     <Edit saveButtonProps={saveButtonProps}>
+      {contextHolder}
       <Form {...formProps} layout="vertical">
         <Form.Item
           label={t("filament.fields.id")}
@@ -237,6 +247,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           <TextArea maxLength={1024} />
         </Form.Item>
       </Form>
+      {hasChanged && <Alert description={t("filament.form.filament_updated")} type="warning" showIcon />}
     </Edit>
   );
 };

client/src/pages/filaments/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";
@@ -21,6 +21,7 @@ import {
   useSpoolmanMaterials,
   useSpoolmanVendors,
 } from "../../components/otherModels";
+import { useLiveify } from "../../components/liveify";
 
 dayjs.extend(utc);
 
@@ -28,6 +29,16 @@ interface IFilamentCollapsed extends Omit<IFilament, "vendor"> {
   "vendor.name": string | null;
 }
 
+function collapseFilament(element: IFilament): IFilamentCollapsed {
+  let vendor_name: string | null;
+  if (element.vendor) {
+    vendor_name = element.vendor.name;
+  } else {
+    vendor_name = null;
+  }
+  return { ...element, "vendor.name": vendor_name };
+}
+
 function translateColumnI18nKey(columnName: string): string {
   columnName = columnName.replace(".", "_");
   return `filament.fields.${columnName}`;
@@ -37,11 +48,15 @@ const namespace = "filamentList-v2";
 
 export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
+  const invalidate = useInvalidate();
 
   // Load initial state
   const initialState = useInitialTableState(namespace);
 
   // Fetch data from the API
+  // To provide the live updates, we use a custom solution (useLiveify) instead of the built-in refine "liveMode" feature.
+  // This is because the built-in feature does not call the liveProvider subscriber with a list of IDs, but instead
+  // calls it with a list of filters, sorters, etc. This means the server-side has to support this, which is quite hard.
   const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } = useTable<IFilament>({
     syncWithLocation: false,
     pagination: {
@@ -57,6 +72,16 @@ export const FilamentList: 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: "filament",
+          invalidates: ["list"],
+        });
+      }
+    },
   });
 
   // Create state for the columns to show
@@ -92,19 +117,11 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   useStoreInitialState(namespace, tableState);
 
   // Collapse the dataSource to a mutable list and add a filament_name field
-  const dataSource: IFilamentCollapsed[] = React.useMemo(
+  const queryDataSource: IFilamentCollapsed[] = React.useMemo(
-    () =>
+    () => (tableProps.dataSource ?? []).map(collapseFilament),
-      (tableProps.dataSource ?? []).map((element) => {
-        let vendor_name: string | null;
-        if (element.vendor) {
-          vendor_name = element.vendor.name;
-        } else {
-          vendor_name = null;
-        }
-        return { ...element, "vendor.name": vendor_name };
-      }),
     [tableProps.dataSource]
   );
+  const dataSource = useLiveify("filament", queryDataSource, collapseFilament);
 
   if (tableProps.pagination) {
     tableProps.pagination.showSizeChanger = true;

client/src/pages/filaments/show.tsx

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