Add FAQ unified option

functions/src/api/routes/faq/faq.ts

@@ -8,6 +8,7 @@ const FaqCategory = Type.Object({
     name: Type.String(),
     order: Type.Number(),
     share: Type.Boolean(),
+    unifiedPage: Type.Optional(Type.Boolean()),
     private: Type.Optional(Type.Boolean()),
     privateId: Type.Optional(Type.String()),
 })

src/events/page/faq/FaqCategoryItem.tsx

@@ -13,7 +13,6 @@ import { collections } from '../../../services/firebase'
 import { collection } from '@firebase/firestore'
 import { generateFirestoreId } from '../../../utils/generateFirestoreId'
 import { FaqCategoryItemContent } from './FaqCategoryItemContent'
-import { generateFaqPdf } from '../../../utils/faqPdfGenerator'
 
 export type FaqCategoryProps = {
     event: Event
@@ -75,17 +74,6 @@ export const FaqCategoryItem = (props: FaqCategoryProps) => {
         setDidChange(false)
     }
 
-    const exportToPdf = async () => {
-        try {
-            setIsExporting(true)
-            await generateFaqPdf(props.event, props.category, data)
-        } catch (error) {
-            console.error('Failed to generate PDF:', error)
-        } finally {
-            setIsExporting(false)
-        }
-    }
-
     return (
         <Box width="100%" mb={4}>
             <Box display="flex" justifyContent="space-between" alignItems="center">
@@ -96,11 +84,6 @@ export const FaqCategoryItem = (props: FaqCategoryProps) => {
                     <IconButton onClick={() => setOpen(!isOpen)}>
                         {isOpen ? <ExpandLessSharp /> : <ExpandMore />}
                     </IconButton>
-                    {isOpen && (
-                        <IconButton onClick={exportToPdf} title="Export to PDF" disabled={isExporting}>
-                            <PictureAsPdf />
-                        </IconButton>
-                    )}
                     {didChange && (
                         <LoadingButton variant="contained" onClick={save} loading={mutation.isLoading}>
                             Save

src/events/page/faq/FaqCategoryItemContent.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react'
 import { useState } from 'react'
-import { Box, Button, DialogContentText, FormControlLabel, Switch, TextField } from '@mui/material'
+import { Box, Button, DialogContentText, FormControlLabel, Switch, TextField, IconButton } from '@mui/material'
 import { generateFirestoreId } from '../../../utils/generateFirestoreId'
 import { TypographyCopyable } from '../../../components/TypographyCopyable'
 import { getFaqCategoryPrivateLink } from './faqLink'
@@ -14,6 +13,8 @@ import { doc } from 'firebase/firestore'
 import { collections } from '../../../services/firebase'
 import { DeleteRounded, EditRounded } from '@mui/icons-material'
 import { ConfirmDialog } from '../../../components/ConfirmDialog'
+import { generateFaqPdf } from '../../../utils/faqPdfGenerator'
+import { PictureAsPdf } from '@mui/icons-material'
 
 export type FaqCategoryItemContentProps = {
     event: Event
@@ -36,6 +37,14 @@ export const FaqCategoryItemContent = ({
     const [isChangingCategoryName, setIsChangingCategoryName] = useState<null | string>(null)
     const categoryDocumentDeletion = useFirestoreDocumentDeletion(doc(collections.faq(event.id), category.id))
 
+    const exportToPdf = async () => {
+        try {
+            await generateFaqPdf(event, category, data)
+        } catch (error) {
+            console.error('Failed to generate PDF:', error)
+        }
+    }
+
     return (
         <Box>
             <Box>
@@ -67,6 +76,17 @@ export const FaqCategoryItemContent = ({
                     }
                     label="Private url?"
                 />
+                <FormControlLabel
+                    control={
+                        <Switch
+                            checked={category.unifiedPage !== undefined ? category.unifiedPage : false}
+                            onChange={(e) => {
+                                categoryMutation.mutate({ unifiedPage: e.target.checked })
+                            }}
+                        />
+                    }
+                    label="Display as unified page"
+                />
                 {category.private && category.privateId ? (
                     <TypographyCopyable component="a">
                         {getFaqCategoryPrivateLink(event, category.privateId)}
@@ -96,6 +116,9 @@ export const FaqCategoryItemContent = ({
                         </Button>
                     </Box>
                 ) : null}
+                <IconButton onClick={exportToPdf} title="Export to PDF">
+                    <PictureAsPdf />
+                </IconButton>
             </Box>
             {data.map((faq, index) => (
                 <FaqItem

src/public/faq/PublicFaqCategory.tsx

@@ -4,6 +4,7 @@ import { PublicFaqType } from '../publicTypes'
 import { Box, Typography } from '@mui/material'
 import { FaqQuestion } from './FaqQuestion'
 import { useSearchParams } from '../../hooks/useSearchParams'
+import MDEditor from '@uiw/react-md-editor'
 
 export type FaqCategoryProps = {
     faq: PublicFaqType
@@ -51,32 +52,42 @@ export const PublicFaqCategory = ({ faq }: FaqCategoryProps) => {
                     {faq.category.name}
                 </Typography>
             </Box>
-            {questionsOrdered.map((question, index) => {
-                return (
-                    <FaqQuestion
-                        key={question.id}
-                        question={question}
-                        open={openQuestionId === question.id}
-                        onClick={() => {
-                            if (openQuestionId === question.id) {
+            {faq.category.unifiedPage ? (
+                <Box>
+                    <MDEditor.Markdown
+                        source={questionsOrdered.reduce((acc, question) => {
+                            return acc + `# ${question.question}\n${question.answer}\n\n`
+                        }, '')}
+                    />
+                </Box>
+            ) : (
+                questionsOrdered.map((question, index) => {
+                    return (
+                        <FaqQuestion
+                            key={question.id}
+                            question={question}
+                            open={openQuestionId === question.id}
+                            onClick={() => {
+                                if (openQuestionId === question.id) {
+                                    setSearchParams((prev) => {
+                                        const newParams = new URLSearchParams(prev)
+                                        newParams.delete('question')
+                                        return newParams
+                                    })
+                                    setOpenQuestion(null)
+                                    return
+                                }
                                 setSearchParams((prev) => {
                                     const newParams = new URLSearchParams(prev)
-                                    newParams.delete('question')
+                                    newParams.set('question', question.id)
                                     return newParams
                                 })
-                                setOpenQuestion(null)
-                                return
-                            }
-                            setSearchParams((prev) => {
-                                const newParams = new URLSearchParams(prev)
-                                newParams.set('question', question.id)
-                                return newParams
-                            })
-                            setOpenQuestion(question.id)
-                        }}
-                    />
-                )
-            })}
+                                setOpenQuestion(question.id)
+                            }}
+                        />
+                    )
+                })
+            )}
         </Box>
     )
 }

src/public/publicTypes.ts

@@ -10,6 +10,7 @@ export type PublicFaqCategoryType = {
     name: string
     order: number
     faqs: PublicFaqItemType[]
+    unifiedPage: boolean
 }
 
 export type PublicFaqType = {

src/types.ts

@@ -231,6 +231,7 @@ export interface FaqCategory {
     share: boolean
     private: boolean
     privateId: string | null
+    unifiedPage?: boolean
     collectionList: string[]
     faqs: Faq[]
 }