diff --git a/packages/berlin/src/components/dots/Dots.tsx b/packages/berlin/src/components/dots/Dots.tsx index d5bef910..fd3ede01 100644 --- a/packages/berlin/src/components/dots/Dots.tsx +++ b/packages/berlin/src/components/dots/Dots.tsx @@ -4,14 +4,14 @@ import { Dot } from './Dots.styled'; type DotsProps = { dots: number; activeDotIndex: number; - setStep: React.Dispatch>; + handleClick: (index: number) => void; }; -function Dots({ dots, activeDotIndex, setStep }: DotsProps) { +function Dots({ dots, activeDotIndex, handleClick }: DotsProps) { return ( {Array.from({ length: dots }).map((_, index) => ( - setStep(index)} /> + handleClick(index)} /> ))} ); diff --git a/packages/berlin/src/components/header/Header.tsx b/packages/berlin/src/components/header/Header.tsx index eecd7ec1..ad38c389 100644 --- a/packages/berlin/src/components/header/Header.tsx +++ b/packages/berlin/src/components/header/Header.tsx @@ -45,7 +45,6 @@ import IconButton from '../icon-button'; function Header() { const queryClient = useQueryClient(); const { user } = useUser(); - // const location = useLocation(); const theme = useAppStore((state) => state.theme); const toggleTheme = useAppStore((state) => state.toggleTheme); const navigate = useNavigate(); @@ -86,12 +85,10 @@ function Header() { navigate('/')}> Lexicon Logo - {/* {location.pathname === '/' && ( */} {header.title} {header.subtitle} - {/* )} */} diff --git a/packages/berlin/src/pages/Register.tsx b/packages/berlin/src/pages/Register.tsx index f9f25eb1..8bea7053 100644 --- a/packages/berlin/src/pages/Register.tsx +++ b/packages/berlin/src/pages/Register.tsx @@ -44,47 +44,8 @@ import Dots from '../components/dots'; import Label from '../components/typography/Label'; import Select from '../components/select'; -const sortRegistrationsByCreationDate = (registrations: GetRegistrationResponseType[]) => { - return [ - ...registrations.sort((a, b) => { - return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(); - }), - ]; -}; - -const createRegistrationForms = ({ - registrations, - usersToGroups, -}: { - registrations: GetRegistrationsResponseType | undefined | null; - usersToGroups: GetUsersToGroupsResponse | undefined | null; -}) => { - const sortedRegistrationsByCreationDate = sortRegistrationsByCreationDate(registrations || []); - - const registrationForms: { - key: string | 'create'; - registration?: GetRegistrationResponseType; - group?: GetUsersToGroupsResponse[number]['group']; - mode: 'edit' | 'create'; - }[] = sortedRegistrationsByCreationDate.map((reg) => { - return { - key: reg.id || '', - registration: reg, - group: usersToGroups?.find((userToGroup) => userToGroup.group.id === reg.groupId)?.group, - mode: 'edit', - }; - }); - - registrationForms.push({ - key: 'create', - mode: 'create', - }); - - return registrationForms; -}; - function Register() { - const [step, setStep] = useState(0); + const [step, setStep] = useState(null); const { user, isLoading } = useUser(); const { eventId } = useParams(); const [selectedRegistrationFormKey, setSelectedRegistrationFormKey] = useState< @@ -121,6 +82,22 @@ function Register() { enabled: !!eventId, }); + const defaultStep = useMemo(() => { + // check if the user is already in all required groups for the event + const requiredCategories = groupCategories?.filter((category) => category.required); + const userGroups = usersToGroups?.map((userToGroup) => userToGroup.group.groupCategoryId); + + if (requiredCategories && userGroups) { + const userGroupCategories = requiredCategories.map((category) => category.id); + + if (userGroupCategories.every((category) => userGroups.includes(category))) { + return 1; + } + } + + return 0; + }, [groupCategories, usersToGroups]); + const multipleRegistrationData = useQueries({ queries: registrations?.map((registration) => ({ @@ -172,10 +149,18 @@ function Register() { return Loading...; } + const getRecentStep = (step: number | null, defaultStep: number) => { + if (step === null) { + return defaultStep; + } + + return step; + }; + return ( - {step === 0 && + {getRecentStep(step, defaultStep) === 0 && groupCategories ?.filter((groupCategory) => groupCategory.required) .map((groupCategory) => ( @@ -184,10 +169,10 @@ function Register() { groupCategory={groupCategory} userToGroups={usersToGroups} user={user} - setStep={setStep} + afterSubmit={() => setStep(1)} /> ))} - {step === 1 && ( + {getRecentStep(step, defaultStep) === 1 && ( <> )} - + setStep(i)} + /> ); } +const sortRegistrationsByCreationDate = (registrations: GetRegistrationResponseType[]) => { + return [ + ...registrations.sort((a, b) => { + return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(); + }), + ]; +}; + +const createRegistrationForms = ({ + registrations, + usersToGroups, +}: { + registrations: GetRegistrationsResponseType | undefined | null; + usersToGroups: GetUsersToGroupsResponse | undefined | null; +}) => { + const sortedRegistrationsByCreationDate = sortRegistrationsByCreationDate(registrations || []); + + const registrationForms: { + key: string | 'create'; + registration?: GetRegistrationResponseType; + group?: GetUsersToGroupsResponse[number]['group']; + mode: 'edit' | 'create'; + }[] = sortedRegistrationsByCreationDate.map((reg) => { + return { + key: reg.id || '', + registration: reg, + group: usersToGroups?.find((userToGroup) => userToGroup.group.id === reg.groupId)?.group, + mode: 'edit', + }; + }); + + registrationForms.push({ + key: 'create', + mode: 'create', + }); + + return registrationForms; +}; const SelectEventGroup = ({ groupCategory, userToGroups, user, - setStep, + afterSubmit, }: { userToGroups: GetUsersToGroupsResponse | null | undefined; groupCategory: GetGroupCategoriesResponse[number] | null | undefined; user: GetUserResponse | null | undefined; - setStep: React.Dispatch>; + afterSubmit?: () => void; }) => { // fetch all the groups in the category // show a select with all the groups @@ -256,6 +283,7 @@ const SelectEventGroup = ({ } queryClient.invalidateQueries({ queryKey: ['user', user?.id, 'users-to-groups'] }); toast.success(`Joined group successfully!`); + afterSubmit?.(); }, onError: () => { toast.error('Something went wrong.'); @@ -276,6 +304,7 @@ const SelectEventGroup = ({ queryClient.invalidateQueries({ queryKey: ['user', user?.id, 'users-to-groups'] }); toast.success(`Updated group successfully!`); + afterSubmit?.(); }, onError: () => { toast.error('Something went wrong.'); @@ -293,13 +322,11 @@ const SelectEventGroup = ({ groupId: newGroup, userToGroupId: userGroup.id, }); - setStep((prevStep) => prevStep + 1); return; } // create a new group postUsersToGroupsMutation({ groupId: newGroup }); - setStep((prevStep) => prevStep + 1); }; return ( @@ -312,11 +339,6 @@ const SelectEventGroup = ({ onChange={setNewGroup} /> - {userGroup && ( - - )}