feat: completed quests section

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<Props> = ({
+  player,
+  isOwnProfile,
+  canEdit,
+  onRemoveClick,
+}) => {
+  const [quests, setQuests] = useState<Array<QuestCompletionFragmentFragment>>(
+    [],
+  );
+
+  useEffect(() => {
+    const loadQuests = async () => {
+      const response = await getAcceptedQuestsByPlayerQuery(player?.id);
+      if (response.length) {
+        setQuests(response);
+      }
+    };
+    loadQuests();
+  }, [player?.id]);
+
+  return (
+    <ProfileSection
+      title="Completed Quests"
+      onRemoveClick={onRemoveClick}
+      isOwnProfile={isOwnProfile}
+      canEdit={canEdit}
+      boxType={BoxType.PLAYER_ACHIEVEMENTS}
+    >
+      {quests.map((quest, i) => (
+        <Text as="span" fontSize="xs">
+          {`${i + 1}. Submission text: ${quest.submission_text}`}
+        </Text>
+      ))}
+    </ProfileSection>
+  );
+};

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 = {

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<Props> = ({
           onRemoveClick={() => removeBox?.(boxKey)}
         />
       );
+    case BoxType.PLAYER_COMPLETED_QUESTS:
+      return (
+        <PlayerCompletedQuests
+          player={player}
+          isOwnProfile={isOwnProfile}
+          canEdit={canEdit}
+          onRemoveClick={() => removeBox?.(boxKey)}
+        />
+      );
     case BoxType.EMBEDDED_URL: {
       const url = boxMetadata?.url as string;
       return url ? (

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;
+};

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',