src/index.tsx

@@ -3209,6 +3209,38 @@ export type GetAggregatedShotMetricsQuery = {
   }>;
 };
 
+export type CommentOnVideoMutationVariables = Exact<{
+  videoId: Scalars["Int"]["input"];
+  message: Scalars["String"]["input"];
+  parentCommentId?: InputMaybe<Scalars["Int"]["input"]>;
+}>;
+
+export type CommentOnVideoMutation = {
+  __typename?: "Mutation";
+  commentOnVideo: boolean;
+};
+
+export type EditCommentMutationVariables = Exact<{
+  videoId: Scalars["Int"]["input"];
+  commentId: Scalars["Int"]["input"];
+  newMessage: Scalars["String"]["input"];
+}>;
+
+export type EditCommentMutation = {
+  __typename?: "Mutation";
+  editComment: boolean;
+};
+
+export type DeleteCommentMutationVariables = Exact<{
+  videoId: Scalars["Int"]["input"];
+  commentId: Scalars["Int"]["input"];
+}>;
+
+export type DeleteCommentMutation = {
+  __typename?: "Mutation";
+  deleteComment: boolean;
+};
+
 export type GetDeployedConfigQueryVariables = Exact<{ [key: string]: never }>;
 
 export type GetDeployedConfigQuery = {
@@ -3298,6 +3330,40 @@ export type GetFeedQuery = {
           }> | null;
         };
       }>;
+      comments: Array<{
+        __typename?: "CommentGQL";
+        id: number;
+        message: string;
+        user: {
+          __typename?: "UserGQL";
+          id: number;
+          username: string;
+          profileImageUri?: string | null;
+          followers?: Array<{
+            __typename?: "UserGQL";
+            id: number;
+            username: string;
+            profileImageUri?: string | null;
+          }> | null;
+        };
+        replies: Array<{
+          __typename?: "CommentGQL";
+          id: number;
+          message: string;
+          user: {
+            __typename?: "UserGQL";
+            id: number;
+            username: string;
+            profileImageUri?: string | null;
+            followers?: Array<{
+              __typename?: "UserGQL";
+              id: number;
+              username: string;
+              profileImageUri?: string | null;
+            }> | null;
+          };
+        }>;
+      }>;
     }>;
     pageInfo: {
       __typename?: "PageInfoGQL";
@@ -3307,6 +3373,19 @@ export type GetFeedQuery = {
   };
 };
 
+export type UserSocialsFieldsFragment = {
+  __typename?: "UserGQL";
+  id: number;
+  username: string;
+  profileImageUri?: string | null;
+  followers?: Array<{
+    __typename?: "UserGQL";
+    id: number;
+    username: string;
+    profileImageUri?: string | null;
+  }> | null;
+};
+
 export type VideoCardFieldsFragment = {
   __typename?: "VideoGQL";
   id: number;
@@ -3369,6 +3448,40 @@ export type VideoCardFieldsFragment = {
       }> | null;
     };
   }>;
+  comments: Array<{
+    __typename?: "CommentGQL";
+    id: number;
+    message: string;
+    user: {
+      __typename?: "UserGQL";
+      id: number;
+      username: string;
+      profileImageUri?: string | null;
+      followers?: Array<{
+        __typename?: "UserGQL";
+        id: number;
+        username: string;
+        profileImageUri?: string | null;
+      }> | null;
+    };
+    replies: Array<{
+      __typename?: "CommentGQL";
+      id: number;
+      message: string;
+      user: {
+        __typename?: "UserGQL";
+        id: number;
+        username: string;
+        profileImageUri?: string | null;
+        followers?: Array<{
+          __typename?: "UserGQL";
+          id: number;
+          username: string;
+          profileImageUri?: string | null;
+        }> | null;
+      };
+    }>;
+  }>;
 };
 
 export type GetVideoFeedQueryVariables = Exact<{
@@ -3449,6 +3562,40 @@ export type GetVideoFeedQuery = {
           }> | null;
         };
       }>;
