-
-
+
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) {
;
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
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) {
-
+
@@ -59,7 +59,7 @@ export default function QuestionCard({ question }: Props) {
{question.title}
-
+
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}
+
+
+ }
+ )}
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}
+
+ )}
+
Loading
+ + const post = postDetailsQuery.data?.getPostById; + + if (!post) + return404
+ 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