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

enhance(apps/frontend-pwa): improve layout of group messages #4274

Merged
merged 6 commits into from
Sep 23, 2024
Merged

enhance(apps/frontend-pwa): improve layout of group messages #4274

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a3ded07
wip: start improving layout
sjschlapbach Sep 23, 2024
8066dc0
enhance: improve layout of group messages
sjschlapbach Sep 23, 2024
d4f4abb
wip: enhance styling of group messages
sjschlapbach Sep 23, 2024
79ea1e5
chore: update padding
sjschlapbach Sep 23, 2024
8707eaf
chore: fix typo
sjschlapbach Sep 23, 2024
280aab6
Merge branch 'v3' into group-messages-layout
sjschlapbach Sep 23, 2024
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
196 changes: 117 additions & 79 deletions apps/frontend-pwa/src/components/course/GroupView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { useMutation } from '@apollo/client'
import { faPaperPlane } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
AddMessageToGroupDocument,
GetCourseOverviewDataDocument,
Expand Down Expand Up @@ -178,96 +180,132 @@ function GroupView({
)}

<div className="mt-4">
<H3 className={{ root: 'border-b pb-2' }}>
<H3 className={{ root: 'border-b' }}>
{t('shared.generic.groupMessages')}
</H3>

<Formik
validateOnMount
initialValues={{
content: '',
}}
validationSchema={Yup.object({
content: Yup.string().required(t('pwa.groups.messageRequired')),
})}
onSubmit={async (values, { resetForm, setSubmitting }) => {
await addMessageToGroup({
variables: { groupId: group.id, content: values.content },
refetchQueries: [
{
query: GetCourseOverviewDataDocument,
variables: { courseId },
},
],
})
resetForm()
setSubmitting(false)
}}
>
{({ isValid, isSubmitting }) => (
<Form>
<FormikTextareaField
name="content"
label="Message"
className={{ input: 'text-sm' }}
data={{ cy: 'group-message-textarea' }}
/>
<Button
type="submit"
className={{ root: 'bg-primary-100 mt-2 h-7 text-white' }}
data={{
cy: 'group-message-submit',
}}
disabled={!isValid || isSubmitting}
loading={isSubmitting}
>
{t('shared.generic.send')}
</Button>
</Form>
)}
</Formik>
<div className="bg-uzh-grey-20 mt-2 rounded px-2 pb-2">
<div
className="mb-2 flex max-h-80 min-h-40 flex-col-reverse gap-1.5 overflow-scroll"
data-cy="group-messages"
>
{group.messages?.map((message, ix) => {
const ownMessage = message.participant?.id === participant.id
const nextMessageSameUser =
ix + 1 < group.messages!.length &&
group.messages![ix + 1]?.participant?.id ===
message.participant?.id

{group.messages && group.messages.length > 0 && (
<div className="mt-4 flex flex-col gap-1" data-cy="group-messages">
{group.messages.map((message) => (
<div
key={message.id}
className="flex flex-row justify-between gap-4 border-b pb-1 pt-1 last:border-0"
>
<div className="space-y-2">
return (
<div
key={message.id}
className={twMerge(
'flex w-[80%] flex-col gap-0.5 self-start',
ownMessage && 'self-end'
)}
>
{!nextMessageSameUser && (
<div
className={twMerge(
'mt-1.5 flex flex-row items-end gap-1 text-xs text-slate-600',
ownMessage && 'justify-end'
)}
>
{message.participant?.avatar && (
<Image
key={message.participant.avatar}
src={
message.participant.avatar
? `${process.env.NEXT_PUBLIC_AVATAR_BASE_PATH}/${message.participant.avatar}.svg`
: '/user-solid.svg'
}
alt=""
height={25}
width={25}
className={twMerge(
'order-1',
ownMessage && 'order-2'
)}
/>
)}
<div
className={twMerge(
'order-2',
ownMessage && 'order-1'
)}
>
{message.participant?.username}
</div>
</div>
)}
<div
className={twMerge(
'flex flex-row items-end gap-1 text-xs text-slate-600',
message.participant?.id === participant.id &&
'font-bold'
'w-full rounded border border-gray-300 bg-white px-1 py-0.5',
ownMessage && 'bg-uzh-blue-20'
)}
>
{message.participant?.avatar && (
<Image
key={message.participant.avatar}
src={
message.participant.avatar
? `${process.env.NEXT_PUBLIC_AVATAR_BASE_PATH}/${message.participant.avatar}.svg`
: '/user-solid.svg'
}
alt=""
height={25}
width={25}
/>
)}
<div>{message.participant?.username}</div>
</div>
<div className="whitespace-nowrap text-xs text-slate-600">
{dayjs(message.createdAt).format('DD.MM.YYYY HH:mm')}
<div className="flex flex-col">
<div className="text-sm">{message.content}</div>
<div className="self-end whitespace-nowrap text-xs text-slate-600">
{dayjs(message.createdAt).format('DD.MM.YYYY HH:mm')}
</div>
</div>
</div>
</div>
<p className="prose prose-sm w-full max-w-none break-all">
{message.content}
</p>
</div>
))}
)
})}
</div>
)}

<Formik
validateOnMount
initialValues={{
content: '',
}}
validationSchema={Yup.object({
content: Yup.string().required(t('pwa.groups.messageRequired')),
})}
onSubmit={async (values, { resetForm, setSubmitting }) => {
await addMessageToGroup({
variables: { groupId: group.id, content: values.content },
refetchQueries: [
{
query: GetCourseOverviewDataDocument,
variables: { courseId },
},
],
})
resetForm()
setSubmitting(false)
}}
>
{({ isValid, isSubmitting }) => (
<Form className="flex flex-row items-center gap-1.5">
<FormikTextareaField
name="content"
className={{ input: 'text-sm' }}
data={{ cy: 'group-message-textarea' }}
/>
<Button
type="submit"
className={{
root: twMerge(
'bg-primary-100 flex h-8 w-8 items-center justify-center rounded-full text-white',
(!isValid || isSubmitting) &&
'bg-primary-20 cursor-not-allowed'
),
}}
data={{
cy: 'group-message-submit',
}}
disabled={!isValid || isSubmitting}
loading={isSubmitting}
>
<FontAwesomeIcon icon={faPaperPlane} className="mr-0.5" />
</Button>
</Form>
)}
</Formik>
</div>
</div>
</div>
</Tabs.TabContent>
Expand Down
Loading