+      comments: Array<{
+        __typename?: "CommentGQL";
+        id: number;
+        message: string;
+        user: {
+          __typename?: "UserGQL";
+          id: number;
+          username: string;
+          profileImageUri?: string | null;
+          followers?: Array<{
+            __typename?: "UserGQL";
+            id: number;
+            username: string;
+            profileImageUri?: string | null;
+          }> | null;
+        };
+        replies: Array<{
+          __typename?: "CommentGQL";
+          id: number;
+          message: string;
+          user: {
+            __typename?: "UserGQL";
+            id: number;
+            username: string;
+            profileImageUri?: string | null;
+            followers?: Array<{
+              __typename?: "UserGQL";
+              id: number;
+              username: string;
+              profileImageUri?: string | null;
+            }> | null;
+          };
+        }>;
+      }>;
     }>;
     pageInfo: {
       __typename?: "PageInfoGQL";
@@ -4616,6 +4763,82 @@ export type GetVideoDetailsQuery = {
   };
 };
 
+export type GetVideoSocialDetailsByIdQueryVariables = Exact<{
+  videoId: Scalars["Int"]["input"];
+}>;
+
+export type GetVideoSocialDetailsByIdQuery = {
+  __typename?: "Query";
+  getVideo: {
+    __typename?: "VideoGQL";
+    id: number;
+    name?: string | null;
+    owner?: {
+      __typename?: "UserGQL";
+      id: number;
+      firebaseUid?: string | null;
+      username: string;
+      profileImageUri?: string | null;
+    } | null;
+    tags: Array<{
+      __typename?: "VideoTag";
+      name: string;
+      tagClasses: Array<{ __typename?: "VideoTagClass"; name: string }>;
+    }>;
+    reactions: Array<{
+      __typename?: "ReactionGQL";
+      videoId: number;
+      reaction: ReactionEnum;
+      user: {
+        __typename?: "UserGQL";
+        id: number;
+        username: string;
+        profileImageUri?: string | null;
+        followers?: Array<{
+          __typename?: "UserGQL";
+          id: number;
+          username: string;
+          profileImageUri?: string | null;
+        }> | null;
+      };
+    }>;
+    comments: Array<{
+      __typename?: "CommentGQL";
+      id: number;
+      message: string;
+      user: {
+        __typename?: "UserGQL";
+        id: number;
+        username: string;
+        profileImageUri?: string | null;
+        followers?: Array<{
+          __typename?: "UserGQL";
+          id: number;
+          username: string;
+          profileImageUri?: string | null;
+        }> | null;
+      };
+      replies: Array<{
+        __typename?: "CommentGQL";
+        id: number;
+        message: string;
+        user: {
+          __typename?: "UserGQL";
+          id: number;
+          username: string;
+          profileImageUri?: string | null;
+          followers?: Array<{
+            __typename?: "UserGQL";
+            id: number;
+            username: string;
+            profileImageUri?: string | null;
+          }> | null;
+        };
+      }>;
+    }>;
+  };
+};
+
 export type GetVideosQueryVariables = Exact<{
   videoIds: Array<Scalars["Int"]["input"]> | Scalars["Int"]["input"];
 }>;
@@ -5192,6 +5415,18 @@ export type GetUploadStreamsWithDetailsQuery = {
   };
 };
 
+export const UserSocialsFieldsFragmentDoc = gql`
+  fragment UserSocialsFields on UserGQL {
+    id
+    username
+    profileImageUri
+    followers {
+      id
+      username
+      profileImageUri
+    }
+  }
+`;
 export const VideoCardFieldsFragmentDoc = gql`
   fragment VideoCardFields on VideoGQL {
     id
@@ -5240,18 +5475,26 @@ export const VideoCardFieldsFragmentDoc = gql`
     reactions {
       videoId
       user {
-        id
-        username
-        profileImageUri
-        followers {
-          id
-          username
-          profileImageUri
-        }
+        ...UserSocialsFields
       }
       reaction
     }
