new page to display recent messages

website/src/components/Dashboard/SideMenu.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Link, Text, Tooltip, useColorMode } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { FiLayout, FiSun } from "react-icons/fi";
+import { FiLayout, FiSun, FiMessageSquare } from "react-icons/fi";
 import { colors } from "styles/Theme/colors";
 
 export function SideMenu() {
@@ -13,6 +13,12 @@ export function SideMenu() {
       desc: "Dashboard Home",
       icon: FiLayout,
     },
+    {
+      label: "Messages",
+      pathname: "/messages",
+      desc: "Messages Dashboard",
+      icon: FiMessageSquare,
+    },
     // {
     //   label: "Leaderboard",
     //   pathname: "#",

website/src/pages/api/messages.ts

@@ -0,0 +1,34 @@
+import { boolean } from "boolean";
+import { getToken } from "next-auth/jwt";
+
+
+const handler = async (req, res) => {
+    const token = await getToken({ req });
+
+    // Return nothing if the user isn't registered.
+    if (!token) {
+        res.status(401).end();
+        return;
+    }
+
+    //TODO: add params if needed
+    const reqParams = req.query;
+    console.log(reqParams);
+    const params =  new URLSearchParams({
+        username: boolean(reqParams.allUsers)?  "" : token.sub,
+    });
+console.log(params);
+    const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages?${params}`, {
+        method: "GET",
+        headers: {
+            "X-API-Key": process.env.FASTAPI_KEY,
+            "Content-Type": "application/json",
+        },
+    },);
+    const messages = await messagesRes.json();
+
+    // Send recieved messages to the client.
+    res.status(200).json(messages);
+}
+
+export default handler;

website/src/pages/messages.tsx

@@ -0,0 +1,106 @@
+import { Box, CircularProgress, HStack, Image, SimpleGrid, Stack, StackDivider, Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
+import Head from "next/head";
+import { useState } from "react";
+import useSWRImmutable from "swr/immutable";
+
+import fetcher from "src/lib/fetcher";
+import { SideMenu } from "src/components/Dashboard";
+import { FlaggableElement } from "src/components/FlaggableElement";
+import { Header } from "src/components/Header";
+import { colors } from "styles/Theme/colors";
+
+const MessageTable = ({ messages, isLoading }) => {
+    const backgroundColor = useColorModeValue("white", "gray.700");
+    const accentColor = useColorModeValue("gray.200", "gray.900");
+
+    return (
+        <Box
+            backgroundColor={backgroundColor}
+            boxShadow="base"
+            dropShadow={accentColor}
+            borderRadius="xl"
+            className="p-6 shadow-sm">
+            {isLoading ?
+                <CircularProgress isIndeterminate /> :
+                <Stack divider={<StackDivider />} spacing="4">
+                    {messages.map((item, idx) =>
+                        <MesssageTableEntry item={item} idx={idx} key={item.id} />
+                    )}
+                </Stack>
+            }
+        </Box>
+    );
+}
+
+const MesssageTableEntry = ({ item, idx }) => {
+    const bgColor = useColorModeValue(idx % 2 === 0 ? "bg-slate-800" : "bg-black", "bg-sky-900");
+
+    return (
+        <FlaggableElement text={item.text} post_id={item.id} key={`flag_${item.id}`}>
+            <HStack>
+                {item.isAssistant ?
+                    <Image alt="Profile Picture" src={"/logos/logo.png"} boxSize="7" borderRadius="full" />
+                    : <Image alt="Profile Picture" src={"/images/temp-avatars/av1.jpg"} boxSize="7" borderRadius="full" />}
+                <Box className={`p-4 rounded-md text-white whitespace-pre-wrap ${bgColor} text-white w-full`}>
+                    {item.text}
+                </Box>
+            </HStack>
+        </FlaggableElement>
+    )
+}
+
+const MessagesDashboard = () => {
+    const bgColor = useColorModeValue(colors.light.bg, colors.dark.bg);
+
+    const [messages, setMessages] = useState([]);
+    const [userMessages, setUserMessages] = useState([]);
+
+    const { isLoading: isLoadingAll } = useSWRImmutable("/api/messages?allUsers=true", fetcher, {
+        onSuccess: (data) => {
+            setMessages(data);
+        },
+    });
+
+    const { isLoading: isLoadingUser } = useSWRImmutable(`/api/messages`, fetcher, {
+        onSuccess: (data) => {
+            setUserMessages(data);
+        },
+    });
+
+    return (
+        <>
+            <Head>
+                <title>Messages - Open Assistant</title>
+                <meta name="description" content="Chat with Open Assistant and provide feedback." />
+            </Head>
+            <Box backgroundColor={bgColor} className="sm:overflow-hidden">
+                <Box className="sm:flex h-full gap-6">
+                    <Box className="p-6 sm:pr-0">
+                        <SideMenu />
+                    </Box>
+                    <Box className="flex flex-col overflow-auto p-6 sm:pl-0 gap-14">
+                        <SimpleGrid columns={2} spacing={2} >
+                            <Box>
+                                <Text className="text-2xl font-bold">Most recent messages</Text>
+                                <MessageTable messages={messages} isLoading={isLoadingAll} />
+                            </Box>
+                            <Box>
+                                <Text className="text-2xl font-bold">Your most recent messages</Text>
+                                <MessageTable messages={userMessages} isLoading={isLoadingUser} />
+                            </Box>
+                        </SimpleGrid>
+                    </Box>
+                </Box>
+            </Box>
+        </>
+    );
+};
+
+MessagesDashboard.getLayout = (page) => (
+    <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
+        <Header transparent={true} />
+        {page}
+    </div>
+);
+
+export default MessagesDashboard;