fix: concurrency

This commit is contained in:
2025-11-19 12:26:37 -07:00
parent e1396e2d24
commit 80e57eaa2b
19 changed files with 175 additions and 60 deletions

View File

@@ -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>
)
}