Implement logout function on nav

components/Navigation.tsx

@@ -17,6 +17,14 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 
+async function destroySession() {
+  await fetch("/api/auth/session", {
+    method: "DELETE",
+  }).catch(() => {});
+
+  location.assign("/");
+}
+
 function getAvatarUrl(userData: { [k: string]: any }): string {
   const BASE = "https://cdn.discordapp.com/";
 
@@ -37,6 +45,7 @@ export default function (props: {
   permissions?: number;
   username?: string;
 }) {
+  let data = { ...props };
   const isDesktop = useBreakpointValue({ base: false, lg: true });
   const { isOpen, onClose, onOpen } = useDisclosure();
 
@@ -106,18 +115,19 @@ export default function (props: {
               </Center>
               <Spacer />
               <Spacer />
-              {props.hide ? null : props.id ? (
+              {data.hide ? null : data.id ? (
                 <HStack spacing="3">
                   <Avatar
-                    display={props.id ? "flex" : "none"}
-                    src={getAvatarUrl(props)}
+                    display={data.id ? "flex" : "none"}
+                    src={getAvatarUrl(data)}
                   />
                   <Text>
-                    {props.id ? `${props.username}#${props.discriminator}` : ""}
+                    {data.id ? `${data.username}#${data.discriminator}` : ""}
                   </Text>
                   <Button
+                    onClick={async () => await destroySession()}
                     size="md"
-                    style={{ display: props.id ? "block" : "none" }}
+                    style={{ display: data.id ? "block" : "none" }}
                     variant="ghost"
                   >
                     <svg
@@ -156,12 +166,9 @@ export default function (props: {
           <Link href="/mdn">Moderation</Link>
           <hr />
           <Flex alignItems="center" gap="1rem">
-            <Avatar
-              display={props.id ? "" : "none"}
-              src={getAvatarUrl(props)}
-            />
+            <Avatar display={data.id ? "" : "none"} src={getAvatarUrl(data)} />
             <Text align="center" style={{ overflowWrap: "anywhere" }}>
-              {props.id ? `${props.username}#${props.discriminator}` : ""}
+              {data.id ? `${data.username}#${data.discriminator}` : ""}
             </Text>
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -171,8 +178,9 @@ export default function (props: {
               viewBox="0 0 16 16"
               style={{
                 cursor: "pointer",
-                display: props.id ? "block" : "none",
+                display: data.id ? "block" : "none",
               }}
+              onClick={async () => destroySession()}
             >
               <path
                 fillRule="evenodd"