From 11594471d3f50ca8cc3ae319362e239a6ce9fed8 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Mon, 18 Apr 2022 18:12:06 +0300 Subject: [PATCH] fix: fixing a bug with graphql data shape --- functions/graphql/nexus-typegen.ts | 9 - functions/graphql/schema.graphql | 5 +- functions/graphql/types/post.js | 198 +++++++++++++++++- src/App.tsx | 4 +- .../Posts/pages/FeedPage/FeedPage.tsx | 2 +- .../Posts/pages/FeedPage/feed.graphql | 3 - .../pages/PostDetailsPage/postDetails.graphql | 3 - src/graphql/index.tsx | 13 +- src/mocks/data/posts.ts | 101 ++++++++- src/utils/apollo.ts | 2 + src/utils/hooks/useInfiniteQuery.ts | 1 - 11 files changed, 298 insertions(+), 43 deletions(-) diff --git a/functions/graphql/nexus-typegen.ts b/functions/graphql/nexus-typegen.ts index 64c5bb2..6247005 100644 --- a/functions/graphql/nexus-typegen.ts +++ b/functions/graphql/nexus-typegen.ts @@ -83,12 +83,9 @@ export interface NexusGenObjects { answers_count: number; // Int! author: NexusGenRootTypes['User']; // User! comments: NexusGenRootTypes['PostComment'][]; // [PostComment!]! - cover_image: string; // String! date: string; // String! - deadline: string; // String! excerpt: string; // String! id: number; // Int! - reward_amount: number; // Int! tags: NexusGenRootTypes['Tag'][]; // [Tag!]! title: string; // String! votes_count: number; // Int! @@ -213,12 +210,9 @@ export interface NexusGenFieldTypes { answers_count: number; // Int! author: NexusGenRootTypes['User']; // User! comments: NexusGenRootTypes['PostComment'][]; // [PostComment!]! - cover_image: string; // String! date: string; // String! - deadline: string; // String! excerpt: string; // String! id: number; // Int! - reward_amount: number; // Int! tags: NexusGenRootTypes['Tag'][]; // [Tag!]! title: string; // String! type: string; // String! @@ -344,12 +338,9 @@ export interface NexusGenFieldTypeNames { answers_count: 'Int' author: 'User' comments: 'PostComment' - cover_image: 'String' date: 'String' - deadline: 'String' excerpt: 'String' id: 'Int' - reward_amount: 'Int' tags: 'Tag' title: 'String' type: 'String' diff --git a/functions/graphql/schema.graphql b/functions/graphql/schema.graphql index 71c6dde..8f250dc 100644 --- a/functions/graphql/schema.graphql +++ b/functions/graphql/schema.graphql @@ -86,7 +86,7 @@ type Query { allCategories: [Category!]! allProjects(skip: Int = 0, take: Int = 50): [Project!]! getCategory(id: Int!): Category! - getFeed(skip: Int = 0, take: Int = 15): [Post!]! + getFeed(skip: Int = 0, take: Int = 5): [Post!]! getLnurlDetailsForProject(project_id: Int!): LnurlDetails! getPostById(id: Int!): Post! getProject(id: Int!): Project! @@ -100,12 +100,9 @@ type Question implements PostBase { answers_count: Int! author: User! comments: [PostComment!]! - cover_image: String! date: String! - deadline: String! excerpt: String! id: Int! - reward_amount: Int! tags: [Tag!]! title: String! type: String! diff --git a/functions/graphql/types/post.js b/functions/graphql/types/post.js index 06020f6..a5dcbc2 100644 --- a/functions/graphql/types/post.js +++ b/functions/graphql/types/post.js @@ -66,9 +66,6 @@ const Question = objectType({ resolve: () => 'Question', }); - t.nonNull.string('cover_image'); - t.nonNull.string('deadline'); - t.nonNull.int('reward_amount'); t.nonNull.int('answers_count'); t.nonNull.list.nonNull.field('comments', { type: "PostComment" @@ -96,7 +93,193 @@ const Post = unionType({ resolveType: (item) => item.type, }) +let coverImgsCntr = -1; +function getCoverImage() { + const coverImgs = [ + 'https://picsum.photos/id/10/1660/1200', + 'https://picsum.photos/id/1000/1660/1200', + 'https://picsum.photos/id/1002/1660/1200', + 'https://picsum.photos/id/1008/1660/1200', + ] + return coverImgs[(++coverImgsCntr) % coverImgs.length] +} +let avatarImgsCntr = -1; + +function getAvatarImage() { + const avatarImgs = [ + 'https://i.pravatar.cc/150?img=1', + 'https://i.pravatar.cc/150?img=2', + 'https://i.pravatar.cc/150?img=3', + 'https://i.pravatar.cc/150?img=4', + ] + + return avatarImgs[(++avatarImgsCntr) % avatarImgs.length] +} +const getAuthor = () => ({ + id: 12, + name: "John Doe", + image: getAvatarImage() +}) +const date = new Date().toString() +const posts = { + stories: [ + { + id: 4, + title: 'Digital Editor, Mars Review of Books', + cover_image: getCoverImage(), + comments_count: 31, + date, + votes_count: 120, + excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...', + type: "Story", + tags: [ + { id: 1, title: "lnurl" }, + { id: 2, title: "webln" }, + { id: 3, title: "guide" }, + ], + author: getAuthor() + }, + { + id: 14, + title: 'Digital Editor, Mars Review of Books', + cover_image: getCoverImage(), + comments_count: 31, + date, + votes_count: 120, + excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...', + type: "Story", + tags: [ + { id: 1, title: "lnurl" }, + { id: 2, title: "webln" }, + { id: 3, title: "guide" }, + ], + author: getAuthor() + }, + { + id: 44, + title: 'Digital Editor, Mars Review of Books', + cover_image: getCoverImage(), + comments_count: 31, + date, + votes_count: 120, + excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...', + type: "Story", + tags: [ + { id: 1, title: "lnurl" }, + { id: 2, title: "webln" }, + { id: 3, title: "guide" }, + ], + author: getAuthor() + } + ], + bounties: [ + { + type: "Bounty", + id: 22, + title: 'Digital Editor, Mars Review of Books', + cover_image: getCoverImage(), + applicants_count: 31, + date, + votes_count: 120, + excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...', + tags: [ + { id: 1, title: "lnurl" }, + { id: 2, title: "webln" }, + { id: 3, title: "guide" }, + ], + author: getAuthor(), + deadline: "25 May", + reward_amount: 200_000, + } + ], + questions: [ + { + type: "Question", + id: 33, + title: 'Digital Editor, Mars Review of Books', + answers_count: 31, + date, + votes_count: 70, + excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...', + tags: [ + { id: 1, title: "lnurl" }, + { id: 2, title: "webln" }, + ], + author: getAuthor(), + comments: [ + { + id: 1, + author: getAuthor(), + date, + body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!' + }, + { + id: 2, + author: getAuthor(), + date, + body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!' + }, + ] + }, + { + type: "Question", + id: 233, + title: 'Digital Editor, Mars Review of Books', + answers_count: 31, + date, + votes_count: 70, + excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...', + tags: [ + { id: 1, title: "lnurl" }, + { id: 2, title: "webln" }, + ], + author: getAuthor(), + comments: [ + { + id: 1, + author: getAuthor(), + date, + body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!' + }, + { + id: 2, + author: getAuthor(), + date, + body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!' + }, + ] + }, + { + type: "Question", + id: 133, + title: 'Digital Editor, Mars Review of Books', + answers_count: 31, + date, + votes_count: 70, + excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...', + tags: [ + { id: 1, title: "lnurl" }, + { id: 2, title: "webln" }, + ], + author: getAuthor(), + comments: [ + { + id: 1, + author: getAuthor(), + date, + body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!' + }, + { + id: 2, + author: getAuthor(), + date, + body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!' + }, + ] + } + ] +} const getFeed = extendType({ type: "Query", @@ -104,10 +287,15 @@ const getFeed = extendType({ t.nonNull.list.nonNull.field('getFeed', { type: "Post", args: { - ...paginationArgs({ take: 15 }) + ...paginationArgs({ take: 5 }) }, resolve(_, { take, skip }) { - return [] + const feed = [ + ...posts.bounties, + ...posts.stories, + ...posts.questions, + ] + return feed.slice(skip, skip + take); } }) } diff --git a/src/App.tsx b/src/App.tsx index e428027..4ef47b2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,7 @@ import { Route, Routes } from "react-router-dom"; 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"; function App() { const { isWalletConnected } = useAppSelector(state => ({ @@ -39,7 +40,8 @@ function App() { } /> } /> - } /> + {/* } /> */} + } /> ; diff --git a/src/features/Posts/pages/FeedPage/FeedPage.tsx b/src/features/Posts/pages/FeedPage/FeedPage.tsx index c72d99d..9daaa43 100644 --- a/src/features/Posts/pages/FeedPage/FeedPage.tsx +++ b/src/features/Posts/pages/FeedPage/FeedPage.tsx @@ -14,7 +14,7 @@ export default function FeedPage() { variables: { take: 10, skip: 0 - } + }, }) const { fetchMore, isFetchingMore } = useInfiniteQuery(feedQuery, 'getFeed') diff --git a/src/features/Posts/pages/FeedPage/feed.graphql b/src/features/Posts/pages/FeedPage/feed.graphql index 5bdbfa7..92f2ac4 100644 --- a/src/features/Posts/pages/FeedPage/feed.graphql +++ b/src/features/Posts/pages/FeedPage/feed.graphql @@ -56,9 +56,6 @@ query Feed($skip: Int, $take: Int) { } votes_count type - cover_image - deadline - reward_amount answers_count comments { id diff --git a/src/features/Posts/pages/PostDetailsPage/postDetails.graphql b/src/features/Posts/pages/PostDetailsPage/postDetails.graphql index db4ee2d..c508102 100644 --- a/src/features/Posts/pages/PostDetailsPage/postDetails.graphql +++ b/src/features/Posts/pages/PostDetailsPage/postDetails.graphql @@ -56,9 +56,6 @@ query PostDetails($postId: Int!) { } votes_count type - cover_image - deadline - reward_amount answers_count comments { id diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx index faff981..89e2e0a 100644 --- a/src/graphql/index.tsx +++ b/src/graphql/index.tsx @@ -192,12 +192,9 @@ export type Question = PostBase & { answers_count: Scalars['Int']; author: User; comments: Array; - cover_image: Scalars['String']; date: Scalars['String']; - deadline: Scalars['String']; excerpt: Scalars['String']; id: Scalars['Int']; - reward_amount: Scalars['Int']; tags: Array; title: Scalars['String']; type: Scalars['String']; @@ -260,14 +257,14 @@ export type FeedQueryVariables = Exact<{ }>; -export type FeedQuery = { __typename?: 'Query', getFeed: Array<{ __typename?: 'Bounty', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, deadline: string, reward_amount: number, applicants_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } | { __typename?: 'Question', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, deadline: string, reward_amount: number, answers_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, comments: Array<{ __typename?: 'PostComment', id: number, date: string, body: string, author: { __typename?: 'User', id: number, name: string, image: string } }> } | { __typename?: 'Story', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, comments_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> }> }; +export type FeedQuery = { __typename?: 'Query', getFeed: Array<{ __typename?: 'Bounty', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, deadline: string, reward_amount: number, applicants_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } | { __typename?: 'Question', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, answers_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, comments: Array<{ __typename?: 'PostComment', id: number, date: string, body: string, author: { __typename?: 'User', id: number, name: string, image: string } }> } | { __typename?: 'Story', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, comments_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> }> }; export type PostDetailsQueryVariables = Exact<{ postId: Scalars['Int']; }>; -export type PostDetailsQuery = { __typename?: 'Query', getPostById: { __typename?: 'Bounty', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, deadline: string, reward_amount: number, applicants_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } | { __typename?: 'Question', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, deadline: string, reward_amount: number, answers_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, comments: Array<{ __typename?: 'PostComment', id: number, date: string, body: string, author: { __typename?: 'User', id: number, name: string, image: string } }> } | { __typename?: 'Story', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, comments_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } }; +export type PostDetailsQuery = { __typename?: 'Query', getPostById: { __typename?: 'Bounty', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, deadline: string, reward_amount: number, applicants_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } | { __typename?: 'Question', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, answers_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, comments: Array<{ __typename?: 'PostComment', id: number, date: string, body: string, author: { __typename?: 'User', id: number, name: string, image: string } }> } | { __typename?: 'Story', id: number, title: string, date: string, excerpt: string, votes_count: number, type: string, cover_image: string, comments_count: number, author: { __typename?: 'User', id: number, name: string, image: string }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } }; export type CategoryPageQueryVariables = Exact<{ categoryId: Scalars['Int']; @@ -452,9 +449,6 @@ export const FeedDocument = gql` } votes_count type - cover_image - deadline - reward_amount answers_count comments { id @@ -558,9 +552,6 @@ export const PostDetailsDocument = gql` } votes_count type - cover_image - deadline - reward_amount answers_count comments { id diff --git a/src/mocks/data/posts.ts b/src/mocks/data/posts.ts index 0157339..2aeab4e 100644 --- a/src/mocks/data/posts.ts +++ b/src/mocks/data/posts.ts @@ -1,6 +1,7 @@ import dayjs from "dayjs"; import { Bounty, Post, Question, Story } from "src/features/Posts/types"; +import { randomItem } from "src/utils/helperFunctions"; import { getAvatarImage, getCoverImage } from "./utils"; const getAuthor = () => ({ @@ -28,12 +29,44 @@ export let posts = { { id: 3, title: "guide" }, ], author: getAuthor() + }, + { + id: 14, + title: 'Digital Editor, Mars Review of Books', + cover_image: getCoverImage(), + comments_count: 31, + date, + votes_count: 120, + excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...', + type: "Story", + tags: [ + { id: 1, title: "lnurl" }, + { id: 2, title: "webln" }, + { id: 3, title: "guide" }, + ], + author: getAuthor() + }, + { + id: 44, + title: 'Digital Editor, Mars Review of Books', + cover_image: getCoverImage(), + comments_count: 31, + date, + votes_count: 120, + excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...', + type: "Story", + tags: [ + { id: 1, title: "lnurl" }, + { id: 2, title: "webln" }, + { id: 3, title: "guide" }, + ], + author: getAuthor() } ] as Story[], bounties: [ { type: "Bounty", - id: 2, + id: 22, title: 'Digital Editor, Mars Review of Books', cover_image: getCoverImage(), applicants_count: 31, @@ -53,7 +86,63 @@ export let posts = { questions: [ { type: "Question", - id: 3, + id: 33, + title: 'Digital Editor, Mars Review of Books', + answers_count: 31, + date, + votes_count: 70, + excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...', + tags: [ + { id: 1, title: "lnurl" }, + { id: 2, title: "webln" }, + ], + author: getAuthor(), + comments: [ + { + id: 1, + author: getAuthor(), + date, + body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!' + }, + { + id: 2, + author: getAuthor(), + date, + body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!' + }, + ] + }, + { + type: "Question", + id: 233, + title: 'Digital Editor, Mars Review of Books', + answers_count: 31, + date, + votes_count: 70, + excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...', + tags: [ + { id: 1, title: "lnurl" }, + { id: 2, title: "webln" }, + ], + author: getAuthor(), + comments: [ + { + id: 1, + author: getAuthor(), + date, + body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!' + }, + { + id: 2, + author: getAuthor(), + date, + body: 'Naw, I’m 42 and know people who started in their 50’s, you got this!' + }, + ] + }, + { + type: "Question", + id: 133, title: 'Digital Editor, Mars Review of Books', answers_count: 31, date, @@ -87,7 +176,9 @@ posts.bounties = posts.bounties.map(b => ({ ...b, __typename: "Bounty" })) posts.questions = posts.questions.map(b => ({ ...b, __typename: "Question" })) posts.stories = posts.stories.map(b => ({ ...b, __typename: "Story" })) -export const feed: Post[] = Array(30).fill(0).map((_, idx) => { - return { ...posts.stories[0], id: idx + 1, title: `Post Title ${idx + 1}` } -}) +export const feed: Post[] = Array(30).fill(0).map((_, idx) => { + const post = randomItem(posts.bounties[0], posts.questions[0], posts.stories[0]) as Post; + + return { ...post, id: idx + 1, title: `${post.type} Title ${idx + 1}` } +}) diff --git a/src/utils/apollo.ts b/src/utils/apollo.ts index 7d7cc47..9cd5c6a 100644 --- a/src/utils/apollo.ts +++ b/src/utils/apollo.ts @@ -40,6 +40,7 @@ const retryLink = new RetryLink({ export const apolloClient = new ApolloClient({ + connectToDevTools: true, link: from([ retryLink, errorLink, @@ -65,6 +66,7 @@ function offsetLimitPagination( keyArgs, merge(existing, incoming, { args }) { const merged = existing ? existing.slice(0) : []; + if (args) { // Assume an skip of 0 if args.skip omitted. const { skip = 0 } = args; diff --git a/src/utils/hooks/useInfiniteQuery.ts b/src/utils/hooks/useInfiniteQuery.ts index d3f9cb9..5a1f0ba 100644 --- a/src/utils/hooks/useInfiniteQuery.ts +++ b/src/utils/hooks/useInfiniteQuery.ts @@ -10,7 +10,6 @@ export const useInfiniteQuery = (query: QueryResult, dataField: string) => { () => { if (!fetchingMore && !reachedLastPage) { setFetchingMore(true); - // console.log(feedQuery.variables?.skip); query.fetchMore({ variables: {