fix: concurrency
This commit is contained in:
@@ -4,6 +4,8 @@ import { useUserStore } from "../providers/UsersProvider"
|
||||
import useAsyncEffect from "use-async-effect"
|
||||
import styled from "styled-components"
|
||||
import { useRef, useState } from "react"
|
||||
import { useCurrentAuthenticatedUserStore } from "../providers"
|
||||
import { Mutex } from "async-mutex"
|
||||
|
||||
type UserTableProps = {
|
||||
page: number
|
||||
@@ -35,6 +37,8 @@ const UserTableRow = styled.tr`
|
||||
|
||||
`
|
||||
|
||||
const userTableMutex = new Mutex()
|
||||
|
||||
export const UserTable = ({page}: UserTableProps) => {
|
||||
|
||||
const userStore = useUserStore(useShallow((state) => ({
|
||||
@@ -43,47 +47,59 @@ export const UserTable = ({page}: UserTableProps) => {
|
||||
console.log(page)
|
||||
|
||||
const [callLock, setCallLock] = useState<boolean>(false)
|
||||
|
||||
const authUserStore = useCurrentAuthenticatedUserStore(useShallow((state) => state))
|
||||
console.log(authUserStore)
|
||||
const callLockRef = useRef(callLock)
|
||||
useAsyncEffect(async () => {
|
||||
if(!callLockRef.current) {
|
||||
if(!callLockRef.current && authUserStore.Admin) {
|
||||
callLockRef.current = true
|
||||
setCallLock(true)
|
||||
await userStore.sync(page)
|
||||
callLockRef.current = false
|
||||
setCallLock(false)
|
||||
}
|
||||
}, [page])
|
||||
}, [page, authUserStore.Id, authUserStore.Name])
|
||||
|
||||
useAsyncEffect(async () => {
|
||||
if(authUserStore.Id === -1) {
|
||||
const release = await userTableMutex.acquire()
|
||||
await authUserStore.sync()
|
||||
console.log(authUserStore)
|
||||
await release()
|
||||
}
|
||||
}, [authUserStore.Id])
|
||||
console.log(userStore.tableUsers)
|
||||
return (
|
||||
<UserTableStyle>
|
||||
<UserTableHead>
|
||||
<UserTH>id</UserTH>
|
||||
<UserTH>name</UserTH>
|
||||
<UserTH>position</UserTH>
|
||||
<UserTH>active</UserTH>
|
||||
<UserTH>admin</UserTH>
|
||||
</UserTableHead>
|
||||
<UserTableBody>
|
||||
{userStore.tableUsers.map((u) => (
|
||||
<UserTableRow key={u.Id}>
|
||||
<UserTableItem>{u.Id}</UserTableItem>
|
||||
<UserTableItem>{u.Name}</UserTableItem>
|
||||
<UserTableItem>{u.JobPosition}</UserTableItem>
|
||||
<UserTableItem><input type="checkbox" defaultValue={u.Active ? "yes" : "no"} onChange={async (e) => {
|
||||
if(u.Active)
|
||||
await userStore.deactivateUser(u.Id)
|
||||
else
|
||||
await userStore.activateUser(u.Id)
|
||||
}}/></UserTableItem>
|
||||
<UserTableItem><input type="checkbox" value={u.Admin ? "yes" : "no"} onChange={async (e) => {
|
||||
if(u.Admin)
|
||||
await userStore.demoteUser(u.Id)
|
||||
else
|
||||
await userStore.promoteUser(u.Id)
|
||||
}}/></UserTableItem>
|
||||
</UserTableRow>))}
|
||||
</UserTableBody>
|
||||
</UserTableStyle>
|
||||
return authUserStore.Admin && (
|
||||
<UserTableStyle>
|
||||
<UserTableHead>
|
||||
<tr>
|
||||
<UserTH>id</UserTH>
|
||||
<UserTH>name</UserTH>
|
||||
<UserTH>position</UserTH>
|
||||
<UserTH>active</UserTH>
|
||||
<UserTH>admin</UserTH>
|
||||
</tr>
|
||||
</UserTableHead>
|
||||
<UserTableBody>
|
||||
{userStore.tableUsers.map((u) => (
|
||||
<UserTableRow key={u.Id}>
|
||||
<UserTableItem>{u.Id}</UserTableItem>
|
||||
<UserTableItem>{u.Name}</UserTableItem>
|
||||
<UserTableItem>{u.JobPosition}</UserTableItem>
|
||||
<UserTableItem><input type="checkbox" onChange={async (e) => {
|
||||
if(u.Active)
|
||||
await userStore.deactivateUser(u.Id)
|
||||
else
|
||||
await userStore.activateUser(u.Id)
|
||||
}} checked={u.Active}/></UserTableItem>
|
||||
<UserTableItem><input type="checkbox" onChange={async (e) => {
|
||||
if(u.Admin)
|
||||
await userStore.demoteUser(u.Id)
|
||||
else
|
||||
await userStore.promoteUser(u.Id)
|
||||
}} checked={u.Admin}/></UserTableItem>
|
||||
</UserTableRow>))}
|
||||
</UserTableBody>
|
||||
</UserTableStyle>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user