From 5c81dc2a7e4a5f7f99c3bf79e9ec044b9ffae459 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Wed, 20 Apr 2022 10:22:54 +0300 Subject: [PATCH] feat: add the post details routes, added skeleton to trending card --- package-lock.json | 24 ++++++++++ package.json | 2 + src/App.tsx | 2 + .../PostCard/BountyCard/BountyCard.tsx | 3 +- .../PostCard/QuestionCard/QuestionCard.tsx | 4 +- .../PostCard/StoryCard/StoryCard.tsx | 2 +- .../Components/TrendingCard/TrendingCard.tsx | 33 +++++++------ .../PageContent/BountyPageContent.tsx | 24 ++++------ .../Components/PageContent/PageContent.tsx | 9 +--- .../PostDetailsPage.stories.tsx | 10 +++- .../pages/PostDetailsPage/PostDetailsPage.tsx | 32 ++++++++----- src/mocks/data/posts.ts | 9 +++- src/mocks/resolvers.ts | 47 ++----------------- 13 files changed, 103 insertions(+), 98 deletions(-) diff --git a/package-lock.json b/package-lock.json index a46345c..9108dd3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "apollo-server": "^3.5.0", "apollo-server-lambda": "^3.5.0", "axios": "^0.24.0", + "chance": "^1.1.8", "dayjs": "^1.11.1", "env-cmd": "^10.1.0", "framer-motion": "^5.3.0", @@ -68,6 +69,7 @@ "@storybook/node-logger": "^6.3.12", "@storybook/preset-create-react-app": "^3.2.0", "@storybook/react": "^6.3.12", + "@types/chance": "^1.1.3", "@types/lodash.debounce": "^4.0.6", "@types/lodash.throttle": "^4.1.6", "@types/marked": "^4.0.3", @@ -9385,6 +9387,12 @@ "@types/responselike": "*" } }, + "node_modules/@types/chance": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@types/chance/-/chance-1.1.3.tgz", + "integrity": "sha512-X6c6ghhe4/sQh4XzcZWSFaTAUOda38GQHmq9BUanYkOE/EO7ZrkazwKmtsj3xzTjkLWmwULE++23g3d3CCWaWw==", + "dev": true + }, "node_modules/@types/chrome": { "version": "0.0.74", "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.74.tgz", @@ -13368,6 +13376,11 @@ "node": ">=4" } }, + "node_modules/chance": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/chance/-/chance-1.1.8.tgz", + "integrity": "sha512-v7fi5Hj2VbR6dJEGRWLmJBA83LJMS47pkAbmROFxHWd9qmE1esHRZW8Clf1Fhzr3rjxnNZVCjOEv/ivFxeIMtg==" + }, "node_modules/change-case": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", @@ -67850,6 +67863,12 @@ "@types/responselike": "*" } }, + "@types/chance": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@types/chance/-/chance-1.1.3.tgz", + "integrity": "sha512-X6c6ghhe4/sQh4XzcZWSFaTAUOda38GQHmq9BUanYkOE/EO7ZrkazwKmtsj3xzTjkLWmwULE++23g3d3CCWaWw==", + "dev": true + }, "@types/chrome": { "version": "0.0.74", "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.74.tgz", @@ -71111,6 +71130,11 @@ "supports-color": "^5.3.0" } }, + "chance": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/chance/-/chance-1.1.8.tgz", + "integrity": "sha512-v7fi5Hj2VbR6dJEGRWLmJBA83LJMS47pkAbmROFxHWd9qmE1esHRZW8Clf1Fhzr3rjxnNZVCjOEv/ivFxeIMtg==" + }, "change-case": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", diff --git a/package.json b/package.json index cc50442..03dc6de 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "apollo-server": "^3.5.0", "apollo-server-lambda": "^3.5.0", "axios": "^0.24.0", + "chance": "^1.1.8", "dayjs": "^1.11.1", "env-cmd": "^10.1.0", "framer-motion": "^5.3.0", @@ -118,6 +119,7 @@ "@storybook/node-logger": "^6.3.12", "@storybook/preset-create-react-app": "^3.2.0", "@storybook/react": "^6.3.12", + "@types/chance": "^1.1.3", "@types/lodash.debounce": "^4.0.6", "@types/lodash.throttle": "^4.1.6", "@types/marked": "^4.0.3", diff --git a/src/App.tsx b/src/App.tsx index d3559a2..7acbea1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,7 @@ import CategoryPage from "src/features/Projects/pages/CategoryPage/CategoryPage" import { useWrapperSetup } from "./utils/Wrapper"; import HottestPage from "src/features/Projects/pages/HottestPage/HottestPage"; import FeedPage from "./features/Posts/pages/FeedPage/FeedPage"; +import PostDetailsPage from "./features/Posts/pages/PostDetailsPage/PostDetailsPage"; function App() { const { isWalletConnected } = useAppSelector(state => ({ @@ -40,6 +41,7 @@ function App() { } /> } /> + } /> } /> } /> diff --git a/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx b/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx index 6025f6b..ca29f4e 100644 --- a/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx +++ b/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx @@ -30,8 +30,7 @@ export default function BountyCard({ bounty }: Props) {
- - +

Bounty {bounty.title}

diff --git a/src/features/Posts/Components/PostCard/QuestionCard/QuestionCard.tsx b/src/features/Posts/Components/PostCard/QuestionCard/QuestionCard.tsx index bbde38a..62ad74c 100644 --- a/src/features/Posts/Components/PostCard/QuestionCard/QuestionCard.tsx +++ b/src/features/Posts/Components/PostCard/QuestionCard/QuestionCard.tsx @@ -27,7 +27,7 @@ export default function QuestionCard({ question }: Props) {
- +

{question.title}

@@ -59,7 +59,7 @@ export default function QuestionCard({ question }: Props) {
- + See all {question.answers_count} comments
diff --git a/src/features/Posts/Components/PostCard/StoryCard/StoryCard.tsx b/src/features/Posts/Components/PostCard/StoryCard/StoryCard.tsx index fa8a6a5..576669f 100644 --- a/src/features/Posts/Components/PostCard/StoryCard/StoryCard.tsx +++ b/src/features/Posts/Components/PostCard/StoryCard/StoryCard.tsx @@ -25,7 +25,7 @@ export default function StoryCard({ story }: Props) {
- +

{story.title}

{story.excerpt}

diff --git a/src/features/Posts/Components/TrendingCard/TrendingCard.tsx b/src/features/Posts/Components/TrendingCard/TrendingCard.tsx index d48f3d8..913f578 100644 --- a/src/features/Posts/Components/TrendingCard/TrendingCard.tsx +++ b/src/features/Posts/Components/TrendingCard/TrendingCard.tsx @@ -1,32 +1,37 @@ +import Skeleton from 'react-loading-skeleton' import { Link } from 'react-router-dom' import Avatar from 'src/features/Profiles/Components/Avatar/Avatar' import { useTrendingPostsQuery } from 'src/graphql' +import { random } from 'src/utils/helperFunctions' export default function TrendingCard() { const trendingPosts = useTrendingPostsQuery() - if (trendingPosts.loading) - return <> - - console.log(trendingPosts.data?.getTrendingPosts); return (

Trending on BOLT.FUN

    - {trendingPosts.data?.getTrendingPosts.map(post => { - console.log(post); - - return -
  • - -

    {post.title}

    + { + trendingPosts.loading ? + Array(4).fill(0).map((_, idx) =>
  • + +

    +

    • - - } - )} + ) + : + trendingPosts.data?.getTrendingPosts.map(post => { + return +
  • + +

    {post.title}

    +
    • + + } + )}
) diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/BountyPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/BountyPageContent.tsx index 55e6a2a..98baabc 100644 --- a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/BountyPageContent.tsx +++ b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/BountyPageContent.tsx @@ -55,20 +55,16 @@ export default function BountyPageContent({ bounty }: Props) {

Applicants

    -
  • -
    -
    -

    Work Plan

    -

    I will create the widget using nextjs, react and typescript. and also convert it into a npm package.

    -
    -
    • -
  • -
    -
    -

    Work Plan

    -

    I will create the widget using nextjs, react and typescript. and also convert it into a npm package.

    -
    -
    • + {bounty.applications.map(application => +
  • +
    +
    +

    Work Plan

    +

    {application.workplan}

    +
    +
    • + )} +
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.tsx index 3929658..f768f9a 100644 --- a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.tsx +++ b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.tsx @@ -1,16 +1,11 @@ -import Header from "src/features/Posts/Components/PostCard/Header/Header" import { isBounty, isQuestion, isStory, Post } from "src/features/Posts/types" -import { marked } from 'marked'; -import styles from './styles.module.css' -import Badge from "src/Components/Badge/Badge"; -import { BiComment } from "react-icons/bi"; -import { RiFlashlightLine } from "react-icons/ri"; import StoryPageContent from "./StoryPageContent"; import BountyPageContent from "./BountyPageContent"; +import { PostDetailsQuery } from "src/graphql"; interface Props { - post: Post + post: PostDetailsQuery['getPostById'] } export default function PageContent({ post }: Props) { diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.stories.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.stories.tsx index ecd056e..65227f1 100644 --- a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.stories.tsx +++ b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.stories.tsx @@ -1,5 +1,5 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'; - +import { ModifyArgs } from 'src/utils/storybook/utils'; import PostDetailsPage from './PostDetailsPage'; export default { @@ -8,6 +8,14 @@ export default { argTypes: { backgroundColor: { control: 'color' }, }, + parameters: { + modifyArgs: { + router: { + routePath: "/:type/:id", + currentPath: "/Story/1" + } + } as ModifyArgs + } } as ComponentMeta; diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx index 62d177d..1e2c90b 100644 --- a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx +++ b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx @@ -1,8 +1,7 @@ -import { useFeedQuery } from 'src/graphql' -import { MOCK_DATA } from 'src/mocks/data' -import { useAppSelector, useInfiniteQuery } from 'src/utils/hooks' -import PostsList from '../../Components/PostsList/PostsList' +import { useParams } from 'react-router-dom' +import { usePostDetailsQuery } from 'src/graphql' +import { useAppSelector, } from 'src/utils/hooks' import TrendingCard from '../../Components/TrendingCard/TrendingCard' import AuthorCard from './Components/AuthorCard/AuthorCard' import PageContent from './Components/PageContent/PageContent' @@ -12,18 +11,27 @@ import styles from './styles.module.css' export default function PostDetailsPage() { - // const feedQuery = useFeedQuery({ - // variables: { - // take: 10, - // skip: 0 - // }, - // }) - // const { fetchMore, isFetchingMore } = useInfiniteQuery(feedQuery, 'getFeed') - const post = MOCK_DATA.posts.stories[0] + const { type, id } = useParams() + const postDetailsQuery = usePostDetailsQuery({ + variables: { + id: Number(id!), + type: type as any + }, + skip: isNaN(Number(id)) + }) + const { navHeight } = useAppSelector((state) => ({ navHeight: state.ui.navHeight })); + if (postDetailsQuery.loading) + return

Loading

+ + const post = postDetailsQuery.data?.getPostById; + + if (!post) + return

404

+ return (
({ id: 12, name: "John Doe", @@ -102,7 +105,7 @@ export let posts = { author: getAuthor(), deadline: "25 May", reward_amount: 200_000, - applications: getApplications(), + applications: getApplications(2), } ] as Bounty[], @@ -145,8 +148,10 @@ posts.questions = posts.questions.map(b => ({ ...b, __typename: "Question" })) posts.stories = posts.stories.map(b => ({ ...b, __typename: "Story" })) +const feedRandomer = new Chance('feed') + export const feed: Post[] = Array(30).fill(0).map((_, idx) => { - const post = randomItem(posts.bounties[0], posts.questions[0], posts.stories[0]) as Post; + const post = feedRandomer.pickone([posts.bounties[0], posts.questions[0], posts.stories[0]]) return { ...post, id: idx + 1, title: `${post.type} Title ${idx + 1}` } }) diff --git a/src/mocks/resolvers.ts b/src/mocks/resolvers.ts index 9c8ef87..dd97f81 100644 --- a/src/mocks/resolvers.ts +++ b/src/mocks/resolvers.ts @@ -1,6 +1,8 @@ import { MOCK_DATA } from "./data"; import { Post, Query, QueryGetFeedArgs, QueryGetPostByIdArgs } from 'src/graphql' -import { Author } from "src/features/Posts/types"; +import { Chance } from "chance"; + +const chance = new Chance() export function getCategory(id: number) { @@ -55,46 +57,5 @@ export function getPostById(args: QueryGetPostByIdArgs): Query['getPostById'] { } export function getTrendingPosts(): Query['getTrendingPosts'] { - return [ - { - id: 1, - title: 'How to collect donations within lightning network?', - author: { - id: 2, - name: "John Doe", - image: "https://i.pravatar.cc/150?img=2" - } as Author, - __typename: "Question" - }, - { - id: 2, - title: 'How to implement the RSMC part of Lightning network?', - author: { - id: 2, - name: "John Doe", - image: "https://i.pravatar.cc/150?img=2" - } as Author, - __typename: "Question" - }, - { - id: 3, - title: 'c-lightning public node data on explorers', - author: { - id: 2, - name: "John Doe", - image: "https://i.pravatar.cc/150?img=2" - } as Author, - __typename: "Story" - }, - { - id: 4, - title: 'How to find all nodes and connections in LN?', - author: { - id: 2, - name: "John Doe", - image: "https://i.pravatar.cc/150?img=2" - } as Author, - __typename: "Question" - }, - ] as Post[]; + return chance.pickset(MOCK_DATA.feed, 5); } \ No newline at end of file