From b24bfd1d7421021e66896293f57a9d7289d8c234 Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Wed, 4 Jan 2023 15:02:45 +0100
Subject: [PATCH 01/10] new page to display recent messages

---
 website/src/components/Dashboard/SideMenu.tsx |   8 +-
 website/src/pages/api/messages.ts             |  34 ++++++
 website/src/pages/messages.tsx                | 106 ++++++++++++++++++
 3 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 website/src/pages/api/messages.ts
 create mode 100644 website/src/pages/messages.tsx

diff --git a/website/src/components/Dashboard/SideMenu.tsx b/website/src/components/Dashboard/SideMenu.tsx
index 30a45777..499117a2 100644
--- a/website/src/components/Dashboard/SideMenu.tsx
+++ b/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: "#",
diff --git a/website/src/pages/api/messages.ts b/website/src/pages/api/messages.ts
new file mode 100644
index 00000000..a6a6d981
--- /dev/null
+++ b/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;
diff --git a/website/src/pages/messages.tsx b/website/src/pages/messages.tsx
new file mode 100644
index 00000000..f8512ae3
--- /dev/null
+++ b/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;

From dba693ee8511c1736cf414145f155e816e69d726 Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Wed, 4 Jan 2023 15:13:08 +0100
Subject: [PATCH 02/10] using avatar instead of image & pre-commit

---
 website/src/pages/api/messages.ts |  48 ++++-----
 website/src/pages/messages.tsx    | 171 ++++++++++++++++--------------
 2 files changed, 115 insertions(+), 104 deletions(-)

diff --git a/website/src/pages/api/messages.ts b/website/src/pages/api/messages.ts
index a6a6d981..53b529b5 100644
--- a/website/src/pages/api/messages.ts
+++ b/website/src/pages/api/messages.ts
@@ -1,34 +1,32 @@
 import { boolean } from "boolean";
 import { getToken } from "next-auth/jwt";
 
