From 644d8610de67d821b0598a53c0f087147d3a416f Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Sun, 29 Sep 2024 10:07:04 +0100
Subject: [PATCH 1/5] feat: add creation user required step

---
 src/app/components/RequiredSteps.tsx         |  48 ++++++++
 src/app/components/dialogs/AddUserDialog.tsx | 120 +++++++++++++++++++
 src/app/layout.tsx                           |  10 +-
 src/app/services/api.types.ts                |  10 ++
 src/app/services/endpoints/user.class.ts     |  34 ++++++
 5 files changed, 215 insertions(+), 7 deletions(-)
 create mode 100644 src/app/components/RequiredSteps.tsx
 create mode 100644 src/app/components/dialogs/AddUserDialog.tsx
 create mode 100644 src/app/services/endpoints/user.class.ts

diff --git a/src/app/components/RequiredSteps.tsx b/src/app/components/RequiredSteps.tsx
new file mode 100644
index 0000000..856de20
--- /dev/null
+++ b/src/app/components/RequiredSteps.tsx
@@ -0,0 +1,48 @@
+'use client';
+import { Grid } from '@mui/material';
+import React from 'react';
+
+import { AddUserDialog } from './dialogs/AddUserDialog';
+import { useAuth } from '../context/AuthProvider';
+import { apiUser } from '../services/endpoints/user.class';
+
+export const RequiredSteps = ({ children }: { children: React.ReactNode }) => {
+  const { user } = useAuth();
+
+  const [isCreateUserDialogOpened, setIsCreateUserDialogOpened] =
+    React.useState(false);
+  const [hasUser, setHasUser] = React.useState(false);
+  React.useEffect(() => {
+    const fetchUser = async () => {
+      await apiUser
+        .getUser(user.id)
+        .then(({ data }) => {
+          setHasUser(true);
+          return data;
+        })
+        .catch((e) => {
+          setHasUser(false);
+          setIsCreateUserDialogOpened(true);
+        });
+    };
+    fetchUser();
+  }, []);
+
+  return (
+    <Grid minHeight={'calc(100vh - 137px)'}>
+      {hasUser ? (
+        children
+      ) : (
+        <AddUserDialog
+          open={isCreateUserDialogOpened}
+          onClose={() => {
+            setIsCreateUserDialogOpened(false);
+          }}
+          callback={() => {
+            setHasUser(true);
+          }}
+        />
+      )}
+    </Grid>
+  );
+};
diff --git a/src/app/components/dialogs/AddUserDialog.tsx b/src/app/components/dialogs/AddUserDialog.tsx
new file mode 100644
index 0000000..8474a59
--- /dev/null
+++ b/src/app/components/dialogs/AddUserDialog.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import { KeyboardBackspace, Send } from '@mui/icons-material';
+import {
+  Dialog,
+  DialogContent,
+  Grid,
+  Alert,
+  TextField,
+  Button,
+} from '@mui/material';
+import { FC, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { useAuth } from '@/app/context/AuthProvider';
+import { apiUser } from '@/app/services/endpoints/user.class';
+import { CreateUserDto } from '@/domain/dtos/user';
+
+import { StyledButton } from '../StyledButton';
+import { StyledDialogActions } from '../StyledDialogActions';
+import { StyledDialogContent } from '../StyledDialogContent';
+import { StyledDialogTitle } from '../StyledDialogTitle';
+
+interface AddUserDialogProps {
+  open?: boolean;
+  onClose?: () => void;
+  callback?: () => void;
+}
+
+export const AddUserDialog: FC<AddUserDialogProps> = ({
+  open,
+  onClose,
+  callback,
+}) => {
+  const { session } = useAuth();
+  const [hasError, setHasError] = useState(false);
+  const [disableButton, setDisableButton] = useState(false);
+
+  const {
+    reset,
+    register,
+    formState: { errors },
+    resetField,
+    handleSubmit,
+  } = useForm<CreateUserDto>();
+
+  const onSubmitForm = async (data: CreateUserDto) => {
+    setDisableButton(true);
+    try {
+      await apiUser
+        .createUser(data)
+        .then(() => {
+          onClose?.();
+          callback?.();
+        })
+        .catch(() => {
+          setHasError(true);
+          setDisableButton(false);
+        });
+    } catch (error) {
+      console.error('Failed to create user:', error);
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      reset();
+      setHasError(false);
+      setDisableButton(false);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (session?.token?.sub)
+      resetField('userId', { defaultValue: session.token.sub });
+  }, [session?.token?.sub]);
+
+  return (
+    <Dialog open={!!open} fullWidth maxWidth="xs">
+      <form onSubmit={handleSubmit(onSubmitForm)}>
+        <StyledDialogTitle>Create a user</StyledDialogTitle>
+        <DialogContent style={{ padding: '5px 8px' }}>
+          <StyledDialogContent>
+            {hasError && (
+              <Grid pb={2}>
+                <Alert severity="error">The creation of a user is failed</Alert>
+              </Grid>
+            )}
+            <TextField
+              label="User id"
+              error={!!errors.userId}
+              disabled
+              required
+              inputProps={{ readOnly: true }}
+              {...register('userId', {})}
+            />
+            <TextField
+              type="number"
+              label="National identity number *"
+              {...register('patientId', {
+                setValueAs: (value) => value || undefined,
+              })}
+            />
+          </StyledDialogContent>
+        </DialogContent>
+        <StyledDialogActions sx={{ justifyContent: 'end' }}>
+          <StyledButton
+            type="submit"
+            color="success"
+            variant="contained"
+            disabled={disableButton}
+          >
+            <Send sx={{ paddingRight: '4px', marginRight: '4px' }} />
+            Create
+          </StyledButton>
+        </StyledDialogActions>
+      </form>
+    </Dialog>
+  );
+};
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 46e6549..43d6fe5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,13 @@
-import { Grid } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
 import type { Metadata } from 'next';
 import { getServerSession } from 'next-auth';
+import React from 'react';
 
 import { authOptions } from './api/auth/authOptions';
 import Footer from './components/Footer';
 import Header from './components/Header';
+import { RequiredSteps } from './components/RequiredSteps';
 import AuthProvider from './context/AuthProvider';
 import theme from './theme';
 
@@ -32,12 +33,7 @@ export default async function RootLayout({
           <ThemeProvider theme={theme}>
             <AuthProvider session={session}>
               <Header />
-              <Grid
-                sx={{ alignContent: 'center' }}
-                minHeight={'calc(100vh - 137px)'}
-              >
-                {children}
-              </Grid>
+              <RequiredSteps>{children}</RequiredSteps>
               <Footer />
             </AuthProvider>
           </ThemeProvider>
diff --git a/src/app/services/api.types.ts b/src/app/services/api.types.ts
index 2c7c663..b8c7df1 100644
--- a/src/app/services/api.types.ts
+++ b/src/app/services/api.types.ts
@@ -10,6 +10,7 @@ import type {
   CreateSHLinkEndpointDto,
 } from '@/domain/dtos/shlink-endpoint';
 import { SHLinkQRCodeRequestDto } from '@/domain/dtos/shlink-qrcode';
+import { CreateUserDto, UserDto } from '@/domain/dtos/user';
 import { type TBundle } from '@/types/fhir.types';
 
 export interface IApi {
@@ -85,6 +86,15 @@ export interface IPathMapTypes {
     update: never;
     delete: never;
   };
+  [EPath.users]: {
+    create: {
+      req: CreateUserDto;
+      res: UserDto;
+    };
+    read: UserDto;
+    update: never;
+    delete: never;
+  };
 }
 
 export type TPathToOperations<TParam extends keyof IPathMapTypes> =
diff --git a/src/app/services/endpoints/user.class.ts b/src/app/services/endpoints/user.class.ts
new file mode 100644
index 0000000..38b9ae9
--- /dev/null
+++ b/src/app/services/endpoints/user.class.ts
@@ -0,0 +1,34 @@
+import { type AxiosInstance } from 'axios';
+
+import { BaseApi, instance } from '../api.class';
+import {
+  EPath,
+  type IPathMapTypes,
+  type TBaseApiProps,
+  type TPathToOperations,
+} from '../api.types';
+
+export class User<
+  TPath extends keyof IPathMapTypes,
+  TOperations extends TBaseApiProps<TOperations> = TPathToOperations<TPath>,
+> extends BaseApi<TOperations> {
+  constructor(protected readonly instance: AxiosInstance) {
+    super(instance);
+  }
+
+  async createUser(data: TOperations['create']['req']) {
+    return await this.create({
+      url: `/${EPath.users}`,
+      data,
+    });
+  }
+
+  async getUser(userId: string) {
+    return await this.get({
+      url: `/${EPath.users}/${userId}`,
+    });
+  }
+}
+
+export const createApiUser = () => new User<EPath.users>(instance);
+export const apiUser = createApiUser();

From f94c419da9cf753ab18870381caee9f9fc2d488d Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Mon, 30 Sep 2024 10:55:19 +0100
Subject: [PATCH 2/5] Update: exclude viewer page from the create user dialog

---
 src/app/components/RequiredSteps.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/app/components/RequiredSteps.tsx b/src/app/components/RequiredSteps.tsx
index 856de20..72b02f0 100644
--- a/src/app/components/RequiredSteps.tsx
+++ b/src/app/components/RequiredSteps.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { Grid } from '@mui/material';
+import { usePathname } from 'next/navigation';
 import React from 'react';
 
 import { AddUserDialog } from './dialogs/AddUserDialog';
@@ -7,15 +8,20 @@ import { useAuth } from '../context/AuthProvider';
 import { apiUser } from '../services/endpoints/user.class';
 
 export const RequiredSteps = ({ children }: { children: React.ReactNode }) => {
-  const { user } = useAuth();
+  const { user, isAuthenticated } = useAuth();
+  const pathname = usePathname();
 
   const [isCreateUserDialogOpened, setIsCreateUserDialogOpened] =
     React.useState(false);
   const [hasUser, setHasUser] = React.useState(false);
+  const isAnonymous = !isAuthenticated && pathname === '/viewer';
+
+  console.log(pathname);
+
   React.useEffect(() => {
-    const fetchUser = async () => {
-      await apiUser
-        .getUser(user.id)
+    const fetchUser = async (id: string) =>
+      apiUser
+        .getUser(id)
         .then(({ data }) => {
           setHasUser(true);
           return data;
@@ -24,13 +30,13 @@ export const RequiredSteps = ({ children }: { children: React.ReactNode }) => {
           setHasUser(false);
           setIsCreateUserDialogOpened(true);
         });
-    };
-    fetchUser();
+
+    if (user?.id) fetchUser(user.id);
   }, []);
 
   return (
     <Grid minHeight={'calc(100vh - 137px)'}>
-      {hasUser ? (
+      {isAnonymous || hasUser ? (
         children
       ) : (
         <AddUserDialog

From 511a0e9eb678574c28fa387b358f67b6ad747496 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Mon, 30 Sep 2024 11:20:13 +0100
Subject: [PATCH 3/5] fix: feedback udpates

---
 src/app/components/RequiredSteps.tsx         | 2 --
 src/app/components/dialogs/AddUserDialog.tsx | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/components/RequiredSteps.tsx b/src/app/components/RequiredSteps.tsx
index 72b02f0..394c7af 100644
--- a/src/app/components/RequiredSteps.tsx
+++ b/src/app/components/RequiredSteps.tsx
@@ -16,8 +16,6 @@ export const RequiredSteps = ({ children }: { children: React.ReactNode }) => {
   const [hasUser, setHasUser] = React.useState(false);
   const isAnonymous = !isAuthenticated && pathname === '/viewer';
 
-  console.log(pathname);
-
   React.useEffect(() => {
     const fetchUser = async (id: string) =>
       apiUser
diff --git a/src/app/components/dialogs/AddUserDialog.tsx b/src/app/components/dialogs/AddUserDialog.tsx
index 8474a59..981971a 100644
--- a/src/app/components/dialogs/AddUserDialog.tsx
+++ b/src/app/components/dialogs/AddUserDialog.tsx
@@ -78,7 +78,7 @@ export const AddUserDialog: FC<AddUserDialogProps> = ({
   return (
     <Dialog open={!!open} fullWidth maxWidth="xs">
       <form onSubmit={handleSubmit(onSubmitForm)}>
-        <StyledDialogTitle>Create a user</StyledDialogTitle>
+        <StyledDialogTitle>Verify user details</StyledDialogTitle>
         <DialogContent style={{ padding: '5px 8px' }}>
           <StyledDialogContent>
             {hasError && (

From 0e2e53a2247c04e40c09a851e953d67cb8e82924 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Mon, 30 Sep 2024 11:26:56 +0100
Subject: [PATCH 4/5] fix: feedback udpates v0.0.1

---
 src/app/components/RequiredSteps.tsx         |  4 ++--
 src/app/components/dialogs/AddUserDialog.tsx | 11 ++---------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/app/components/RequiredSteps.tsx b/src/app/components/RequiredSteps.tsx
index 394c7af..cc95b0a 100644
--- a/src/app/components/RequiredSteps.tsx
+++ b/src/app/components/RequiredSteps.tsx
@@ -1,7 +1,7 @@
 'use client';
 import { Grid } from '@mui/material';
 import { usePathname } from 'next/navigation';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { AddUserDialog } from './dialogs/AddUserDialog';
 import { useAuth } from '../context/AuthProvider';
@@ -16,7 +16,7 @@ export const RequiredSteps = ({ children }: { children: React.ReactNode }) => {
   const [hasUser, setHasUser] = React.useState(false);
   const isAnonymous = !isAuthenticated && pathname === '/viewer';
 
-  React.useEffect(() => {
+  useEffect(() => {
     const fetchUser = async (id: string) =>
       apiUser
         .getUser(id)
diff --git a/src/app/components/dialogs/AddUserDialog.tsx b/src/app/components/dialogs/AddUserDialog.tsx
index 981971a..0f5d2ba 100644
--- a/src/app/components/dialogs/AddUserDialog.tsx
+++ b/src/app/components/dialogs/AddUserDialog.tsx
@@ -1,14 +1,7 @@
 'use client';
 
-import { KeyboardBackspace, Send } from '@mui/icons-material';
-import {
-  Dialog,
-  DialogContent,
-  Grid,
-  Alert,
-  TextField,
-  Button,
-} from '@mui/material';
+import { Send } from '@mui/icons-material';
+import { Dialog, DialogContent, Grid, Alert, TextField } from '@mui/material';
 import { FC, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 

From 976f648360267692f924c3e61b6a0ab93f83d98b Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Mon, 30 Sep 2024 11:42:44 +0100
Subject: [PATCH 5/5] fix: remove unused prop

---
 src/app/components/RequiredSteps.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/RequiredSteps.tsx b/src/app/components/RequiredSteps.tsx
index cc95b0a..342171f 100644
--- a/src/app/components/RequiredSteps.tsx
+++ b/src/app/components/RequiredSteps.tsx
@@ -24,7 +24,7 @@ export const RequiredSteps = ({ children }: { children: React.ReactNode }) => {
           setHasUser(true);
           return data;
         })
-        .catch((e) => {
+        .catch(() => {
           setHasUser(false);
           setIsCreateUserDialogOpened(true);
         });