Canvas: Prettier
Change-Id: I620dde109df0f29f0c85c6fe150e347d2c32a03e
diff --git a/apps/canvas/front/src/Messages.tsx b/apps/canvas/front/src/Messages.tsx
index ecf7777..e756047 100644
--- a/apps/canvas/front/src/Messages.tsx
+++ b/apps/canvas/front/src/Messages.tsx
@@ -6,53 +6,65 @@
import { Badge } from "./components/ui/badge";
export function Messages() {
- const store = useStateStore();
- const nodes = useNodes<AppNode>();
- const [nodeMap, setNodeMap] = useState<Map<string, AppNode>>(new Map());
- useEffect(() => {
- setNodeMap(new Map(nodes.map((n) => [n.id, n])));
- }, [nodes, setNodeMap]);
- const onClick = useCallback((fn?: (state: AppState) => void) => {
- return () => {
- if (fn) {
- fn(store);
- }
- };
- }, [store]);
- const messages = useMessages();
- const [grouped, setGrouped] = useState<Map<string, Message[]>>(new Map());
- useEffect(() => {
- const g = new Map<string, Message[]>();
- messages.forEach((m) => {
- const id = m.nodeId || "global";
- const existing: Message[] = g.get(id) || [];
- existing.push(m);
- g.set(id, existing);
- });
- setGrouped(g);
- }, [messages, setGrouped]);
- const [open, setOpen] = useState<string[]>([...grouped.keys()]);
- useEffect(() => {
- // TODO(gio): do not reopen closed ones
- setOpen([...grouped.keys()]);
- }, [grouped, setOpen]);
- return (
- <Accordion type="multiple" value={open} onValueChange={(v) => setOpen(v)}>
- {[...grouped.entries()].map(([id, messages]) => (
- <AccordionItem key={id} value={id}>
- <AccordionTrigger className="flex flex-row-reverse !space-x-4 !justify-end">
- <Badge>{messages.length}</Badge>
- <div>{id === "global" ? "Global" : nodeLabel(nodeMap.get(id)!)}</div>
- </AccordionTrigger>
- <AccordionContent>
- <div className="flex flex-col space-y-1">
- {messages.map((m) => (
- <Button key={m.id} variant="ghost" style={{ justifyContent: "flex-start" }} onMouseOver={onClick(m.onHighlight)} onMouseLeave={onClick(m.onLooseHighlight)} onClick={onClick(m.onClick)}>{m.message}</Button>
- ))}
- </div>
- </AccordionContent>
- </AccordionItem>
- ))}
- </Accordion>
- )
-}
\ No newline at end of file
+ const store = useStateStore();
+ const nodes = useNodes<AppNode>();
+ const [nodeMap, setNodeMap] = useState<Map<string, AppNode>>(new Map());
+ useEffect(() => {
+ setNodeMap(new Map(nodes.map((n) => [n.id, n])));
+ }, [nodes, setNodeMap]);
+ const onClick = useCallback(
+ (fn?: (state: AppState) => void) => {
+ return () => {
+ if (fn) {
+ fn(store);
+ }
+ };
+ },
+ [store],
+ );
+ const messages = useMessages();
+ const [grouped, setGrouped] = useState<Map<string, Message[]>>(new Map());
+ useEffect(() => {
+ const g = new Map<string, Message[]>();
+ messages.forEach((m) => {
+ const id = m.nodeId || "global";
+ const existing: Message[] = g.get(id) || [];
+ existing.push(m);
+ g.set(id, existing);
+ });
+ setGrouped(g);
+ }, [messages, setGrouped]);
+ const [open, setOpen] = useState<string[]>([...grouped.keys()]);
+ useEffect(() => {
+ // TODO(gio): do not reopen closed ones
+ setOpen([...grouped.keys()]);
+ }, [grouped, setOpen]);
+ return (
+ <Accordion type="multiple" value={open} onValueChange={(v) => setOpen(v)}>
+ {[...grouped.entries()].map(([id, messages]) => (
+ <AccordionItem key={id} value={id}>
+ <AccordionTrigger className="flex flex-row-reverse !space-x-4 !justify-end">
+ <Badge>{messages.length}</Badge>
+ <div>{id === "global" ? "Global" : nodeLabel(nodeMap.get(id)!)}</div>
+ </AccordionTrigger>
+ <AccordionContent>
+ <div className="flex flex-col space-y-1">
+ {messages.map((m) => (
+ <Button
+ key={m.id}
+ variant="ghost"
+ style={{ justifyContent: "flex-start" }}
+ onMouseOver={onClick(m.onHighlight)}
+ onMouseLeave={onClick(m.onLooseHighlight)}
+ onClick={onClick(m.onClick)}
+ >
+ {m.message}
+ </Button>
+ ))}
+ </div>
+ </AccordionContent>
+ </AccordionItem>
+ ))}
+ </Accordion>
+ );
+}