From 0c9bc340fbc905d6e1e01a669571024a40eba9db Mon Sep 17 00:00:00 2001 From: Barnaby Keene <1636971+Southclaws@users.noreply.github.com> Date: Sat, 28 Dec 2024 22:35:23 +0000 Subject: [PATCH] create thread from ask result --- web/package.json | 1 + .../CreateThreadFromResultModal.tsx | 56 ++++++++++++++++ .../CreateThreadFromResultScreen.tsx | 56 ++++++++++++++++ .../useCreateThreadFromResult.ts | 65 +++++++++++++++++++ web/src/screens/ask/AskScreen.tsx | 25 +++++++ web/yarn.lock | 10 +++ 6 files changed, 213 insertions(+) create mode 100644 web/src/components/ask/CreateThreadFromResultModal/CreateThreadFromResultModal.tsx create mode 100644 web/src/components/ask/CreateThreadFromResultModal/CreateThreadFromResultScreen.tsx create mode 100644 web/src/components/ask/CreateThreadFromResultModal/useCreateThreadFromResult.ts diff --git a/web/package.json b/web/package.json index f6cfcc41..268b1b03 100644 --- a/web/package.json +++ b/web/package.json @@ -44,6 +44,7 @@ "js-cookie": "^3.0.5", "lodash": "^4.17.21", "lucide-react": "^0.451.0", + "marked": "^15.0.4", "mime-db": "^1.53.0", "next": "15.0.0", "nuqs": "^1.20.0", diff --git a/web/src/components/ask/CreateThreadFromResultModal/CreateThreadFromResultModal.tsx b/web/src/components/ask/CreateThreadFromResultModal/CreateThreadFromResultModal.tsx new file mode 100644 index 00000000..f9f1a59a --- /dev/null +++ b/web/src/components/ask/CreateThreadFromResultModal/CreateThreadFromResultModal.tsx @@ -0,0 +1,56 @@ +import { ModalDrawer } from "@/components/site/Modaldrawer/Modaldrawer"; +import { Button } from "@/components/ui/button"; +import { DiscussionIcon } from "@/components/ui/icons/Discussion"; +import { UseDisclosureProps, useDisclosure } from "@/utils/useDisclosure"; + +import { CreateThreadFromResultScreen } from "./CreateThreadFromResultScreen"; +import { Props } from "./useCreateThreadFromResult"; + +export function CreateThreadFromResultModal({ + contentMarkdown, + sources, + onClose, + onOpen, + isOpen, +}: UseDisclosureProps & Props) { + return ( + + + + ); +} + +export function CreateThreadFromResultModalTrigger({ + contentMarkdown, + sources, +}: Props) { + const disclosure = useDisclosure(); + + return ( + <> + + + + + ); +} diff --git a/web/src/components/ask/CreateThreadFromResultModal/CreateThreadFromResultScreen.tsx b/web/src/components/ask/CreateThreadFromResultModal/CreateThreadFromResultScreen.tsx new file mode 100644 index 00000000..5049206c --- /dev/null +++ b/web/src/components/ask/CreateThreadFromResultModal/CreateThreadFromResultScreen.tsx @@ -0,0 +1,56 @@ +import { CategorySelect } from "@/components/category/CategorySelect/CategorySelect"; +import { ContentFormField } from "@/components/content/ContentComposer/ContentField"; +import { Button } from "@/components/ui/button"; +import { FormControl } from "@/components/ui/form/FormControl"; +import { FormErrorText } from "@/components/ui/form/FormErrorText"; +import { FormHelperText } from "@/components/ui/form/FormHelperText"; +import { Input } from "@/components/ui/input"; +import { HStack, WStack } from "@/styled-system/jsx"; +import { lstack } from "@/styled-system/patterns"; + +import { Props, useCreateThreadFromResult } from "./useCreateThreadFromResult"; + +export function CreateThreadFromResultScreen(props: Props) { + const { form, contentHTML, handlers } = useCreateThreadFromResult(props); + + return ( +
+ + Thread title + + {form.formState.errors.title?.message} + + + + Category + + {form.formState.errors.category?.message} + + + + Thread content + + {form.formState.errors.content?.message} + + + + + + + +
+ ); +} diff --git a/web/src/components/ask/CreateThreadFromResultModal/useCreateThreadFromResult.ts b/web/src/components/ask/CreateThreadFromResultModal/useCreateThreadFromResult.ts new file mode 100644 index 00000000..94eab558 --- /dev/null +++ b/web/src/components/ask/CreateThreadFromResultModal/useCreateThreadFromResult.ts @@ -0,0 +1,65 @@ +import { zodResolver } from "@hookform/resolvers/zod"; +import { marked } from "marked"; +import { use } from "react"; +import { useForm } from "react-hook-form"; +import { z } from "zod"; + +import { handle } from "@/api/client"; +import { threadCreate } from "@/api/openapi-client/threads"; + +type DatagraphRef = { + id: string; + kp: string; + href: string; +}; + +export type Props = { + contentMarkdown: string; + sources: DatagraphRef[]; + onFinish?: () => void; +}; + +export const FormSchema = z.object({ + category: z.string(), + title: z.string(), + content: z.string(), +}); +export type Form = z.infer; + +export function useCreateThreadFromResult(props: Props) { + const contentHTML = marked.parse(props.contentMarkdown, { + async: false, + }); + + const form = useForm
({ + resolver: zodResolver(FormSchema), + defaultValues: { + category: undefined, + title: "", + content: contentHTML, + }, + }); + + console.log(form.watch()); + + const handleSubmit = form.handleSubmit(async (data: Form) => { + await handle(async () => { + await threadCreate({ + title: data.title, + body: data.content, + category: data.category, + visibility: "published", + }); + + props.onFinish?.(); + }); + }); + + return { + form, + contentHTML, + handlers: { + handleSubmit, + }, + }; +} diff --git a/web/src/screens/ask/AskScreen.tsx b/web/src/screens/ask/AskScreen.tsx index 36828002..f4279b17 100644 --- a/web/src/screens/ask/AskScreen.tsx +++ b/web/src/screens/ask/AskScreen.tsx @@ -9,6 +9,7 @@ import { handle } from "@/api/client"; import { useNodeGet } from "@/api/openapi-client/nodes"; import { useThreadGet } from "@/api/openapi-client/threads"; import { Account, DatagraphItemKind } from "@/api/openapi-schema"; +import { CreateThreadFromResultModalTrigger } from "@/components/ask/CreateThreadFromResultModal/CreateThreadFromResultModal"; import { DatagraphItemNodeCard, DatagraphItemPostGenericCard, @@ -183,6 +184,8 @@ export function Ask() { ); } + const isFinishedWithResult = isLoading === false && content.length > 0; + return ( + {isFinishedWithResult && ( + + {/* */} + + + {/* */} + + + + )} + {sourceList.length > 0 && ( Sources from the community diff --git a/web/yarn.lock b/web/yarn.lock index 1b37849f..0522a208 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -8170,6 +8170,15 @@ __metadata: languageName: node linkType: hard +"marked@npm:^15.0.4": + version: 15.0.4 + resolution: "marked@npm:15.0.4" + bin: + marked: bin/marked.js + checksum: 10c0/e2bfd9178e5242cc814aaf8020f3c2e954c047652c498dac0732f4b711d5e3ab80dbc54b964799d80470d6c515a24905e554c4a40f87b05dedc26e4e36cfdfdb + languageName: node + linkType: hard + "mdast-util-from-markdown@npm:^2.0.0": version: 2.0.2 resolution: "mdast-util-from-markdown@npm:2.0.2" @@ -11392,6 +11401,7 @@ __metadata: js-cookie: "npm:^3.0.5" lodash: "npm:^4.17.21" lucide-react: "npm:^0.451.0" + marked: "npm:^15.0.4" mime-db: "npm:^1.53.0" next: "npm:15.0.0" nuqs: "npm:^1.20.0"