fix(ui): create event from link button

packages/@liexp/backend/src/io/media.io.ts

@@ -29,7 +29,7 @@ const toMediaIO = (
   return pipe(
     io.http.Media.AdminMedia.decode({
       ...media,
-      label: media.label ?? undefined,
+      label: media.label ?? media.location,
       description: media.description ?? undefined,
       location: ensureHTTPS(media.location),
       creator: media.creator ?? undefined,

packages/@liexp/backend/src/providers/space/space.provider.ts

@@ -22,7 +22,7 @@ import { type Endpoint } from "@aws-sdk/types";
 import * as logger from "@liexp/core/lib/logger/index.js";
 import * as TE from "fp-ts/lib/TaskEither.js";
 import { pipe } from "fp-ts/lib/function.js";
-import * as qs from "query-string";
+import qs from "query-string";
 import { IOError } from "ts-io-error";
 
 const s3Logger = logger.GetLogger("space");

packages/@liexp/core/package.json

@@ -48,7 +48,6 @@
   "peerDependencies": {
     "debug": "*",
     "dotenv": "^16.4.7",
-    "query-string": "^7",
     "vite": "^6",
     "vite-plugin-css-injected-by-js": "^3",
     "vite-plugin-optimizer": "^1",

packages/@liexp/core/src/frontend/vite/config.ts

@@ -11,7 +11,7 @@
 import { type GetViteConfigParams } from "./type.js";
 
 // https://vitejs.dev/config/
 export const defineViteConfig = <A extends Record<string, any>>(
   config: GetViteConfigParams<A>,
 ): ((env: ConfigEnv) => UserConfig) => {
   return ({ mode: _mode }) => {
@@ -137,6 +137,7 @@
             port: config.port,
             host: config.host,
             hmr: config.hot,
+            allowedHosts: ["*.liexp.dev", "liexp.dev"],
           }
         : undefined,
       ssr: {

packages/@liexp/shared/package.json

@@ -26,8 +26,8 @@
     "src/**/*.(ts|tsx|js|jsx)": "eslint --fix"
   },
   "dependencies": {
-    "@blocknote/core": "^0.23.4",
-    "@blocknote/server-util": "^0.23.4",
+    "@blocknote/core": "^0.23.5",
+    "@blocknote/server-util": "^0.23.5",
     "@liexp/core": "workspace:*",
     "axios": "^1.7.9",
     "date-fns": "^4.1.0",
@@ -36,7 +36,7 @@
     "io-ts-types": "^0.5.19",
     "lodash": "^4.17.21",
     "page-metadata-parser": "^1.1.4",
-    "query-string": "^7.1.3",
+    "query-string": "^9.1.1",
     "ts-endpoint": "^2.0.0",
     "ts-io-error": "^2.0.0",
     "typelevel-ts": "^0.4.0",

packages/@liexp/ui/package.json

@@ -27,9 +27,9 @@
     "src/**/*.(ts|tsx|js|jsx)": "eslint --fix"
   },
   "dependencies": {
-    "@blocknote/core": "^0.23.4",
-    "@blocknote/mantine": "^0.23.4",
-    "@blocknote/react": "^0.23.4",
+    "@blocknote/core": "^0.23.5",
+    "@blocknote/mantine": "^0.23.5",
+    "@blocknote/react": "^0.23.5",
     "@emotion/cache": "^11.14.0",
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
@@ -85,7 +85,7 @@
     "lodash": "^4.17.21",
     "ol": "^10.4.0",
     "path-to-regexp": "^8.2.0",
-    "query-string": "^7.1.3",
+    "query-string": "^9.1.1",
     "ra-core": "^5.5.3",
     "ra-i18n-polyglot": "^5.5.3",
     "ra-language-english": "^5.5.3",

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

@@ -0,0 +1,37 @@
+import {
+  DEATH,
+  UNCATEGORIZED,
+} from "@liexp/shared/lib/io/http/Events/EventType.js";
+import { type EventType } from "@liexp/shared/lib/io/http/Events/index.js";
+import * as React from "react";
+import { Stack } from "../../mui/index.js";
+import ReferenceActorInput from "../actors/ReferenceActorInput.js";
+
+interface EventFieldsFromTypeProps {
+  eventType: EventType;
+}
+export const EventFieldsFromType: React.FC<EventFieldsFromTypeProps> = ({
+  eventType,
+}) => {
+  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 (
+    <Stack spacing={2}>
+      <Stack spacing={2}>{fields}</Stack>
+    </Stack>
+  );
+};

packages/@liexp/ui/src/components/admin/common/inputs/EventTypeInput.tsx

@@ -8,13 +8,6 @@ import { throwTE } from "@liexp/shared/lib/utils/task.utils.js";
 import { pipe } from "fp-ts/lib/function.js";
 import get from "lodash/get";
 import * as React from "react";
-import {
-  Button,
-  useDataProvider,
-  useRecordContext,
-  useRedirect,
-  type FieldProps,
-} from "react-admin";
 import { useAPI } from "../../../../hooks/useAPI.js";
 import { fetchRelations } from "../../../../state/queries/SearchEventsQuery.js";
 import {
@@ -23,14 +16,24 @@ import {
   Select,
   type SelectChangeEvent,
 } from "../../../mui/index.js";
+import {
+  Button,
+  useDataProvider,
+  useRecordContext,
+  useRedirect,
+  type InputProps,
+} from "../../react-admin.js";
 
-export const EventTypeInput: React.FC<FieldProps> = ({ source }) => {
+export const EventTypeInput: React.FC<InputProps> = ({
+  source,
+  defaultValue,
+}) => {
   const record = useRecordContext<Events.Event>();
   const redirect = useRedirect();
   const apiProvider = useDataProvider();
   const api = useAPI();
 
-  const value = get(record, source ?? "type");
+  const value = get(record, source ?? "type") ?? defaultValue;
   const [type, setType] = React.useState(
     value ?? Events.EventTypes.UNCATEGORIZED.value,
   );

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

@@ -1,42 +1,44 @@
-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 { useFormContext } from "react-hook-form";
 import { useNavigate } from "react-router";
-import { useDataProvider } from "../../../hooks/useDataProvider.js";
+import { toQueryParams } from "../../../utils/routes.utils.js";
 import { ErrorBox } from "../../Common/ErrorBox.js";
-import { Box, MenuItem, Select } from "../../mui/index.js";
-import EventPreview from "../previews/EventPreview.js";
+import { Box, Stack } from "../../mui/index.js";
+import { EventFieldsFromType } from "../common/EventFieldsFromType.js";
+import { EventTypeInput } from "../common/inputs/EventTypeInput.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 formGroupState = useFormContext();
+  const formValues = formGroupState.getValues();
+  console.log(formValues);
+
+  const [{ type, error }, setState] = React.useState<{
     error: Error | undefined;
     type: io.http.Events.EventType;
   }>({
-    suggestion: undefined,
     error: undefined,
     type: io.http.Events.EventType.types[1].value,
   });
 
-  const getSuggestionFromAPI = React.useCallback(
-    async (
-      link: Link,
-    ): Promise<Either<Error, EventSuggestion.CreateEventSuggestion>> => {
-      if (suggestion) {
-        return Promise.resolve(fp.E.right(suggestion));
-      }
+  const payload = React.useMemo((): io.http.Events.Event["payload"] => {
+    const { payload } = formValues;
+    console.log(formValues, payload);
+    return payload as any;
+  }, [formValues]);
+
+  const createEvent = React.useCallback(
+    (payload: Events.Event["payload"]): void => {
+      const payloadQueryParam = toQueryParams({ payload });
+      console.log(payloadQueryParam);
 
-      const result = await apiProvider.post("events", { url: link.url, type });
-      return result.data;
+      navigate(`/deaths/create?${payloadQueryParam}`);
     },
     [record, type],
   );
@@ -46,110 +48,32 @@
   }
 
   return (
-    <Box>
-      <Select
-        size="small"
-        value={type}
-        onChange={(e) => {
-          setState({
-            suggestion: undefined,
-            error: undefined,
-            type: e.target.value as any,
-          });
-        }}
-      >
-        {io.http.Events.EventType.types.map((t) => (
-          <MenuItem key={t.value} value={t.value}>
-            {t.value}
-          </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);
-        }}
-      />
+    <Stack spacing={2} direction={"row"}>
+      <EventTypeInput source="type" defaultValue={type} />
+      <EventFieldsFromType eventType={type} />
+
       <Button
         label="Create Event"
         variant="contained"
-        // disabled={!payload}
+        disabled={!payload}
         onClick={() => {
-          void getSuggestionFromAPI(record).then(
-            flow(
-              fp.E.fold(
-                (e) => {
-                  setState({
-                    type,
-                    suggestion: undefined,
-                    error: e,
-                  });
-                },
-                (suggestion) => {
-                  const { newLinks, ...event } = suggestion.event;
-
-                  void apiProvider
-                    .create(`/events`, {
-                      data: {
-                        ...event,
-                        links: newLinks,
-                      },
-                    })
-                    .then(({ data }) => {
-                      navigate(`/events/${data.id}`);
-                    });
-                },
-              ),
-            ),
-          );
+          void createEvent(payload!);
         }}
       />
-      {suggestion ? (
-        <Box>
-          <EventPreview event={suggestion.event} />
-        </Box>
-      ) : null}
       {error ? (
-        <Box>
+        <Stack>
           <ErrorBox
             error={error}
             resetErrorBoundary={() => {
+              formGroupState.resetField("payload");
               setState({
                 type,
-                suggestion: undefined,
                 error: undefined,
               });
             }}
           />
-        </Box>
+        </Stack>
       ) : null}
-    </Box>
+    </Stack>
   );
 };