Add db new line support

src/components/Admin/DbEdit.tsx

@@ -1,3 +1,4 @@
+import { max } from "lodash"
 import { FC, memo } from "react"
 import { useSelector } from "react-redux"
 import withUserConnected from "../../utils/withUserConnected"
@@ -9,13 +10,18 @@ import useAction from "../../utils/useAction"
 import { fetchVolunteerSetIfNeed } from "../../store/volunteerSet"
 import { Volunteer } from "../../services/volunteers"
 import styles from "./styles.module.scss"
+import { fetchVolunteerAddNewIfNeed } from "../../store/volunteerAddNew"
 
 const DbEdit: FC = (): JSX.Element => {
     const volunteers = useSelector(selectVolunteerList)
     const saveVolunteer = useAction(fetchVolunteerSetIfNeed)
+    const addVolunteer = useAction(fetchVolunteerAddNewIfNeed)
     if (!volunteers) {
         return <>No member found</>
     }
+    const nextId = (max(volunteers.map((v) => v.id)) || 0) + 1
+    const nextVolunteer = new Volunteer()
+    nextVolunteer.id = nextId
     return (
         <ul className={styles.list}>
             {volunteers.map((volunteer: Volunteer) => (
@@ -25,6 +31,12 @@ const DbEdit: FC = (): JSX.Element => {
                     volunteer={volunteer}
                 />
             ))}
+            <MemberEdit
+                key={nextId}
+                addBefore={addVolunteer}
+                saveVolunteer={saveVolunteer}
+                volunteer={nextVolunteer}
+            />
         </ul>
     )
 }

src/components/Admin/MemberEdit.tsx

@@ -10,16 +10,29 @@ import { toastError } from "../../store/utils"
 interface Props {
     volunteer: Volunteer
     saveVolunteer: (newVolunteer: Partial<Volunteer>) => void
+    addBefore?: () => void
 }
 
-const MemberEdit: FC<Props> = ({ volunteer, saveVolunteer }): JSX.Element => {
+const MemberEdit: FC<Props> = ({ volunteer, saveVolunteer, addBefore }): JSX.Element => {
     const [localVolunteer, setLocalVolunteer] = useState(volunteer)
 
+    async function addAndWait() {
+        if (addBefore) {
+            addBefore()
+            await new Promise<void>((resolve) => {
+                setTimeout(() => resolve(), 1000)
+            })
+        }
+    }
+
     const stringDispatch =
         (propName: string) =>
-        (e: React.ChangeEvent<HTMLInputElement>): void => {
-            saveVolunteer({ id: localVolunteer.id, [propName]: e.target.value })
-            setLocalVolunteer({ ...localVolunteer, [propName]: e.target.value })
+        async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
+            const rawValue = e.target.value
+            const value = rawValue
+            await addAndWait()
+            saveVolunteer({ id: localVolunteer.id, [propName]: rawValue })
+            setLocalVolunteer({ ...localVolunteer, [propName]: value })
         }
 
     function stringInput(id: string, value: string): JSX.Element {
@@ -40,13 +53,15 @@ const MemberEdit: FC<Props> = ({ volunteer, saveVolunteer }): JSX.Element => {
 
     const numberDispatch =
         (propName: string) =>
-        (e: React.ChangeEvent<HTMLInputElement>): void => {
-            const value: number = +e.target.value
+        async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
+            const rawValue = e.target.value
+            const value: number = +rawValue
             if (!isFinite(value)) {
                 toastError("Should be a number")
                 return
             }
-            saveVolunteer({ id: localVolunteer.id, [propName]: +value })
+            await addAndWait()
+            saveVolunteer({ id: localVolunteer.id, [propName]: rawValue })
             setLocalVolunteer({ ...localVolunteer, [propName]: +value })
         }
 
@@ -68,9 +83,11 @@ const MemberEdit: FC<Props> = ({ volunteer, saveVolunteer }): JSX.Element => {
 
     const booleanDispatch =
         (propName: string) =>
-        (e: React.ChangeEvent<HTMLInputElement>): void => {
-            const value: boolean = e.target.value !== "0" && e.target.value !== ""
-            saveVolunteer({ id: localVolunteer.id, [propName]: value })
+        async (e: React.ChangeEvent<HTMLInputElement>): Promise<void> => {
+            const rawValue = e.target.value
+            const value: boolean = rawValue !== "0" && rawValue !== ""
+            await addAndWait()
+            saveVolunteer({ id: localVolunteer.id, [propName]: rawValue })
             setLocalVolunteer({ ...localVolunteer, [propName]: value })
         }
 
@@ -112,6 +129,9 @@ const MemberEdit: FC<Props> = ({ volunteer, saveVolunteer }): JSX.Element => {
     )
 }
 
+MemberEdit.defaultProps = {
+    addBefore: undefined,
+}
 export default withUserRole(ROLES.ADMIN, memo(withUserConnected(MemberEdit)))
 
 export const fetchFor = []

src/components/RegisterForm/index.tsx

@@ -133,7 +133,7 @@ const RegisterForm = ({ dispatch }: Props): JSX.Element => {
     )
 
     const { error: volunteerError, entities: volunteer } = useSelector(
-        (state: AppState) => state.volunteerAdd,
+        (state: AppState) => state.volunteerPartialAdd,
         shallowEqual
     )