|
1 | 1 | import React, { useEffect, useState } from 'react'; |
2 | 2 |
|
3 | | -import { Heading } from '@douglasneuroinformatics/libui/components'; |
| 3 | +import { Card, Heading } from '@douglasneuroinformatics/libui/components'; |
4 | 4 | import { useTranslation } from '@douglasneuroinformatics/libui/hooks'; |
5 | 5 | import type { FormTypes } from '@opendatacapture/runtime-core'; |
6 | 6 | import { createFileRoute, useLocation } from '@tanstack/react-router'; |
| 7 | +import { CheckCircle } from 'lucide-react'; |
| 8 | +import { AnimatePresence, motion } from 'motion/react'; |
7 | 9 |
|
8 | 10 | import { PageHeader } from '@/components/PageHeader'; |
9 | 11 | import { StartSessionForm } from '@/components/StartSessionForm'; |
@@ -41,16 +43,45 @@ const RouteComponent = () => { |
41 | 43 | {t('startSession')} |
42 | 44 | </Heading> |
43 | 45 | </PageHeader> |
44 | | - <StartSessionForm |
45 | | - currentGroup={currentGroup} |
46 | | - initialValues={initialValues} |
47 | | - readOnly={currentSession !== null || createSessionMutation.isPending} |
48 | | - username={currentUser?.username} |
49 | | - onSubmit={async (formData) => { |
50 | | - const session = await createSessionMutation.mutateAsync(formData); |
51 | | - startSession({ ...session, type: formData.type }); |
52 | | - }} |
53 | | - /> |
| 46 | + {currentSession === null && ( |
| 47 | + <StartSessionForm |
| 48 | + currentGroup={currentGroup} |
| 49 | + initialValues={initialValues} |
| 50 | + readOnly={currentSession !== null || createSessionMutation.isPending} |
| 51 | + username={currentUser?.username} |
| 52 | + onSubmit={async (formData) => { |
| 53 | + const session = await createSessionMutation.mutateAsync(formData); |
| 54 | + startSession({ ...session, type: formData.type }); |
| 55 | + }} |
| 56 | + /> |
| 57 | + )} |
| 58 | + <AnimatePresence> |
| 59 | + {currentSession !== null && ( |
| 60 | + <motion.div |
| 61 | + animate={{ opacity: 1, scale: 1 }} |
| 62 | + className="flex grow" |
| 63 | + exit={{ opacity: 0, scale: 0 }} |
| 64 | + initial={{ opacity: 0, scale: 0 }} |
| 65 | + key="modal" |
| 66 | + > |
| 67 | + <div className="flex grow items-center justify-center"> |
| 68 | + {currentSession !== null && ( |
| 69 | + <Card className="mx-auto block max-w-3xl border p-12 text-green-600 opacity-70 dark:text-green-300"> |
| 70 | + <div className="flex flex-col items-center justify-center gap-y-10"> |
| 71 | + <CheckCircle className="!size-20" /> |
| 72 | + <p className="max-w-2xl text-center text-lg font-medium"> |
| 73 | + {t({ |
| 74 | + en: 'The current session must be ended before starting the form again.', |
| 75 | + fr: 'La session en cours doit être terminée avant de recommencer le formulaire.' |
| 76 | + })} |
| 77 | + </p> |
| 78 | + </div> |
| 79 | + </Card> |
| 80 | + )} |
| 81 | + </div> |
| 82 | + </motion.div> |
| 83 | + )} |
| 84 | + </AnimatePresence> |
54 | 85 | </React.Fragment> |
55 | 86 | ); |
56 | 87 | }; |
|
0 commit comments