Fix webinar form and webinar questions page

pagopa · Mar 13, 2024 · d5d6b81 · d5d6b81
1 parent 3fb9f41
commit d5d6b81
Show file tree

Hide file tree

Showing 8 changed files with 217 additions and 141 deletions.
diff --git a/.changeset/lovely-drinks-mix.md b/.changeset/lovely-drinks-mix.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Fix webinar form and webinar questions page
diff --git a/apps/nextjs-website/src/components/atoms/SummaryInformation/SummaryInformation.tsx b/apps/nextjs-website/src/components/atoms/SummaryInformation/SummaryInformation.tsx
@@ -36,6 +36,7 @@ const SummaryInformation: FC<SummaryInformationProps> = ({
             alignContent: 'flex-start',
             paddingTop: 10,
             paddingBottom: 10,
+            width: '100%',
           }}
         >
           <Typography

diff --git a/apps/nextjs-website/src/components/molecules/WebinarQuestion/WebinarQuestionRow.tsx b/apps/nextjs-website/src/components/molecules/WebinarQuestion/WebinarQuestionRow.tsx
@@ -1,12 +1,20 @@
 import { WebinarQuestion } from '@/lib/webinars/webinarQuestions';
-import { Box, IconButton, TableCell, TableRow, useTheme } from '@mui/material';
+import {
+  Box,
+  IconButton,
+  TableCell,
+  TableRow,
+  Typography,
+  useTheme,
+} from '@mui/material';
 import { CopyToClipboardButton } from '@pagopa/mui-italia';
 import DOMPurify from 'dompurify';
 import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import Visibility from '@mui/icons-material/Visibility';
-import { useFormatter, useTranslations } from 'next-intl';
+import { useTranslations } from 'next-intl';
 import AutoFixOffIcon from '@mui/icons-material/AutoFixOff';
