diff --git a/packages/berlin/src/pages/Register.tsx b/packages/berlin/src/pages/Register.tsx index a1382e6d..f9f25eb1 100644 --- a/packages/berlin/src/pages/Register.tsx +++ b/packages/berlin/src/pages/Register.tsx @@ -33,14 +33,16 @@ import { import useUser from '../hooks/useUser'; // Components -import Button from '../components/button'; import { FlexColumn } from '../components/containers/FlexColumn.styled'; +import { FlexRow } from '../components/containers/FlexRow.styled'; import { Form } from '../components/containers/Form.styled'; import { FormInput } from '../components/form'; -import Select from '../components/select'; -import Label from '../components/typography/Label'; -import { Subtitle } from '../components/typography/Subtitle.styled'; import { SafeArea } from '../layout/Layout.styled'; +import { Subtitle } from '../components/typography/Subtitle.styled'; +import Button from '../components/button'; +import Dots from '../components/dots'; +import Label from '../components/typography/Label'; +import Select from '../components/select'; const sortRegistrationsByCreationDate = (registrations: GetRegistrationResponseType[]) => { return [ @@ -82,6 +84,7 @@ const createRegistrationForms = ({ }; function Register() { + const [step, setStep] = useState(0); const { user, isLoading } = useUser(); const { eventId } = useParams(); const [selectedRegistrationFormKey, setSelectedRegistrationFormKey] = useState< @@ -172,45 +175,52 @@ function Register() { return ( - {groupCategories - ?.filter((groupCategory) => groupCategory.required) - .map((groupCategory) => ( - - ))} - - {createRegistrationForms({ registrations, usersToGroups }).map((form, idx) => { - return ( - groupCategory.required) + .map((groupCategory) => ( + + ))} + {step === 1 && ( + <> + - ); - })} + {createRegistrationForms({ registrations, usersToGroups }).map((form, idx) => { + return ( + + ); + })} + + )} + ); @@ -220,10 +230,12 @@ const SelectEventGroup = ({ groupCategory, userToGroups, user, + setStep, }: { userToGroups: GetUsersToGroupsResponse | null | undefined; groupCategory: GetGroupCategoriesResponse[number] | null | undefined; user: GetUserResponse | null | undefined; + setStep: React.Dispatch>; }) => { // fetch all the groups in the category // show a select with all the groups @@ -281,11 +293,13 @@ const SelectEventGroup = ({ groupId: newGroup, userToGroupId: userGroup.id, }); + setStep((prevStep) => prevStep + 1); return; } // create a new group postUsersToGroupsMutation({ groupId: newGroup }); + setStep((prevStep) => prevStep + 1); }; return ( @@ -297,12 +311,19 @@ const SelectEventGroup = ({ placeholder="Select a Group" onChange={setNewGroup} /> - + + {userGroup && ( + + )} + + ); };