Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 20 additions & 9 deletions src/components/publication-detail-main/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ import { useAuth } from '@src/hooks/use-auth.ts';
import { useToggleBookmark } from '@src/hooks/use-toggle-bookmark';
import {
useHidePostMutation,
useGetIsPostLikedLazyQuery,
useTogglePostLikeMutation,
useGetIsLikedLazyQuery,
useToggleLikeMutation,
} from '@src/graphql/generated/hooks.tsx';
import { resolveSrc } from '@src/utils/image.ts';
import { useBookmarks } from '@src/hooks/use-bookmark.ts';
Expand Down Expand Up @@ -81,8 +81,8 @@ export default function PublicationDetailMain({
const [ hidePost ] = useHidePostMutation();
const { sendNotification } = useNotifications();
const { generatePayload } = useNotificationPayload(sessionData);
const [getIsPostLiked, { loading: postLikedLoading }] = useGetIsPostLikedLazyQuery()
const [ togglePostLike, { loading: togglePostLikeLoading } ] = useTogglePostLikeMutation()
const [getIsLiked, { loading: postLikedLoading }] = useGetIsLikedLazyQuery()
const [ toggleLike, { loading: togglePostLikeLoading } ] = useToggleLikeMutation()
const { has, loading: loadingList } = useBookmarks();
const { toggle, loading: loadingToggle } = useToggleBookmark();

Expand All @@ -95,8 +95,18 @@ export default function PublicationDetailMain({
if (!sessionData?.authenticated) return dispatch(openLoginModal());

try {
const res = await togglePostLike({ variables: { input: { postId: post.id } } });
const isNowLiked = res.data?.togglePostLike ?? false;
const res = await toggleLike({
variables: {
input: {
targetId: post.id,
targetType: 'POST'
}
}
});
const isNowLiked = res.data?.toggleLike ?? false;

console.log('hello test', res.data?.toggleLike)
console.log(isNowLiked)

setHasLiked(isNowLiked);
setLikesCount((prev) => prev + (isNowLiked ? 1 : -1));
Expand Down Expand Up @@ -132,9 +142,10 @@ export default function PublicationDetailMain({
};

useEffect(() => {
getIsPostLiked({ variables: { postId: post.id } }).then((res) =>
setHasLiked(res.data?.getIsPostLiked ?? false),
);
getIsLiked({ variables: { targetId: post.id } }).then((res) => {
console.log('hello test 2', res.data?.getIsLiked)
setHasLiked(res.data?.getIsLiked ?? false)
});
}, [post.id]);

const handleHide = async () => {
Expand Down
160 changes: 109 additions & 51 deletions src/graphql/generated/graphql.ts

Large diffs are not rendered by default.

133 changes: 32 additions & 101 deletions src/graphql/generated/hooks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;

export const ToggleBookmarkDocument = gql`
mutation ToggleBookmark($input: BookmarkPostInput!) {
mutation ToggleBookmark($input: BookmarkInput!) {
toggleBookmark(input: $input)
}
`;
Expand Down Expand Up @@ -180,68 +180,37 @@ export function useToggleFollowMutation(baseOptions?: Apollo.MutationHookOptions
export type ToggleFollowMutationHookResult = ReturnType<typeof useToggleFollowMutation>;
export type ToggleFollowMutationResult = Apollo.MutationResult<ToggleFollowMutation>;
export type ToggleFollowMutationOptions = Apollo.BaseMutationOptions<ToggleFollowMutation, ToggleFollowMutationVariables>;
export const ToggleCommentLikeDocument = gql`
mutation ToggleCommentLike($input: LikeCommentInput!) {
toggleCommentLike(input: $input)
export const ToggleLikeDocument = gql`
mutation ToggleLike($input: LikeInput!) {
toggleLike(input: $input)
}
`;
export type ToggleCommentLikeMutationFn = Apollo.MutationFunction<ToggleCommentLikeMutation, ToggleCommentLikeMutationVariables>;
export type ToggleLikeMutationFn = Apollo.MutationFunction<ToggleLikeMutation, ToggleLikeMutationVariables>;

/**
* __useToggleCommentLikeMutation__
* __useToggleLikeMutation__
*
* To run a mutation, you first call `useToggleCommentLikeMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useToggleCommentLikeMutation` returns a tuple that includes:
* To run a mutation, you first call `useToggleLikeMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useToggleLikeMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [toggleCommentLikeMutation, { data, loading, error }] = useToggleCommentLikeMutation({
* const [toggleLikeMutation, { data, loading, error }] = useToggleLikeMutation({
* variables: {
* input: // value for 'input'
* },
* });
*/
export function useToggleCommentLikeMutation(baseOptions?: Apollo.MutationHookOptions<ToggleCommentLikeMutation, ToggleCommentLikeMutationVariables>) {
export function useToggleLikeMutation(baseOptions?: Apollo.MutationHookOptions<ToggleLikeMutation, ToggleLikeMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<ToggleCommentLikeMutation, ToggleCommentLikeMutationVariables>(ToggleCommentLikeDocument, options);
return Apollo.useMutation<ToggleLikeMutation, ToggleLikeMutationVariables>(ToggleLikeDocument, options);
}
export type ToggleCommentLikeMutationHookResult = ReturnType<typeof useToggleCommentLikeMutation>;
export type ToggleCommentLikeMutationResult = Apollo.MutationResult<ToggleCommentLikeMutation>;
export type ToggleCommentLikeMutationOptions = Apollo.BaseMutationOptions<ToggleCommentLikeMutation, ToggleCommentLikeMutationVariables>;
export const TogglePostLikeDocument = gql`
mutation TogglePostLike($input: LikePostInput!) {
togglePostLike(input: $input)
}
`;
export type TogglePostLikeMutationFn = Apollo.MutationFunction<TogglePostLikeMutation, TogglePostLikeMutationVariables>;

/**
* __useTogglePostLikeMutation__
*
* To run a mutation, you first call `useTogglePostLikeMutation` within a React component and pass it any options that fit your needs.
* When your component renders, `useTogglePostLikeMutation` returns a tuple that includes:
* - A mutate function that you can call at any time to execute the mutation
* - An object with fields that represent the current status of the mutation's execution
*
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
*
* @example
* const [togglePostLikeMutation, { data, loading, error }] = useTogglePostLikeMutation({
* variables: {
* input: // value for 'input'
* },
* });
*/
export function useTogglePostLikeMutation(baseOptions?: Apollo.MutationHookOptions<TogglePostLikeMutation, TogglePostLikeMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<TogglePostLikeMutation, TogglePostLikeMutationVariables>(TogglePostLikeDocument, options);
}
export type TogglePostLikeMutationHookResult = ReturnType<typeof useTogglePostLikeMutation>;
export type TogglePostLikeMutationResult = Apollo.MutationResult<TogglePostLikeMutation>;
export type TogglePostLikeMutationOptions = Apollo.BaseMutationOptions<TogglePostLikeMutation, TogglePostLikeMutationVariables>;
export type ToggleLikeMutationHookResult = ReturnType<typeof useToggleLikeMutation>;
export type ToggleLikeMutationResult = Apollo.MutationResult<ToggleLikeMutation>;
export type ToggleLikeMutationOptions = Apollo.BaseMutationOptions<ToggleLikeMutation, ToggleLikeMutationVariables>;
export const CreatePostDocument = gql`
mutation CreatePost($input: CreatePostInput!) {
createPost(input: $input) {
Expand Down Expand Up @@ -1031,82 +1000,44 @@ export type GetIsFollowingQueryHookResult = ReturnType<typeof useGetIsFollowingQ
export type GetIsFollowingLazyQueryHookResult = ReturnType<typeof useGetIsFollowingLazyQuery>;
export type GetIsFollowingSuspenseQueryHookResult = ReturnType<typeof useGetIsFollowingSuspenseQuery>;
export type GetIsFollowingQueryResult = Apollo.QueryResult<GetIsFollowingQuery, GetIsFollowingQueryVariables>;
export const GetIsCommentLikedDocument = gql`
query GetIsCommentLiked($commentId: String!) {
getIsCommentLiked(commentId: $commentId)
}
`;

/**
* __useGetIsCommentLikedQuery__
*
* To run a query within a React component, call `useGetIsCommentLikedQuery` and pass it any options that fit your needs.
* When your component renders, `useGetIsCommentLikedQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useGetIsCommentLikedQuery({
* variables: {
* commentId: // value for 'commentId'
* },
* });
*/
export function useGetIsCommentLikedQuery(baseOptions: Apollo.QueryHookOptions<GetIsCommentLikedQuery, GetIsCommentLikedQueryVariables> & ({ variables: GetIsCommentLikedQueryVariables; skip?: boolean; } | { skip: boolean; }) ) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<GetIsCommentLikedQuery, GetIsCommentLikedQueryVariables>(GetIsCommentLikedDocument, options);
}
export function useGetIsCommentLikedLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetIsCommentLikedQuery, GetIsCommentLikedQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<GetIsCommentLikedQuery, GetIsCommentLikedQueryVariables>(GetIsCommentLikedDocument, options);
}
export function useGetIsCommentLikedSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions<GetIsCommentLikedQuery, GetIsCommentLikedQueryVariables>) {
const options = baseOptions === Apollo.skipToken ? baseOptions : {...defaultOptions, ...baseOptions}
return Apollo.useSuspenseQuery<GetIsCommentLikedQuery, GetIsCommentLikedQueryVariables>(GetIsCommentLikedDocument, options);
}
export type GetIsCommentLikedQueryHookResult = ReturnType<typeof useGetIsCommentLikedQuery>;
export type GetIsCommentLikedLazyQueryHookResult = ReturnType<typeof useGetIsCommentLikedLazyQuery>;
export type GetIsCommentLikedSuspenseQueryHookResult = ReturnType<typeof useGetIsCommentLikedSuspenseQuery>;
export type GetIsCommentLikedQueryResult = Apollo.QueryResult<GetIsCommentLikedQuery, GetIsCommentLikedQueryVariables>;
export const GetIsPostLikedDocument = gql`
query GetIsPostLiked($postId: String!) {
getIsPostLiked(postId: $postId)
export const GetIsLikedDocument = gql`
query GetIsLiked($targetId: String!) {
getIsLiked(targetId: $targetId)
}
`;

/**
* __useGetIsPostLikedQuery__
* __useGetIsLikedQuery__
*
* To run a query within a React component, call `useGetIsPostLikedQuery` and pass it any options that fit your needs.
* When your component renders, `useGetIsPostLikedQuery` returns an object from Apollo Client that contains loading, error, and data properties
* To run a query within a React component, call `useGetIsLikedQuery` and pass it any options that fit your needs.
* When your component renders, `useGetIsLikedQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useGetIsPostLikedQuery({
* const { data, loading, error } = useGetIsLikedQuery({
* variables: {
* postId: // value for 'postId'
* targetId: // value for 'targetId'
* },
* });
*/
export function useGetIsPostLikedQuery(baseOptions: Apollo.QueryHookOptions<GetIsPostLikedQuery, GetIsPostLikedQueryVariables> & ({ variables: GetIsPostLikedQueryVariables; skip?: boolean; } | { skip: boolean; }) ) {
export function useGetIsLikedQuery(baseOptions: Apollo.QueryHookOptions<GetIsLikedQuery, GetIsLikedQueryVariables> & ({ variables: GetIsLikedQueryVariables; skip?: boolean; } | { skip: boolean; }) ) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<GetIsPostLikedQuery, GetIsPostLikedQueryVariables>(GetIsPostLikedDocument, options);
return Apollo.useQuery<GetIsLikedQuery, GetIsLikedQueryVariables>(GetIsLikedDocument, options);
}
export function useGetIsPostLikedLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetIsPostLikedQuery, GetIsPostLikedQueryVariables>) {
export function useGetIsLikedLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetIsLikedQuery, GetIsLikedQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<GetIsPostLikedQuery, GetIsPostLikedQueryVariables>(GetIsPostLikedDocument, options);
return Apollo.useLazyQuery<GetIsLikedQuery, GetIsLikedQueryVariables>(GetIsLikedDocument, options);
}
export function useGetIsPostLikedSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions<GetIsPostLikedQuery, GetIsPostLikedQueryVariables>) {
export function useGetIsLikedSuspenseQuery(baseOptions?: Apollo.SkipToken | Apollo.SuspenseQueryHookOptions<GetIsLikedQuery, GetIsLikedQueryVariables>) {
const options = baseOptions === Apollo.skipToken ? baseOptions : {...defaultOptions, ...baseOptions}
return Apollo.useSuspenseQuery<GetIsPostLikedQuery, GetIsPostLikedQueryVariables>(GetIsPostLikedDocument, options);
return Apollo.useSuspenseQuery<GetIsLikedQuery, GetIsLikedQueryVariables>(GetIsLikedDocument, options);
}
export type GetIsPostLikedQueryHookResult = ReturnType<typeof useGetIsPostLikedQuery>;
export type GetIsPostLikedLazyQueryHookResult = ReturnType<typeof useGetIsPostLikedLazyQuery>;
export type GetIsPostLikedSuspenseQueryHookResult = ReturnType<typeof useGetIsPostLikedSuspenseQuery>;
export type GetIsPostLikedQueryResult = Apollo.QueryResult<GetIsPostLikedQuery, GetIsPostLikedQueryVariables>;
export type GetIsLikedQueryHookResult = ReturnType<typeof useGetIsLikedQuery>;
export type GetIsLikedLazyQueryHookResult = ReturnType<typeof useGetIsLikedLazyQuery>;
export type GetIsLikedSuspenseQueryHookResult = ReturnType<typeof useGetIsLikedSuspenseQuery>;
export type GetIsLikedQueryResult = Apollo.QueryResult<GetIsLikedQuery, GetIsLikedQueryVariables>;
export const GetPostDocument = gql`
query GetPost($getPostId: String!) {
getPost(id: $getPostId) {
Expand Down
2 changes: 1 addition & 1 deletion src/graphql/mutations/bookmarks/toggleBookmark.gql
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
mutation ToggleBookmark($input: BookmarkPostInput!) {
mutation ToggleBookmark($input: BookmarkInput!) {
toggleBookmark(input: $input)
}
3 changes: 0 additions & 3 deletions src/graphql/mutations/likes/toggleCommentLike.gql

This file was deleted.

3 changes: 3 additions & 0 deletions src/graphql/mutations/likes/toggleLike.gql
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
mutation ToggleLike($input: LikeInput!) {
toggleLike(input: $input)
}
3 changes: 0 additions & 3 deletions src/graphql/mutations/likes/togglePostLike.gql

This file was deleted.

3 changes: 0 additions & 3 deletions src/graphql/queries/likes/getIsCommentLiked.gql

This file was deleted.

3 changes: 3 additions & 0 deletions src/graphql/queries/likes/getIsLiked.gql
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
query GetIsLiked($targetId: String!) {
getIsLiked(targetId: $targetId)
}
3 changes: 0 additions & 3 deletions src/graphql/queries/likes/getIsPostLiked.gql

This file was deleted.

21 changes: 14 additions & 7 deletions src/sections/publication/components/publication-comment-item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ import { PublicationCommentItemProps } from '@src/sections/publication/types.ts'
import { useAuth } from '@src/hooks/use-auth.ts';
import { resolveSrc } from '@src/utils/image.ts';
import {
useHideCommentMutation, useGetIsCommentLikedQuery,
useToggleCommentLikeMutation,
useHideCommentMutation, useGetIsLikedQuery,
useToggleLikeMutation,
} from '@src/graphql/generated/hooks.tsx';

// Components Lazy
Expand All @@ -49,8 +49,8 @@ const PublicationCommentItem:FC<PublicationCommentItemProps> = (props) => {
const [localRepliesCount, setLocalRepliesCount] = useState(comment.repliesCount);
const [localLikes, setLocalLikes] = useState(comment.likeCount);
const router = useRouter();
const { data: commentLikedData, loading: commentLikedLoading } = useGetIsCommentLikedQuery({ variables: { commentId: comment?.id } })
const [ toggleCommentLike, { loading: toggleCommentLikeLoading } ] = useToggleCommentLikeMutation()
const { data: commentLikedData, loading: commentLikedLoading } = useGetIsLikedQuery({ variables: { targetId: comment?.id } })
const [ toggleLike, { loading: toggleCommentLikeLoading } ] = useToggleLikeMutation()
const [ hideComment ] = useHideCommentMutation();
const { session: sessionData } = useAuth();
const dispatch = useDispatch();
Expand All @@ -63,8 +63,15 @@ const PublicationCommentItem:FC<PublicationCommentItemProps> = (props) => {
const handleToggleLike = async () => {
if (!sessionData?.authenticated) return dispatch(openLoginModal());

const res = await toggleCommentLike({ variables: { input: { commentId: comment.id } } });
const nowLiked = res.data?.toggleCommentLike ?? false;
const res = await toggleLike({
variables: {
input: {
targetId: comment.id,
targetType: 'COMMENT'
}
}
});
const nowLiked = res.data?.toggleLike ?? false;

setHasLiked(nowLiked);
setLocalLikes((l) => l + (nowLiked ? 1 : -1));
Expand Down Expand Up @@ -101,7 +108,7 @@ const handleToggleLike = async () => {
};

useEffect(() => {
setHasLiked(commentLikedData?.getIsCommentLiked ?? false);
setHasLiked(commentLikedData?.getIsLiked ?? false);
}, [commentLikedData]);

const getCommentTimeText = () => {
Expand Down
Loading