From b2ba2f2cb9398ec6c59b541fe919d38d97ebdb62 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Sun, 2 Oct 2022 10:13:54 +0300 Subject: [PATCH] feat: add stories templates --- .../DraftsContainer/DraftsContainer.tsx | 7 +- .../TemplatesCard/TemplatesCard.tsx | 94 +++++++++++++++++++ .../CreateStoryPage/CreateStoryPage.tsx | 7 +- .../CreateStoryPage/styles.module.scss | 5 + 4 files changed, 108 insertions(+), 5 deletions(-) create mode 100644 src/features/Posts/pages/CreatePostPage/Components/TemplatesCard/TemplatesCard.tsx diff --git a/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftsContainer.tsx b/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftsContainer.tsx index 6ba29a8..9135853 100644 --- a/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftsContainer.tsx +++ b/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftsContainer.tsx @@ -2,6 +2,7 @@ import { createAction } from '@reduxjs/toolkit'; import React, { useCallback, useState } from 'react' import { useFormContext } from 'react-hook-form'; import Button from 'src/Components/Button/Button'; +import Card from 'src/Components/Card/Card'; import LoadingPage from 'src/Components/LoadingPage/LoadingPage'; import { isStory } from 'src/features/Posts/types'; import { Post_Type, useDeleteStoryMutation, useGetMyDraftsQuery, usePostDetailsLazyQuery } from 'src/graphql' @@ -95,11 +96,11 @@ export default function DraftsContainer({ id, type, onDraftLoad }: Props) {
{(!myDraftsQuery.loading && myDraftsQuery.data?.getMyDrafts && myDraftsQuery.data.getMyDrafts.length > 0) && -
+

Saved Drafts

    {myDraftsQuery.data.getMyDrafts.map(draft => -
  • +

    • )}
-
} + } {loading && }
) diff --git a/src/features/Posts/pages/CreatePostPage/Components/TemplatesCard/TemplatesCard.tsx b/src/features/Posts/pages/CreatePostPage/Components/TemplatesCard/TemplatesCard.tsx new file mode 100644 index 0000000..db8c95c --- /dev/null +++ b/src/features/Posts/pages/CreatePostPage/Components/TemplatesCard/TemplatesCard.tsx @@ -0,0 +1,94 @@ +import React from 'react' +import { useFormContext } from 'react-hook-form'; +import Card from 'src/Components/Card/Card' +import { IStoryFormInputs } from '../../CreateStoryPage/CreateStoryPage'; + +export default function TemplatesCard() { + + + const { formState: { isDirty }, reset } = useFormContext(); + + const clickTemplate = (template: typeof templates[number]) => { + if (!isDirty || window.confirm("Your current unsaved changes will be lost, are you sure you want to continue?")) { + reset({ + id: -1 * Math.random(), + is_published: false, + title: template.value.title, + body: template.value.body, + }) + } + } + + return ( + +

Story templates

+
    + {templates.map(template => +
  • +

    clickTemplate(template)} + > + {template.title} +

    +

    {template.description}

    +
    • )} +
+ + ) +} + + +const templates = [{ + id: 1, + title: "👋 Maker intro", + description: "Tell the community about yourself", + value: { + title: "Hello!! I'm [Your Name]", + body: + `### Who am I? +I'm a [Your age] years old [Your job] who have been working on this field for [Years of experience] years. + +### What I love? +I usually like to [Your hobby] and I also love to participate in [Some activity you like] + +### Why I joined this community? +The main reason is because [Reason for joining]` + }, +}, +{ + id: 2, + title: "🚀 Product launch / update", + description: "Launch your product with a story", + value: { + title: "[Your product's name] is Live now!!", + body: + `### What is [Your product]?? +Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam doloremque eaque natus aperiam voluptas obcaecati qui dolores molestiae incidunt perspiciatis sed, illo odit. Voluptatum qui fugit quidem inventore illum veritatis. + +### Another question goes here +Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempore quia et dolore accusantium blanditiis odio, ab nihil. Expedita animi labore voluptates, officiis tenetur totam? + +### A final thing in mind +Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias magnam doloremque quisquam dolore odio sit atque incidunt esse vel dolor laboriosam a, laudantium ut quia fuga placeat non maiores. Odio unde harum autem commodi, tempora corporis consequuntur? Aliquam, quaerat ex.` + }, +}, +{ + id: 3, + title: "🚦 My weekly PPPs", + description: "Let others know about your recent activity", + value: { + title: "My weekly PPP on [Product's name]", + body: + `### What did I do this week? +Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam doloremque eaque natus aperiam voluptas obcaecati qui dolores molestiae incidunt perspiciatis sed, illo odit. Voluptatum qui fugit quidem inventore illum veritatis. + +### What challenges have I faced? +Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore tempore quia et dolore accusantium blanditiis odio, ab nihil. Expedita animi labore voluptates, officiis tenetur totam? + +### What important lessons did I learn? +Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias magnam doloremque quisquam dolore odio sit atque incidunt esse vel dolor laboriosam a, laudantium ut quia fuga placeat non maiores. Odio unde harum autem commodi, tempora corporis consequuntur? Aliquam, quaerat ex.` + }, +} +] \ No newline at end of file diff --git a/src/features/Posts/pages/CreatePostPage/CreateStoryPage/CreateStoryPage.tsx b/src/features/Posts/pages/CreatePostPage/CreateStoryPage/CreateStoryPage.tsx index 1db1541..13237c5 100644 --- a/src/features/Posts/pages/CreatePostPage/CreateStoryPage/CreateStoryPage.tsx +++ b/src/features/Posts/pages/CreatePostPage/CreateStoryPage/CreateStoryPage.tsx @@ -13,16 +13,17 @@ import * as yup from "yup"; import DraftsContainer from "../Components/DraftsContainer/DraftsContainer"; import ErrorsContainer from "../Components/ErrorsContainer/ErrorsContainer"; import StoryForm from "../Components/StoryForm/StoryForm"; +import TemplatesCard from "../Components/TemplatesCard/TemplatesCard"; import styles from './styles.module.scss' const schema = yup.object({ + id: yup.number().transform(v => v <= 0 ? undefined : v).nullable(), title: yup.string().trim().required().min(10, 'Story title must be 2+ words').transform(v => v.replace(/(\r\n|\n|\r)/gm, "")), tags: yup.array().of(tagSchema).required().min(1, 'Add at least one tag'), body: yup.string().required("Write some content in the post").min(50, 'Post must contain at least 10+ words'), cover_image: imageSchema.nullable(true), - }).required(); @@ -86,7 +87,9 @@ function CreateStoryPage() { /> - +
+ +
diff --git a/src/features/Posts/pages/CreatePostPage/CreateStoryPage/styles.module.scss b/src/features/Posts/pages/CreatePostPage/CreateStoryPage/styles.module.scss index dd1d3a0..5c39311 100644 --- a/src/features/Posts/pages/CreatePostPage/CreateStoryPage/styles.module.scss +++ b/src/features/Posts/pages/CreatePostPage/CreateStoryPage/styles.module.scss @@ -16,6 +16,7 @@ "errors" "preview-switch" "form" + "templates" "drafts"; :global { @@ -31,6 +32,9 @@ #drafts { grid-area: drafts; } + #templates { + grid-area: templates; + } } @include gt-xl { @@ -40,6 +44,7 @@ grid-template-areas: "preview-switch preview-switch" "form errors" + "form templates" "form drafts" "form .";