Merge pull request #418 from 1Hive/played-created-filters

Played created filters

packages/react-app/src/components/filter.tsx

@@ -5,6 +5,7 @@ import { QuestStatus } from 'src/enums/quest-status.enum';
 import { ThemeInterface } from 'src/styles/theme';
 import { GUpx } from 'src/utils/style.util';
 import styled, { css } from 'styled-components';
+import { QuestPlayStatus } from 'src/enums/quest-play-status.enum';
 import { DEFAULT_FILTER } from '../constants';
 import DateFieldInput from './field-input/date-field-input';
 import { FieldInput } from './field-input/field-input';
@@ -79,7 +80,11 @@ type Props = {
 };
 
 const QuestStatusOptions = [QuestStatus.Active, QuestStatus.Expired, QuestStatus.All];
-
+const QuestPlayStatusOptions = [
+  QuestPlayStatus.All,
+  QuestPlayStatus.Played,
+  QuestPlayStatus.Unplayed,
+];
 export function Filter({ compact }: Props) {
   const { filter, setFilter, toggleFilter } = useFilterContext();
   const theme = useTheme();
@@ -152,6 +157,23 @@ export function Filter({ compact }: Props) {
               compact={compact}
             />
           </FieldInput>
+          <FieldInput
+            label={!compact ? 'Play Status' : ''}
+            wide={isSmallResolution}
+            id="filterPlayStatus"
+          >
+            <StatusDropdownStyled
+              id="filterPlayStatus"
+              items={QuestPlayStatusOptions}
+              borderColor={theme.border}
+              selected={QuestPlayStatusOptions.indexOf(filter.playStatus)}
+              onChange={(i: number) =>
+                setFilter({ ...filter, playStatus: QuestPlayStatusOptions[i] })
+              }
+              wide
+              compact={compact}
+            />
+          </FieldInput>
           <ButtonLineStyled isSmallResolution={isSmallResolution}>
             <Button
               label="Reset"

packages/react-app/src/components/views/quest-list.tsx

@@ -20,6 +20,7 @@ import { getNetwork } from 'src/networks';
 import { Pages } from 'src/enums/pages.enum';
 import { TransactionStatus } from 'src/enums/transaction-status.enum';
 import { QuestStatus } from 'src/enums/quest-status.enum';
+import { useWallet } from 'src/contexts/wallet.context';
 import { useFilterContext } from '../../contexts/filter.context';
 import { Outset } from '../utils/spacer-util';
 import MainView from '../main-view';
@@ -74,6 +75,7 @@ const ScrollLabelStyled = styled.div`
 `;
 
 export default function QuestList() {
+  const { walletAddress, walletConnected } = useWallet();
   const [quests, setQuests] = useState<QuestModel[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [newQuestLoading, setNewQuestLoading] = useState(false);
@@ -160,27 +162,32 @@ export default function QuestList() {
     if (!isLoading) {
       setQuests([]);
       setIsLoading(true);
-      QuestService.fetchQuestsPaging(0, QUESTS_PAGE_SIZE, _filter ?? filter).then((res) => {
-        if (!isMountedRef.current) {
-          return;
-        }
-        setIsLoading(false);
-        setQuests(res);
-        setHasMore(res.length >= QUESTS_PAGE_SIZE);
-      });
+      QuestService.fetchQuestsPaging(0, QUESTS_PAGE_SIZE, _filter ?? filter, walletAddress).then(
+        (res) => {
+          if (!isMountedRef.current) {
+            return;
+          }
+          setIsLoading(false);
+          setQuests(res);
+          setHasMore(res.length >= QUESTS_PAGE_SIZE);
+        },
+      );
+      console.log(walletAddress, walletConnected);
     }
   };
 
   const loadMore = () => {
     setIsLoading(true);
-    QuestService.fetchQuestsPaging(quests.length, QUESTS_PAGE_SIZE, filter).then((res) => {
-      if (!isMountedRef.current) {
-        return;
-      }
-      setIsLoading(false);
-      setQuests(quests.concat(res));
-      setHasMore(res.length >= QUESTS_PAGE_SIZE);
-    });
+    QuestService.fetchQuestsPaging(quests.length, QUESTS_PAGE_SIZE, filter, walletAddress).then(
+      (res) => {
+        if (!isMountedRef.current) {
+          return;
+        }
+        setIsLoading(false);
+        setQuests(quests.concat(res));
+        setHasMore(res.length >= QUESTS_PAGE_SIZE);
+      },
+    );
   };
 
   return (

packages/react-app/src/constants.ts

@@ -1,4 +1,5 @@
 import { Pages } from './enums/pages.enum';
+import { QuestPlayStatus } from './enums/quest-play-status.enum';
 import { QuestStatus } from './enums/quest-status.enum';
 import env from './environment';
 import { FilterModel } from './models/filter.model';
@@ -32,6 +33,7 @@ export const DEFAULT_FILTER = Object.freeze({
   minExpireTime: null,
   bounty: undefined,
   status: QuestStatus.Active,
+  playStatus: QuestPlayStatus.All,
 } as FilterModel);
 
 export const DEFAULT_CLAIM_EXECUTION_DELAY_MS = 1 * 60 * 1000; // Add 15 minutes by default

packages/react-app/src/enums/quest-play-status.enum.ts

@@ -0,0 +1,5 @@
+export enum QuestPlayStatus {
+  Played = 'Played', // One or more players
+  Unplayed = 'Unplayed', // No players yet
+  All = 'All',
+}

packages/react-app/src/models/filter.model.ts

@@ -1,4 +1,5 @@
 import { QuestStatus } from 'src/enums/quest-status.enum';
+import { QuestPlayStatus } from 'src/enums/quest-play-status.enum';
 import { TokenAmountModel } from './token-amount.model';
 
 export type FilterModel = {
@@ -7,4 +8,5 @@ export type FilterModel = {
   minExpireTime?: Date | null;
   bounty?: TokenAmountModel;
   status: QuestStatus;
+  playStatus: QuestPlayStatus;
 };

packages/react-app/src/queries/quests.query.ts

@@ -1,11 +1,13 @@
 import request from 'graphql-request';
 import gql from 'graphql-tag';
 import { GQL_MAX_INT_MS } from 'src/constants';
+import { QuestPlayStatus } from 'src/enums/quest-play-status.enum';
 import { QuestStatus } from 'src/enums/quest-status.enum';
 import env from 'src/environment';
 import { FilterModel } from 'src/models/filter.model';
 import { getNetwork } from 'src/networks';
 import { msToSec } from 'src/utils/date.utils';
+import { useWallet } from 'use-wallet';
 
 const QuestEntityQuery = gql`
   query questEntity($ID: String) {
@@ -27,6 +29,7 @@ const QuestEntityQuery = gql`
       questCreator
       questFundsRecoveryAddress
       questMaxPlayers
+      questPlayers
     }
   }
 `;
@@ -40,6 +43,7 @@ const QuestEntitiesQuery = (payload: any) => gql`
     $address: String
     $title: String
     $description: String
+    $walletAddress: String
     $blackList: [String]
     $whiteList: [String]
   ) {
@@ -51,6 +55,15 @@ const QuestEntitiesQuery = (payload: any) => gql`
         questExpireTimeSec_lte: $expireTimeUpper
         questTitle_contains_nocase: $title
         questDescription_contains_nocase: $description
+        # Test  
+        ${
+          payload.walletAddress !== undefined && payload.playStatus === QuestPlayStatus.Played
+            ? 'questPlayers_contains:[$walletAddress]'
+            : ''
+        }
+        ${payload.playStatus === QuestPlayStatus.Unplayed ? 'questPlayers_not:null' : ''}
+        
+        
         ${payload.blackList !== undefined ? 'questAddress_not_in: $blackList' : ''}
         ${payload.whiteList !== undefined ? 'questAddress_in: $whiteList' : ''}
       }
@@ -74,6 +87,7 @@ const QuestEntitiesQuery = (payload: any) => gql`
       questCreator
       questFundsRecoveryAddress
       questMaxPlayers
+      questPlayers
     }
   }
 `;
@@ -116,7 +130,7 @@ const QuestEntitiesLight = (payload: any) => gql`
   }
 `;
 
-export const fetchQuestEnity = (questAddress: string) => {
+export const fetchQuestEntity = (questAddress: string) => {
   const { questsSubgraph } = getNetwork();
   return request(questsSubgraph, QuestEntityQuery, {
     ID: questAddress.toLowerCase(), // Subgraph address are stored lowercase
@@ -127,10 +141,14 @@ export const fetchQuestEntities = async (
   currentIndex: number,
   count: number,
   filter: FilterModel,
+  walletAddress: string,
 ) => {
+  // const { walletAddress, walletConnected } = useWallet();
   const { questsSubgraph, networkId } = getNetwork();
   let expireTimeLowerMs = 0;
   let expireTimeUpperMs = GQL_MAX_INT_MS;
+  const { playStatus } = filter;
+
   if (filter.status === QuestStatus.Active) {
     expireTimeLowerMs = Math.max(filter.minExpireTime?.getTime() ?? 0, Date.now());
   } else if (filter.status === QuestStatus.Expired) {
@@ -156,10 +174,11 @@ export const fetchQuestEntities = async (
     expireTimeUpper: Math.round(expireTimeUpperMs / 1000),
     title: filter.title,
     description: filter.description,
+    walletAddress: walletAddress?.toLowerCase(),
+    playStatus,
     blackList: blackList !== undefined ? blackList.toLowerCase().split(',') : undefined,
     whiteList: whiteList && whiteList !== '*' ? whiteList.toLowerCase().split(',') : undefined,
   };
-
   const res = await request(questsSubgraph, QuestEntitiesQuery(payload), payload);
 
   return res.questEntities;

packages/react-app/src/services/quest.service.ts

@@ -22,7 +22,7 @@ import { DisputeModel } from 'src/models/dispute.model';
 import { arrayDistinct } from 'src/utils/array.util';
 import { DashboardModel } from 'src/models/dashboard.model';
 import {
-  fetchQuestEnity,
+  fetchQuestEntity,
   fetchQuestEntities,
   fetchActiveQuestEntitiesLight,
   fetchQuestRewardTokens,
@@ -97,7 +97,7 @@ async function mapQuest(questEntity: any, claimCountMap: Map<string, number>) {
       maxPlayers: questEntity.questMaxPlayers ? +questEntity.questMaxPlayers : undefined, // If null put undefined
       unlimited: questEntity.questMaxPlayers ? +questEntity.questMaxPlayers === 0 : undefined,
       status: QuestStatus.Active,
-      players: [],
+      players: questEntity.questPlayers ?? [],
       governAddress: toChecksumAddress(questEntity.questGovernAddress),
       version: questEntity.version,
       features: {},
@@ -309,15 +309,23 @@ export async function fetchQuestsPaging(
   currentIndex: number,
   count: number,
   filter: FilterModel,
+  walletAddress: string,
 ): Promise<QuestModel[]> {
-  const queryResult = await fetchQuestEntities(currentIndex, count, filter);
-  const newQuests = await mapQuestList(queryResult);
+  const queryResult = await fetchQuestEntities(currentIndex, count, filter, walletAddress);
+  const newQuests =
+    filter.playStatus === 'All'
+      ? await mapQuestList(queryResult)
+      : (await mapQuestList(queryResult)).filter((quest) =>
+          filter.playStatus === 'Played'
+            ? quest.players && quest.players.length > 0
+            : quest.players === null,
+        );
   questList = questList.concat(newQuests);
   return newQuests;
 }
 
 export async function fetchQuest(questAddress: string) {
-  const queryResult = await fetchQuestEnity(questAddress);
+  const queryResult = await fetchQuestEntity(questAddress);
   const claimResult = await fetchGovernQueueClaimsCount();
   return mapQuest(queryResult, claimResult);
 }