panorama/app/src/App.tsx

69 lines
1.9 KiB
TypeScript
Raw Normal View History

2024-05-25 10:04:05 +00:00
import Header from "./components/Header";
import styles from "./App.module.scss";
import "@fontsource/inter";
2024-05-27 05:43:09 +00:00
import "@fontsource/inter/700.css";
2024-05-25 10:04:05 +00:00
import "./global.scss";
2024-05-27 04:35:18 +00:00
import "katex/dist/katex.min.css";
2024-05-25 10:04:05 +00:00
import { useEffect, useState } from "react";
import NodeDisplay from "./components/NodeDisplay";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
2024-05-25 11:45:23 +00:00
import TimeAgo from "javascript-time-ago";
import en from "javascript-time-ago/locale/en";
2024-05-27 05:43:09 +00:00
import Sidebar from "./components/Sidebar";
2024-05-27 07:02:19 +00:00
import { atom, useAtom, useAtomValue } from "jotai";
import { OrderedMap, OrderedSet } from "immutable";
2024-05-25 10:04:05 +00:00
const queryClient = new QueryClient();
2024-05-25 11:45:23 +00:00
TimeAgo.addDefaultLocale(en);
2024-05-27 07:02:19 +00:00
export const nodesOpenedAtom = atom<OrderedSet<string>>(OrderedSet<string>());
2024-05-27 06:27:17 +00:00
2024-05-25 10:04:05 +00:00
function App() {
2024-05-27 07:02:19 +00:00
const nodesOpened = useAtomValue(nodesOpenedAtom);
const openNode = useOpenNode();
2024-05-25 10:04:05 +00:00
2024-05-27 06:27:17 +00:00
// Open today's journal entry if it's not already opened
2024-05-25 10:04:05 +00:00
useEffect(() => {
(async () => {
console.log("ndoes", nodesOpened);
2024-05-27 07:02:19 +00:00
if (nodesOpened.size === 0) {
2024-05-25 10:04:05 +00:00
console.log("Opening today's entry.");
const resp = await fetch(
"http://localhost:5195/journal/get_todays_journal_id",
);
const data = await resp.json();
console.log("resp", data);
2024-05-27 07:02:19 +00:00
openNode(data.node_id);
2024-05-25 10:04:05 +00:00
}
})();
2024-05-27 07:02:19 +00:00
}, [nodesOpened, openNode]);
2024-05-25 10:04:05 +00:00
2024-05-27 19:44:24 +00:00
const nodes = [...nodesOpened.reverse().values()].map((nodeId, idx) => (
<NodeDisplay idx={idx} key={nodeId} id={nodeId} />
));
2024-05-25 10:04:05 +00:00
return (
<QueryClientProvider client={queryClient}>
<div className={styles.container}>
<Header />
2024-05-27 05:43:09 +00:00
<div className={styles.main}>
<Sidebar />
<div className={styles.nodeContainer}>{nodes}</div>
</div>
2024-05-25 10:04:05 +00:00
</div>
</QueryClientProvider>
);
}
export default App;
2024-05-27 07:02:19 +00:00
export function useOpenNode() {
const [nodesOpened, setNodesOpened] = useAtom(nodesOpenedAtom);
return (node_id: string) => {
setNodesOpened(nodesOpened.remove(node_id).add(node_id));
};
}