work on add User

typescript/Frontend/src/components/Users/AddUser.tsx

@@ -1,6 +1,6 @@
 import { Dialog, DialogTitle, IconButton, DialogContent } from "@mui/material";
 import { useState } from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import axiosConfig from "../../config/axiosConfig";
 import { I_User } from "../../util/user.util";
 import InnovenergyButton from "../Layout/InnovenergyButton";
@@ -9,12 +9,15 @@ import UserForm from "./UserForm";
 
 const AddUser = () => {
   const [open, setOpen] = useState(false);
+  const { locale } = useIntl();
 
   const handleSubmit = (data: Partial<I_User>) => {
-    return axiosConfig.post("/CreateUser", data).then((res) => {
+    return axiosConfig
-      setOpen(false);
+      .post("/CreateUser", { ...data, password: "", language: locale })
-      return res;
+      .then((res) => {
-    });
+        setOpen(false);
+        return res;
+      });
   };
 
   return (

typescript/Frontend/src/components/Users/User.tsx

@@ -1,16 +1,18 @@
 import { Box, CircularProgress, Alert } from "@mui/material";
 import { AxiosError } from "axios";
-import { useState, useEffect, FC } from "react";
+import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import axiosConfig from "../../config/axiosConfig";
 import { I_User } from "../../util/user.util";
 import UserForm from "./UserForm";
+import { useIntl } from "react-intl";
 
 interface I_DetailProps<T> {
   hasMoveButton?: boolean;
 }
 const Detail = <T extends { id: number }>(props: I_DetailProps<T>) => {
   const { id } = useParams();
+  const { locale } = useIntl();
   const [values, setValues] = useState<I_User>();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<AxiosError>();
@@ -20,10 +22,12 @@ const Detail = <T extends { id: number }>(props: I_DetailProps<T>) => {
     axiosConfig
       .get("/GetUserById?id=" + id)
       .then((res) => {
+        console.log("noterr");
         setValues(res.data);
         setLoading(false);
       })
       .catch((err: AxiosError) => {
+        console.log("err");
         setError(err);
         setLoading(false);
       });
@@ -33,6 +37,8 @@ const Detail = <T extends { id: number }>(props: I_DetailProps<T>) => {
     return axiosConfig.put("/UpdateUser", {
       ...formikValues,
       id: id,
+      password: "",
+      language: locale,
     });
   };
 

typescript/Frontend/src/components/Users/UserForm.tsx

@@ -1,5 +1,5 @@
-import { Alert, Grid, Snackbar } from "@mui/material";
+import { Alert, CircularProgress, Grid, Snackbar } from "@mui/material";
-import { AxiosResponse } from "axios";
+import { AxiosError, AxiosResponse } from "axios";
 import { useFormik } from "formik";
 import { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -14,6 +14,8 @@ interface I_UserFormProps {
 const UserForm = (props: I_UserFormProps) => {
   const { values, handleSubmit } = props;
   const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<AxiosError>();
 
   const intl = useIntl();
 
@@ -21,11 +23,19 @@ const UserForm = (props: I_UserFormProps) => {
     initialValues: {
       email: values ? values.email : "",
       information: values ? values.information : "",
+      name: values ? values.name : "",
     },
     onSubmit: (formikValues) => {
-      handleSubmit(formikValues).then(() => {
+      setLoading(true);
-        setOpen(true);
+      handleSubmit(formikValues)
-      });
+        .then(() => {
+          setOpen(true);
+        })
+        .catch((err: AxiosError) => {
+          setOpen(true);
+          setError(err);
+          setLoading(false);
+        });
     },
   });
 
@@ -37,6 +47,16 @@ const UserForm = (props: I_UserFormProps) => {
     <form onSubmit={formik.handleSubmit}>
       <InnovenergyTextfield
         id="name-textfield"
+        label={intl.formatMessage({
+          id: "name",
+          defaultMessage: "Name",
+        })}
+        name="name"
+        value={formik.values.name}
+        handleChange={formik.handleChange}
+      />
+      <InnovenergyTextfield
+        id="email-textfield"
         label={intl.formatMessage({
           id: "email",
           defaultMessage: "Email",
@@ -46,7 +66,7 @@ const UserForm = (props: I_UserFormProps) => {
         handleChange={formik.handleChange}
       />
       <InnovenergyTextfield
-        id="region-textfield"
+        id="information-textfield"
         label={intl.formatMessage({
           id: "Information",
           defaultMessage: "Information",
@@ -56,8 +76,9 @@ const UserForm = (props: I_UserFormProps) => {
         handleChange={formik.handleChange}
       />
       <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
+        {loading && <CircularProgress />}
         <InnovenergyButton type="submit">
-          <FormattedMessage id="applyChanges" defaultMessage="Apply changes" />
+          <FormattedMessage id="submit" defaultMessage="Submit" />
         </InnovenergyButton>
       </Grid>
       <Snackbar
@@ -69,11 +90,20 @@ const UserForm = (props: I_UserFormProps) => {
         autoHideDuration={6000}
         onClose={handleClose}
       >
-        <Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
+        <Alert
-          <FormattedMessage
+          onClose={handleClose}
-            id="updatedSuccessfully"
+          severity={error ? "error" : "success"}
-            defaultMessage="Updated successfully"
+          sx={{ width: "100%" }}
-          />
+        >
+          {/* TODO how to handle err translation? */}
+          {error ? (
+            <FormattedMessage id="error" defaultMessage={error.message} />
+          ) : (
+            <FormattedMessage
+              id="updatedSuccessfully"
+              defaultMessage="Updated successfully"
+            />
+          )}
         </Alert>
       </Snackbar>
     </form>