Raid Request button working
This commit is contained in:
11
src/interface/GamePermission.ts
Normal file
11
src/interface/GamePermission.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
export enum GamePermissionType {
|
||||||
|
ADMIN = "ADMIN"
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export interface GamePermission {
|
||||||
|
gamePermissionId?: string;
|
||||||
|
accountId: string;
|
||||||
|
gameId: string;
|
||||||
|
gamePermissionType: GamePermissionType;
|
||||||
|
}
|
||||||
9
src/interface/RaidGroupPermission.ts
Normal file
9
src/interface/RaidGroupPermission.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { RaidGroupPermissionType } from "./RaidGroup";
|
||||||
|
|
||||||
|
|
||||||
|
export interface RaidGroupPermission {
|
||||||
|
raidGroupPermissionId?: string;
|
||||||
|
accountId: string;
|
||||||
|
raidGroupId: string;
|
||||||
|
permission: RaidGroupPermissionType;
|
||||||
|
}
|
||||||
@@ -1,3 +1,6 @@
|
|||||||
|
import { GamePermission } from "@/interface/GamePermission";
|
||||||
|
import { RaidGroupPermission } from "@/interface/RaidGroupPermission";
|
||||||
|
import { RaidGroupRequest } from "@/interface/RaidGroupRequest";
|
||||||
import { api } from "@/util/AxiosUtil";
|
import { api } from "@/util/AxiosUtil";
|
||||||
import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from "react";
|
import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from "react";
|
||||||
import { Navigate, Outlet } from "react-router";
|
import { Navigate, Outlet } from "react-router";
|
||||||
@@ -15,6 +18,9 @@ type AuthProviderState = {
|
|||||||
expiration: Date | null;
|
expiration: Date | null;
|
||||||
setExpiration: (expiration: Date | null) => void;
|
setExpiration: (expiration: Date | null) => void;
|
||||||
accountId: string | null;
|
accountId: string | null;
|
||||||
|
raidGroupPermissions: RaidGroupPermission[];
|
||||||
|
gamePermissions: GamePermission[];
|
||||||
|
raidGroupRequests: RaidGroupRequest[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const initialState: AuthProviderState = {
|
const initialState: AuthProviderState = {
|
||||||
@@ -22,7 +28,10 @@ const initialState: AuthProviderState = {
|
|||||||
setJwt: () => null,
|
setJwt: () => null,
|
||||||
expiration: null,
|
expiration: null,
|
||||||
setExpiration: () => null,
|
setExpiration: () => null,
|
||||||
accountId: null
|
accountId: null,
|
||||||
|
raidGroupPermissions: [],
|
||||||
|
gamePermissions: [],
|
||||||
|
raidGroupRequests: []
|
||||||
}
|
}
|
||||||
|
|
||||||
const AuthContext = createContext<AuthProviderState>(initialState);
|
const AuthContext = createContext<AuthProviderState>(initialState);
|
||||||
@@ -35,6 +44,9 @@ export function AuthProvider({
|
|||||||
const [ expiration, setExpiration ] = useState<Date | null>(null);
|
const [ expiration, setExpiration ] = useState<Date | null>(null);
|
||||||
const [ firstFetch, setFirstFetch ] = useState(true);
|
const [ firstFetch, setFirstFetch ] = useState(true);
|
||||||
const [ accountId, setAccountId ] = useState<string | null>(null);
|
const [ accountId, setAccountId ] = useState<string | null>(null);
|
||||||
|
const [ raidGroupPermissions, setRaidGroupPermissions ] = useState<RaidGroupPermission[]>([]);
|
||||||
|
const [ gamePermissions, setGamePermissions ] = useState<GamePermission[]>([]);
|
||||||
|
const [ raidGroupRequests, setRaidGroupRequests ] = useState<RaidGroupRequest[]>([]);
|
||||||
|
|
||||||
|
|
||||||
const fetchToken = useCallback(async () => {
|
const fetchToken = useCallback(async () => {
|
||||||
@@ -50,6 +62,9 @@ export function AuthProvider({
|
|||||||
setExpiration(new Date(decodedToken.exp * 1000));
|
setExpiration(new Date(decodedToken.exp * 1000));
|
||||||
setFirstFetch(false);
|
setFirstFetch(false);
|
||||||
setAccountId(decodedToken.accountId);
|
setAccountId(decodedToken.accountId);
|
||||||
|
setRaidGroupPermissions(JSON.parse(decodedToken.raidGroupPermissions));
|
||||||
|
setGamePermissions(JSON.parse(decodedToken.gamePermissions));
|
||||||
|
setRaidGroupRequests(JSON.parse(decodedToken.raidGroupRequests));
|
||||||
return response.data.token;
|
return response.data.token;
|
||||||
}
|
}
|
||||||
//If the token cannot be retrieved
|
//If the token cannot be retrieved
|
||||||
@@ -98,8 +113,11 @@ export function AuthProvider({
|
|||||||
setJwt,
|
setJwt,
|
||||||
expiration,
|
expiration,
|
||||||
setExpiration,
|
setExpiration,
|
||||||
accountId
|
accountId,
|
||||||
}), [ jwt, setJwt, expiration, setExpiration, accountId ]);
|
raidGroupPermissions,
|
||||||
|
gamePermissions,
|
||||||
|
raidGroupRequests
|
||||||
|
}), [ jwt, setJwt, expiration, setExpiration, accountId, raidGroupPermissions, gamePermissions, raidGroupRequests ]);
|
||||||
|
|
||||||
|
|
||||||
//TODO: Return a spinner while the first token is being fetched
|
//TODO: Return a spinner while the first token is being fetched
|
||||||
|
|||||||
@@ -42,6 +42,8 @@ export default function RaidGroupHeader({
|
|||||||
buttonProps={buttonProps}
|
buttonProps={buttonProps}
|
||||||
showEditRaidGroupModal={() => setDisplayEditRaidGroupModal(true)}
|
showEditRaidGroupModal={() => setDisplayEditRaidGroupModal(true)}
|
||||||
showDeleteRaidGroupModal={() => setDisplayDeleteRaidGroupModal(true)}
|
showDeleteRaidGroupModal={() => setDisplayDeleteRaidGroupModal(true)}
|
||||||
|
hasRaidGroupPermissions={true}
|
||||||
|
hasRaidGroupRequest={false}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<RaidGroupModal
|
<RaidGroupModal
|
||||||
|
|||||||
@@ -1,22 +1,41 @@
|
|||||||
import { ButtonProps } from "@/components/button/Button";
|
import { ButtonProps } from "@/components/button/Button";
|
||||||
import DangerButton from "@/components/button/DangerButton";
|
import DangerButton from "@/components/button/DangerButton";
|
||||||
import PrimaryButton from "@/components/button/PrimaryButton";
|
import PrimaryButton from "@/components/button/PrimaryButton";
|
||||||
import { BsPencilFill, BsTrash3 } from "react-icons/bs";
|
import TertiaryButton from "@/components/button/TertiaryButton";
|
||||||
|
import { BsChatRightText, BsPencilFill, BsTrash3 } from "react-icons/bs";
|
||||||
|
|
||||||
|
|
||||||
export default function RaidGroupAdminButtons({
|
export default function RaidGroupAdminButtons({
|
||||||
buttonProps,
|
buttonProps,
|
||||||
|
showRaidGroupRequestModal,
|
||||||
showEditRaidGroupModal,
|
showEditRaidGroupModal,
|
||||||
showDeleteRaidGroupModal
|
showDeleteRaidGroupModal,
|
||||||
|
hasRaidGroupPermissions,
|
||||||
|
hasRaidGroupRequest
|
||||||
}:{
|
}:{
|
||||||
buttonProps: ButtonProps;
|
buttonProps: ButtonProps;
|
||||||
|
showRaidGroupRequestModal?: () => void;
|
||||||
showEditRaidGroupModal: () => void;
|
showEditRaidGroupModal: () => void;
|
||||||
showDeleteRaidGroupModal: () => void;
|
showDeleteRaidGroupModal: () => void;
|
||||||
|
hasRaidGroupPermissions: boolean;
|
||||||
|
hasRaidGroupRequest: boolean;
|
||||||
}){
|
}){
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="flex flex-row items-center justify-center gap-2"
|
className="flex flex-row items-center justify-center gap-2"
|
||||||
>
|
>
|
||||||
|
{
|
||||||
|
!hasRaidGroupPermissions &&
|
||||||
|
<TertiaryButton
|
||||||
|
{...buttonProps}
|
||||||
|
onClick={showRaidGroupRequestModal}
|
||||||
|
disabled={hasRaidGroupRequest}
|
||||||
|
>
|
||||||
|
<BsChatRightText
|
||||||
|
size={22}
|
||||||
|
/>
|
||||||
|
</TertiaryButton>
|
||||||
|
}
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
{...buttonProps}
|
{...buttonProps}
|
||||||
onClick={showEditRaidGroupModal}
|
onClick={showEditRaidGroupModal}
|
||||||
|
|||||||
@@ -1,8 +1,11 @@
|
|||||||
import { ButtonProps } from "@/components/button/Button";
|
import { ButtonProps } from "@/components/button/Button";
|
||||||
import Table from "@/components/table/Table";
|
import Table from "@/components/table/Table";
|
||||||
import { RaidGroup } from "@/interface/RaidGroup";
|
import { RaidGroup } from "@/interface/RaidGroup";
|
||||||
|
import { useAuth } from "@/providers/AuthProvider";
|
||||||
|
import { containsRaidGroupPermission, containsRaidGroupRequest } from "@/util/PermissionUtil";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Link } from "react-router";
|
import { Link } from "react-router";
|
||||||
|
import RaidGroupRequestModal from "../raidGroupRequest/modal/RaidGroupRequestModal";
|
||||||
import DeleteRaidGroupModal from "./modals/DeleteRaidGroupModal";
|
import DeleteRaidGroupModal from "./modals/DeleteRaidGroupModal";
|
||||||
import RaidGroupModal from "./modals/RaidGroupModal";
|
import RaidGroupModal from "./modals/RaidGroupModal";
|
||||||
import RaidGroupAdminButtons from "./RaidGroupAdminButtons";
|
import RaidGroupAdminButtons from "./RaidGroupAdminButtons";
|
||||||
@@ -14,8 +17,10 @@ export default function RaidGroupsList({
|
|||||||
raidGroups: RaidGroup[];
|
raidGroups: RaidGroup[];
|
||||||
}){
|
}){
|
||||||
const [ selectedRaidGroup, setSelectedRaidGroup ] = useState<RaidGroup>();
|
const [ selectedRaidGroup, setSelectedRaidGroup ] = useState<RaidGroup>();
|
||||||
|
const [ displayRaidGroupRequestModal, setDisplayRaidGroupRequestModal ] = useState(false);
|
||||||
const [ displayEditRaidGroupModal, setDisplayEditRaidGroupModal ] = useState(false);
|
const [ displayEditRaidGroupModal, setDisplayEditRaidGroupModal ] = useState(false);
|
||||||
const [ displayDeleteRaidGroupModal, setDisplayDeleteRaidGroupModal ] = useState(false);
|
const [ displayDeleteRaidGroupModal, setDisplayDeleteRaidGroupModal ] = useState(false);
|
||||||
|
const { raidGroupPermissions, raidGroupRequests } = useAuth();
|
||||||
|
|
||||||
|
|
||||||
const buttonProps: ButtonProps = {
|
const buttonProps: ButtonProps = {
|
||||||
@@ -69,6 +74,10 @@ export default function RaidGroupsList({
|
|||||||
</div>
|
</div>
|
||||||
<RaidGroupAdminButtons
|
<RaidGroupAdminButtons
|
||||||
buttonProps={buttonProps}
|
buttonProps={buttonProps}
|
||||||
|
showRaidGroupRequestModal={() => {
|
||||||
|
setSelectedRaidGroup(raidGroup);
|
||||||
|
setDisplayRaidGroupRequestModal(true);
|
||||||
|
}}
|
||||||
showEditRaidGroupModal={() => {
|
showEditRaidGroupModal={() => {
|
||||||
setSelectedRaidGroup(raidGroup);
|
setSelectedRaidGroup(raidGroup);
|
||||||
setDisplayEditRaidGroupModal(true);
|
setDisplayEditRaidGroupModal(true);
|
||||||
@@ -77,6 +86,8 @@ export default function RaidGroupsList({
|
|||||||
setSelectedRaidGroup(raidGroup);
|
setSelectedRaidGroup(raidGroup);
|
||||||
setDisplayDeleteRaidGroupModal(true);
|
setDisplayDeleteRaidGroupModal(true);
|
||||||
}}
|
}}
|
||||||
|
hasRaidGroupPermissions={containsRaidGroupPermission(raidGroup.raidGroupId ?? "", raidGroupPermissions)}
|
||||||
|
hasRaidGroupRequest={containsRaidGroupRequest(raidGroup.raidGroupId ?? "", raidGroupRequests)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
]);
|
]);
|
||||||
@@ -88,6 +99,11 @@ export default function RaidGroupsList({
|
|||||||
tableHeadElements={headElements}
|
tableHeadElements={headElements}
|
||||||
tableBodyElements={bodyElements}
|
tableBodyElements={bodyElements}
|
||||||
/>
|
/>
|
||||||
|
<RaidGroupRequestModal
|
||||||
|
display={displayRaidGroupRequestModal}
|
||||||
|
close={() => {setDisplayRaidGroupRequestModal(false); setSelectedRaidGroup(undefined);}}
|
||||||
|
raidGroupId={selectedRaidGroup?.raidGroupId ?? ""}
|
||||||
|
/>
|
||||||
<RaidGroupModal
|
<RaidGroupModal
|
||||||
display={displayEditRaidGroupModal}
|
display={displayEditRaidGroupModal}
|
||||||
close={() => {setDisplayEditRaidGroupModal(false); setSelectedRaidGroup(undefined);}}
|
close={() => {setDisplayEditRaidGroupModal(false); setSelectedRaidGroup(undefined);}}
|
||||||
|
|||||||
21
src/util/PermissionUtil.ts
Normal file
21
src/util/PermissionUtil.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { RaidGroupPermission } from "@/interface/RaidGroupPermission";
|
||||||
|
import { RaidGroupRequest } from "@/interface/RaidGroupRequest";
|
||||||
|
|
||||||
|
|
||||||
|
export function containsRaidGroupPermission(raidGroupId: string, permissions: RaidGroupPermission[]): boolean{
|
||||||
|
for(const permission of permissions){
|
||||||
|
if(permission.raidGroupId === raidGroupId){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function containsRaidGroupRequest(raidGroupId: string, requests: RaidGroupRequest[]){
|
||||||
|
for(const request of requests){
|
||||||
|
if(request.raidGroupId === raidGroupId){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user