Add name and email notification fields to user type and update checkb…

…ox component
lexicongovernance · Feb 8, 2024 · c9421a6 · c9421a6
1 parent d54bd28
commit c9421a6
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 38 deletions.
diff --git a/packages/api/src/types/UserType.ts b/packages/api/src/types/UserType.ts
@@ -2,13 +2,17 @@ export type GetUserResponse = {
   id: string;
   username: string | null;
   email: string | null;
+  name: string | null;
+  emailNotification: boolean;
   createdAt: string;
   updatedAt: string;
 };
 
 export type PutUserRequest = {
   userId: string;
   username: string;
+  name?: string;
+  emailNotification?: boolean;
   email?: string;
   groupIds: string[];
   userAttributes: Record<string, string>;

diff --git a/packages/api/src/updateUserData.ts b/packages/api/src/updateUserData.ts
@@ -3,6 +3,8 @@ import { PutUserRequest, GetUserResponse } from './types/UserType';
 async function updateUserData({
   userId,
   username,
+  emailNotification,
+  name,
   email,
   groupIds,
   userAttributes,
@@ -19,6 +21,8 @@ async function updateUserData({
         username,
         email,
         userAttributes,
+        emailNotification,
+        name,
       }),
     });
 

diff --git a/packages/berlin/src/components/checkbox/Checkbox.tsx b/packages/berlin/src/components/checkbox/Checkbox.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import Label from '../typography/Label';
 import {
   CheckboxContainer,
@@ -7,35 +6,41 @@ import {
   Icon,
   StyledCheckbox,
 } from './Checkbox.styled';
+import React from 'react';
 
 type CheckboxProps = {
   text: string;
   $required?: boolean;
+  onClick?: () => void;
+  value: boolean;
 };
 
-function Checkbox({ text, $required }: CheckboxProps) {
-  const [checked, setChecked] = useState(false);
-  return (
-    <Container>
-      <CheckboxContainer>
-        <HiddenCheckbox
-          type="checkbox"
-          checked={checked}
-          id={text}
-          name={text}
-          required={$required}
-        />
-        <StyledCheckbox $checked={checked} onClick={() => setChecked(!checked)}>
-          <Icon viewBox="0 0 24 24">
-            <polyline points="20 6 9 17 4 12" />
-          </Icon>
-        </StyledCheckbox>
-      </CheckboxContainer>
-      <Label $required={$required} htmlFor={text} onClick={() => setChecked(!checked)}>
-        {text}
-      </Label>
-    </Container>
-  );
-}
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ text, $required, onClick, value }, ref) => {
+    return (
+      <Container>
+        <CheckboxContainer>
+          <HiddenCheckbox
+            type="checkbox"
+            checked={value}
+            id={text}
+            name={text}
+            required={$required}
+            ref={ref}
+            onChange={() => {}}
+          />
+          <StyledCheckbox $checked={value} onClick={onClick}>
+            <Icon viewBox="0 0 24 24">
+              <polyline points="20 6 9 17 4 12" />
+            </Icon>
+          </StyledCheckbox>
+        </CheckboxContainer>
+        <Label $required={$required} htmlFor={text} onClick={onClick}>
+          {text}
+        </Label>
+      </Container>
+    );
+  },
+);
 
 export default Checkbox;
diff --git a/packages/berlin/src/pages/Account.tsx b/packages/berlin/src/pages/Account.tsx
@@ -45,7 +45,6 @@ type CredentialsGroup = {
 }[];
 
 type UserAttributes = {
-  name: string;
   institution: string;
   role: string;
   publications: { value: string }[];
@@ -55,6 +54,8 @@ type UserAttributes = {
 
 type InitialUser = {
   username: string;
+  name: string;
+  emailNotification: boolean;
   email: string;
   group: string;
   userAttributes: UserAttributes | undefined;
@@ -87,9 +88,11 @@ function Account() {
     enabled: !!user?.id,
   });
 
-  const initialUser = {
+  const initialUser: InitialUser = {
     username: user?.username || '',
+    name: user?.name || '',
     email: user?.email || '',
+    emailNotification: user?.emailNotification ?? true,
     group: (userGroups && userGroups[0]?.id) || '',
     userAttributes: userAttributes?.reduce(
       (acc, curr) => {
@@ -112,7 +115,6 @@ function Account() {
         }
       },
       {
-        name: '',
         institution: '',
         role: '',
         publications: [{ value: '' }],
@@ -208,6 +210,8 @@ function AccountForm({
         userId: user.id,
         username: value.username,
         email: value.email,
+        emailNotification: value.emailNotification,
+        name: value.name,
         groupIds: [value.group],
         userAttributes: {
           ...value.userAttributes,
@@ -225,6 +229,16 @@ function AccountForm({
     }
   };
 
+  const credentialOnChange = (value: string, i: number) => {
+    if (value === 'None') {
+      setValue(`userAttributes.credentialsGroup.${i}.institution`, 'None');
+      setValue(`userAttributes.credentialsGroup.${i}.field`, 'None');
+      // Manually trigger validation
+      trigger(`userAttributes.credentialsGroup.${i}.institution`);
+      trigger(`userAttributes.credentialsGroup.${i}.field`);
+    }
+  };
+
   return (
     <FlexColumn>
       <Title>Complete your registration</Title>
@@ -237,7 +251,7 @@ function AccountForm({
             {...register('username', { required: 'Username is required', minLength: 3 })}
             errors={errors.username ? [errors.username.message ?? ''] : []}
           />
-          <Input label="Name" placeholder="Enter your Name" {...register('userAttributes.name')} />
+          <Input label="Name" placeholder="Enter your Name" {...register('name')} />
           <Input label="Email" placeholder="Enter your Email" {...register('email')} />
           <Controller
             name="group"
@@ -287,13 +301,7 @@ function AccountForm({
                       onChange={(value) => {
                         field.onChange(value);
                         // Check if selected credential is 'None' and set default values accordingly
-                        if (value === 'None') {
-                          setValue(`userAttributes.credentialsGroup.${i}.institution`, 'None');
-                          setValue(`userAttributes.credentialsGroup.${i}.field`, 'None');
-                          // Manually trigger validation
-                          trigger(`userAttributes.credentialsGroup.${i}.institution`);
-                          trigger(`userAttributes.credentialsGroup.${i}.field`);
-                        }
+                        credentialOnChange(value, i);
                       }}
                       onBlur={field.onBlur}
                       value={field.value}
@@ -382,8 +390,18 @@ function AccountForm({
               icon={{ src: `/icons/add-${theme}.svg`, alt: 'Add icon' }}
             />
           </FlexColumn>
-
-          <Checkbox text="Agree to disagree?" $required />
+          <Controller
+            name={`emailNotification`}
+            control={control}
+            render={({ field }) => (
+              <Checkbox
+                text="Would you like to receive email notifications?"
+                {...field}
+                onClick={() => field.onChange(!field.value)}
+                value={field.value}
+              />
+            )}
+          />
           <Button type="submit" disabled={!isValid}>
             Submit
           </Button>