Merge pull request #375 from jojopirker/messagesPage

#307 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/components/Layout.tsx

@@ -25,4 +25,11 @@ export const getTransparentHeaderLayout = (page: React.ReactElement) => (
   </div>
 );
 
+export const getDashboardLayout = (page: React.ReactElement) => (
+  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
+    <Header transparent={true} />
+    {page}
+  </div>
+);
+
 export const noLayout = (page: React.ReactElement) => page;

website/src/components/Messages/MessageTable.tsx

@@ -0,0 +1,12 @@
+import { Box, CircularProgress, Stack, StackDivider, useColorModeValue } from "@chakra-ui/react";
+import { MessageTableEntry } from "./MessageTableEntry";
+
+export function MessageTable({ messages }) {
+  return (
+    <Stack divider={<StackDivider />} spacing="4">
+      {messages.map((item, idx) => (
+        <MessageTableEntry item={item} idx={idx} key={item.id} />
+      ))}
+    </Stack>
+  );
+}

website/src/components/Messages/MessageTableEntry.tsx

@@ -0,0 +1,24 @@
+import { Avatar, Box, HStack, LinkBox, useColorModeValue } from "@chakra-ui/react";
+import { boolean } from "boolean";
+import NextLink from "next/link";
+import { FlaggableElement } from "../FlaggableElement";
+
+export function MessageTableEntry({ 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>
+        <Avatar
+          name={`${boolean(item.is_assistant) ? "Assitant" : "User"}`}
+          src={`${boolean(item.is_assistant) ? "/images/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
+        />
+        <LinkBox className={`p-4 rounded-md text-white whitespace-pre-wrap ${bgColor} text-white w-full`}>
+          <NextLink href={`/messages/${item.id}`} passHref>
+            {item.text}
+          </NextLink>
+        </LinkBox>
+      </HStack>
+    </FlaggableElement>
+  );
+}

website/src/pages/api/messages/index.tsx

@@ -0,0 +1,24 @@
+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;
+  }
+
+  const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages`, {
+    method: "GET",
+    headers: {
+      "X-API-Key": process.env.FASTAPI_KEY,
+    },
+  });
+  const messages = await messagesRes.json();
+
+  // Send recieved messages to the client.
+  res.status(200).json(messages);
+};
+
+export default handler;

website/src/pages/api/messages/user.tsx

@@ -0,0 +1,29 @@
+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 params = new URLSearchParams({
+    username: token.sub,
+  });
+
+  const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages?${params}`, {
+    method: "GET",
+    headers: {
+      "X-API-Key": process.env.FASTAPI_KEY,
+    },
+  });
+  const messages = await messagesRes.json();
+
+  // Send recieved messages to the client.
+  res.status(200).json(messages);
+};
+
+export default handler;

website/src/pages/dashboard.tsx

@@ -1,6 +1,7 @@
 import { Box, useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
-import { Header } from "src/components/Header";
+
+import { getDashboardLayout } from "src/components/Layout";
 import { LeaderboardTable, SideMenu, TaskOption } from "src/components/Dashboard";
 import { colors } from "styles/Theme/colors";
 
@@ -27,11 +28,6 @@ const Dashboard = () => {
   );
 };
 
-Dashboard.getLayout = (page) => (
-  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
-    <Header transparent={true} />
-    {page}
-  </div>
-);
+Dashboard.getLayout = (page) => getDashboardLayout(page);
 
 export default Dashboard;

website/src/pages/messages/index.tsx

@@ -0,0 +1,79 @@
+import { Box, CircularProgress, SimpleGrid, Text, 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 { MessageTable } from "src/components/Messages/MessageTable";
+import { getDashboardLayout } from "src/components/Layout";
+import { colors } from "styles/Theme/colors";
+
+const MessagesDashboard = () => {
+  const bgColor = useColorModeValue(colors.light.bg, colors.dark.bg);
+  const boxBgColor = useColorModeValue("white", "gray.700");
+  const boxAccentColor = useColorModeValue("gray.200", "gray.900");
+
+  const [messages, setMessages] = useState([]);
+  const [userMessages, setUserMessages] = useState([]);
+
+  const { isLoading: isLoadingAll } = useSWRImmutable("/api/messages", fetcher, {
+    onSuccess: (data) => {
+      setMessages(data);
+    },
+  });
+
+  const { isLoading: isLoadingUser } = useSWRImmutable(`/api/messages/user`, 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={[1, 1, 1, 2]} spacing={2}>
+              <Box>
+                <Text className="text-2xl font-bold">Most recent messages</Text>
+                <Box
+                  backgroundColor={boxBgColor}
+                  boxShadow="base"
+                  dropShadow={boxAccentColor}
+                  borderRadius="xl"
+                  className="p-6 shadow-sm"
+                >
+                  {isLoadingAll ? <CircularProgress isIndeterminate /> : <MessageTable messages={messages} />}
+                </Box>
+              </Box>
+              <Box>
+                <Text className="text-2xl font-bold">Your most recent messages</Text>
+                <Box
+                  backgroundColor={boxBgColor}
+                  boxShadow="base"
+                  dropShadow={boxAccentColor}
+                  borderRadius="xl"
+                  className="p-6 shadow-sm"
+                >
+                  {isLoadingUser ? <CircularProgress isIndeterminate /> : <MessageTable messages={userMessages} />}
+                </Box>
+              </Box>
+            </SimpleGrid>
+          </Box>
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+MessagesDashboard.getLayout = (page) => getDashboardLayout(page);
+
+export default MessagesDashboard;