💄 Improved UI

src/components/DeleteForm.tsx

@@ -13,20 +13,26 @@ const DeleteForm: React.FC<Props> = ({ isModalOpen, onClose, id }) => {
   const { mutate: deleteUser, isLoading } = useDeleteUser();
 
   const handleDelete = async () => {
-    await deleteUser(id)
-    onClose()
-  }
+    if (id) {
+      await deleteUser(id);
+      onClose();
+    }
+  };
 
   return (
     <ModalComponent
       isModalOpen={isModalOpen}
       onClose={onClose}
       title="Delete User"
     >
-      <span className="text-sm font-medium">Are you sure to delete this user?</span>
+      <span className="text-sm font-medium">
+        Are you sure to delete this user?
+      </span>
       <div className="flex justify-end gap-2 mt-3">
-        <Button type="primary" danger onClick={onClose}>Cancel</Button>
-        <Button htmlType="submit"  onClick={handleDelete} loading={isLoading}>
+        <Button type="primary" danger onClick={onClose}>
+          Cancel
+        </Button>
+        <Button htmlType="submit" onClick={handleDelete} loading={isLoading}>
           Confirm
         </Button>
       </div>

src/components/InputComponent.tsx

@@ -9,6 +9,8 @@ interface Props {
   className?: string;
   placeholder?: string;
   prefix?: React.ReactNode;
+  type?: string;
+  pattern?: string;
 }
 
 const InputComponent: React.FC<Props> = ({
@@ -19,12 +21,14 @@ const InputComponent: React.FC<Props> = ({
   status,
   className,
   placeholder,
-  prefix
+  prefix,
+  type,
+  pattern,
 }) => {
   const { Text } = Typography;
 
   return (
-    <div className="mb-3">
+    <div>
       <Text className="font-normal">{label}</Text>
       <Input
         value={value}
@@ -34,6 +38,8 @@ const InputComponent: React.FC<Props> = ({
         className={className}
         placeholder={placeholder}
         prefix={prefix}
+        type={type}
+        pattern={pattern}
       />
     </div>
   );

src/components/UserForm.tsx

@@ -5,6 +5,12 @@ import { useAddUser } from "../hooks/useAddUser";
 import { useGetUserData } from "../hooks/useGetUserData";
 import { useUpdateUserData } from "../hooks/useUpdateUserData";
 import InputComponent from "./InputComponent";
+import {
+  UserOutlined,
+  MailOutlined,
+  FontColorsOutlined,
+  PhoneOutlined
+} from "@ant-design/icons";
 
 interface Props {
   id: string | null;
@@ -15,15 +21,15 @@ interface Props {
 type FieldStatus = "" | "error" | "warning" | undefined;
 
 const UserForm: React.FC<Props> = ({ isModalOpen, onClose, id }) => {
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<any>({
     name: "",
     username: "",
     email: "",
+    phone: ""
   });
   const [filedStatus, setFieldStatus] = useState<FieldStatus>("");
   const [messageApi, contextHolder] = message.useMessage();
 
-
   const error = () => {
     messageApi.open({
       type: "error",
@@ -42,11 +48,17 @@ const UserForm: React.FC<Props> = ({ isModalOpen, onClose, id }) => {
   }, [userData]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
     setFormData({
       ...formData,
-      [e.target.name]: e.target.value,
+      [name]: value,
     });
+
+    if ((name === 'name' || name === 'username') && value.trim().length > 0) {
+      setFieldStatus('');
+    }
   };
+
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -83,28 +95,52 @@ const UserForm: React.FC<Props> = ({ isModalOpen, onClose, id }) => {
         </div>
       ) : (
         <form onSubmit={handleSubmit}>
-          <div>
-            <InputComponent
-              label="Name"
-              name= "name"
-              value={formData.name}
-              onChange={(e) => handleInputChange(e)}
-              status={filedStatus}
-            />
-            <InputComponent
-              label="Username"
-              name="username"
-              value={formData.username}
-              onChange={handleInputChange}
-              status={filedStatus}
-            />
-            <InputComponent
-              label="Email"
-              name="email"
-              value={formData.email}
-              onChange={handleInputChange}
-            />
-          </div>
+          <section>
+            <div className="mb-3">
+              <InputComponent
+                label="Name"
+                name="name"
+                placeholder="Mehrdad Karami"
+                value={formData.name}
+                onChange={handleInputChange}
+                status={filedStatus}
+                prefix={<UserOutlined />}
+              />
+            </div>
+            <div className="mb-3">
+              <InputComponent
+                label="Username"
+                name="username"
+                placeholder="Ash Mehr"
+                value={formData.username}
+                onChange={handleInputChange}
+                status={filedStatus}
+                prefix={<FontColorsOutlined />}
+              />
+            </div>
+            <div className="mb-3">
+              <InputComponent
+                label="Email"
+                name="email"
+                type="email"
+                placeholder="[email protected]"
+                value={formData.email}
+                onChange={handleInputChange}
+                prefix={<MailOutlined />}
+              />
+            </div>
+            <div className="mb-3">
+              <InputComponent
+                label="Phone"
+                name="phone"
+                type="phone"
+                placeholder="+98912..."
+                value={formData.phone}
+                onChange={handleInputChange}
+                prefix={<PhoneOutlined />}
+              />
+            </div>
+          </section>
           <div className="flex gap-2 justify-end mt-5">
             <Button type="primary" danger onClick={onClose}>
               Cancel

src/index.css

@@ -4,7 +4,7 @@
 
 @layer base {
     html {
-      @apply  font-light bg-gray-400 m-3
+      @apply  font-light bg-gray-300 m-3
     }
   }
 

src/pages/Home.page.tsx

@@ -5,7 +5,7 @@ import { useGetUsersData } from "../hooks/useGetUsersData";
 import Header from "../components/Header";
 import UserForm from "../components/UserForm";
 import {
-  UserOutlined,
+  SearchOutlined,
   PlusOutlined,
   EditOutlined,
   DeleteOutlined,
@@ -16,8 +16,9 @@ import InputComponent from "../components/InputComponent";
 interface DataType {
   key: string;
   name: string;
-  username: number;
+  username: string;
   email: string;
+  phone: string;
 }
 
 const HomePage: React.FC = () => {
@@ -44,6 +45,11 @@ const HomePage: React.FC = () => {
       dataIndex: "email",
       key: "email",
     },
+    {
+      title: "Phone",
+      dataIndex: "phone",
+      key: "phone",
+    },
     {
       title: "Action",
       key: "action",
@@ -90,8 +96,8 @@ const HomePage: React.FC = () => {
     if (users) {
       if (selectedUsers.length > 0) {
         return users
-          .filter((user: any) => selectedUsers.includes(user.id))
-          .map((user: any) => ({
+          .filter((user) => selectedUsers.includes(user.id))
+          .map((user) => ({
             ...user,
             key: user.id,
           }));
@@ -100,18 +106,19 @@ const HomePage: React.FC = () => {
       if (serachInput.length > 0) {
         return users
           .filter(
-            (user: any) =>
-              user.name.includes(serachInput) ||
-              user.username.includes(serachInput) ||
-              user.email.includes(serachInput)
+            (user) =>
+              user.name.includes(serachInput.toLowerCase()) ||
+              user.username.includes(serachInput.toLowerCase()) ||
+              user.email.includes(serachInput.toLowerCase()) ||
+              user.phone.includes(serachInput)
           )
-          .map((user: any) => ({
+          .map((user) => ({
             ...user,
             key: user.id,
           }));
       }
 
-      return users.map((user: any) => ({
+      return users.map((user) => ({
         ...user,
         key: user.id,
       }));
@@ -121,7 +128,7 @@ const HomePage: React.FC = () => {
 
   const selectPptions = useMemo(() => {
     if (users) {
-      return users.map((user: any) => ({
+      return users.map((user) => ({
         label: user.name,
         value: user.id,
       }));
@@ -153,14 +160,15 @@ const HomePage: React.FC = () => {
           onChange={handleChangeSelect}
           loading={isLoading}
         />
-        <InputComponent
-          name="searchInput"
-          value={serachInput}
-          onChange={(e) => setSearchInput(e.target.value)}
-          className="flex-1"
-          placeholder="Filter users by searching them ..."
-          prefix={<UserOutlined />}
-        />
+        <div className="flex-1">
+          <InputComponent
+            name="searchInput"
+            value={serachInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            placeholder="Filter users by searching them ..."
+            prefix={<SearchOutlined />}
+          />
+        </div>
       </Header>
 
       {isLoading || isFetching ? (