simplify user creation

wbglaeser · wbglaeser · commit 8d503ad36896 · 2025-04-11T17:54:37.000+02:00
diff --git a/src/ui/screens/info-pages/components/UserItem.js b/src/ui/screens/info-pages/components/UserItem.js
@@ -1,15 +1,14 @@
-import React, { useState } from "react";
-import { Typography, Button } from "@mui/material";
+import React from "react";
+import { Typography } from "@mui/material";
 import { VBox, HBox } from "@/ui/shared-components/LayoutBoxes";
 import theme from "@/theme";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
 import RegularButton from "@/ui/shared-components/RegularButton";
 import { IconButton } from "@mui/material";
+import DeleteIcon from '@mui/icons-material/Delete';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
 
 
 const UserItem = ({ t, user, continueWithExisting, deleteExistingProfile, exportProfile }) => {
-    const [isVisible, setIsVisible] = useState(false);
-
     return (
         <HBox sx={{
             maxWidth: '800px',
@@ -23,13 +22,7 @@ const UserItem = ({ t, user, continueWithExisting, deleteExistingProfile, export
                         <Typography variant="h6">{user.id}</Typography>
                         <Typography variant="body2">{user.type}</Typography>
                     </VBox>
-                    <HBox alignItems={'center'} justifyContent={'flex-end'}>
-                        <RegularButton
-                            variant={'yellowContained'}
-                            onClick={() => continueWithExisting(user.id)}
-                            text={'app.welcomeBack.continueBtn'}
-                            link={'/onboarding-choice'}
-                        />
+                    <HBox alignItems={'center'} justifyContent={'flex-end'} sx={{ flexWrap : 'wrap' }}>
                         <IconButton
                             aria-label="more options"
                             sx={{
@@ -40,57 +33,32 @@ const UserItem = ({ t, user, continueWithExisting, deleteExistingProfile, export
                                     color: 'black.main',
                                 },
                             }}
-                            onClick={() => setIsVisible(!isVisible)}
+                            onClick={() => exportProfile(user.id)}
                         >
-                            <MoreVertIcon />
+                            <FileDownloadIcon sx={{ fontSize: '20px'}} />
                         </IconButton>
+                        <IconButton
+                            aria-label="more options"
+                            sx={{
+                                padding: '8px',
+                                color: 'blue.main',
+                                '&:hover': {
+                                    backgroundColor: 'transparent',
+                                    color: 'black.main',
+                                },
+                            }}
+                            onClick={() => deleteExistingProfile(user.id)}
+                        >
+                            <DeleteIcon sx={{ fontSize: '20px'}} />
+                        </IconButton>
+                        <RegularButton
+                            variant={'yellowContained'}
+                            onClick={() => continueWithExisting(user.id)}
+                            text={'app.welcomeBack.continueBtn'}
+                            link={'/onboarding-choice'}
+                        />
                     </HBox>
                 </HBox>
-                {
-                    isVisible && (
-                        <HBox alignItems={'center'} justifyContent={'flex-end'}>
-                            <Button
-                                variant="text"
-                                onClick={() => exportProfile(user.id)}
-                                sx={{
-                                    color: 'blue.main',
-                                    padding: '0',
-                                    '&:hover': {
-                                        backgroundColor: 'transparent',
-                                        color: 'black.main',
-                                    },
-                                    '&:focus': {
-                                        backgroundColor: 'transparent',
-                                        color: 'black.main',
-                                    }
-                                }}
-                            >
-                                <Typography variant="body2" sx={{ color: 'inherit' }}>
-                                    {t("app.welcomeBack.exportBtn")}
-                                </Typography>
-                            </Button>
-                            <Button
-                                variant="text"
-                                onClick={() => deleteExistingProfile(user.id)}
-                                sx={{
-                                    padding: '0',
-                                    color: 'blue.main',
-                                    '&:hover': {
-                                        backgroundColor: 'transparent',
-                                        color: 'black.main',
-                                    },
-                                    '&:focus': {
-                                        backgroundColor: 'transparent',
-                                        color: 'black.main',
-                                    }
-                                }}>
-                                <Typography variant="body2" sx={{ color: 'inherit' }}>
-                                    {t("app.welcomeBack.deleteBtn")}
-                                </Typography>
-                            </Button>
-                        </HBox>
-                    )
-                }
             </VBox>
         </HBox>
     );
diff --git a/src/ui/screens/info-pages/hooks/useFetchUserList.js b/src/ui/screens/info-pages/hooks/useFetchUserList.js
@@ -1,14 +1,21 @@
+import { useEffect, useState } from "react";
 import userManager from "@/core/managers/userManager";
 
-export const useFetchUserList = () => {
-  const userIds = userManager.retrieveUserIds();
-  const userList = userIds.map((userId) => {
-    const userData = userManager.retrieveUserData(userId);
-    return {
-      id: userData['@id'],
-      type: userData['@type'],
-    };
-  });
+export const useFetchUserList = (userDeleted) => {
+  const [userList, setUserList] = useState([]);
+
+  useEffect (() => {
+    const userIds = userManager.retrieveUserIds();
+    const newUserList = userIds.map((userId) => {
+      const userData = userManager.retrieveUserData(userId);
+      return {
+        id: userData['@id'],
+        type: userData['@type'],
+      };
+    });
+    setUserList(newUserList)
+  }, [userDeleted]);
+
   return userList;
 }
 export default useFetchUserList;
diff --git a/src/ui/screens/info-pages/returning-user/InfoScreenReturningUserContainer.js b/src/ui/screens/info-pages/returning-user/InfoScreenReturningUserContainer.js
@@ -1,12 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import useTranslation from "@/ui/language/useTranslation";
 import dayjs from "dayjs";
 import { convertUserProfileToTurtle } from "@foerderfunke/matching-engine/src/profile-conversion";
-import {
-  questionsStackStore,
-  useSelectedTopicsStore,
-  useValidationReportStore,
-} from "@/ui/storage/zustand";
 import { useUserStore } from "@/ui/storage/zustand";
 import InfoScreenReturningUser from "./InfoScreenReturningUser";
 import useJointValidationStatus from "@/ui/shared-hooks/useJointValidationStatus";
@@ -16,10 +11,11 @@ import useFetchUserList from "../hooks/useFetchUserList";
 
 const InfoScreenReturningUserContainer = () => {
   const { t } = useTranslation();
+  const [userDeleted, setUserDeleted] = useState(false);
   const isDesktop = useStore((state) => state.isDesktop);
   const { isLoadingJointStatus } = useJointValidationStatus();
   const updateUserId = useUserStore((state) => state.updateUserId);
-  const userList = useFetchUserList();
+  const userList = useFetchUserList(userDeleted);
 
   const exportProfile = async (userId) => {
     const userProfile = userManager.retrieveUserData(userId);
@@ -40,17 +36,15 @@ const InfoScreenReturningUserContainer = () => {
 
   const deleteExistingProfile = (userId) => {
     userManager.deleteUser(userId);
-    useValidationReportStore.getState().clear();
-    useSelectedTopicsStore.getState().clear();
-    questionsStackStore.getState().resetQuestionsStack();
+    setUserDeleted(!userDeleted);
   };
 
   return (
     <InfoScreenReturningUser
+      t={t}
       isLoading={isLoadingJointStatus}
       isDesktop={isDesktop}
       userList={userList}
-      t={t}
       exportProfile={exportProfile}
       continueWithExisting={continueWithExisting}
       deleteExistingProfile={deleteExistingProfile}
diff --git a/src/ui/screens/onboarding-pages/user/OnboardingUserContainer.js b/src/ui/screens/onboarding-pages/user/OnboardingUserContainer.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useNavigate } from "react-router-dom";
 import { Typography, TextField } from "@mui/material";
 import Layout from "@/ui/shared-components/Layout";
 import AppScreenWrapper from "@/ui/shared-components/AppScreenWrapper";
@@ -10,6 +11,19 @@ const OnboardingUser = () => {
     const [userId, setUserId] = useState('');
     const userType = 'Citizen'; // This is hardcoded for now, but it should be dynamic based on the user type
     const { initialiseNewUser, error } = useInitialiseNewUser();
+    const navigate = useNavigate();
+
+    const handleCreateUser = () => {
+        const { success, error } = initialiseNewUser(userId, userType);
+        console.log('User creation result:', success, error);
+    
+        if (success) {
+            navigate("/onboarding-choice");
+            console.log('User created successfully');
+        } else {
+            console.error('Failed to create user:', error.message);
+        }
+    };
 
     return (
         <Layout isApp={true} logo={false}>
@@ -43,17 +57,16 @@ const OnboardingUser = () => {
                             value={userId}
                             onChange={(e) => setUserId(e.target.value)}
                         />
-                        {error ? (
+                        {error?.message ? (
                             <Typography variant="body1" color="error">
-                                {error}
+                                {error.message}
                             </Typography>
                         ) : null}
                     </VBox>
                     <RegularButton
                         variant={'blueContained'}
                         text={'app.welcomeBack.createNewBtn'}
-                        onClick={() => initialiseNewUser(userId, userType)}
-                        link={'/onboarding-choice'}
+                        onClick={handleCreateUser}
                     />
                 </VBox>
             </AppScreenWrapper>
diff --git a/src/ui/shared-components/RegularButton.js b/src/ui/shared-components/RegularButton.js
@@ -107,7 +107,7 @@ const RegularButton = ({
         <Button
             variant="contained"
             sx={{...buttonStyles[variant] || buttonStyles.default}}
-            component={Link}
+            component={link ? Link : 'button'}
             to={link}
             onClick={onClick}
         >
diff --git a/src/ui/shared-hooks/useInitialiseNewUser.js b/src/ui/shared-hooks/useInitialiseNewUser.js
@@ -1,9 +1,8 @@
-import { useState, useCallback } from "react";
+import { useCallback } from "react";
 import userManager from "@/core/managers/userManager";
 import { useUserStore } from "@/ui/storage/zustand";
 
 const useInitialiseNewUser = () => {
-    const [error, setError] = useState(null);
     const updateUserId = useUserStore((state) => state.updateUserId);
 
     const initialiseNewUser = useCallback((userId, userType) => {
@@ -13,13 +12,14 @@ const useInitialiseNewUser = () => {
         try {
             userManager.initialiseNewUser(userIdWithNameSpace, userTypeWithNameSpace);
             updateUserId(userIdWithNameSpace);
+            return { success: true, error: null };
         } catch (err) {
             console.error(`Error initializing new user: ${err.message}`);
-            setError(err);
+            return { success: false, error: err };
         }
     }, [updateUserId]);
 
-    return { initialiseNewUser, error };
+    return { initialiseNewUser };
 };
 
 export default useInitialiseNewUser;
diff --git a/src/ui/shared-hooks/useJointValidationStatus.js b/src/ui/shared-hooks/useJointValidationStatus.js
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { useQuestionsUpdate, useValidationUpdate } from "@/ui/storage/updates";
 
 const useJointValidationStatus = () => {
-    const [isLoadingJointStatus, setIsLoadingJointStatus] = useState(false);
+    const [isLoadingJointStatus, setIsLoadingJointStatus] = useState(true);
     const validationIsLoading = useValidationUpdate((s) => s.validationIsLoading);
     const questionsAreLoading = useQuestionsUpdate((s) => s.questionsAreLoading);
 

Original file line number	Diff line number	Diff line change
`@@ -107,7 +107,7 @@ const RegularButton = ({`
`107`	`107`	`<Button`
`108`	`108`	`variant="contained"`
`109`	`109`	`sx={{...buttonStyles[variant] \|\| buttonStyles.default}}`
`110`		`- component={Link}`
	`110`	`+ component={link ? Link : 'button'}`
`111`	`111`	`to={link}`
`112`	`112`	`onClick={onClick}`
`113`	`113`	`>`