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>
+  );
+}