From 2db310ab060b82c3f81d0cd19d85046f4344ab59 Mon Sep 17 00:00:00 2001
From: jojopirker <j.pirker@gmail.com>
Date: Fri, 6 Jan 2023 15:53:18 +0100
Subject: [PATCH] (#309) Message navigation recursive

---
 .../Messages/MessageWithChildren.tsx          | 85 +++++++++++++++++++
 website/src/pages/messages/[id]/index.tsx     | 71 +++-------------
 2 files changed, 99 insertions(+), 57 deletions(-)
 create mode 100644 website/src/components/Messages/MessageWithChildren.tsx

diff --git a/website/src/components/Messages/MessageWithChildren.tsx b/website/src/components/Messages/MessageWithChildren.tsx
new file mode 100644
index 00000000..f59017c7
--- /dev/null
+++ b/website/src/components/Messages/MessageWithChildren.tsx
@@ -0,0 +1,85 @@
+import { Box, CircularProgress, Flex, HStack, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import useSWR from "swr";
+
+import fetcher from "src/lib/fetcher";
+import { MessageTableEntry } from "./MessageTableEntry";
+
+interface MessageWithChildrenProps {
+    id: string;
+    depth?: number;
+    maxDepth?: number;
+}
+
+export function MessageWithChildren(props: MessageWithChildrenProps) {
+    const { id, depth, maxDepth } = props;
+
+    const [message, setMessage] = useState(null);
+    const [children, setChildren] = useState(null);
+
+    const { isLoading } = useSWR(id ? `/api/messages/${id}` : null, fetcher, {
+        onSuccess: (data) => {
+            setMessage(data);
+        },
+        onError: (err, key, config) => {
+            setMessage(null);
+        },
+    });
+    const { isLoading: isLoadingChildren } = useSWR(id ? `/api/messages/${id}/children` : null, fetcher, {
+        onSuccess: (data) => {
+            setChildren(data);
+        },
+        onError: (err, key, config) => {
+            setChildren(null);
+        },
+    });
+
+    const renderRecursive = maxDepth && ((depth && (depth < maxDepth)) || !depth);
+
+    if (isLoading || isLoadingChildren) {
+        return (<CircularProgress isIndeterminate />)
+    }
+
+    return (
+        <>
+            {message && (<>
+                <Text align="center" fontSize="xl">
+                    {(depth === 0 || !depth) ? "Message" : depth === 1 ? "Children" : "Ancestor"}
+                </Text>
+                <Flex justifyContent="center">
+                    <Box maxWidth="container.sm" flex="1" px={[4, 6, 8, 9]}>
+                        <Box rounded="lg" p="2">
+                            <MessageTableEntry item={message} idx={1} />
+                        </Box>
+                    </Box>
+                </Flex>
+            </>
+            )}
+            {children && Array.isArray(children) && children.length > 0 ?
+                renderRecursive ?
+                    <HStack spacing={8} alignItems="start" justifyContent="center">
+                        {children.map((item, idx) => (
+                            <Box flex="1">
+                                <MessageWithChildren id={item.id} depth={depth ? depth + 1 : 1} maxDepth={maxDepth} key={`recursiveMessageWChildren_${idx}`} />
+                            </Box>))}
+                    </HStack> :
+                    (
+                        <>
+                            <Text align="center" fontSize="xl">
+                                {(depth === 0 || !depth) ? "Children" : "Ancestor"}
+                            </Text>
+                            <HStack spacing={8} alignItems="start" justifyContent="center">
+                                {children.map((item, idx) => (
+                                    <Box maxWidth="container.sm" flex="1" px={[4, 6, 8, 9]} key={idx}>
+                                        <Box rounded="lg" p="2">
+                                            <MessageTableEntry item={item} idx={idx * 2} />
+                                        </Box>
+                                    </Box>
+                                ))}
+                            </HStack>
+                        </>
+                    ) : <></>}
+        </>);
+
+}
+
diff --git a/website/src/pages/messages/[id]/index.tsx b/website/src/pages/messages/[id]/index.tsx
index f1512d25..d455f256 100644
--- a/website/src/pages/messages/[id]/index.tsx
+++ b/website/src/pages/messages/[id]/index.tsx
@@ -1,42 +1,22 @@
-import { Box, Container, Text, HStack, useColorModeValue } from "@chakra-ui/react";
+import { Box, Container, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import useSWRImmutable from "swr/immutable";
+import { useState } from "react";
+import useSWR from "swr";
 
 import fetcher from "src/lib/fetcher";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
-import { colors } from "styles/Theme/colors";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { MessageWithChildren } from "src/components/Messages/MessageWithChildren";
 
 const MessageDetail = () => {
-  const bg = useColorModeValue("white", colors.dark.bg);
+  const mainBg = useColorModeValue("bg-slate-300", "bg-slate-900");
   const router = useRouter();
   const { id } = router.query;
 
-  /** State arrays of messages */
-  const [message, setMessage] = useState(null);
   const [parent, setParent] = useState(null);
-  const [children, setChildren] = useState(null);
 
-  /** Fetching functions */
-  const { isLoading } = useSWRImmutable(id ? `/api/messages/${id}` : null, fetcher, {
-    onSuccess: (data) => {
-      setMessage(data);
-    },
-    onError: (err, key, config) => {
-      setMessage(null);
-    },
-  });
-  const { isLoading: isLoadingChildren } = useSWRImmutable(id ? `/api/messages/${id}/children` : null, fetcher, {
-    onSuccess: (data) => {
-      setChildren(data);
-    },
-    onError: (err, key, config) => {
-      setChildren(null);
-    },
-  });
-  const { isLoading: isLoadingParent } = useSWRImmutable(id ? `/api/messages/${id}/parent` : null, fetcher, {
+  const { isLoading: isLoadingParent } = useSWR(id ? `/api/messages/${id}/parent` : null, fetcher, {
     onSuccess: (data) => {
       setParent(data);
     },
@@ -45,7 +25,7 @@ const MessageDetail = () => {
     },
   });
 
-  if (isLoading || isLoadingChildren || isLoadingParent) {
+  if (isLoadingParent) {
     return <LoadingScreen text="Loading..." />;
   }
   return (
@@ -57,45 +37,22 @@ const MessageDetail = () => {
           content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
         />
       </Head>
-      <main>
-        <Container w="100%">
+      <main className={`${mainBg}`}>
+        <Container w="100%" pt={[2, 2, 4, 4]}>
           {parent && (
             <>
-              <Text align="center" fontSize="xl" pt="4">
+              <Text align="center" fontSize="xl">
                 Parent
               </Text>
-              <Box my="3" bg={bg} rounded="lg" pb="4" px="4">
+              <Box rounded="lg" p="2">
                 <MessageTableEntry item={parent} idx={1} />
               </Box>
             </>
           )}
-          {message && (
-            <>
-              <Text align="center" fontSize="xl">
-                Message
-              </Text>
-              <Box my="3" bg={bg} rounded="lg" pb="4" px="4">
-                <MessageTableEntry item={message} idx={1} />
-              </Box>
-            </>
-          )}
         </Container>
-        {children && Array.isArray(children) && children.length > 0 && (
-          <>
-            <Text align="center" fontSize="xl">
-              Children
-            </Text>
-            <HStack spacing={8} alignItems="start" justifyContent="center">
-              {children.map((item, idx) => (
-                <Box maxWidth="container.sm" flex="1" px="6" key={idx}>
-                  <Box my="3" bg={bg} rounded="lg" pb="4" px="6">
-                    <MessageTableEntry item={item} idx={idx * 2} />
-                  </Box>
-                </Box>
-              ))}
-            </HStack>
-          </>
-        )}
+        <Box pb="4">
+          <MessageWithChildren id={id} maxDepth={2} />
+        </Box>
       </main>
     </>
   );