From f7c7da1cfb4b03b6bcff4864bc5622699914b401 Mon Sep 17 00:00:00 2001 From: ascariandrea Date: Thu, 6 Feb 2025 20:04:05 +0100 Subject: [PATCH] fix(ui): create event from link button --- packages/@liexp/backend/src/io/media.io.ts | 2 +- .../src/providers/space/space.provider.ts | 2 +- packages/@liexp/core/package.json | 1 - .../@liexp/core/src/frontend/vite/config.ts | 1 + packages/@liexp/shared/package.json | 6 +- packages/@liexp/ui/package.json | 8 +- .../admin/common/EventFieldsFromType.tsx | 37 +++++ .../admin/common/inputs/EventTypeInput.tsx | 21 +-- .../events/CreateEventFromLinkButton.tsx | 142 ++++-------------- .../components/admin/events/EditEventForm.tsx | 48 +----- .../components/admin/events/EventFormTabs.tsx | 54 +++++++ .../@liexp/ui/src/hooks/useQueryParams.tsx | 10 ++ packages/@liexp/ui/src/react/ssr.tsx | 10 +- packages/@liexp/ui/src/utils/routes.utils.ts | 38 ++--- pnpm-lock.yaml | 97 +++++++----- services/admin-web/src/pages/AdminEvents.tsx | 5 +- .../admin-web/src/pages/actors/ActorEdit.tsx | 1 + .../pages/events/AdminUncategorizedEvent.tsx | 9 +- .../src/pages/events/death/DeathCreate.tsx | 5 +- services/web/package.json | 2 +- services/web/src/server/server.tsx | 2 +- services/web/vite.config.ts | 1 - 22 files changed, 255 insertions(+), 247 deletions(-) create mode 100644 packages/@liexp/ui/src/components/admin/common/EventFieldsFromType.tsx create mode 100644 packages/@liexp/ui/src/components/admin/events/EventFormTabs.tsx create mode 100644 packages/@liexp/ui/src/hooks/useQueryParams.tsx diff --git a/packages/@liexp/backend/src/io/media.io.ts b/packages/@liexp/backend/src/io/media.io.ts index d3eacd1fa0..6b79d66848 100644 --- a/packages/@liexp/backend/src/io/media.io.ts +++ b/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, diff --git a/packages/@liexp/backend/src/providers/space/space.provider.ts b/packages/@liexp/backend/src/providers/space/space.provider.ts index f89f3137a3..045256fb82 100644 --- a/packages/@liexp/backend/src/providers/space/space.provider.ts +++ b/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"); diff --git a/packages/@liexp/core/package.json b/packages/@liexp/core/package.json index d7b32acdee..a4c49845c2 100644 --- a/packages/@liexp/core/package.json +++ b/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", diff --git a/packages/@liexp/core/src/frontend/vite/config.ts b/packages/@liexp/core/src/frontend/vite/config.ts index 8bc266cc7a..325112e783 100644 --- a/packages/@liexp/core/src/frontend/vite/config.ts +++ b/packages/@liexp/core/src/frontend/vite/config.ts @@ -137,6 +137,7 @@ export const defineViteConfig = >( port: config.port, host: config.host, hmr: config.hot, + allowedHosts: ["*.liexp.dev", "liexp.dev"], } : undefined, ssr: { diff --git a/packages/@liexp/shared/package.json b/packages/@liexp/shared/package.json index 4209f7cf91..f97dc01b70 100644 --- a/packages/@liexp/shared/package.json +++ b/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", diff --git a/packages/@liexp/ui/package.json b/packages/@liexp/ui/package.json index c0966d115f..081144046c 100644 --- a/packages/@liexp/ui/package.json +++ b/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", diff --git a/packages/@liexp/ui/src/components/admin/common/EventFieldsFromType.tsx b/packages/@liexp/ui/src/components/admin/common/EventFieldsFromType.tsx new file mode 100644 index 0000000000..ff9704da1d --- /dev/null +++ b/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 = ({ + eventType, +}) => { + const fields = React.useMemo(() => { + switch (eventType) { + case DEATH.value: { + return ( + + + + ); + } + case UNCATEGORIZED.value: + default: { + return ; + } + } + }, [eventType]); + + return ( + + {fields} + + ); +}; diff --git a/packages/@liexp/ui/src/components/admin/common/inputs/EventTypeInput.tsx b/packages/@liexp/ui/src/components/admin/common/inputs/EventTypeInput.tsx index d2633dcf2a..eb5afb278f 100644 --- a/packages/@liexp/ui/src/components/admin/common/inputs/EventTypeInput.tsx +++ b/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 = ({ source }) => { +export const EventTypeInput: React.FC = ({ + source, + defaultValue, +}) => { const record = useRecordContext(); 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, ); diff --git a/packages/@liexp/ui/src/components/admin/events/CreateEventFromLinkButton.tsx b/packages/@liexp/ui/src/components/admin/events/CreateEventFromLinkButton.tsx index 5b5d11fe81..c23bf36e6d 100644 --- a/packages/@liexp/ui/src/components/admin/events/CreateEventFromLinkButton.tsx +++ b/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(); 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> => { - 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 @@ export const CreateEventFromLinkButton: React.FC = () => { } return ( - - -