Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DP-276] Comments Viewing FrontEnd #370

Merged
merged 6 commits into from
Dec 18, 2023
Merged

[DP-276] Comments Viewing FrontEnd #370

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a502b2a
graphql queries, initial component structure
hazelyn11 Dec 13, 2023
adac726
comments in word panel! todo: styling
hazelyn11 Dec 13, 2023
2726900
Added Discussion panel in the Word and Paragraph pane!
hazelyn11 Dec 14, 2023
1180920
Now comments will show immediately after submission
hazelyn11 Dec 14, 2023
fd2d215
Review fixes
hazelyn11 Dec 16, 2023
686a8c3
Merge branch 'main' into comments-viewing-front-end
GracefulLemming Dec 18, 2023
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
81 changes: 81 additions & 0 deletions website/src/components/comment-section.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { style, styleVariants } from "@vanilla-extract/css"
import { margin } from "polished"
import {
colors,
hspace,
mediaQueries,
radii,
tagColors,
thickness,
vspace,
} from "src/style/constants"
import { marginX, marginY, paddingX, paddingY } from "src/style/utils"

const wordShared = style([
paddingY(vspace.quarter),
paddingX(hspace.halfEdge),
{
borderWidth: thickness.thick,
borderStyle: "solid",
"@media": {
[mediaQueries.print]: {
...margin(0, "3.5rem", vspace[1.5], hspace.small),
},
[mediaQueries.medium]: margin(0, "2.5rem", vspace.one, hspace.small),
},
},
])

export const commentWrapper = style([
wordShared,
marginY(vspace.half),
{
borderColor: colors.borders,
borderRadius: radii.large,
lineHeight: vspace.one,
pageBreakInside: "avoid",
breakInside: "avoid",
"@media": {
[mediaQueries.medium]: {},
},
},
])

export const headerStyle = style([
marginX(hspace.medium),
{
fontSize: "0.7rem",
},
])

export const tagPadding = style([paddingY(vspace.medium)])

export const tagColorStory = style([
paddingX(hspace.medium),
{
display: "inline-block",
borderRadius: radii.round,
backgroundColor: tagColors.story,
fontSize: "0.7rem",
},
])

export const tagColorSuggestion = style([
paddingX(hspace.medium),
{
display: "inline-block",
borderRadius: radii.round,
backgroundColor: tagColors.suggestion,
fontSize: "0.7rem",
},
])

export const tagColorQuestion = style([
paddingX(hspace.medium),
{
display: "inline-block",
borderRadius: radii.round,
backgroundColor: tagColors.question,
fontSize: "0.7rem",
},
])
101 changes: 101 additions & 0 deletions website/src/components/comment-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import React from "react"
import * as Dailp from "src/graphql/dailp"
import { TranslatedParagraph } from "src/segment"
import * as css from "./comment-section.css"

