Refactor: Extract components

src/app/app.tsx

@@ -1,33 +1,27 @@
-import { useState, useEffect } from "react";
-import s from "./app.module.css";
-import { AppBody } from "./body/body";
-import { useEditor } from "./editor/state/state";
-import { Toolbar } from "./toolbar/toolbar";
-import { useAppFile } from "./use-file";
-import { useLayout } from "./use-layout";
-import { useAppToolbar } from "./use-toolbar";
+import { useEditor } from "~/src/components/editor/state/state";
+import { useFile } from "~/src/components/file/state";
+import { Layout } from "~/src/components/layout/layout";
+import { useLayout } from "~/src/components/layout/state";
+import { Toolbar } from "~/src/components/toolbar/toolbar";
 import { Helmet } from "react-helmet";
+import s from "./app.module.css";
+import { useFileDirty } from "./state/file-dirty";
+import { useFileLoad } from "./state/file-load";
+import { useToolbarAutohide } from "./state/toolbar-autohide";
 
 export const App = () => {
- const [isDirty, setDirtyFile] = useState(false);
  const layout = useLayout();
  const editor = useEditor();
- const toolbar = useAppToolbar({ editor: editor.value });
- const file = useAppFile({ editor: editor.value });
+ const file = useFile();
 
- // Set file as dirty when user changes the editor content
- useEffect(() => {
- if (editor.value === null) return;
- const dirty = editor.value.onDidChangeModelContent(
- () => void setDirtyFile(true)
- );
- return () => dirty.dispose();
- }, [editor.value]);
+ useFileDirty({ editor: editor.value, setFileDirty: file.setDirty });
+ useFileLoad({ editor: editor.value, fileHandle: file.handle });
+ const toolbar = useToolbarAutohide({ editor: editor.value });
 
  const title =
  file.handle === null
  ? "Samuwrite"
- : `${isDirty ? "* " : ""}${file.handle.name} - Samuwrite`;
+ : `${file.dirty ? "* " : ""}${file.handle.name} - Samuwrite`;
 
  return (
  <div className={s.app}>
@@ -42,12 +36,11 @@ export const App = () => {
  layout={layout}
  show={toolbar.show}
  editor={editor.value}
- setDirtyFile={setDirtyFile}
  file={file}
  />
  </div>
  <div className={s.body}>
- <AppBody layout={layout.value} editor={editor} />
+ <Layout layout={layout.value} editor={editor} />
  </div>
  </div>
  );

src/app/state/file-dirty.ts

@@ -0,0 +1,19 @@
+import { FileState } from "~/src/components/file/state";
+import { useEffect } from "react";
+import { Editor } from "~src/components/editor/state/state";
+
+interface Params {
+ setFileDirty: FileState["setDirty"];
+ editor: Editor | null;
+}
+
+export const useFileDirty = (params: Params): void => {
+ const { setFileDirty, editor } = params;
+ useEffect(() => {
+ if (editor === null) return;
+ const dirty = editor.onDidChangeModelContent(() => {
+ setFileDirty(true);
+ });
+ return () => void dirty.dispose();
+ }, [editor]);
+};

src/app/state/file-load.ts

@@ -0,0 +1,30 @@
+import { FileHandle, FileState } from "~/src/components/file/state";
+import { fileSystem } from "~/src/components/file/system";
+import * as monaco from "monaco-editor";
+import { useEffect } from "react";
+import { Editor, EditorModel } from "~src/components/editor/state/state";
+
+interface Params {
+ editor: Editor | null;
+ fileHandle: FileState["handle"];
+}
+
+const loadFile = (handle: FileHandle, editor: Editor): (() => void) => {
+ let model: null | EditorModel = null;
+ fileSystem.read(handle).then((text) => {
+ model = monaco.editor.createModel(text, "markdown");
+ editor.setModel(model);
+ });
+ return () => void model?.dispose();
+};
+
+export const useFileLoad = (params: Params): void => {
+ const { fileHandle, editor } = params;
+
+ useEffect(() => {
+ if (fileHandle === null) return;
+ if (editor === null) throw Error("Editor is not created");
+ const dispose = loadFile(fileHandle, editor);
+ return () => void dispose();
+ }, [fileHandle, editor]);
+};

src/app/use-toolbar.ts → src/app/state/toolbar-autohide.ts

@@ -1,6 +1,6 @@
 import * as monaco from "monaco-editor";
 import { RefObject, useEffect, useRef, useState } from "react";
-import { Editor } from "./editor/state/state";
+import { Editor } from "~/src/components/editor/state/state";
 
 interface Params {
  editor: Editor | null;
@@ -12,7 +12,7 @@ interface AppToolbarState {
  show: boolean;
 }
 
-export const useAppToolbar = (params: Params): AppToolbarState => {
+export const useToolbarAutohide = (params: Params): AppToolbarState => {
  const { editor } = params;
 
  const ref = useRef<HTMLDivElement>(null);

src/components/button/more/button.tsx

@@ -1,7 +1,7 @@
 import { TippyProps } from "@tippyjs/react";
 import { VscChevronDown } from "react-icons/vsc";
-import { Popover } from "../../popover/popover";
-import { Tooltip } from "../../tooltip/tooltip";
+import { Popover } from "~/src/components/popover/popover";
+import { Tooltip } from "~/src/components/tooltip/tooltip";
 import s from "../button.module.css";
 import { ButtonMoreMenu, ButtonMoreMenuItem } from "./menu";
 

src/components/button/more/menu.tsx

@@ -1,6 +1,5 @@
 import { ButtonHTMLAttributes } from "react";
-import { createPortal } from "react-dom";
-import { Shortcut, ShortcutKey } from "../../shortcut/shortcut";
+import { Shortcut, ShortcutKey } from "~/src/components/shortcut/shortcut";
 import s from "./menu.module.css";
 
 const container = document.getElementById("portal");

src/app/editor/editor.tsx → src/components/editor/editor.tsx

@@ -1,6 +1,6 @@
 import * as monaco from "monaco-editor";
 import { RefObject, useEffect, useRef } from "react";
-import { getRef } from "../../utils/ref";
+import { getRef } from "~/src/utils/ref";
 import { createEditor, getLeftPadding } from "./create/create";
 import "./editor.css";
 import s from "./editor.module.css";
@@ -46,6 +46,7 @@ export const Editor = (props: Props) => {
  editor.focus();
  setEditor(editor);
  return () => {
+ setEditor(null);
  vimMode?.dispose();
  editor.dispose();
  };
@@ -56,7 +57,6 @@ export const Editor = (props: Props) => {
  if (editor === null) return;
  const container = getRef(editorContainerRef, "Container is null");
  const observer = new ResizeObserver(() => {
- console.log(Date.now());
  editor.layout();
  editor.updateOptions({
  lineDecorationsWidth: getLeftPadding(container),

src/components/file/state.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { SetState } from "~/src/utils/state";
+import { set } from "idb-keyval";
+
+export type FileHandle = FileSystemFileHandle;
+
+export interface FileState {
+ handle: FileHandle | null;
+ setHandle: SetState<FileHandle | null>;
+ dirty: boolean;
+ setDirty: SetState<boolean>;
+}
+
+const useSaveHandle = (handle: FileHandle | null): void => {
+ useEffect(() => {
+ if (handle !== null) set("handle", handle);
+ }, [handle]);
+};
+
+export const useFile = (): FileState => {
+ const [handle, setHandle] = useState<FileHandle | null>(null);
+ const [dirty, setDirty] = useState(false);
+
+ useSaveHandle(handle);
+
+ return { handle, setHandle, dirty, setDirty };
+};

src/file/permission.ts → src/components/file/system.ts

@@ -1,5 +1,7 @@
-export const verifyFilePermission = async (
- handle: FileSystemFileHandle,
+import { FileHandle } from "./state";
+
+const verifyPermission = async (
+ handle: FileHandle,
  mode: FileSystemPermissionMode
 ): Promise<boolean> => {
  // Check if permission was already granted. If so, return true.
@@ -11,3 +13,15 @@ export const verifyFilePermission = async (
  // The user didn't grant permission, so return false.
  return false;
 };
+
+const read = async (handle: FileHandle): Promise<string> => {
+ const permission = await verifyPermission(handle, "read");
+ if (permission === false) throw Error("No permission");
+ const file = await handle.getFile();
+ const text = await file.text();
+ return text;
+};
+
+export const fileSystem = {
+ read,
+};

src/app/body/body.module.css → src/components/layout/layout.module.css

@@ -1,4 +1,4 @@
-.body {
+.layout {
  height: 100%;
 }
 
@@ -15,19 +15,19 @@
 
 /* Need to hide "editor" using CSS since we need to keep it in the DOM to avoid
 losing the state */
-.body.previewView .editor {
+.layout.previewView .editor {
  display: none;
 }
 
 /* Split */
 
-.body.splitView {
+.layout.splitView {
  display: flex;
  justify-content: center;
 }
 
-.body.splitView .editor,
-.body.splitView .preview {
+.layout.splitView .editor,
+.layout.splitView .preview {
  flex: 1 1 0px;
  overflow: hidden;
  max-width: 1280px;

src/app/body/body.tsx → src/components/layout/layout.tsx

@@ -1,22 +1,21 @@
-import { Dispatch, SetStateAction } from "react";
 import { Editor as EditorComponent } from "../editor/editor";
-import { Editor as EditorType, EditorState } from "../editor/state/state";
-import { Layout } from "../use-layout";
-import s from "./body.module.css";
+import { EditorState } from "../editor/state/state";
+import s from "./layout.module.css";
+import { Layout as LayoutType } from "./state";
 
 interface Props {
- layout: Layout;
+ layout: LayoutType;
  editor: EditorState;
 }
 
-const layoutClass: Record<Layout, string> = {
+const layoutClass: Record<LayoutType, string> = {
  editor: s.editorView,
  preview: s.previewView,
  split: s.splitView,
 };
 
-export const AppBody = (props: Props): JSX.Element => (
- <div className={[s.body, layoutClass[props.layout]].join(" ")}>
+export const Layout = (props: Props): JSX.Element => (
+ <div className={[s.layout, layoutClass[props.layout]].join(" ")}>
  {/* Always render Editor to avoid losing content state */}
  <div className={s.editor}>
  <EditorComponent editor={props.editor} />

src/app/use-layout.ts → src/components/layout/state.ts

@@ -15,13 +15,16 @@ const getInitial = (): Layout => {
  return stored as Layout;
 };
 
-export const useLayout = (): LayoutState => {
- const [layout, setLayout] = useState<Layout>(getInitial);
-
- // Save preference
+const useSaveLayout = (layout: Layout): void => {
  useEffect(() => {
  window.localStorage.setItem(STORAGE_KEY, layout);
  }, [layout]);
+};
+
+export const useLayout = (): LayoutState => {
+ const [layout, setLayout] = useState<Layout>(getInitial);
+
+ useSaveLayout(layout);
 
  return { value: layout, set: setLayout };
 };

src/components/shortcut/shortcut.tsx

@@ -1,4 +1,4 @@
-import { isApple } from "../../utils/platform";
+import { isApple } from "~/src/utils/platform";
 
 export type ShortcutKey =
  | { type: "char"; value: string }

src/app/toolbar/menu.tsx → src/components/toolbar/menu.tsx

@@ -1,6 +1,6 @@
 import { TippyProps } from "@tippyjs/react";
 import { VscMenu } from "react-icons/vsc";
-import { Button } from "../../components/button/button";
+import { Button } from "~/src/components/button/button";
 
 interface Props {
  singleton: TippyProps["singleton"];

src/app/toolbar/open.tsx → src/components/toolbar/open.tsx

@@ -1,25 +1,29 @@
 import { TippyProps } from "@tippyjs/react";
+import { Button } from "~/src/components/button/button";
+import { ButtonMoreMenuItem } from "~/src/components/button/more/menu";
+import { FileHandle, FileState } from "~/src/components/file/state";
 import { get } from "idb-keyval";
 import { VscFolder } from "react-icons/vsc";
-import { Button } from "../../components/button/button";
-import { ButtonMoreMenuItem } from "../../components/button/more/menu";
 
 interface Props {
- setHandle: (handle: FileSystemFileHandle | null) => void;
  singleton: TippyProps["singleton"];
- setDirtyFile: React.Dispatch<React.SetStateAction<boolean>>;
+ file: FileState;
 }
 
-const openFile = async (props: Props) => {
+const setFile = async (props: Props, handle: FileHandle): Promise<void> => {
+ props.file.setHandle(handle);
+ props.file.setDirty(false);
+};
+
+const openFile = async (props: Props): Promise<void> => {
  const [handle] = await window.showOpenFilePicker();
- props.setHandle(handle);
- props.setDirtyFile(false);
+ await setFile(props, handle);
 };
 
 const recentItem = (props: Props): ButtonMoreMenuItem => ({
  action: async () => {
  const handle = await get("handle");
- if (handle) props.setHandle(handle);
+ if (handle) setFile(props, handle);
  },
  label: "Open last file",
  shortcut: [