mirror of
https://github.com/Steffo99/sophon.git
synced 2024-12-23 07:14:21 +00:00
✨ Implement group joining and leaving
This commit is contained in:
parent
701e4be2d8
commit
d919e6d042
3 changed files with 91 additions and 1 deletions
43
frontend/src/components/group/GroupJoinButton.tsx
Normal file
43
frontend/src/components/group/GroupJoinButton.tsx
Normal file
|
@ -0,0 +1,43 @@
|
||||||
|
import {faUserPlus} from "@fortawesome/free-solid-svg-icons"
|
||||||
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||||
|
import {Button} from "@steffo/bluelib-react"
|
||||||
|
import * as React from "react"
|
||||||
|
import {useAuthorizationContext} from "../../contexts/authorization"
|
||||||
|
import {ManagedResource} from "../../hooks/useManagedViewSet"
|
||||||
|
import {SophonResearchGroup} from "../../types/SophonTypes"
|
||||||
|
|
||||||
|
|
||||||
|
export interface GroupJoinButtonProps {
|
||||||
|
resource: ManagedResource<SophonResearchGroup>,
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function GroupJoinButton({resource}: GroupJoinButtonProps): JSX.Element | null {
|
||||||
|
const authorization = useAuthorizationContext()
|
||||||
|
|
||||||
|
const doJoin =
|
||||||
|
React.useCallback(
|
||||||
|
async () => {
|
||||||
|
await resource.action("POST", "join", {})
|
||||||
|
},
|
||||||
|
[resource],
|
||||||
|
)
|
||||||
|
|
||||||
|
if(!authorization) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
if(!authorization.state.user) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
if(resource.value.members.includes(authorization.state.user.id)) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const canJoin = !resource.busy && resource.value.access === "OPEN"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button disabled={!canJoin} onClick={doJoin} bluelibClassNames={resource.busy ? "color-yellow" : ""}>
|
||||||
|
<FontAwesomeIcon icon={faUserPlus}/> Join
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
44
frontend/src/components/group/GroupLeaveButton.tsx
Normal file
44
frontend/src/components/group/GroupLeaveButton.tsx
Normal file
|
@ -0,0 +1,44 @@
|
||||||
|
import {faUserMinus} from "@fortawesome/free-solid-svg-icons"
|
||||||
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||||
|
import {Button} from "@steffo/bluelib-react"
|
||||||
|
import * as React from "react"
|
||||||
|
import {useAuthorizationContext} from "../../contexts/authorization"
|
||||||
|
import {ManagedResource} from "../../hooks/useManagedViewSet"
|
||||||
|
import {SophonResearchGroup} from "../../types/SophonTypes"
|
||||||
|
|
||||||
|
|
||||||
|
export interface GroupLeaveButtonProps {
|
||||||
|
resource: ManagedResource<SophonResearchGroup>,
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function GroupLeaveButton({resource}: GroupLeaveButtonProps): JSX.Element | null {
|
||||||
|
const authorization = useAuthorizationContext()
|
||||||
|
|
||||||
|
const doLeave =
|
||||||
|
React.useCallback(
|
||||||
|
async () => {
|
||||||
|
await resource.action("DELETE", "leave", {})
|
||||||
|
},
|
||||||
|
[resource],
|
||||||
|
)
|
||||||
|
|
||||||
|
if(!authorization) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
if(!authorization.state.user) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
if(!resource.value.members.includes(authorization.state.user.id)) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const isOwner = resource.value.owner === authorization.state.user.id
|
||||||
|
const canLeave = !resource.busy && !isOwner
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button disabled={!canLeave} onClick={doLeave} bluelibClassNames={resource.busy ? "color-yellow" : ""}>
|
||||||
|
<FontAwesomeIcon icon={faUserMinus}/> Leave
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
|
@ -5,6 +5,8 @@ import {ManagedResource} from "../../hooks/useManagedViewSet"
|
||||||
import {SophonResearchGroup} from "../../types/SophonTypes"
|
import {SophonResearchGroup} from "../../types/SophonTypes"
|
||||||
import {Link} from "../elements/Link"
|
import {Link} from "../elements/Link"
|
||||||
import {ResourcePanel} from "../elements/ResourcePanel"
|
import {ResourcePanel} from "../elements/ResourcePanel"
|
||||||
|
import {GroupJoinButton} from "./GroupJoinButton"
|
||||||
|
import {GroupLeaveButton} from "./GroupLeaveButton"
|
||||||
|
|
||||||
|
|
||||||
export interface GroupResourcePanelProps {
|
export interface GroupResourcePanelProps {
|
||||||
|
@ -30,7 +32,8 @@ export function GroupResourcePanel({resource}: GroupResourcePanelProps): JSX.Ele
|
||||||
{members} member{members !== 1 ? "s" : ""}
|
{members} member{members !== 1 ? "s" : ""}
|
||||||
</ResourcePanel.Text>
|
</ResourcePanel.Text>
|
||||||
<ResourcePanel.Buttons>
|
<ResourcePanel.Buttons>
|
||||||
|
<GroupLeaveButton resource={resource}/>
|
||||||
|
<GroupJoinButton resource={resource}/>
|
||||||
</ResourcePanel.Buttons>
|
</ResourcePanel.Buttons>
|
||||||
</ResourcePanel>
|
</ResourcePanel>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in a new issue