fix ban button

starshipapp · Apr 29, 2021 · 708418f · 708418f
1 parent e93f648
commit 708418f
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 5 deletions.
diff --git a/src/graphql/mutations/planets/toggleBanMutation.ts b/src/graphql/mutations/planets/toggleBanMutation.ts
@@ -0,0 +1,17 @@
+import gql from "graphql-tag";
+import IPlanet from "../../../types/IPlanet";
+
+export interface IToggleBanMutationData {
+  toggleBan: IPlanet
+}
+
+const toggleBanMutation = gql`
+  mutation ToggleBan($planetId: ID!, $userId: ID!) {
+    toggleBan(planetId: $planetId, userId: $userId) {
+      id
+      banned
+    }
+  }
+`;
+
+export default toggleBanMutation;
diff --git a/src/graphql/mutations/users/banUserMutation.ts b/src/graphql/mutations/users/banUserMutation.ts
@@ -0,0 +1,17 @@
+import gql from "graphql-tag";
+import IUser from "../../../types/IUser";
+
+export interface IBanUserMutationData {
+  banUser: IUser
+}
+
+const banUserMutation = gql`
+  mutation BanUser($userId: ID!) {
+    banUser(userId: $userId) {
+      id
+      banned
+    }
+  }
+`;
+
+export default banUserMutation;
diff --git a/src/planet/PlanetContent.tsx b/src/planet/PlanetContent.tsx
@@ -113,9 +113,14 @@ function PlanetContent(props: IPlanetContentProps): JSX.Element {
             {!userLoading && props.planet.owner && permissions.checkFullWritePermission(userData?.currentUser as IUser, props.planet) && <Popover>
               <Button className="bp3-minimal" icon="plus"/>
               <div className="Planet-navbar-add-content">
-                <input className="bp3-input" placeholder="name" value={componentName} onChange={(e) => setComponentName(e.target.value)}/>
+                <input className="bp3-input" placeholder="Name" value={componentName} onChange={(e) => setComponentName(e.target.value)}/>
                 <Menu>
                   {Object.values(ComponentIndex.ComponentDataTypes).map((value) => (<MenuItem text={"Create new " + value.friendlyName} key={value.name} icon={value.icon} onClick={() => {
+                    if(componentName === "") {
+                      GlobalToaster.show({message: "Your component must have a name.", intent: Intent.DANGER});
+                      return;
+                    }
+
                     addComponent({variables: {planetId: planet, name: componentName, type: value.name}}).then((value) => {
                       if(value.data?.addComponent.id) {
                         GlobalToaster.show({message: `Successfully added ${componentName}.`, intent: Intent.SUCCESS});

diff --git a/src/profile/Profile.tsx b/src/profile/Profile.tsx
@@ -1,10 +1,13 @@
-import { useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client";
 import { AnchorButton, Classes, Dialog, Divider, Intent, Tag } from "@blueprintjs/core";
 import React from "react";
+import toggleBanMutation, { IToggleBanMutationData } from "../graphql/mutations/planets/toggleBanMutation";
+import banUserMutation, { IBanUserMutationData } from "../graphql/mutations/users/banUserMutation";
 import getCurrentUser, { IGetCurrentUserData } from "../graphql/queries/users/getCurrentUser";
 import getUser, { IGetUserData } from "../graphql/queries/users/getUser";
 import IPlanet from "../types/IPlanet";
 import fixPFP from "../util/fixPFP";
+import { GlobalToaster } from "../util/GlobalToaster";
 import permissions from "../util/permissions";
 import "./css/Profile.css";
 
@@ -16,8 +19,10 @@ interface IProfileProps {
 }
 
 function Profile(props: IProfileProps): JSX.Element {
-  const { data, loading } = useQuery<IGetUserData>(getUser, {variables: {id: props.userId}});
+  const { data, loading, refetch } = useQuery<IGetUserData>(getUser, {variables: {id: props.userId}});
   const { data: currentData, loading: currentLoading } = useQuery<IGetCurrentUserData>(getCurrentUser, {errorPolicy: "all"});
+  const [banUser] = useMutation<IBanUserMutationData>(banUserMutation);
+  const [toggleBan] = useMutation<IToggleBanMutationData>(toggleBanMutation);
   const creationDateText = (!loading && data?.user && data?.user.createdAt) ? new Date(Number(data.user.createdAt)).toLocaleDateString(undefined, { weekday: "long", year: "numeric", month: "long", day: "numeric" }) : "loading";
 
   return (
@@ -42,8 +47,30 @@ function Profile(props: IProfileProps): JSX.Element {
       </div>
       <div className={Classes.DIALOG_FOOTER}>
         <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-          {!currentLoading && currentData?.currentUser && permissions.checkAdminPermission(currentData.currentUser) && !permissions.checkAdminPermission(data.user) && <AnchorButton text={data.user.banned ? "Global Unban" : "Global Ban"} intent={Intent.DANGER} />}
-          {!currentLoading && props.planet && currentData?.currentUser && permissions.checkFullWritePermission(currentData.currentUser, props.planet) && !permissions.checkFullWritePermission(data.user, props.planet) && <AnchorButton text={(props.planet.banned && props.planet.banned.includes({id: props.userId})) ? "Unban" : "Ban"} intent={Intent.DANGER} />}
+          {!currentLoading && currentData?.currentUser && permissions.checkAdminPermission(currentData.currentUser) && !permissions.checkAdminPermission(data.user) && <AnchorButton 
+            text={data.user.banned ? "Global Unban" : "Global Ban"} 
+            intent={Intent.DANGER}
+            onClick={() => {
+              banUser({variables: {userId: props.userId}}).then(() => {
+                void refetch();
+                GlobalToaster.show({message: "Sucessfully toggled ban state on user.", intent: Intent.SUCCESS});
+              }).catch((err: Error) => {
+                GlobalToaster.show({message: err.message, intent: Intent.DANGER});
+              });
+            }}
+          />}
+          {!currentLoading && props.planet && currentData?.currentUser && permissions.checkFullWritePermission(currentData.currentUser, props.planet) && !permissions.checkFullWritePermission(data.user, props.planet) && <AnchorButton
+            text={(props.planet.banned && props.planet.banned.includes({id: props.userId})) ? "Unban" : "Ban"}
+            intent={Intent.DANGER}
+            onClick={() => {
+              toggleBan({variables: {planetId: props.planet?.id, userId: props.userId}}).then(() => {
+                void refetch();
+                GlobalToaster.show({message: `Successfully ${(props.planet?.banned && props.planet.banned.includes({id: props.userId})) ? "un" : ""}banned user.`, intent: Intent.SUCCESS});
+              }).catch((err: Error) => {
+                GlobalToaster.show({message: err.message, intent: Intent.DANGER});
+              });
+            }}
+          />}
           <AnchorButton text="Close" onClick={props.onClose} />
         </div>
       </div>