Refactoring to implement visualization and edition features.

src/components/wpt/Wpt.tsx

@@ -7,6 +7,11 @@ import { useI18n } from '@solid-primitives/i18n';
 import { cloneDeep } from 'lodash';
 import Dialog from '../dialog';
 import { Box, Button, Stack, TextField } from '@suid/material';
+import wpt from '.';
+import {
+  createCachedSignal,
+  destroyCachedSignal,
+} from '../../workers/cached-signals';
 
 interface Props {
   wptId: string;
@@ -26,9 +31,17 @@ export const Wpt: Component<Props> = ({
 }) => {
   const [t, { add, locale, dict }] = useI18n();
 
-  const [wpt, setWpt] = createSignal<Wpt>();
+  const params = {
+    id: wptId,
+    method: 'getWpt',
+  };
+  const wpt = createCachedSignal(params);
+
+  onCleanup(() => {
+    destroyCachedSignal(params);
+  });
+
   const [editedWpt, setEditedWpt] = createSignal<Wpt>();
-  const [dispatchId, setDispatchId] = createSignal<number>(-1);
 
   const getTitle = () => {
     if (wpt()?.name) {
@@ -37,41 +50,6 @@ export const Wpt: Component<Props> = ({
     return t('wpt');
   };
 
-  const wptCallBack = (error: any, result: any, id?: number) => {
-    if (error) {
-      console.error({ caller: 'wptCallBack', error });
-    } else {
-      console.log({ caller: 'wptCallBack', result });
-      setWpt(result);
-    }
-    if (id) {
-      setDispatchId(id);
-    }
-  };
-
-  dispatch(
-    {
-      action: 'getAndWatch',
-      params: {
-        id: wptId,
-        method: 'getWpt',
-      },
-    },
-    wptCallBack,
-    true
-  );
-
-  onCleanup(() => {
-    dispatch({
-      action: 'cancelWatch',
-      params: {
-        id: wptId,
-        method: 'getWpt',
-      },
-    });
-    cancelDispatch(dispatchId());
-  });
-
   const [mode, setMode] = createSignal<Mode>(Mode.CLOSED);
 
   const edit = () => {