From 455ceaa3102d8565ec894e019ca94dd7f72a4645 Mon Sep 17 00:00:00 2001 From: vidvidvid Date: Mon, 24 Jan 2022 13:51:11 +0100 Subject: [PATCH] feat: completed quests section --- .../Player/Section/PlayerCompletedQuests.tsx | 54 +++++++++++++++++ .../web/components/Player/Section/config.ts | 2 + .../web/components/Profile/PlayerSection.tsx | 10 ++++ packages/web/graphql/getQuests.ts | 58 +++++++++++++++---- packages/web/utils/boxTypes.ts | 1 + 5 files changed, 113 insertions(+), 12 deletions(-) create mode 100644 packages/web/components/Player/Section/PlayerCompletedQuests.tsx diff --git a/packages/web/components/Player/Section/PlayerCompletedQuests.tsx b/packages/web/components/Player/Section/PlayerCompletedQuests.tsx new file mode 100644 index 00000000..96fdddee --- /dev/null +++ b/packages/web/components/Player/Section/PlayerCompletedQuests.tsx @@ -0,0 +1,54 @@ +import { Text } from '@metafam/ds'; +import { ProfileSection } from 'components/Profile/ProfileSection'; +import { + PlayerFragmentFragment, + QuestCompletionFragmentFragment, +} from 'graphql/autogen/types'; +import { getAcceptedQuestsByPlayerQuery } from 'graphql/getQuests'; +import React, { useEffect, useState } from 'react'; +import { BoxType } from 'utils/boxTypes'; + +// TODO Fake data +type Props = { + player: PlayerFragmentFragment; + isOwnProfile?: boolean; + canEdit?: boolean; + onRemoveClick?: () => void; +}; + +export const PlayerCompletedQuests: React.FC = ({ + player, + isOwnProfile, + canEdit, + onRemoveClick, +}) => { + const [quests, setQuests] = useState>( + [], + ); + + useEffect(() => { + const loadQuests = async () => { + const response = await getAcceptedQuestsByPlayerQuery(player?.id); + if (response.length) { + setQuests(response); + } + }; + loadQuests(); + }, [player?.id]); + + return ( + + {quests.map((quest, i) => ( + + {`${i + 1}. Submission text: ${quest.submission_text}`} + + ))} + + ); +}; diff --git a/packages/web/components/Player/Section/config.ts b/packages/web/components/Player/Section/config.ts index 1fafc363..6a2dbb68 100644 --- a/packages/web/components/Player/Section/config.ts +++ b/packages/web/components/Player/Section/config.ts @@ -12,6 +12,7 @@ export const ALL_BOXES = [ BoxType.PLAYER_DAO_MEMBERSHIPS, BoxType.PLAYER_ROLES, BoxType.EMBEDDED_URL, + BoxType.PLAYER_COMPLETED_QUESTS, // BoxType.PLAYER_ACHIEVEMENTS, // TODO: Add more types of sections ]; @@ -25,6 +26,7 @@ export const DEFAULT_BOXES = [ BoxType.PLAYER_TYPE, BoxType.PLAYER_NFT_GALLERY, BoxType.PLAYER_DAO_MEMBERSHIPS, + BoxType.PLAYER_COMPLETED_QUESTS, ]; export type LayoutMetadata = { diff --git a/packages/web/components/Profile/PlayerSection.tsx b/packages/web/components/Profile/PlayerSection.tsx index 93045932..f1371d6d 100644 --- a/packages/web/components/Profile/PlayerSection.tsx +++ b/packages/web/components/Profile/PlayerSection.tsx @@ -1,5 +1,6 @@ import { PlayerAchievements } from 'components/Player/Section/PlayerAchievements'; import { PlayerColorDisposition } from 'components/Player/Section/PlayerColorDisposition'; +import { PlayerCompletedQuests } from 'components/Player/Section/PlayerCompletedQuests'; import { PlayerGallery } from 'components/Player/Section/PlayerGallery'; import { PlayerHero } from 'components/Player/Section/PlayerHero'; import { PlayerMemberships } from 'components/Player/Section/PlayerMemberships'; @@ -100,6 +101,15 @@ export const PlayerSection: React.FC = ({ onRemoveClick={() => removeBox?.(boxKey)} /> ); + case BoxType.PLAYER_COMPLETED_QUESTS: + return ( + removeBox?.(boxKey)} + /> + ); case BoxType.EMBEDDED_URL: { const url = boxMetadata?.url as string; return url ? ( diff --git a/packages/web/graphql/getQuests.ts b/packages/web/graphql/getQuests.ts index 0c9a9c20..d09ef610 100644 --- a/packages/web/graphql/getQuests.ts +++ b/packages/web/graphql/getQuests.ts @@ -2,6 +2,9 @@ import gql from 'fake-tag'; import { Client } from 'urql'; import { + GetAcceptedQuestsByPlayerDocument, + GetAcceptedQuestsByPlayerQuery, + GetAcceptedQuestsByPlayerQueryVariables, GetQuestIdsDocument, GetQuestIdsQuery, GetQuestIdsQueryVariables, @@ -12,7 +15,7 @@ import { QuestStatus_Enum, } from './autogen/types'; import { client as defaultClient } from './client'; -import { QuestFragment } from './fragments'; +import { QuestFragment, QuestWithCompletionFragment } from './fragments'; // eslint-disable-next-line @typescript-eslint/no-unused-expressions gql` @@ -50,6 +53,21 @@ gql` ${QuestFragment} `; +// eslint-disable-next-line @typescript-eslint/no-unused-expressions +gql` + query GetAcceptedQuestsByPlayer( + $completed_by_player_id: uuid + $order: order_by + ) { + quest_completion( + order_by: { submitted_at: $order } + where: { completed_by_player_id: { _eq: $completed_by_player_id } } + ) { + ...QuestCompletionFragment + } + } +`; + // eslint-disable-next-line @typescript-eslint/no-unused-expressions gql` query GetQuestGuilds { @@ -64,17 +82,6 @@ gql` } `; -// eslint-disable-next-line @typescript-eslint/no-unused-expressions -gql` - query GetQuestsByRoles($roles: [String!]) { - quest(where: { quest_roles: { role: { _in: $roles } } }) { - title - id - description - } - } -`; - export const defaultQueryVariables: GetQuestsQueryVariables = { limit: 10, status: QuestStatus_Enum.Open, @@ -107,6 +114,7 @@ export const getQuests = async ( ) .toPromise(); + console.log('data', data); if (!data) { if (error) { throw error; @@ -117,3 +125,29 @@ export const getQuests = async ( return data.quest; }; + +export const getAcceptedQuestsByPlayerQuery = async ( + playerId: any, + order: Order_By = Order_By.Desc, + client: Client = defaultClient, +) => { + const { data, error } = await client + .query< + GetAcceptedQuestsByPlayerQuery, + GetAcceptedQuestsByPlayerQueryVariables + >(GetAcceptedQuestsByPlayerDocument, { + order, + completed_by_player_id: playerId, + }) + .toPromise(); + + if (!data) { + if (error) { + throw error; + } + + return []; + } + + return data.quest_completion; +}; diff --git a/packages/web/utils/boxTypes.ts b/packages/web/utils/boxTypes.ts index 73fa0f86..56e334ac 100644 --- a/packages/web/utils/boxTypes.ts +++ b/packages/web/utils/boxTypes.ts @@ -10,6 +10,7 @@ export enum BoxType { PLAYER_TYPE = 'player-type', PLAYER_COLOR_DISPOSITION = 'player-color-disposition', PLAYER_ROLES = 'player-roles', + PLAYER_COMPLETED_QUESTS = 'player-completed-quests', PLAYER_ADD_BOX = 'player-add-box', // Guild Profile Boxes GUILD_SKILLS = 'guild-skills',