diff --git a/app/(app)/challenges/[id]/_components/ide/database-relationship.tsx b/app/(app)/challenges/[id]/_components/ide/database-relationship.tsx new file mode 100644 index 0000000..152fd14 --- /dev/null +++ b/app/(app)/challenges/[id]/_components/ide/database-relationship.tsx @@ -0,0 +1,39 @@ +import { graphql } from "@/gql"; +import { useSuspenseQuery } from "@apollo/client/react"; +import Image from "next/image"; + +export const DATABASE_RELATIONSHIP = graphql(` + query DatabaseRelationship($id: ID!) { + question(id: $id) { + database { + id + slug + relationFigure + } + } + } +`); + +export default function DatabaseRelationship({ id }: { id: string }) { + const { data } = useSuspenseQuery(DATABASE_RELATIONSHIP, { + variables: { id }, + }); + const { slug, relationFigure } = data.question.database; + + return ( +
+ {/* fixme: width and height are currently forced to 4:3 */} + {`Database +
+ 資料庫「{slug}」關聯圖 +
+
+ ); +} diff --git a/app/(app)/challenges/[id]/_components/ide/index.tsx b/app/(app)/challenges/[id]/_components/ide/index.tsx index cab0c55..a9bc898 100644 --- a/app/(app)/challenges/[id]/_components/ide/index.tsx +++ b/app/(app)/challenges/[id]/_components/ide/index.tsx @@ -9,6 +9,7 @@ import { toast } from "sonner"; import { QUESTION_HEADER } from "../header"; import CompareAnswer, { COMPARE_ANSWER_QUERY } from "./compare-answer"; import CorrectAnswer from "./correct-answer"; +import DatabaseRelationship from "./database-relationship"; import QuestionDescription from "./description"; import MyAnswer, { MY_ANSWER } from "./my-answer"; import { SQLEditor } from "./sql-editor"; @@ -63,7 +64,7 @@ export default function PracticeIDE({ id }: PracticeIDEProps) { > {/* Left */}
- }> + }> {/* Description */} @@ -83,6 +84,9 @@ export default function PracticeIDE({ id }: PracticeIDEProps) { }, 1000); }} /> + + {/* Database Relationship */} +
diff --git a/gql/gql.ts b/gql/gql.ts index d533d4d..542a175 100644 --- a/gql/gql.ts +++ b/gql/gql.ts @@ -17,6 +17,7 @@ type Documents = { "\n query QuestionHeader($id: ID!) {\n question(id: $id) {\n id\n title\n difficulty\n category\n\n ...QuestionSolvedStatus\n }\n }\n": typeof types.QuestionHeaderDocument, "\n query CompareAnswer($id: ID!) {\n question(id: $id) {\n id\n referenceAnswerResult {\n columns\n rows\n }\n lastSubmission {\n id\n status\n queryResult {\n columns\n rows\n }\n error\n }\n }\n }\n": typeof types.CompareAnswerDocument, "\n query CorrectAnswer($id: ID!) {\n question(id: $id) {\n id\n referenceAnswerResult {\n columns\n rows\n }\n }\n }\n": typeof types.CorrectAnswerDocument, + "\n query DatabaseRelationship($id: ID!) {\n question(id: $id) {\n database {\n id\n slug\n relationFigure\n }\n }\n }\n": typeof types.DatabaseRelationshipDocument, "\n query QuestionDescription($id: ID!) {\n question(id: $id) {\n id\n description\n }\n }\n": typeof types.QuestionDescriptionDocument, "\n mutation SubmitAnswer($id: ID!, $answer: String!) {\n submitAnswer(id: $id, answer: $answer) {\n error\n }\n }\n": typeof types.SubmitAnswerDocument, "\n query MyAnswer($id: ID!) {\n question(id: $id) {\n id\n lastSubmission {\n id\n status\n queryResult {\n columns\n rows\n }\n error\n }\n }\n }\n": typeof types.MyAnswerDocument, @@ -37,6 +38,7 @@ const documents: Documents = { "\n query QuestionHeader($id: ID!) {\n question(id: $id) {\n id\n title\n difficulty\n category\n\n ...QuestionSolvedStatus\n }\n }\n": types.QuestionHeaderDocument, "\n query CompareAnswer($id: ID!) {\n question(id: $id) {\n id\n referenceAnswerResult {\n columns\n rows\n }\n lastSubmission {\n id\n status\n queryResult {\n columns\n rows\n }\n error\n }\n }\n }\n": types.CompareAnswerDocument, "\n query CorrectAnswer($id: ID!) {\n question(id: $id) {\n id\n referenceAnswerResult {\n columns\n rows\n }\n }\n }\n": types.CorrectAnswerDocument, + "\n query DatabaseRelationship($id: ID!) {\n question(id: $id) {\n database {\n id\n slug\n relationFigure\n }\n }\n }\n": types.DatabaseRelationshipDocument, "\n query QuestionDescription($id: ID!) {\n question(id: $id) {\n id\n description\n }\n }\n": types.QuestionDescriptionDocument, "\n mutation SubmitAnswer($id: ID!, $answer: String!) {\n submitAnswer(id: $id, answer: $answer) {\n error\n }\n }\n": types.SubmitAnswerDocument, "\n query MyAnswer($id: ID!) {\n question(id: $id) {\n id\n lastSubmission {\n id\n status\n queryResult {\n columns\n rows\n }\n error\n }\n }\n }\n": types.MyAnswerDocument, @@ -80,6 +82,10 @@ export function graphql(source: "\n query CompareAnswer($id: ID!) {\n questi * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ export function graphql(source: "\n query CorrectAnswer($id: ID!) {\n question(id: $id) {\n id\n referenceAnswerResult {\n columns\n rows\n }\n }\n }\n"): (typeof documents)["\n query CorrectAnswer($id: ID!) {\n question(id: $id) {\n id\n referenceAnswerResult {\n columns\n rows\n }\n }\n }\n"]; +/** + * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. + */ +export function graphql(source: "\n query DatabaseRelationship($id: ID!) {\n question(id: $id) {\n database {\n id\n slug\n relationFigure\n }\n }\n }\n"): (typeof documents)["\n query DatabaseRelationship($id: ID!) {\n question(id: $id) {\n database {\n id\n slug\n relationFigure\n }\n }\n }\n"]; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ diff --git a/gql/graphql.ts b/gql/graphql.ts index 661276f..be2aa46 100644 --- a/gql/graphql.ts +++ b/gql/graphql.ts @@ -1490,6 +1490,13 @@ export type CorrectAnswerQueryVariables = Exact<{ export type CorrectAnswerQuery = { __typename?: 'Query', question: { __typename?: 'Question', id: string, referenceAnswerResult: { __typename?: 'SQLExecutionResult', columns: Array, rows: Array> } } }; +export type DatabaseRelationshipQueryVariables = Exact<{ + id: Scalars['ID']['input']; +}>; + + +export type DatabaseRelationshipQuery = { __typename?: 'Query', question: { __typename?: 'Question', database: { __typename?: 'Database', id: string, slug: string, relationFigure: string } } }; + export type QuestionDescriptionQueryVariables = Exact<{ id: Scalars['ID']['input']; }>; @@ -1586,6 +1593,7 @@ export const QuestionCardFragmentDoc = {"kind":"Document","definitions":[{"kind" export const QuestionHeaderDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"QuestionHeader"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"question"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"difficulty"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"QuestionSolvedStatus"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"QuestionSolvedStatus"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Question"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"solved"}},{"kind":"Field","name":{"kind":"Name","value":"attempted"}}]}}]} as unknown as DocumentNode; export const CompareAnswerDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CompareAnswer"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"question"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"referenceAnswerResult"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"columns"}},{"kind":"Field","name":{"kind":"Name","value":"rows"}}]}},{"kind":"Field","name":{"kind":"Name","value":"lastSubmission"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"queryResult"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"columns"}},{"kind":"Field","name":{"kind":"Name","value":"rows"}}]}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]}}]} as unknown as DocumentNode; export const CorrectAnswerDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CorrectAnswer"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"question"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"referenceAnswerResult"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"columns"}},{"kind":"Field","name":{"kind":"Name","value":"rows"}}]}}]}}]}}]} as unknown as DocumentNode; +export const DatabaseRelationshipDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"DatabaseRelationship"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"question"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"database"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"relationFigure"}}]}}]}}]}}]} as unknown as DocumentNode; export const QuestionDescriptionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"QuestionDescription"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"question"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"description"}}]}}]}}]} as unknown as DocumentNode; export const SubmitAnswerDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SubmitAnswer"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"answer"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"submitAnswer"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}},{"kind":"Argument","name":{"kind":"Name","value":"answer"},"value":{"kind":"Variable","name":{"kind":"Name","value":"answer"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]} as unknown as DocumentNode; export const MyAnswerDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"MyAnswer"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"question"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"lastSubmission"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"queryResult"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"columns"}},{"kind":"Field","name":{"kind":"Name","value":"rows"}}]}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]}}]} as unknown as DocumentNode;