fix(ui): create event from link button

packages/@liexp/ui/src/components/Common/BlockNote/Editor.tsx

@@ -100,7 +100,6 @@ export const BNEditor: React.FC<BNEditorProps> = ({
       <BlockNoteEditorContext.Provider value={editor}>
         <StyledBlockNoteView
           editor={editor}
-          theme={"light"}
           editable={!readOnly}
           slashMenu={false}
           onChange={() => {

packages/@liexp/ui/src/components/admin/common/EntityInputs.tsx

@@ -0,0 +1,48 @@
+import { type EventType } from "@liexp/shared/lib/io/http/Events";
+import {
+  DEATH,
+  UNCATEGORIZED,
+} from "@liexp/shared/lib/io/http/Events/EventType";
+import * as React from "react";
+import { Stack } from "../../mui/index.js";
+import ReferenceActorInput from "../actors/ReferenceActorInput.js";
+import { Form } from "../react-admin.js";
+
+interface EventFieldsFromTypeProps {
+  eventType: EventType;
+  defaultValues: any;
+  onChange: (data: any) => void;
+}
+export const EventFieldsFromType: React.FC<EventFieldsFromTypeProps> = ({
+  eventType,
+  defaultValues,
+  onChange,
+}) => {
+  const fields = React.useMemo(() => {
+    switch (eventType) {
+      case DEATH.value: {
+        return (
+          <Stack spacing={1}>
+            <ReferenceActorInput source="payload.victim" />
+          </Stack>
+        );
+      }
+      case UNCATEGORIZED.value:
+      default: {
+        return <Stack spacing={1} />;
+      }
+    }
+  }, [eventType]);
+
+  return (
+    <Form
+      defaultValues={() => defaultValues}
+      validate={(data) => {
+        console.log("validate", data);
+        return {};
+      }}
+    >
+      <Stack spacing={2}>{fields}</Stack>
+    </Form>
+  );
+};

packages/@liexp/ui/src/components/admin/events/CreateEventFromLinkButton.tsx

@@ -1,59 +1,59 @@
 import { flow, fp } from "@liexp/core/lib/fp/index.js";
 import { type Link } from "@liexp/shared/lib/io/http/Link.js";
-import { type EventSuggestion } from "@liexp/shared/lib/io/http/index.js";
+import { type Events } from "@liexp/shared/lib/io/http/index.js";
 import * as io from "@liexp/shared/lib/io/index.js";
 import { type Either } from "fp-ts/lib/Either.js";
-import { useRecordContext } from "ra-core";
 import * as React from "react";
-import { Button } from "react-admin";
 import { useNavigate } from "react-router";
 import { useDataProvider } from "../../../hooks/useDataProvider.js";
 import { ErrorBox } from "../../Common/ErrorBox.js";
-import { Box, MenuItem, Select } from "../../mui/index.js";
-import EventPreview from "../previews/EventPreview.js";
+import { Box, MenuItem, Select, Stack } from "../../mui/index.js";
+import { EventFieldsFromType } from "../common/EntityInputs.js";
+import { Button, useRecordContext } from "../react-admin.js";
 
 export const CreateEventFromLinkButton: React.FC = () => {
   const record = useRecordContext<Link>();
   const navigate = useNavigate();
   const apiProvider = useDataProvider();
 
-  const [{ suggestion, type, error }, setState] = React.useState<{
-    suggestion: EventSuggestion.CreateEventSuggestion | undefined;
+  const [{ type, payload, error }, setState] = React.useState<{
     error: Error | undefined;
     type: io.http.Events.EventType;
+    payload: io.http.Events.Event["payload"] | undefined;
   }>({
-    suggestion: undefined,
     error: undefined,
     type: io.http.Events.EventType.types[1].value,
+    payload: undefined,
   });
 
-  const getSuggestionFromAPI = React.useCallback(
+  const createEvent = React.useCallback(
     async (
-      link: Link,
-    ): Promise<Either<Error, EventSuggestion.CreateEventSuggestion>> => {
-      if (suggestion) {
-        return Promise.resolve(fp.E.right(suggestion));
-      }
-
-      const result = await apiProvider.post("events", { url: link.url, type });
+      payload: Events.Event["payload"],
+    ): Promise<Either<Error, Events.Event>> => {
+      const result = await apiProvider.post("events", {
+        type,
+        payload,
+        links: [record!.id],
+      });
       return result.data;
     },
     [record, type],
   );
 
+  console.log("payload", payload);
   if (!record || record?.events?.length > 0) {
     return <Box />;
   }
 
   return (
-    <Box>
+    <Stack spacing={2} direction={"row"}>
       <Select
         size="small"
         value={type}
         onChange={(e) => {
           setState({
-            suggestion: undefined,
             error: undefined,
+            payload: undefined,
             type: e.target.value as any,
           });
         }}
@@ -64,92 +64,50 @@ export const CreateEventFromLinkButton: React.FC = () => {
           </MenuItem>
         ))}
       </Select>
-      <Button
-        label="Preview Event"
-        onClick={() => {
-          if (suggestion) {
-            setState({
-              type,
-              suggestion,
-              error: undefined,
-            });
-          }
-          setTimeout(() => {
-            void getSuggestionFromAPI(record).then(
-              flow(
-                fp.E.fold(
-                  (e) => {
-                    setState({
-                      type,
-                      suggestion: undefined,
-                      error: e,
-                    });
-                  },
-                  (s) =>
-                    setState({
-                      type,
-                      suggestion: s,
-                      error: undefined,
-                    }),
-                ),
-              ),
-            );
-          }, 0);
+      <EventFieldsFromType
+        eventType={type}
+        defaultValues={payload}
+        onChange={(value) => {
+          console.log("change", value);
         }}
       />
       <Button
         label="Create Event"
         variant="contained"
-        // disabled={!payload}
+        disabled={!payload}
         onClick={() => {
-          void getSuggestionFromAPI(record).then(
+          void createEvent(payload!).then(
             flow(
               fp.E.fold(
                 (e) => {
                   setState({
                     type,
-                    suggestion: undefined,
+                    payload,
                     error: e,
                   });
                 },
-                (suggestion) => {
-                  const { newLinks, ...event } = suggestion.event;
-
-                  void apiProvider
-                    .create(`/events`, {
-                      data: {
-                        ...event,
-                        links: newLinks,
-                      },
-                    })
-                    .then(({ data }) => {
-                      navigate(`/events/${data.id}`);
-                    });
+                (event) => {
+                  navigate(`/events/${event.id}`);
                 },
               ),
             ),
           );
         }}
       />
-      {suggestion ? (
-        <Box>
-          <EventPreview event={suggestion.event} />
-        </Box>
-      ) : null}
       {error ? (
-        <Box>
+        <Stack>
           <ErrorBox
             error={error}
             resetErrorBoundary={() => {
               setState({
                 type,
-                suggestion: undefined,
+                payload: undefined,
                 error: undefined,
               });
             }}
           />
-        </Box>
+        </Stack>
       ) : null}
-    </Box>
+    </Stack>
   );
 };

packages/@liexp/ui/src/components/mui/index.ts

@@ -29,7 +29,6 @@ import {
   Divider,
   DialogContentText,
   DialogActions,
-  CssBaseline,
   CardContent,
   CardHeader,
   CardMedia,
@@ -77,12 +76,11 @@ import {
   Avatar,
   type AvatarProps,
   Popover,
-} from "@mui/material";
-import {
   StyledEngineProvider,
   ThemeProvider,
   useMediaQuery as useMuiMediaQuery,
 } from "@mui/material";
+import CssBaseline from "@mui/material/CssBaseline";
 import { alpha } from "@mui/system";
 import * as MUIIcons from "./icons.js";
 

packages/@liexp/ui/src/react/ssr.tsx

@@ -55,11 +55,11 @@ export const getServer = (
         try {
           return pathToRegexp(r.path).regexp.test(req.baseUrl);
         } catch (e) {
-          ssrLog.warn.log(
-            "Failed to transform route path %s to regexp: %O",
-            r.path,
-            e,
-          );
+          // ssrLog.warn.log(
+          //   "Failed to transform route path %s to regexp: %O",
+          //   r.path,
+          //   e,
+          // );
           return false;
         }
       }) ?? routes.find((r) => r.path === "/");

services/admin-web/src/pages/actors/ActorEdit.tsx

@@ -57,6 +57,7 @@ const EditActions: React.FC = () => {
 
 const ActorEdit: React.FC<EditProps> = (props) => {
   const dataProvider = useDataProvider();
+
   return (
     <EditForm
       title={<EditTitle />}

services/web/src/server/server.tsx

@@ -127,7 +127,7 @@ const run = async (base: string): Promise<void> => {
     webSrvLog.info.log(
       "Server listening on %s:%s",
       process.env.VIRTUAL_HOST,
-      process.env.VIRTUAL_PORT,
+      port,
     );
   });
 };

services/web/vite.config.ts

@@ -1,7 +1,6 @@
 import { defineEnv } from "@liexp/core/lib/frontend/defineEnv.js";
 import { defineViteConfig } from "@liexp/core/lib/frontend/vite/config.js";
 import { reactVirtualized } from "@liexp/ui/lib/vite/plugins/react-virtualized.js";
-import { defineConfig } from "vite";
 
 export const AppEnv = defineEnv((t) => ({
   VITE_NODE_ENV: t.string,