diff --git a/src/__generated__/gql.ts b/src/__generated__/gql.ts index 782d528..18875ca 100644 --- a/src/__generated__/gql.ts +++ b/src/__generated__/gql.ts @@ -31,6 +31,7 @@ const documents = { "\n mutation SignupUser($user: SignUpInput!) {\n signupUser(user: $user) {\n id\n }\n }\n": types.SignupUserDocument, "\n mutation SubmitAttempt($attempt: AttemptAddInput!) {\n addAttempt(attempt: $attempt) {\n id\n }\n }\n": types.SubmitAttemptDocument, "\n mutation SubmitAttemptRating($attemptId: String!, $rating: Int!) {\n addAttemptRating(attemptId: $attemptId, rating: $rating)\n }\n": types.SubmitAttemptRatingDocument, + "\n mutation UpdateQuizComments($commentId: String!, $text: String!) {\n editComment(commentId: $commentId, text: $text)\n }\n": types.UpdateQuizCommentsDocument, "\n mutation UpdateQuiz($quizId: String!, $quiz: QuizAddInput!) {\n updateQuiz(quizId: $quizId, quiz: $quiz) {\n id\n }\n }\n": types.UpdateQuizDocument, "\n mutation UpdateUser($userId: String!, $user: UserUpdateInput!) {\n updateUser(userId: $userId, user: $user) {\n id\n }\n }\n": types.UpdateUserDocument, "\n query UserAttempts($userId: String) {\n attempts(userId: $userId) {\n id\n quiz {\n id\n country\n }\n }\n }\n": types.UserAttemptsDocument, @@ -123,6 +124,10 @@ export function gql(source: "\n mutation SubmitAttempt($attempt: AttemptAddInpu * 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 SubmitAttemptRating($attemptId: String!, $rating: Int!) {\n addAttemptRating(attemptId: $attemptId, rating: $rating)\n }\n"): (typeof documents)["\n mutation SubmitAttemptRating($attemptId: String!, $rating: Int!) {\n addAttemptRating(attemptId: $attemptId, rating: $rating)\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 UpdateQuizComments($commentId: String!, $text: String!) {\n editComment(commentId: $commentId, text: $text)\n }\n"): (typeof documents)["\n mutation UpdateQuizComments($commentId: String!, $text: String!) {\n editComment(commentId: $commentId, text: $text)\n }\n"]; /** * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ diff --git a/src/__generated__/graphql.ts b/src/__generated__/graphql.ts index 74ae520..8eadea9 100644 --- a/src/__generated__/graphql.ts +++ b/src/__generated__/graphql.ts @@ -550,6 +550,14 @@ export type SubmitAttemptRatingMutationVariables = Exact<{ export type SubmitAttemptRatingMutation = { __typename?: 'Mutation', addAttemptRating: boolean }; +export type UpdateQuizCommentsMutationVariables = Exact<{ + commentId: Scalars['String']['input']; + text: Scalars['String']['input']; +}>; + + +export type UpdateQuizCommentsMutation = { __typename?: 'Mutation', editComment: boolean }; + export type UpdateQuizMutationVariables = Exact<{ quizId: Scalars['String']['input']; quiz: QuizAddInput; @@ -597,6 +605,7 @@ export const QuizzesDocument = {"kind":"Document","definitions":[{"kind":"Operat 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 SubmitAttemptDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SubmitAttempt"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"attempt"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"AttemptAddInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addAttempt"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"attempt"},"value":{"kind":"Variable","name":{"kind":"Name","value":"attempt"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode; export const SubmitAttemptRatingDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SubmitAttemptRating"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"attemptId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"rating"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addAttemptRating"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"attemptId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"attemptId"}}},{"kind":"Argument","name":{"kind":"Name","value":"rating"},"value":{"kind":"Variable","name":{"kind":"Name","value":"rating"}}}]}]}}]} as unknown as DocumentNode; +export const UpdateQuizCommentsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateQuizComments"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"commentId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"text"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"editComment"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"commentId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"commentId"}}},{"kind":"Argument","name":{"kind":"Name","value":"text"},"value":{"kind":"Variable","name":{"kind":"Name","value":"text"}}}]}]}}]} as unknown as DocumentNode; export const UpdateQuizDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateQuiz"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"quizId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"quiz"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"QuizAddInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateQuiz"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"quizId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"quizId"}}},{"kind":"Argument","name":{"kind":"Name","value":"quiz"},"value":{"kind":"Variable","name":{"kind":"Name","value":"quiz"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode; export const UpdateUserDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateUser"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"userId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"user"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UserUpdateInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateUser"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"userId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"userId"}}},{"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 UserAttemptsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"UserAttempts"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"userId"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attempts"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"userId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"userId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"quiz"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"country"}}]}}]}}]}}]} as unknown as DocumentNode; diff --git a/src/components/QuizComments/Comment.tsx b/src/components/QuizComments/Comment.tsx new file mode 100644 index 0000000..864d3af --- /dev/null +++ b/src/components/QuizComments/Comment.tsx @@ -0,0 +1,126 @@ +import { useState } from "react"; +import { useMutation } from "@apollo/client"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { List, Button, Popover, PopoverContent, PopoverHandler, Textarea, Typography } from "@material-tailwind/react"; +import { format } from "date-fns"; +import { MoreHorizontal, User } from "lucide-react"; +import { SubmitHandler, useForm } from "react-hook-form"; +import { toast } from "react-toastify"; +import { z } from "zod"; +import { CommentDeleteDialog } from "@components/CommentDeleteDialog/CommentDeleteDialog"; +import { QuizCommentsQuery } from "@generated/graphql"; +import { useUserStore } from "@state/userStore"; +import { GET_QUIZ_COMMENTS } from "@utils/queries/QuizComments"; +import { UPDATE_QUIZ_COMMENT } from "@utils/queries/UpdateComment"; +import { quizCommentFormSchema } from "./utils"; + +interface CommentProps { + comment: QuizCommentsQuery["quizComments"][0]; +} + +export const Comment = ({ + comment: { + id: commentId, + text, + createdAt, + user: { id: commentUserId, firstName, lastName }, + }, +}: CommentProps) => { + const [isEditingId, setIsEditingId] = useState(""); + const { + user: { userId }, + } = useUserStore(); + + const [updateComment, { loading: loadingUpdateComment }] = useMutation(UPDATE_QUIZ_COMMENT, { + onCompleted: () => { + setIsEditingId(""); + toast.success("Comment updated successfully!"); + }, + refetchQueries: [GET_QUIZ_COMMENTS], + }); + + const form = useForm>({ + resolver: zodResolver(quizCommentFormSchema), + defaultValues: { + text: "", + }, + }); + const { + register, + handleSubmit, + formState: { errors }, + } = form; + + const onSubmit: SubmitHandler> = async (values, event) => { + event?.preventDefault(); + try { + updateComment({ variables: { commentId: isEditingId, text: values.text } }); + form.reset(); + } catch (e) { + console.log("Something went wrong", e); + } + }; + + return ( +
+
+
+ + + {firstName}  + {lastName} + + + {format(new Date(createdAt), "dd MMM yyyy")} + +
+ + {commentUserId === userId && ( + + + + + + + + + + + + + )} +
+ + {isEditingId ? ( +
+