friend request buttons do the api things

1 files changed, 67 insertions, 11 deletions

diff --git a/pages/user.tsx b/pages/user.tsx
index c7a78e6..2003696 100644
--- a/pages/user.tsx
+++ b/pages/user.tsx
@@ -24,7 +24,8 @@ import {
 	mdiCheckboxBlankCircle,
 	mdiClipboardTextOutline,
 	mdiGamepadSquareOutline,
-	mdiEarth } from '@mdi/js';
+	mdiEarth,
+	mdiAccountMinusOutline } from '@mdi/js';
 
 function InfoModule(props: {
 	label: string;
@@ -77,6 +78,9 @@ export default function AccountPage() {
 
 	var [editingStatus, setEditingStatus] = useState(false);
 
+	var [isFriends, setIsFriends] = useState(false);
+	var [hasBlocked, setHasBlocked] = useState(false);
+
 	var { toast } = useContext(ToastContext);
 
 	useEffect(() => {(async() => {
@@ -175,16 +179,68 @@ export default function AccountPage() {
 							}
 						</div> :
 						<div>
-							<IconLabelButton icon={<Icon size={1} path={mdiAccountCancelOutline}/>} text="Blokkeren" onclick={() => {
-								toast(`${user.username} geblokkeerd`,
-									  "confirmation",
-									  <Icon size={32 / 24} path={mdiAccountCancelOutline}/>)
-							}}/>
-							<IconLabelButton icon={<PersonAddOutlinedIcon/>} text="Vriendschapsverzoek" onclick={() => {
-								toast("Vriendschapsverzoek gestuurd",
-									  "confirmation",
-									  <PersonAddOutlinedIcon style={{ fontSize: 32 }}/>)
-							}}/>
+							{ hasBlocked ?
+								<IconLabelButton icon={<Icon size={1} path={mdiAccountCancelOutline}/>} text="Deblokkeren" onclick={() => {
+									/* axios.request({ */
+									/* 	method: "post", */
+									/* 	url: `/api/social/block`, */
+									/* 	headers: {"content-type": "application/json"}, */
+									/* 	data: { "id": user?.id } */
+									/* }) */
+									/* .then(() => { */
+									/* 	toast(`${user.username} geblokkeerd`, */
+									/* 		  "confirmation", */
+									/* 		  <Icon size={32 / 24} path={mdiAccountCancelOutline}/>); */
+									/* 		  setHasBlocked(true); */
+									/* }); */
+								}}/> :
+								<IconLabelButton icon={<Icon size={1} path={mdiAccountCancelOutline}/>} text="Blokkeren" onclick={() => {
+									axios.request({
+										method: "post",
+										url: `/api/social/block`,
+										headers: {"content-type": "application/json"},
+										data: { "id": user?.id }
+									})
+									.then(() => {
+										toast(`${user.username} geblokkeerd`,
+											  "confirmation",
+											  <Icon size={32 / 24} path={mdiAccountCancelOutline}/>);
+											  setHasBlocked(true);
+											  setIsFriends(false);
+									});
+								}}/>
+							}
+							{ isFriends ?
+								<IconLabelButton icon={<Icon size={1} path={mdiAccountMinusOutline}/>} text="Vriend verwijderen" onclick={() => {
+									/* axios.request({ */
+									/* 	method: "post", */
+									/* 	url: `/api/social/request`, */
+									/* 	headers: {"content-type": "application/json"}, */
+									/* 	data: { "id": user?.id } */
+									/* }) */
+									/* .then(() => { */
+									/* 	toast("Vriendschapsverzoek gestuurd", */
+									/* 		  "confirmation", */
+									/* 		  <PersonAddOutlinedIcon style={{ fontSize: 32 }}/>); */
+									/* 		  setIsFriends(true); */
+									/* }); */
+								}}/> :
+								<IconLabelButton icon={<PersonAddOutlinedIcon/>} text="Vriendschapsverzoek" onclick={() => {
+									axios.request({
+										method: "post",
+										url: `/api/social/request`,
+										headers: {"content-type": "application/json"},
+										data: { "id": user?.id }
+									})
+									.then(() => {
+										toast("Vriendschapsverzoek gestuurd",
+											  "confirmation",
+											  <PersonAddOutlinedIcon style={{ fontSize: 32 }}/>);
+											  setIsFriends(true);
+											  setHasBlocked(false);
+									});
+								}}/>
+							}
 						</div>
 					}</div>}
 				</div>