-
 const handler = async (req, res) => {
-    const token = await getToken({ req });
+  const token = await getToken({ req });
 
-    // Return nothing if the user isn't registered.
-    if (!token) {
-        res.status(401).end();
-        return;
-    }
+  // 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();
+  //TODO: add params if needed
+  const reqParams = req.query;
+  const params = new URLSearchParams({
+    username: boolean(reqParams.allUsers) ? "" : token.sub,
+  });
 
-    // Send recieved messages to the client.
-    res.status(200).json(messages);
-}
+  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;
diff --git a/website/src/pages/messages.tsx b/website/src/pages/messages.tsx
index f8512ae3..7509922d 100644
--- a/website/src/pages/messages.tsx
+++ b/website/src/pages/messages.tsx
@@ -1,4 +1,16 @@
-import { Box, CircularProgress, HStack, Image, SimpleGrid, Stack, StackDivider, Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
+import {
+  Avatar,
+  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";
@@ -10,97 +22,98 @@ 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");
+  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>
-    );
-}
+  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");
+  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>
-    )
-}
+  return (
+    <FlaggableElement text={item.text} post_id={item.id} key={`flag_${item.id}`}>
+      <HStack>
+        <Avatar
+          name={`${item.isAssistant ? "Assitant" : "User"}`}
+          src={`${item.isAssistant ? "/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
+        />
+        <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 bgColor = useColorModeValue(colors.light.bg, colors.dark.bg);
 
-    const [messages, setMessages] = useState([]);
-    const [userMessages, setUserMessages] = useState([]);
+  const [messages, setMessages] = useState([]);
+  const [userMessages, setUserMessages] = useState([]);
 
-    const { isLoading: isLoadingAll } = useSWRImmutable("/api/messages?allUsers=true", fetcher, {
-        onSuccess: (data) => {
-            setMessages(data);
-        },
-    });
+  const { isLoading: isLoadingAll } = useSWRImmutable("/api/messages?allUsers=true", fetcher, {
+    onSuccess: (data) => {
+      setMessages(data);
+    },
+  });
 
-    const { isLoading: isLoadingUser } = useSWRImmutable(`/api/messages`, fetcher, {
-        onSuccess: (data) => {
-            setUserMessages(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>
-        </>
-    );
+  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>
+  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
+    <Header transparent={true} />
+    {page}
+  </div>
 );
 
 export default MessagesDashboard;

From b08e1b986a3e619d457e350fe860c36aa1a043ef Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Wed, 4 Jan 2023 15:19:46 +0100
Subject: [PATCH 03/10] split api into multiple files

---
 website/src/pages/api/messages/index.tsx      | 26 +++++++++++++++++++
 .../api/{messages.ts => messages/user.tsx}    |  4 +--
 website/src/pages/messages.tsx                |  6 ++---
 3 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 website/src/pages/api/messages/index.tsx
 rename website/src/pages/api/{messages.ts => messages/user.tsx} (84%)

diff --git a/website/src/pages/api/messages/index.tsx b/website/src/pages/api/messages/index.tsx
new file mode 100644
index 00000000..b5a82bb1
--- /dev/null
+++ b/website/src/pages/api/messages/index.tsx
@@ -0,0 +1,26 @@
+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;
+  }
+
+  const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages`, {
+    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;
diff --git a/website/src/pages/api/messages.ts b/website/src/pages/api/messages/user.tsx
similarity index 84%
rename from website/src/pages/api/messages.ts
rename to website/src/pages/api/messages/user.tsx
index 53b529b5..58a8f10e 100644
--- a/website/src/pages/api/messages.ts
+++ b/website/src/pages/api/messages/user.tsx
@@ -1,4 +1,3 @@
-import { boolean } from "boolean";
 import { getToken } from "next-auth/jwt";
 
 const handler = async (req, res) => {
@@ -11,9 +10,8 @@ const handler = async (req, res) => {
   }
 
   //TODO: add params if needed
-  const reqParams = req.query;
   const params = new URLSearchParams({
-    username: boolean(reqParams.allUsers) ? "" : token.sub,
+    username: token.sub,
   });
 
   const messagesRes = await fetch(`${process.env.FASTAPI_URL}/api/v1/messages?${params}`, {
diff --git a/website/src/pages/messages.tsx b/website/src/pages/messages.tsx
index 7509922d..0182b8c5 100644
--- a/website/src/pages/messages.tsx
+++ b/website/src/pages/messages.tsx
@@ -3,12 +3,10 @@ import {
   Box,
   CircularProgress,
   HStack,
-  Image,
   SimpleGrid,
   Stack,
   StackDivider,
   Text,
-  useColorMode,
   useColorModeValue,
 } from "@chakra-ui/react";
 import Head from "next/head";
@@ -68,13 +66,13 @@ const MessagesDashboard = () => {
   const [messages, setMessages] = useState([]);
   const [userMessages, setUserMessages] = useState([]);
 
-  const { isLoading: isLoadingAll } = useSWRImmutable("/api/messages?allUsers=true", fetcher, {
+  const { isLoading: isLoadingAll } = useSWRImmutable("/api/messages", fetcher, {
     onSuccess: (data) => {
       setMessages(data);
     },
   });
 
-  const { isLoading: isLoadingUser } = useSWRImmutable(`/api/messages`, fetcher, {
+  const { isLoading: isLoadingUser } = useSWRImmutable(`/api/messages/user`, fetcher, {
     onSuccess: (data) => {
       setUserMessages(data);
     },

From be22c77b076da78a831de26d687ee4b8de7779af Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Wed, 4 Jan 2023 15:38:26 +0100
Subject: [PATCH 04/10] moved components into new folder

---
 .../src/components/Messages/MessageTable.tsx  | 28 ++++++++++
 .../components/Messages/MessageTableEntry.tsx | 19 +++++++
 website/src/pages/messages.tsx                | 55 +------------------
 3 files changed, 49 insertions(+), 53 deletions(-)
 create mode 100644 website/src/components/Messages/MessageTable.tsx
 create mode 100644 website/src/components/Messages/MessageTableEntry.tsx

diff --git a/website/src/components/Messages/MessageTable.tsx b/website/src/components/Messages/MessageTable.tsx
new file mode 100644
index 00000000..2572a5fa
--- /dev/null
+++ b/website/src/components/Messages/MessageTable.tsx
@@ -0,0 +1,28 @@
+import { Box, CircularProgress, Stack, StackDivider, useColorModeValue } from "@chakra-ui/react";
+import { MessageTableEntry } from "./MessageTableEntry";
+
+export function 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) => (
+              <MessageTableEntry item={item} idx={idx} key={item.id} />
+            ))}
+          </Stack>
+        )}
+      </Box>
+    );
+  };
+  
\ No newline at end of file
diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx
new file mode 100644
index 00000000..7bda7af9
--- /dev/null
+++ b/website/src/components/Messages/MessageTableEntry.tsx
@@ -0,0 +1,19 @@
+import { Avatar, Box, HStack, useColorModeValue } from "@chakra-ui/react";
+
+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={`${item.isAssistant ? "Assitant" : "User"}`}
+            src={`${item.isAssistant ? "/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
+          />
+          <Box className={`p-4 rounded-md text-white whitespace-pre-wrap ${bgColor} text-white w-full`}>{item.text}</Box>
+        </HStack>
+      </FlaggableElement>
+    );
+  };
\ No newline at end of file
diff --git a/website/src/pages/messages.tsx b/website/src/pages/messages.tsx
index 0182b8c5..ff13d8a4 100644
--- a/website/src/pages/messages.tsx
+++ b/website/src/pages/messages.tsx
@@ -1,64 +1,13 @@
-import {
-  Avatar,
-  Box,
-  CircularProgress,
-  HStack,
-  SimpleGrid,
-  Stack,
-  StackDivider,
-  Text,
-  useColorModeValue,
-} from "@chakra-ui/react";
+import { Box, 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 { 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>
-        <Avatar
-          name={`${item.isAssistant ? "Assitant" : "User"}`}
-          src={`${item.isAssistant ? "/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
-        />
-        <Box className={`p-4 rounded-md text-white whitespace-pre-wrap ${bgColor} text-white w-full`}>{item.text}</Box>
-      </HStack>
-    </FlaggableElement>
-  );
-};
+import { MessageTable } from "src/components/Messages/MessageTable";
 
 const MessagesDashboard = () => {
   const bgColor = useColorModeValue(colors.light.bg, colors.dark.bg);

From 910c1c88cec120c8a264a5218bce7d343ae059d8 Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Wed, 4 Jan 2023 15:42:51 +0100
Subject: [PATCH 05/10] pre-commit

---
 .../src/components/Messages/MessageTable.tsx  | 49 +++++++++----------
 .../components/Messages/MessageTableEntry.tsx | 30 ++++++------
 website/src/pages/api/messages/index.tsx      |  1 -
 3 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/website/src/components/Messages/MessageTable.tsx b/website/src/components/Messages/MessageTable.tsx
index 2572a5fa..fcbecbba 100644
--- a/website/src/components/Messages/MessageTable.tsx
+++ b/website/src/components/Messages/MessageTable.tsx
@@ -1,28 +1,27 @@
 import { Box, CircularProgress, Stack, StackDivider, useColorModeValue } from "@chakra-ui/react";
 import { MessageTableEntry } from "./MessageTableEntry";
 
-export function 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) => (
-              <MessageTableEntry item={item} idx={idx} key={item.id} />
-            ))}
-          </Stack>
-        )}
-      </Box>
-    );
-  };
-  
\ No newline at end of file
+export function 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) => (
+            <MessageTableEntry item={item} idx={idx} key={item.id} />
+          ))}
+        </Stack>
+      )}
+    </Box>
+  );
+}
diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx
index 7bda7af9..e68be0e8 100644
--- a/website/src/components/Messages/MessageTableEntry.tsx
+++ b/website/src/components/Messages/MessageTableEntry.tsx
@@ -2,18 +2,18 @@ import { Avatar, Box, HStack, useColorModeValue } from "@chakra-ui/react";
 
 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={`${item.isAssistant ? "Assitant" : "User"}`}