+    comments {
+      id
+      message
+      user {
+        ...UserSocialsFields
+      }
+      replies {
+        id
+        message
+        user {
+          ...UserSocialsFields
+        }
+      }
+    }
   }
+  ${UserSocialsFieldsFragmentDoc}
 `;
 export const MedalFieldsFragmentDoc = gql`
   fragment MedalFields on MedalGQL {
@@ -5555,6 +5798,167 @@ export type GetAggregatedShotMetricsQueryResult = Apollo.QueryResult<
   GetAggregatedShotMetricsQuery,
   GetAggregatedShotMetricsQueryVariables
 >;
+export const CommentOnVideoDocument = gql`
+  mutation CommentOnVideo(
+    $videoId: Int!
+    $message: String!
+    $parentCommentId: Int
+  ) {
+    commentOnVideo(
+      videoId: $videoId
+      message: $message
+      parentCommentId: $parentCommentId
+    )
+  }
+`;
+export type CommentOnVideoMutationFn = Apollo.MutationFunction<
+  CommentOnVideoMutation,
+  CommentOnVideoMutationVariables
+>;
+
+/**
+ * __useCommentOnVideoMutation__
+ *
+ * To run a mutation, you first call `useCommentOnVideoMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCommentOnVideoMutation` 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 [commentOnVideoMutation, { data, loading, error }] = useCommentOnVideoMutation({
+ *   variables: {
+ *      videoId: // value for 'videoId'
+ *      message: // value for 'message'
+ *      parentCommentId: // value for 'parentCommentId'
+ *   },
+ * });
+ */
+export function useCommentOnVideoMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    CommentOnVideoMutation,
+    CommentOnVideoMutationVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useMutation<
+    CommentOnVideoMutation,
+    CommentOnVideoMutationVariables
+  >(CommentOnVideoDocument, options);
+}
+export type CommentOnVideoMutationHookResult = ReturnType<
+  typeof useCommentOnVideoMutation
+>;
+export type CommentOnVideoMutationResult =
+  Apollo.MutationResult<CommentOnVideoMutation>;
+export type CommentOnVideoMutationOptions = Apollo.BaseMutationOptions<
+  CommentOnVideoMutation,
+  CommentOnVideoMutationVariables
+>;
+export const EditCommentDocument = gql`
+  mutation EditComment($videoId: Int!, $commentId: Int!, $newMessage: String!) {
+    editComment(
+      videoId: $videoId
+      commentId: $commentId
+      newMessage: $newMessage
+    )
+  }
+`;
+export type EditCommentMutationFn = Apollo.MutationFunction<
+  EditCommentMutation,
+  EditCommentMutationVariables
+>;
+
+/**
+ * __useEditCommentMutation__
+ *
+ * To run a mutation, you first call `useEditCommentMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useEditCommentMutation` 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 [editCommentMutation, { data, loading, error }] = useEditCommentMutation({
+ *   variables: {
+ *      videoId: // value for 'videoId'
+ *      commentId: // value for 'commentId'
+ *      newMessage: // value for 'newMessage'
+ *   },
+ * });
+ */
+export function useEditCommentMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    EditCommentMutation,
+    EditCommentMutationVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useMutation<EditCommentMutation, EditCommentMutationVariables>(
+    EditCommentDocument,
+    options,
+  );
+}
+export type EditCommentMutationHookResult = ReturnType<
+  typeof useEditCommentMutation
+>;
+export type EditCommentMutationResult =
+  Apollo.MutationResult<EditCommentMutation>;
+export type EditCommentMutationOptions = Apollo.BaseMutationOptions<
+  EditCommentMutation,
+  EditCommentMutationVariables
+>;
+export const DeleteCommentDocument = gql`
+  mutation DeleteComment($videoId: Int!, $commentId: Int!) {
+    deleteComment(videoId: $videoId, commentId: $commentId)
+  }
+`;
+export type DeleteCommentMutationFn = Apollo.MutationFunction<
+  DeleteCommentMutation,
+  DeleteCommentMutationVariables
+>;
+
+/**
+ * __useDeleteCommentMutation__
+ *
+ * To run a mutation, you first call `useDeleteCommentMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteCommentMutation` 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 [deleteCommentMutation, { data, loading, error }] = useDeleteCommentMutation({
+ *   variables: {
+ *      videoId: // value for 'videoId'
+ *      commentId: // value for 'commentId'
+ *   },
+ * });
+ */
+export function useDeleteCommentMutation(
+  baseOptions?: Apollo.MutationHookOptions<
+    DeleteCommentMutation,
+    DeleteCommentMutationVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useMutation<
+    DeleteCommentMutation,
+    DeleteCommentMutationVariables
+  >(DeleteCommentDocument, options);
+}
+export type DeleteCommentMutationHookResult = ReturnType<
+  typeof useDeleteCommentMutation
+>;
+export type DeleteCommentMutationResult =
+  Apollo.MutationResult<DeleteCommentMutation>;
+export type DeleteCommentMutationOptions = Apollo.BaseMutationOptions<
+  DeleteCommentMutation,
+  DeleteCommentMutationVariables
+>;
 export const GetDeployedConfigDocument = gql`
   query getDeployedConfig {
     getDeployedConfig {
@@ -8495,6 +8899,114 @@ export type GetVideoDetailsQueryResult = Apollo.QueryResult<
   GetVideoDetailsQuery,
   GetVideoDetailsQueryVariables
 >;
+export const GetVideoSocialDetailsByIdDocument = gql`
+  query GetVideoSocialDetailsById($videoId: Int!) {
+    getVideo(videoId: $videoId) {
+      id
+      name
+      owner {
+        id
+        firebaseUid
+        username
+        profileImageUri
+      }
+      tags {
+        tagClasses {
+          name
+        }
+        name
+      }
+      reactions {
+        videoId
+        user {
+          ...UserSocialsFields
+        }
+        reaction
+      }
+      comments {
+        id
+        message
+        user {
+          ...UserSocialsFields
+        }
+        replies {
+          id
+          message
+          user {
+            ...UserSocialsFields
+          }
+        }
+      }
+    }
+  }
+  ${UserSocialsFieldsFragmentDoc}
+`;
+
+/**
+ * __useGetVideoSocialDetailsByIdQuery__
+ *
+ * To run a query within a React component, call `useGetVideoSocialDetailsByIdQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetVideoSocialDetailsByIdQuery` 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 } = useGetVideoSocialDetailsByIdQuery({
+ *   variables: {
+ *      videoId: // value for 'videoId'
+ *   },
+ * });
+ */
+export function useGetVideoSocialDetailsByIdQuery(
+  baseOptions: Apollo.QueryHookOptions<
+    GetVideoSocialDetailsByIdQuery,
+    GetVideoSocialDetailsByIdQueryVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useQuery<
+    GetVideoSocialDetailsByIdQuery,
+    GetVideoSocialDetailsByIdQueryVariables
+  >(GetVideoSocialDetailsByIdDocument, options);
+}
+export function useGetVideoSocialDetailsByIdLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<
+    GetVideoSocialDetailsByIdQuery,
+    GetVideoSocialDetailsByIdQueryVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useLazyQuery<
+    GetVideoSocialDetailsByIdQuery,
+    GetVideoSocialDetailsByIdQueryVariables
+  >(GetVideoSocialDetailsByIdDocument, options);
+}
+export function useGetVideoSocialDetailsByIdSuspenseQuery(
+  baseOptions?: Apollo.SuspenseQueryHookOptions<
+    GetVideoSocialDetailsByIdQuery,
+    GetVideoSocialDetailsByIdQueryVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useSuspenseQuery<
+    GetVideoSocialDetailsByIdQuery,
+    GetVideoSocialDetailsByIdQueryVariables
+  >(GetVideoSocialDetailsByIdDocument, options);
+}
+export type GetVideoSocialDetailsByIdQueryHookResult = ReturnType<
+  typeof useGetVideoSocialDetailsByIdQuery
+>;
+export type GetVideoSocialDetailsByIdLazyQueryHookResult = ReturnType<
+  typeof useGetVideoSocialDetailsByIdLazyQuery
+>;
+export type GetVideoSocialDetailsByIdSuspenseQueryHookResult = ReturnType<
+  typeof useGetVideoSocialDetailsByIdSuspenseQuery
+>;
+export type GetVideoSocialDetailsByIdQueryResult = Apollo.QueryResult<
+  GetVideoSocialDetailsByIdQuery,
+  GetVideoSocialDetailsByIdQueryVariables
+>;
 export const GetVideosDocument = gql`
   query GetVideos($videoIds: [Int!]!) {
     getVideos(videoIds: $videoIds) {

src/operations/comments.gql

@@ -0,0 +1,19 @@
+mutation CommentOnVideo(
+  $videoId: Int!
+  $message: String!
+  $parentCommentId: Int
+) {
+  commentOnVideo(
+    videoId: $videoId
+    message: $message
+    parentCommentId: $parentCommentId
+  )
+}
+
+mutation EditComment($videoId: Int!, $commentId: Int!, $newMessage: String!) {
+  editComment(videoId: $videoId, commentId: $commentId, newMessage: $newMessage)
+}
+
+mutation DeleteComment($videoId: Int!, $commentId: Int!) {
+  deleteComment(videoId: $videoId, commentId: $commentId)
+}

src/operations/feed.gql

@@ -15,6 +15,17 @@ query GetFeed(
   }
 }
 
+fragment UserSocialsFields on UserGQL {
+  id
+  username
+  profileImageUri
+  followers {
+    id
+    username
+    profileImageUri
+  }
+}
+
 fragment VideoCardFields on VideoGQL {
   id
   owner {
@@ -62,17 +73,24 @@ fragment VideoCardFields on VideoGQL {
   reactions {
     videoId
     user {
-      id
-      username
-      profileImageUri
-      followers {
-        id
-        username
-        profileImageUri
-      }
+      ...UserSocialsFields
     }
     reaction
   }
+  comments {
+    id
+    message
+    user {
+      ...UserSocialsFields
+    }
+    replies {
+      id
+      message
+      user {
+        ...UserSocialsFields
+      }
+    }
+  }
 }
 
 query GetVideoFeed(

src/operations/video.gql

@@ -82,6 +82,57 @@ query GetVideoDetails($videoId: Int!) {
   }
 }
 
+fragment UserSocialsFields on UserGQL {
+  id
+  username
+  profileImageUri
+  followers {
+    id
+    username
+    profileImageUri
+  }
+}
+
+query GetVideoSocialDetailsById($videoId: Int!) {
+  getVideo(videoId: $videoId) {
+    id
+    name
+    owner {
+      id
+      firebaseUid
+      username
+      profileImageUri
+    }
+    tags {
+      tagClasses {
+        name
+      }
+      name
+    }
+    reactions {
+      videoId
+      user {
+        ...UserSocialsFields
+      }
+      reaction
+    }
+    comments {
+      id
+      message
+      user {
+        ...UserSocialsFields
+      }
+      replies {
+        id
+        message
+        user {
+          ...UserSocialsFields
+        }
+      }
+    }
+  }
+}
+
 query GetVideos($videoIds: [Int!]!) {
   getVideos(videoIds: $videoIds) {
     ...VideoStreamMetadata