wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-06-28 16:20:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

(#309) pre-commit

Browse Source
This commit is contained in:
jojopirker
2023-01-06 15:57:20 +01:00
parent 2db310ab06
commit d292643ea6
1 changed files with 76 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/Messages/MessageWithChildren.tsx
+76 -67
View File
@@ -6,80 +6,89 @@ import fetcher from "src/lib/fetcher";
import { MessageTableEntry } from "./MessageTableEntry";
interface MessageWithChildrenProps {
id: string;
depth?: number;
maxDepth?: number;
id: string;
depth?: number;
maxDepth?: number;
}
export function MessageWithChildren(props: MessageWithChildrenProps) {
const { id, depth, maxDepth } = props;
const { id, depth, maxDepth } = props;
const [message, setMessage] = useState(null);
const [children, setChildren] = useState(null);
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 { 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);
const renderRecursive = maxDepth && ((depth && depth < maxDepth) || !depth);
if (isLoading || isLoadingChildren) {
return (<CircularProgress isIndeterminate />)
}
if (isLoading || isLoadingChildren) {
return <CircularProgress isIndeterminate />;
}
return (
return (
<>
{message && (
<>
{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>
</>
) : <></>}
</>);
<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>
</>
)
) : (
<></>
)}
</>
);
}