-            src={`${item.isAssistant ? "/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
-          />
-          <Box className={`p-4 rounded-md text-white whitespace-pre-wrap ${bgColor} text-white w-full`}>{item.text}</Box>
-        </HStack>
-      </FlaggableElement>
-    );
-  };
\ No newline at end of file
+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={`${item.isAssistant ? "Assitant" : "User"}`}
+          src={`${item.isAssistant ? "/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
+        />
+        <Box className={`p-4 rounded-md text-white whitespace-pre-wrap ${bgColor} text-white w-full`}>{item.text}</Box>
+      </HStack>
+    </FlaggableElement>
+  );
+}
diff --git a/website/src/pages/api/messages/index.tsx b/website/src/pages/api/messages/index.tsx
index b5a82bb1..cf55dcc3 100644
--- a/website/src/pages/api/messages/index.tsx
+++ b/website/src/pages/api/messages/index.tsx
@@ -1,4 +1,3 @@
-import { boolean } from "boolean";
 import { getToken } from "next-auth/jwt";
 
 const handler = async (req, res) => {

From 3905f75d6c3e9476eb8dc225f8bf262f71001e76 Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Wed, 4 Jan 2023 16:01:37 +0100
Subject: [PATCH 06/10] moved messages page into subfolder

---
 website/src/pages/{messages.tsx => messages/index.tsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename website/src/pages/{messages.tsx => messages/index.tsx} (100%)

diff --git a/website/src/pages/messages.tsx b/website/src/pages/messages/index.tsx
similarity index 100%
rename from website/src/pages/messages.tsx
rename to website/src/pages/messages/index.tsx

From efdfb09695a3512ba06f6adce82e4b88c4561811 Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Wed, 4 Jan 2023 20:04:26 +0100
Subject: [PATCH 07/10] fixed typo

---
 .../src/components/Messages/MessageTableEntry.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx
index e68be0e8..2bc17201 100644
--- a/website/src/components/Messages/MessageTableEntry.tsx
+++ b/website/src/components/Messages/MessageTableEntry.tsx
@@ -1,5 +1,6 @@
-import { Avatar, Box, HStack, useColorModeValue } from "@chakra-ui/react";
-
+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 }) {
@@ -9,10 +10,14 @@ export function MessageTableEntry({ item, idx }) {
     <FlaggableElement text={item.text} post_id={item.id} key={`flag_${item.id}`}>
       <HStack>
         <Avatar
-          name={`${item.isAssistant ? "Assitant" : "User"}`}
-          src={`${item.isAssistant ? "/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
+          name={`${boolean(item.is_assistant) ? "Assitant" : "User"}`}
+          src={`${boolean(item.is_assistant) ? "/images/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
         />
-        <Box className={`p-4 rounded-md text-white whitespace-pre-wrap ${bgColor} text-white w-full`}>{item.text}</Box>
+        <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>
   );

From 173356929af33af5b0509cb5b324b4b64ae61a4c Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Wed, 4 Jan 2023 20:09:03 +0100
Subject: [PATCH 08/10] removed content-type

---
 website/src/pages/api/messages/index.tsx | 1 -
 website/src/pages/api/messages/user.tsx  | 1 -
 2 files changed, 2 deletions(-)

diff --git a/website/src/pages/api/messages/index.tsx b/website/src/pages/api/messages/index.tsx
index cf55dcc3..3c8d1c17 100644
--- a/website/src/pages/api/messages/index.tsx
+++ b/website/src/pages/api/messages/index.tsx
@@ -13,7 +13,6 @@ const handler = async (req, res) => {
     method: "GET",
     headers: {
       "X-API-Key": process.env.FASTAPI_KEY,
-      "Content-Type": "application/json",
     },
   });
   const messages = await messagesRes.json();
diff --git a/website/src/pages/api/messages/user.tsx b/website/src/pages/api/messages/user.tsx
index 58a8f10e..e3d22f3c 100644
--- a/website/src/pages/api/messages/user.tsx
+++ b/website/src/pages/api/messages/user.tsx
@@ -18,7 +18,6 @@ const handler = async (req, res) => {
     method: "GET",
     headers: {
       "X-API-Key": process.env.FASTAPI_KEY,
-      "Content-Type": "application/json",
     },
   });
   const messages = await messagesRes.json();

From 8e61cef81dd3f7b9664c2f003d60c558d290843b Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Wed, 4 Jan 2023 20:22:06 +0100
Subject: [PATCH 09/10] added getDashboardLayout

---
 website/src/components/Layout.tsx    |  7 +++++++
 website/src/pages/dashboard.tsx      | 10 +++-------
 website/src/pages/messages/index.tsx | 13 ++++---------
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/website/src/components/Layout.tsx b/website/src/components/Layout.tsx
index 3564d765..bf662113 100644
--- a/website/src/components/Layout.tsx
+++ b/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;
diff --git a/website/src/pages/dashboard.tsx b/website/src/pages/dashboard.tsx
index dfc5cb03..8b1f6861 100644
--- a/website/src/pages/dashboard.tsx
+++ b/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;
diff --git a/website/src/pages/messages/index.tsx b/website/src/pages/messages/index.tsx
index ff13d8a4..a466b710 100644
--- a/website/src/pages/messages/index.tsx
+++ b/website/src/pages/messages/index.tsx
@@ -5,9 +5,9 @@ import useSWRImmutable from "swr/immutable";
 
 import fetcher from "src/lib/fetcher";
 import { SideMenu } from "src/components/Dashboard";
-import { Header } from "src/components/Header";
-import { colors } from "styles/Theme/colors";
 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);
