("preview");
+ const [title, setTitle] = useState(
+ () => data?.fields?.[JOURNAL_PAGE_TITLE_FIELD_NAME],
+ );
+ const [isEditingTitle, setIsEditingTitle] = useState(false);
+
+ const saveData = useCallback(async () => {
+ const extra_data = {
+ [JOURNAL_PAGE_TITLE_FIELD_NAME]: title,
+ [JOURNAL_PAGE_CONTENT_FIELD_NAME]: valueToSave,
+ };
+ console.log("extra Data", extra_data);
+ const resp = await fetch(`http://localhost:5195/node/${id}`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ extra_data }),
+ });
+ const data = await resp.text();
+ console.log("result", data);
+ }, [title, valueToSave, id]);
+
+ useEffect(() => {
+ if (changed) {
+ (async () => {
+ await saveData();
+ queryClient.invalidateQueries({ queryKey: ["fetchNode", id] });
+ })();
+ }
+ }, [changed, queryClient, saveData]);
+
+ const saveChangedTitle = useCallback(() => {
+ (async () => {
+ await saveData();
+ setIsEditingTitle(false);
+ })();
+ }, [saveData]);
+
+ return (
+ <>
+ {isEditingTitle ? (
+
+ ) : (
+
+
setIsEditingTitle(true)}
+ >
+ {title ?? (untitled)}
+
+
+ {day && }
+
+ newValue !== undefined && setValue(newValue)}
+ preview={mode}
+ visibleDragbar={false}
+ onDoubleClick={() => setMode("live")}
+ previewOptions={{
+ remarkPlugins: [remarkMath],
+ rehypePlugins: [rehypeKatex],
+ }}
+ />
+
+
+ );
+}
+
+function DayIndicator({ day }) {
+ const parsedDate = parseDate(day, "yyyy-MM-dd", new Date());
+ const formattedDate = formatDate(parsedDate, "PPPP");
+ return (
+
+ Journal entry for {formattedDate}
+
+ );
+}
diff --git a/ui/src/components/nodes/Mail.module.scss b/ui/src/components/nodes/Mail.module.scss
new file mode 100644
index 0000000..18d3395
--- /dev/null
+++ b/ui/src/components/nodes/Mail.module.scss
@@ -0,0 +1,25 @@
+.container {
+ display: flex;
+ flex-direction: column;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ padding: 2px 12px;
+
+ .title {
+ font-size: 1rem;
+ }
+}
+
+.settings {
+ h2 {
+ margin: 0;
+ }
+}
+
+.mailList {
+ flex-grow: 1;
+ border-top: 1px solid lightgray;
+}
\ No newline at end of file
diff --git a/ui/src/components/nodes/Mail.tsx b/ui/src/components/nodes/Mail.tsx
new file mode 100644
index 0000000..73f8fd5
--- /dev/null
+++ b/ui/src/components/nodes/Mail.tsx
@@ -0,0 +1,168 @@
+import { useCallback, useState } from "react";
+import styles from "./Mail.module.scss";
+import { Formik } from "formik";
+import SettingsIcon from "@mui/icons-material/Settings";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import ReactTimeAgo from "react-time-ago";
+import { parseISO } from "date-fns";
+
+export default function Mail() {
+ const [showSettings, setShowSettings] = useState(false);
+ const fetchedMail = useQuery({
+ queryKey: ["mail"],
+ queryFn: fetchMail,
+ staleTime: 10000,
+ });
+
+ const { isSuccess, data } = fetchedMail;
+
+ return (
+
+
+
+ {showSettings ? <>Settings : <>Mail}
+
+
+
+
+
+ {showSettings && (
+
+
+
+ )}
+
+
+ {isSuccess && (
+
+ {data.messages.map((message) => {
+ const date = parseISO(message.internal_date);
+ return (
+ -
+
+
+ {message.subject} ()
+
+
+ {message.body}
+
+
+ );
+ })}
+
+ )}
+
+
+ Add a new config
+ {
+ (async () => {
+ const resp = await fetch("http://localhost:5195/node", {
+ method: "PUT",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ type: "panorama/mail/config",
+ extra_data: {
+ "panorama/mail/config/imap_hostname": values.imapHostname,
+ "panorama/mail/config/imap_port": values.imapPort,
+ "panorama/mail/config/imap_username": values.imapUsername,
+ "panorama/mail/config/imap_password": values.imapPassword,
+ },
+ }),
+ });
+ const data = await resp.json();
+ console.log("result", data);
+ queryClient.invalidateQueries({ queryKey: ["mailConfigs"] });
+ })();
+ }}
+ initialValues={{
+ imapHostname: "",
+ imapPort: 993,
+ imapUsername: "",
+ imapPassword: "",
+ }}
+ >
+ {({ values, handleSubmit, handleChange, handleBlur }) => (
+
+ )}
+
+
+
+
+ {isSuccess && (
+
+ {data.map((config) => (
+ - {JSON.stringify(config)}
+ ))}
+
+ )}
+