From 573247a0daac781baeab14e3530c46eca4e37f1b Mon Sep 17 00:00:00 2001 From: Marco Escaleira Date: Tue, 13 Feb 2024 20:30:56 +0000 Subject: [PATCH] feat: fetching country quizzes and listing --- .graphqlrc | 3 +- src/__generated__/gql.ts | 13 ++++--- src/__generated__/graphql.ts | 22 ++++++++---- src/pages/Game/index.tsx | 66 ++++++++++++++++++++++++++++++++---- 4 files changed, 85 insertions(+), 19 deletions(-) diff --git a/.graphqlrc b/.graphqlrc index d120bed..6ba84db 100644 --- a/.graphqlrc +++ b/.graphqlrc @@ -1,3 +1,4 @@ { - "schema": "http://localhost:8000/graphql" + "schema": "http://localhost:8000/graphql", + "documents": "src/**/*.{graphql,js,ts,jsx,tsx}" } diff --git a/src/__generated__/gql.ts b/src/__generated__/gql.ts index 61ce591..9c26829 100644 --- a/src/__generated__/gql.ts +++ b/src/__generated__/gql.ts @@ -14,9 +14,10 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/ */ const documents = { "\n query Query {\n logoutUser\n }\n": types.QueryDocument, - "\n query GetMe {\n getCurrentlyLoggedInUser {\n id\n email\n firstName\n lastName\n dateOfBirth\n country\n role\n createdAt\n updatedAt\n }\n }\n": types.GetMeDocument, "\n mutation LoginUser($input: LoginInput!) {\n loginUser(input: $input) {\n access_token\n }\n }\n": types.LoginUserDocument, "\n mutation SignupUser($user: SignUpInput!) {\n signupUser(user: $user) {\n id\n }\n }\n": types.SignupUserDocument, + "\n query CountryQuizzes($country: String!) {\n quizList(country: $country) {\n id\n title\n description\n difficulty\n timeLimit\n image\n tags\n questions {\n question\n type\n options {\n correct\n text\n }\n }\n createdAt\n updatedAt\n creator {\n lastName\n }\n }\n }\n": types.CountryQuizzesDocument, + "\n query GetMe {\n getCurrentlyLoggedInUser {\n id\n email\n firstName\n lastName\n dateOfBirth\n country\n role\n createdAt\n updatedAt\n }\n }\n": types.GetMeDocument, }; /** @@ -40,15 +41,19 @@ export function gql(source: "\n query Query {\n logoutUser\n }\n"): (typeof /** * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function gql(source: "\n query GetMe {\n getCurrentlyLoggedInUser {\n id\n email\n firstName\n lastName\n dateOfBirth\n country\n role\n createdAt\n updatedAt\n }\n }\n"): (typeof documents)["\n query GetMe {\n getCurrentlyLoggedInUser {\n id\n email\n firstName\n lastName\n dateOfBirth\n country\n role\n createdAt\n updatedAt\n }\n }\n"]; +export function gql(source: "\n mutation LoginUser($input: LoginInput!) {\n loginUser(input: $input) {\n access_token\n }\n }\n"): (typeof documents)["\n mutation LoginUser($input: LoginInput!) {\n loginUser(input: $input) {\n access_token\n }\n }\n"]; /** * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function gql(source: "\n mutation LoginUser($input: LoginInput!) {\n loginUser(input: $input) {\n access_token\n }\n }\n"): (typeof documents)["\n mutation LoginUser($input: LoginInput!) {\n loginUser(input: $input) {\n access_token\n }\n }\n"]; +export function gql(source: "\n mutation SignupUser($user: SignUpInput!) {\n signupUser(user: $user) {\n id\n }\n }\n"): (typeof documents)["\n mutation SignupUser($user: SignUpInput!) {\n signupUser(user: $user) {\n id\n }\n }\n"]; /** * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function gql(source: "\n mutation SignupUser($user: SignUpInput!) {\n signupUser(user: $user) {\n id\n }\n }\n"): (typeof documents)["\n mutation SignupUser($user: SignUpInput!) {\n signupUser(user: $user) {\n id\n }\n }\n"]; +export function gql(source: "\n query CountryQuizzes($country: String!) {\n quizList(country: $country) {\n id\n title\n description\n difficulty\n timeLimit\n image\n tags\n questions {\n question\n type\n options {\n correct\n text\n }\n }\n createdAt\n updatedAt\n creator {\n lastName\n }\n }\n }\n"): (typeof documents)["\n query CountryQuizzes($country: String!) {\n quizList(country: $country) {\n id\n title\n description\n difficulty\n timeLimit\n image\n tags\n questions {\n question\n type\n options {\n correct\n text\n }\n }\n createdAt\n updatedAt\n creator {\n lastName\n }\n }\n }\n"]; +/** + * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. + */ +export function gql(source: "\n query GetMe {\n getCurrentlyLoggedInUser {\n id\n email\n firstName\n lastName\n dateOfBirth\n country\n role\n createdAt\n updatedAt\n }\n }\n"): (typeof documents)["\n query GetMe {\n getCurrentlyLoggedInUser {\n id\n email\n firstName\n lastName\n dateOfBirth\n country\n role\n createdAt\n updatedAt\n }\n }\n"]; export function gql(source: string) { return (documents as any)[source] ?? {}; diff --git a/src/__generated__/graphql.ts b/src/__generated__/graphql.ts index fda09f3..8b636c3 100644 --- a/src/__generated__/graphql.ts +++ b/src/__generated__/graphql.ts @@ -234,11 +234,6 @@ export type QueryQueryVariables = Exact<{ [key: string]: never; }>; export type QueryQuery = { __typename?: 'Query', logoutUser: boolean }; -export type GetMeQueryVariables = Exact<{ [key: string]: never; }>; - - -export type GetMeQuery = { __typename?: 'Query', getCurrentlyLoggedInUser: { __typename?: 'UserData', id: string, email: string, firstName: string, lastName?: string | null, dateOfBirth?: string | null, country?: string | null, role: Roles, createdAt: any, updatedAt: any } }; - export type LoginUserMutationVariables = Exact<{ input: LoginInput; }>; @@ -253,8 +248,21 @@ export type SignupUserMutationVariables = Exact<{ export type SignupUserMutation = { __typename?: 'Mutation', signupUser: { __typename?: 'UserData', id: string } }; +export type CountryQuizzesQueryVariables = Exact<{ + country: Scalars['String']['input']; +}>; + + +export type CountryQuizzesQuery = { __typename?: 'Query', quizList: Array<{ __typename?: 'QuizData', id: string, title: string, description: string, difficulty?: Difficulty | null, timeLimit?: number | null, image: string, tags?: Array | null, createdAt: any, updatedAt: any, questions: Array<{ __typename?: 'QuestionData', question: string, type: string, options: Array<{ __typename?: 'OptionData', correct: boolean, text: string }> }>, creator: { __typename?: 'UserData', lastName?: string | null } }> }; + +export type GetMeQueryVariables = Exact<{ [key: string]: never; }>; + + +export type GetMeQuery = { __typename?: 'Query', getCurrentlyLoggedInUser: { __typename?: 'UserData', id: string, email: string, firstName: string, lastName?: string | null, dateOfBirth?: string | null, country?: string | null, role: Roles, createdAt: any, updatedAt: any } }; + export const QueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Query"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"logoutUser"}}]}}]} as unknown as DocumentNode; -export const GetMeDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetMe"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getCurrentlyLoggedInUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}},{"kind":"Field","name":{"kind":"Name","value":"firstName"}},{"kind":"Field","name":{"kind":"Name","value":"lastName"}},{"kind":"Field","name":{"kind":"Name","value":"dateOfBirth"}},{"kind":"Field","name":{"kind":"Name","value":"country"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}}]}}]} as unknown as DocumentNode; export const LoginUserDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"LoginUser"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"LoginInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"loginUser"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"access_token"}}]}}]}}]} as unknown as DocumentNode; -export const SignupUserDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SignupUser"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"user"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SignUpInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"signupUser"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"user"},"value":{"kind":"Variable","name":{"kind":"Name","value":"user"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file +export const SignupUserDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SignupUser"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"user"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SignUpInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"signupUser"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"user"},"value":{"kind":"Variable","name":{"kind":"Name","value":"user"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode; +export const CountryQuizzesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CountryQuizzes"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"country"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"quizList"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"country"},"value":{"kind":"Variable","name":{"kind":"Name","value":"country"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"difficulty"}},{"kind":"Field","name":{"kind":"Name","value":"timeLimit"}},{"kind":"Field","name":{"kind":"Name","value":"image"}},{"kind":"Field","name":{"kind":"Name","value":"tags"}},{"kind":"Field","name":{"kind":"Name","value":"questions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"question"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"correct"}},{"kind":"Field","name":{"kind":"Name","value":"text"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"creator"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"lastName"}}]}}]}}]}}]} as unknown as DocumentNode; +export const GetMeDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetMe"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"getCurrentlyLoggedInUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}},{"kind":"Field","name":{"kind":"Name","value":"firstName"}},{"kind":"Field","name":{"kind":"Name","value":"lastName"}},{"kind":"Field","name":{"kind":"Name","value":"dateOfBirth"}},{"kind":"Field","name":{"kind":"Name","value":"country"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file diff --git a/src/pages/Game/index.tsx b/src/pages/Game/index.tsx index c161208..82e6a81 100644 --- a/src/pages/Game/index.tsx +++ b/src/pages/Game/index.tsx @@ -1,17 +1,55 @@ -import { useState } from "react"; -import { Typography, Button } from "@material-tailwind/react"; +import { useCallback, useEffect, useState } from "react"; +import { useLazyQuery } from "@apollo/client"; +import { Typography, Button, Card } from "@material-tailwind/react"; +import { Loader2 } from "lucide-react"; import { Tooltip } from "react-tooltip"; import { useCountries } from "use-react-countries"; +import { gql } from "@generated/gql.ts"; import { MapChart } from "./MapChart.tsx"; +const GET_COUNTRY_QUIZZES = gql(/* GraphQL */ ` + query CountryQuizzes($country: String!) { + quizList(country: $country) { + id + title + description + difficulty + timeLimit + image + tags + questions { + question + type + options { + correct + text + } + } + createdAt + updatedAt + creator { + lastName + } + } + } +`); + export function Component() { + const [fetchCountryDetails, { data, loading }] = useLazyQuery(GET_COUNTRY_QUIZZES); const [selectedTooltipContent, setSelectedTooltipContent] = useState(""); const [selectedCountry, setSelectedCountry] = useState(""); const { countries } = useCountries(); - const countyDetails = countries.find(({ name }: { name: string }) => name.toLowerCase() === selectedCountry.toLowerCase()); + const countyDetails = useCallback( + () => countries.find(({ name }: { name: string }) => name.toLowerCase() === selectedCountry.toLowerCase()), + [selectedCountry] + ); - console.log(countries); + useEffect(() => { + if (selectedCountry) { + fetchCountryDetails({ variables: { country: selectedCountry } }); + } + }, [selectedCountry]); return (
@@ -24,14 +62,28 @@ export function Component() { {selectedCountry && ( <> -
- - {selectedCountry} +
+ + {selectedCountry} {selectedCountry}
+ {loading && } + + {!loading && data?.quizList && data?.quizList.length === 0 && ( + No quizzes found for this country :( + )} + + {!loading && + data?.quizList && + data?.quizList.length > 0 && + data?.quizList.map(({ title }) => {title})} )}