+import { defaultLocale, timeOptions } from '@/config';
 
 type WebinarQuestionRowProps = {
   question: WebinarQuestion;
@@ -21,104 +29,102 @@ export default function WebinarQuestionRow({
   onHide,
   onHighlight,
 }: WebinarQuestionRowProps) {
-  const formatter = useFormatter();
   const { palette } = useTheme();
   const t = useTranslations('webinar.questionList');
 
   const { hiddenBy, highlightedBy } = question;
 
   const isHidden = !!hiddenBy;
+  const isHiddenByMe = hiddenBy === userName;
   const isHighlighted = !!highlightedBy;
 
   const tcColor =
     isHighlighted && !isHidden ? palette.common.white : palette.text.primary;
 
   return (
-    <TableRow
-      hover
-      key={question.id.createdAt.toISOString()}
-      sx={{
-        '&:last-child td, &:last-child th': { border: 0 },
-        '&.MuiTableRow-hover:hover': {
-          backgroundColor:
-            isHighlighted && !isHidden
-              ? palette.primary.dark
-              : palette.action.hover,
-        },
-        backgroundColor:
-          isHighlighted && !isHidden ? palette.primary.light : '',
-        fontStyle: isHidden ? 'italic' : '',
-        position: 'relative',
-      }}
-    >
-      <TableCell
-        sx={{
-          color: tcColor,
-        }}
-      >
-        {!isHidden
-          ? formatter.dateTime(question.id.createdAt, {
-              year: 'numeric',
-              month: 'numeric',
-              day: 'numeric',
-              hour: 'numeric',
-              minute: 'numeric',
-            })
-          : ''}
-      </TableCell>
-      <TableCell
-        width='70%'
+    (!isHidden || isHiddenByMe) && (
+      <TableRow
+        hover
+        key={question.id.createdAt.toISOString()}
         sx={{
-          color: tcColor,
+          '&:last-child td, &:last-child th': { border: 0 },
+          '&.MuiTableRow-hover:hover': {
+            backgroundColor:
+              isHighlighted && !isHidden
+                ? palette.primary.dark
+                : palette.action.hover,
+          },
+          '& > .MuiTableCell-root': {
+            padding: '32px 16px 24px 16px',
+          },
+          backgroundColor:
+            isHighlighted && !isHidden ? palette.primary.light : '',
+          fontStyle: isHidden ? 'italic' : '',
+          position: 'relative',
         }}
       >
-        {!isHidden
-          ? question.question
-          : hiddenBy === userName
-          ? `${t('hiddenByMe')}: (${question.question})`
-          : `${t('hiddenBy')}: ${hiddenBy}`}
-      </TableCell>
-      <TableCell>
-        <Box display={'flex'} justifyContent={'space-between'}>
-          {(!isHidden || (isHidden && hiddenBy === userName)) && (
-            <IconButton
-              onClick={() => onHide(!isHidden)}
-              sx={{ color: tcColor }}
+        <TableCell
+          width='100%'
+          sx={{
+            color: tcColor,
+            '& > .MuiTypography-root': {
+              color: tcColor,
+            },
+          }}
+        >
+          {isHighlighted && !isHidden && (
+            <Box
+              sx={{
+                fontSize: 14,
+                color: palette.common.white,
+                marginBottom: 2,
+              }}
             >
-              {!isHidden ? <VisibilityOffIcon /> : <Visibility />}
-            </IconButton>
+              {t('highlightedBy')}: {highlightedBy}
+            </Box>
           )}
+          <Typography fontStyle={'italic'} fontSize={14}>
+            {!isHidden
+              ? question.id.createdAt.toLocaleTimeString(
+                  defaultLocale,
+                  timeOptions
+                )
+              : ''}
+          </Typography>
+          <Typography>
+            {!isHidden
+              ? question.question
+              : isHiddenByMe
+              ? `${t('hiddenByMe')}: (${question.question})`
+              : `${t('hiddenBy')}: ${hiddenBy}`}
+          </Typography>
+          <Box display={'flex'} justifyContent={'end'} mt={2}>
+            {(!isHidden || (isHidden && isHiddenByMe)) && (
+              <IconButton
+                onClick={() => onHide(!isHidden)}
+                sx={{ color: tcColor }}
+              >
+                {!isHidden ? <VisibilityOffIcon /> : <Visibility />}
+              </IconButton>
+            )}
 
-          {!isHidden &&
-            (userName === highlightedBy || !isHighlighted ? (
+            {!isHidden && (userName === highlightedBy || !isHighlighted) && (
               <IconButton
                 onClick={() => onHighlight(!isHighlighted)}
                 sx={{ color: tcColor }}
               >
-                {!isHidden ? <AutoFixHighIcon /> : <AutoFixOffIcon />}
+                {!isHighlighted ? <AutoFixHighIcon /> : <AutoFixOffIcon />}
               </IconButton>
-            ) : (
-              <Box
-                sx={{
-                  position: 'absolute',
-                  top: 4,
-                  left: 16,
-                  fontSize: 14,
-                  color: palette.common.white,
-                }}
-              >
-                {t('highlightedBy')}: {highlightedBy}
-              </Box>
-            ))}
-
-          {!isHidden && (
-            <CopyToClipboardButton
-              sx={{ color: tcColor }}
-              value={DOMPurify.sanitize(question.question)}
-            ></CopyToClipboardButton>
-          )}
-        </Box>
-      </TableCell>
-    </TableRow>
+            )}
+            {!isHidden && (
+              <CopyToClipboardButton
+                sx={{ color: tcColor }}
+                value={DOMPurify.sanitize(question.question)}
+              ></CopyToClipboardButton>
+            )}
+          </Box>
+        </TableCell>
+      </TableRow>
+    )
   );
 }
diff --git a/apps/nextjs-website/src/components/organisms/WebinarQuestionsForm/WebinarQuestionsForm.tsx b/apps/nextjs-website/src/components/organisms/WebinarQuestionsForm/WebinarQuestionsForm.tsx
@@ -7,6 +7,8 @@ import { Alert, Card, Snackbar, TextField, Typography } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import { useCallback, useState } from 'react';
 
+const MAX_QUESTION_LENGTH = 240;
+
 type FormState = 'submitting' | 'submitted' | undefined;
 type WebinarQuestionsFormProps = {
   disabled?: boolean;
@@ -78,7 +80,7 @@ export const WebinarQuestionsForm = ({
             disabled ? theme.palette.text.disabled : theme.palette.text.primary
           }
         >
-          {t('questionsForm.title')}
+          {t('questionsForm.title', { maxLength: `${MAX_QUESTION_LENGTH}` })}
         </Typography>
 
         <TextField
@@ -90,9 +92,22 @@ export const WebinarQuestionsForm = ({
           value={question}
           variant='outlined'
           onChange={handleChange}
+          inputProps={{ maxLength: MAX_QUESTION_LENGTH }}
+          helperText={
+            <Typography
+              component='span'
+              color={(theme) => theme.palette.text.secondary}
+              fontSize={12}
+              fontWeight={400}
+              sx={{ display: 'flex', justifyContent: 'end' }}
+            >
+              {question.length > 0 &&
+                `${(question as string).length} / ${MAX_QUESTION_LENGTH}`}
+            </Typography>
+          }
         />
         <LoadingButton
-          sx={{ alignSelf: 'start' }}
+          sx={{ alignSelf: 'end' }}
           color='primary'
           loadingPosition={hasFormState ? 'start' : undefined}
           loading={formState === 'submitting'}

diff --git a/apps/nextjs-website/src/components/organisms/WebinarQuestionsTable/WebinarQuestionsTable.tsx b/apps/nextjs-website/src/components/organisms/WebinarQuestionsTable/WebinarQuestionsTable.tsx
@@ -0,0 +1,70 @@
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@mui/material';
+import WebinarQuestionRow from '@/components/molecules/WebinarQuestion/WebinarQuestionRow';
+import { updateWebinarQuestion } from '@/lib/webinarApi';
+import { useTranslations } from 'next-intl';
+import { WebinarQuestion } from '@/lib/webinars/webinarQuestions';
+
+type WebinarQuestionsTableProps = {
+  userName: string;
+  questions: WebinarQuestion[];
+  title: string;
+};
+
+const WebinarQuestionsTable = ({
+  userName,
+  questions,
+  title,
+}: WebinarQuestionsTableProps) => {
+  const t = useTranslations('webinar.questionList');
+
+  return (
+    <TableContainer component={Paper} sx={{ marginY: 2 }}>
+      <Table aria-label='simple table'>
+        <TableHead>
+          <TableRow>
+            <TableCell>{t(`title.${title}`)}</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {questions.map((question) => (
+            <WebinarQuestionRow
+              key={question.id.createdAt.toISOString()}
+              question={question}
+              userName={userName}
+              onHide={async (hide) =>
+                await updateWebinarQuestion({
+                  id: question.id,
+                  updates: {
+                    hiddenBy: hide
+                      ? { operation: 'update', value: userName }
+                      : { operation: 'remove' },
+                  },
+                })
+              }
+              onHighlight={async (highlight) =>
+                await updateWebinarQuestion({
+                  id: question.id,
+                  updates: {
+                    highlightedBy: highlight
+                      ? { operation: 'update', value: userName }
+                      : { operation: 'remove' },
+                  },
+                })
+              }
+            />
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default WebinarQuestionsTable;