From 32374b97d0fa640e51fd331fba77bf164d6ea495 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Fri, 20 May 2022 16:51:02 +0300 Subject: [PATCH] feat: add excerpt column to db, add preveiw© story to text editor --- functions/graphql/types/post.js | 3 - .../migration.sql | 12 ++++ prisma/schema.prisma | 2 + .../Inputs/TextEditor/TextEditor.stories.tsx | 62 +++++++++++++------ src/utils/hooks/index.ts | 1 + src/utils/hooks/useCopyToClipboard.ts | 26 ++++++++ 6 files changed, 85 insertions(+), 21 deletions(-) create mode 100644 prisma/migrations/20220520134308_add_excerpt_column_to_story_and_question/migration.sql create mode 100644 src/utils/hooks/useCopyToClipboard.ts diff --git a/functions/graphql/types/post.js b/functions/graphql/types/post.js index 688a165..c070b0f 100644 --- a/functions/graphql/types/post.js +++ b/functions/graphql/types/post.js @@ -81,9 +81,6 @@ const PostBase = interfaceType({ t.nonNull.int('id'); t.nonNull.string('title'); t.nonNull.date('createdAt'); - t.nonNull.string('excerpt', { - resolve: (parent) => parent.body.slice(0, 150) - }); t.nonNull.string('body'); t.nonNull.int('votes_count'); }, diff --git a/prisma/migrations/20220520134308_add_excerpt_column_to_story_and_question/migration.sql b/prisma/migrations/20220520134308_add_excerpt_column_to_story_and_question/migration.sql new file mode 100644 index 0000000..a338582 --- /dev/null +++ b/prisma/migrations/20220520134308_add_excerpt_column_to_story_and_question/migration.sql @@ -0,0 +1,12 @@ +/* + Warnings: + + - Added the required column `excerpt` to the `Question` table without a default value. This is not possible if the table is not empty. + - Added the required column `excerpt` to the `Story` table without a default value. This is not possible if the table is not empty. + +*/ +-- AlterTable +ALTER TABLE "Question" ADD COLUMN "excerpt" TEXT NOT NULL; + +-- AlterTable +ALTER TABLE "Story" ADD COLUMN "excerpt" TEXT NOT NULL; diff --git a/prisma/schema.prisma b/prisma/schema.prisma index 2ce991c..96b27cb 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -100,6 +100,7 @@ model Story { createdAt DateTime @default(now()) updatedAt DateTime @updatedAt body String + excerpt String cover_image String votes_count Int @default(0) @@ -120,6 +121,7 @@ model Question { createdAt DateTime @default(now()) updatedAt DateTime @updatedAt body String + excerpt String votes_count Int @default(0) topic Topic @relation(fields: [topic_id], references: [id]) diff --git a/src/Components/Inputs/TextEditor/TextEditor.stories.tsx b/src/Components/Inputs/TextEditor/TextEditor.stories.tsx index bdae316..1dab232 100644 --- a/src/Components/Inputs/TextEditor/TextEditor.stories.tsx +++ b/src/Components/Inputs/TextEditor/TextEditor.stories.tsx @@ -1,5 +1,9 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { useEffect, useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; +import { FaCopy } from 'react-icons/fa'; +import Button from 'src/Components/Button/Button'; +import useCopyToClipboard from 'src/utils/hooks/useCopyToClipboard'; import { WithModals } from 'src/utils/storybook/decorators'; import TextEditor from './TextEditor'; @@ -50,36 +54,58 @@ const PreviewTemplate: ComponentStory = (args) => { content: "" } }); + const [mode, setMode] = useState(1); // 1 = editing, 0 = preview + const [copied, setCopied] = useState(false) - const md = methods.watch('content') - console.log(md); + const copy = useCopyToClipboard(); + const copyToClipboard = () => { + copy(methods.getValues('content')); + setCopied(true); + } + + useEffect(() => { + let timer: NodeJS.Timer; + if (copied) { + timer = setTimeout(() => setCopied(false), 1000) + } + return () => { + clearTimeout(timer) + } + }, [copied]) return
- -
+
+
+ +
+
+
+
+ +
+
+
+
+ +
} -export const WithPreview = PreviewTemplate.bind({}); -WithPreview.args = { +export const CanCopy = PreviewTemplate.bind({}); +CanCopy.args = { placeholder: "Start writing something in markdown", initialContent: ` -## heading2 - -#### heading4 - -###### heading6 - -some text with **bold**, _italic,_ underline, [www.link.com](//www.link.com) - -\`code line goes here\` +

Hello there

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

How are you doing ??

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Subheading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

` } \ No newline at end of file diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts index 8e6c79e..7f75f79 100644 --- a/src/utils/hooks/index.ts +++ b/src/utils/hooks/index.ts @@ -4,3 +4,4 @@ export * from "./usePressHolder"; export * from "./useInfiniteQuery"; export * from "./useReachedBottom"; export * from "./useAutoResizableTextArea"; +export * from "./useCopyToClipboard"; diff --git a/src/utils/hooks/useCopyToClipboard.ts b/src/utils/hooks/useCopyToClipboard.ts new file mode 100644 index 0000000..59f4ef2 --- /dev/null +++ b/src/utils/hooks/useCopyToClipboard.ts @@ -0,0 +1,26 @@ + +type CopiedValue = string | null +type CopyFn = (text: string) => Promise // Return success + +function useCopyToClipboard(): CopyFn { + + const copy: CopyFn = async text => { + if (!navigator?.clipboard) { + console.warn('Clipboard not supported') + return false + } + + // Try to save to clipboard then save it in the state if worked + try { + await navigator.clipboard.writeText(text) + return true + } catch (error) { + console.warn('Copy failed', error) + return false + } + } + + return copy +} + +export default useCopyToClipboard