export const CommentSection = (p: {
parent: Dailp.FormFieldsFragment | TranslatedParagraph
}) => {
return (
<div>
{p.parent.__typename === "DocumentParagraph" ? (
<ParagraphCommentSection paragraph={p.parent} />
) : p.parent.__typename === "AnnotatedForm" ? (
<WordCommentSection word={p.parent} />
) : (
""
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

parent cannot be undefined, null, or some other type. You can delete this embedded ternary to leave you with the following:

{p.parent.__typename === "DocumentParagraph" ? (
         <ParagraphCommentSection paragraph={p.parent} />
       ) : <WordCommentSection word={p.parent} />)}

Copy link
Collaborator Author

@hazelyn11 hazelyn11 Dec 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when I try to delete the embedded ternary I get this error:

  Type '{ readonly __typename?: "DocumentParagraph" | undefined; } & Pick<DocumentParagraph, "id" | "index" | "translation"> & { readonly source: readonly (({ readonly __typename: "AnnotatedForm"; } & Pick<...> & { ...; }) | { ...; })[]; readonly comments: readonly ({ ...; } & Pick<...>)[]; }' is not assignable to type 'FormFieldsFragment'.
    Type '{ readonly __typename?: "DocumentParagraph" | undefined; } & Pick<DocumentParagraph, "id" | "index" | "translation"> & { readonly source: readonly (({ readonly __typename: "AnnotatedForm"; } & Pick<...> & { ...; }) | { ...; })[]; readonly comments: readonly ({ ...; } & Pick<...>)[]; }' is not assignable to type '{ readonly __typename?: "AnnotatedForm" | undefined; }'.
      Types of property '__typename' are incompatible.
        Type '"DocumentParagraph" | undefined' is not assignable to type '"AnnotatedForm" | undefined'.```

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like typescript is not being nice to you. Sometimes nested fields will be like this when you try to do a type guard (checking if a value is of a certain type, like you do when you check the value of __typename) on a literal. You might see if this goes away if instead of taking in an object of params like this:

(p: {...prop type}): ReactElement

You instead "destructure" your props like this:

({parent}: {... prop type}): ReactElement

Here are some docs on "destructuring" in JS if that is new for you: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may also fix this if we upgrade typescript somehow. This should work.

)}
</div>
)
}

export const WordCommentSection = (p: { word: Dailp.FormFieldsFragment }) => {
const [{ data }] = Dailp.useWordCommentsQuery({
variables: { wordId: p.word.id },
})

const wordComments = data?.wordById.comments

return (
<div>
{wordComments?.map((comment) => (
<div>
<CommentHeader comment={comment} />
<CommentBody comment={comment} />
</div>
))}
</div>
)
}

export const ParagraphCommentSection = (p: {
paragraph: TranslatedParagraph
}) => {
const [{ data }] = Dailp.useParagraphCommentsQuery({
variables: { paragraphId: p.paragraph.id },
})

const paragraphComments = data?.paragraphById.comments

return (
<div>
{paragraphComments?.map((comment) => (
<div>
<div>
<CommentHeader comment={comment} />
</div>
<CommentBody comment={comment} />
</div>
))}
</div>
)
}

export const CommentBody = (p: { comment: Dailp.Comment }) => {
const commentTypeNames: Record<Dailp.CommentType, string> = {
// ... TS will then make sure you have an entry for everything on the "CommentTag" type that you import from the codegen
[Dailp.CommentType.Story]: "Story",
[Dailp.CommentType.Suggestion]: "Suggestion",
[Dailp.CommentType.Question]: "Question",
}
Comment on lines +65 to +70
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could move this out of the function and make it a constant with SCREAM_CASE_NAMING if you wanted.


return (
<div className={css.commentWrapper}>
{p.comment.textContent}
<div className={css.tagPadding}>
<div
className={
p.comment.commentType === Dailp.CommentType.Story
? css.tagColorStory
: p.comment.commentType === Dailp.CommentType.Suggestion
? css.tagColorSuggestion
: css.tagColorQuestion
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One thing to consider: You can have named style variants that share some common styling but diverge based on a parameter. Using a variant might clean up things here and lead to less redundant css.

read more: https://vanilla-extract.style/documentation/api/style-variants/

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I'm trying this and it's fine to define a variant but I'm having trouble actually passing in the values I need to use it from the component without getting errors. If this is essential I can keep trying to figure out how to do it but I've spent a while on it and am struggling

}
>
{p.comment.commentType
? commentTypeNames[p.comment.commentType as Dailp.CommentType]
: ""}
</div>
</div>
</div>
)
}

export const CommentHeader = (p: { comment: Dailp.Comment }) => {
return (
<div className={css.headerStyle}>
{p.comment.postedBy.displayName} contributed on{" "}
{p.comment.postedAt.date.formattedDate}
</div>
)
}
150 changes: 150 additions & 0 deletions website/src/graphql/dailp/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1146,9 +1146,18 @@ export type DocumentContentsQuery = { readonly __typename?: "Query" } & {
readonly position: {
readonly __typename?: "PositionInDocument"
} & Pick<PositionInDocument, "documentId">
readonly comments: ReadonlyArray<
{ readonly __typename?: "Comment" } & Pick<
Comment,
"id"
>
>
})
| { readonly __typename: "LineBreak" }
>
readonly comments: ReadonlyArray<
{ readonly __typename?: "Comment" } & Pick<Comment, "id">
>
}
>
}
Expand Down Expand Up @@ -1221,6 +1230,9 @@ export type DocumentContentsQuery = { readonly __typename?: "Query" } & {
readonly position: {
readonly __typename?: "PositionInDocument"
} & Pick<PositionInDocument, "documentId">
readonly comments: ReadonlyArray<
{ readonly __typename?: "Comment" } & Pick<Comment, "id">
>
}
>
}
Expand Down Expand Up @@ -1313,6 +1325,9 @@ export type FormFieldsFragment = {
PositionInDocument,
"documentId"
>
readonly comments: ReadonlyArray<
{ readonly __typename?: "Comment" } & Pick<Comment, "id">
>
}

export type CollectionQueryVariables = Exact<{
Expand Down Expand Up @@ -1635,6 +1650,9 @@ export type DocSliceQuery = { readonly __typename?: "Query" } & {
readonly position: {
readonly __typename?: "PositionInDocument"
} & Pick<PositionInDocument, "documentId">
readonly comments: ReadonlyArray<
{ readonly __typename?: "Comment" } & Pick<Comment, "id">
>
}
>
}
Expand Down Expand Up @@ -1754,6 +1772,64 @@ export type BookmarkedDocumentsQuery = { readonly __typename?: "Query" } & {
>
}

export type WordCommentsQueryVariables = Exact<{
wordId: Scalars["UUID"]
}>

export type WordCommentsQuery = { readonly __typename?: "Query" } & {
readonly wordById: { readonly __typename?: "AnnotatedForm" } & {
readonly comments: ReadonlyArray<
{ readonly __typename?: "Comment" } & Pick<
Comment,
"id" | "textContent" | "commentType"
> & {
readonly postedAt: { readonly __typename?: "DateTime" } & Pick<
DateTime,
"timestamp"
> & {
readonly date: { readonly __typename?: "Date" } & Pick<
Date,
"year" | "month" | "day" | "formattedDate"
>
}
readonly postedBy: { readonly __typename?: "User" } & Pick<
User,
"id" | "displayName"
>
}
>
}
}

export type ParagraphCommentsQueryVariables = Exact<{
paragraphId: Scalars["UUID"]
}>

export type ParagraphCommentsQuery = { readonly __typename?: "Query" } & {
readonly paragraphById: { readonly __typename?: "DocumentParagraph" } & {
readonly comments: ReadonlyArray<
{ readonly __typename?: "Comment" } & Pick<
Comment,
"id" | "textContent" | "commentType"
> & {
readonly postedAt: { readonly __typename?: "DateTime" } & Pick<
DateTime,
"timestamp"
> & {
readonly date: { readonly __typename?: "Date" } & Pick<
Date,
"year" | "month" | "day" | "formattedDate"
>
}
readonly postedBy: { readonly __typename?: "User" } & Pick<
User,
"id" | "displayName"
>
}
>
}
}

export type UpdateWordMutationVariables = Exact<{
word: AnnotatedFormUpdate
morphemeSystem: CherokeeOrthography
Expand Down Expand Up @@ -1827,6 +1903,9 @@ export type UpdateWordMutation = { readonly __typename?: "Mutation" } & {
PositionInDocument,
"documentId"
>
readonly comments: ReadonlyArray<
{ readonly __typename?: "Comment" } & Pick<Comment, "id">
>
}
}

Expand Down Expand Up @@ -2085,6 +2164,9 @@ export const FormFieldsFragmentDoc = gql`
position {
documentId
}
comments {
id
}
}
`
export const CollectionsListingDocument = gql`
Expand Down Expand Up @@ -2182,6 +2264,9 @@ export const DocumentContentsDocument = gql`
id
translation
index
comments {
id
}
}
}
forms @include(if: $isReference) {
Expand Down Expand Up @@ -2600,6 +2685,71 @@ export function useBookmarkedDocumentsQuery(
BookmarkedDocumentsQueryVariables
>({ query: BookmarkedDocumentsDocument, ...options })
}
export const WordCommentsDocument = gql`
query WordComments($wordId: UUID!) {
wordById(id: $wordId) {
comments {
id
postedAt {
timestamp
date {
year
month
day
formattedDate
}
}
postedBy {
id
displayName
}
textContent
commentType
}
}
}
`

export function useWordCommentsQuery(
options: Omit<Urql.UseQueryArgs<WordCommentsQueryVariables>, "query">
) {
return Urql.useQuery<WordCommentsQuery, WordCommentsQueryVariables>({
query: WordCommentsDocument,
...options,
})
}
export const ParagraphCommentsDocument = gql`
query ParagraphComments($paragraphId: UUID!) {
paragraphById(id: $paragraphId) {
comments {
id
postedAt {
timestamp
date {
year
month
day
formattedDate
}
}
postedBy {
id
displayName
}
textContent
commentType
}
}
}
`

export function useParagraphCommentsQuery(
options: Omit<Urql.UseQueryArgs<ParagraphCommentsQueryVariables>, "query">
) {
return Urql.useQuery<ParagraphCommentsQuery, ParagraphCommentsQueryVariables>(
{ query: ParagraphCommentsDocument, ...options }
)
}
export const UpdateWordDocument = gql`
mutation UpdateWord(
$word: AnnotatedFormUpdate!
Expand Down
Loading