@@ -39,7 +39,7 @@ const MessagesDashboard = () => {
             <SideMenu />
           </Box>
           <Box className="flex flex-col overflow-auto p-6 sm:pl-0 gap-14">
-            <SimpleGrid columns={2} spacing={2}>
+            <SimpleGrid columns={[1, 1, 1, 2]} spacing={2}>
               <Box>
                 <Text className="text-2xl font-bold">Most recent messages</Text>
                 <MessageTable messages={messages} isLoading={isLoadingAll} />
@@ -56,11 +56,6 @@ const MessagesDashboard = () => {
   );
 };
 
-MessagesDashboard.getLayout = (page) => (
-  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
-    <Header transparent={true} />
-    {page}
-  </div>
-);
+MessagesDashboard.getLayout = (page) => getDashboardLayout(page);
 
 export default MessagesDashboard;

From b4034e56e2c58853a2bbc2409645f9060255408b Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Wed, 4 Jan 2023 20:35:20 +0100
Subject: [PATCH 10/10] moved isLoading

---
 .../src/components/Messages/MessageTable.tsx  | 27 +++++--------------
 website/src/pages/messages/index.tsx          | 24 ++++++++++++++---
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/website/src/components/Messages/MessageTable.tsx b/website/src/components/Messages/MessageTable.tsx
index fcbecbba..65f6efb1 100644
--- a/website/src/components/Messages/MessageTable.tsx
+++ b/website/src/components/Messages/MessageTable.tsx
@@ -1,27 +1,12 @@
 import { Box, CircularProgress, Stack, StackDivider, useColorModeValue } from "@chakra-ui/react";
 import { MessageTableEntry } from "./MessageTableEntry";
 
