56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
|
import { ErrorPage } from 'components/error.page'
|
||
|
|
import { LoadingPage } from 'components/loading.page'
|
||
|
|
import { NextPage } from 'next'
|
||
|
|
import { useRouter } from 'next/router'
|
||
|
|
import React, { useEffect } from 'react'
|
||
|
|
import { useTranslation } from 'react-i18next'
|
||
|
|
import { CardLayout } from '../../../components/form/layouts/card'
|
||
|
|
import { SliderLayout } from '../../../components/form/layouts/slider'
|
||
|
|
import { useSubmission } from '../../../components/use.submission'
|
||
|
|
import { useFormPublicQuery } from '../../../graphql/query/form.public.query'
|
||
|
|
|
||
|
|
const Index: NextPage = () => {
|
||
|
|
const { t, i18n } = useTranslation()
|
||
|
|
const router = useRouter()
|
||
|
|
const submission = useSubmission(router.query.id as string)
|
||
|
|
|
||
|
|
const { loading, data, error } = useFormPublicQuery({
|
||
|
|
variables: {
|
||
|
|
id: router.query.id as string,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
// check form language to switch to!
|
||
|
|
if (!data) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (i18n.language !== data.form.language) {
|
||
|
|
// TODO prompt for language change if is not a match!
|
||
|
|
i18n
|
||
|
|
.changeLanguage(data.form.language)
|
||
|
|
.catch((e: Error) => console.error('failed to change language', e))
|
||
|
|
}
|
||
|
|
}, [data])
|
||
|
|
|
||
|
|
if (loading) {
|
||
|
|
return <LoadingPage message={t('form:build')} />
|
||
|
|
}
|
||
|
|
|
||
|
|
if (error) {
|
||
|
|
return <ErrorPage />
|
||
|
|
}
|
||
|
|
|
||
|
|
switch (data.form.design.layout) {
|
||
|
|
case 'card':
|
||
|
|
return <CardLayout form={data.form} submission={submission} />
|
||
|
|
|
||
|
|
case 'slider':
|
||
|
|
default:
|
||
|
|
return <SliderLayout form={data.form} submission={submission} />
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Index
|