add default step functionality

lexicongovernance · Jun 21, 2024 · 1456a2e · 1456a2e
1 parent fb6a7e0
commit 1456a2e
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 59 deletions.
diff --git 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<React.SetStateAction<number>>;
+  handleClick: (index: number) => void;
 };
 
-function Dots({ dots, activeDotIndex, setStep }: DotsProps) {
+function Dots({ dots, activeDotIndex, handleClick }: DotsProps) {
   return (
     <FlexRow>
       {Array.from({ length: dots }).map((_, index) => (
-        <Dot key={index} $active={index === activeDotIndex} onClick={() => setStep(index)} />
+        <Dot key={index} $active={index === activeDotIndex} onClick={() => handleClick(index)} />
       ))}
     </FlexRow>
   );

diff --git 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() {
       <HeaderContainer>
         <LogoContainer onClick={() => navigate('/')}>
           <img src={`/logos/lexicon-${theme}.svg`} alt="Lexicon Logo" height={64} width={64} />
-          {/* {location.pathname === '/' && ( */}
           <LogoTextContainer>
             <LogoTitle>{header.title}</LogoTitle>
             <LogoSubtitle>{header.subtitle}</LogoSubtitle>
           </LogoTextContainer>
-          {/* )} */}
         </LogoContainer>
         <NavContainer>
           <NavButtons>

diff --git 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<number>(0);
+  const [step, setStep] = useState<number | null>(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 <Subtitle>Loading...</Subtitle>;
   }
 
+  const getRecentStep = (step: number | null, defaultStep: number) => {
+    if (step === null) {
+      return defaultStep;
+    }
+
+    return step;
+  };
+
   return (
     <SafeArea>
       <FlexColumn $gap="1.5rem">
-        {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 && (
           <>
             <SelectRegistrationDropdown
               onSelectedRegistrationFormKeyChange={setSelectedRegistrationFormKey}
@@ -220,22 +205,64 @@ function Register() {
             })}
           </>
         )}
-        <Dots dots={2} activeDotIndex={step} setStep={setStep} />
+        <Dots
+          dots={2}
+          activeDotIndex={getRecentStep(step, defaultStep)}
+          handleClick={(i) => setStep(i)}
+        />
       </FlexColumn>
     </SafeArea>
   );
 }
+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<React.SetStateAction<number>>;
+  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}
       />
       <FlexRow>
-        {userGroup && (
-          <Button $color="secondary" onClick={() => setStep((prevStep) => prevStep + 1)}>
-            Skip
-          </Button>
-        )}
         <Button
           disabled={!newGroup || (userGroup && userGroup.group.id === newGroup)}
           onClick={onSubmit}