-export function MessageTable({ messages, isLoading }) {
-  const backgroundColor = useColorModeValue("white", "gray.700");
-  const accentColor = useColorModeValue("gray.200", "gray.900");
-
+export function MessageTable({ messages }) {
   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) => (
-            <MessageTableEntry item={item} idx={idx} key={item.id} />
-          ))}
-        </Stack>
-      )}
-    </Box>
+    <Stack divider={<StackDivider />} spacing="4">
+      {messages.map((item, idx) => (
+        <MessageTableEntry item={item} idx={idx} key={item.id} />
+      ))}
+    </Stack>
   );
 }
diff --git a/website/src/pages/messages/index.tsx b/website/src/pages/messages/index.tsx
index a466b710..9ecdeb35 100644
--- a/website/src/pages/messages/index.tsx
+++ b/website/src/pages/messages/index.tsx
@@ -1,4 +1,4 @@
-import { Box, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
+import { Box, CircularProgress, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
 import { useState } from "react";
 import useSWRImmutable from "swr/immutable";
@@ -11,6 +11,8 @@ 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([]);
@@ -42,11 +44,27 @@ const MessagesDashboard = () => {
             <SimpleGrid columns={[1, 1, 1, 2]} spacing={2}>
               <Box>
                 <Text className="text-2xl font-bold">Most recent messages</Text>
-                <MessageTable messages={messages} isLoading={isLoadingAll} />
+                <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>
-                <MessageTable messages={userMessages} isLoading={isLoadingUser} />
+                <Box
+                  backgroundColor={boxBgColor}
+                  boxShadow="base"
+                  dropShadow={boxAccentColor}
+                  borderRadius="xl"
+                  className="p-6 shadow-sm"
+                >
+                  {isLoadingUser ? <CircularProgress isIndeterminate /> : <MessageTable messages={userMessages} />}
+                </Box>
               </Box>
             </SimpleGrid>
           </Box>