using avatar instead of image & pre-commit

2026-07-04 17:20:19 +08:00 · 2023-01-04 15:13:08 +01:00
parent b24bfd1d74
commit dba693ee85
2 changed files with 115 additions and 104 deletions
@@ -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;
@@ -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;