new web init

web_app/src/hooks/useAsyncMemo.tsx

@@ -0,0 +1,33 @@
+import { DependencyList, useEffect, useState } from 'react'
+
+export function useAsyncMemo<T>(
+  factory: () => Promise<T> | undefined | null,
+  deps: DependencyList
+): T | undefined
+export function useAsyncMemo<T>(
+  factory: () => Promise<T> | undefined | null,
+  deps: DependencyList,
+  initial: T
+): T
+export function useAsyncMemo<T>(
+  factory: () => Promise<T> | undefined | null,
+  deps: DependencyList,
+  initial?: T
+) {
+  const [val, setVal] = useState<T | undefined>(initial)
+
+  useEffect(() => {
+    let cancel = false
+    const promise = factory()
+    if (promise === undefined || promise === null) return
+    promise.then(v => {
+      if (!cancel) {
+        setVal(v)
+      }
+    })
+    return () => {
+      cancel = true
+    }
+  }, deps)
+  return val
+}

web_app/src/hooks/useHotkey.tsx

@@ -0,0 +1,22 @@
+import { Options, useHotkeys } from "react-hotkeys-hook"
+import { useRecoilValue } from "recoil"
+import { appState } from "@/lib/store"
+
+const useHotKey = (
+  keys: string,
+  callback: any,
+  options?: Options,
+  deps?: any[]
+) => {
+  const app = useRecoilValue(appState)
+
+  const ref = useHotkeys(
+    keys,
+    callback,
+    { ...options, enabled: !app.disableShortCuts },
+    deps
+  )
+  return ref
+}
+
+export default useHotKey

web_app/src/hooks/useImage.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react"
+
+function useImage(file?: File): [HTMLImageElement, boolean] {
+  const [image] = useState(new Image())
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  useEffect(() => {
+    if (file === undefined) {
+      return
+    }
+    image.onload = () => {
+      setIsLoaded(true)
+    }
+    setIsLoaded(false)
+    image.src = URL.createObjectURL(file)
+    return () => {
+      image.onload = null
+    }
+  }, [file, image])
+
+  return [image, isLoaded]
+}
+
+export { useImage }

web_app/src/hooks/useInputImage.tsx

@@ -0,0 +1,34 @@
+import { API_ENDPOINT } from "@/lib/api"
+import { useCallback, useEffect, useState } from "react"
+
+export default function useInputImage() {
+  const [inputImage, setInputImage] = useState<File>()
+
+  const fetchInputImage = useCallback(() => {
+    const headers = new Headers()
+    headers.append("pragma", "no-cache")
+    headers.append("cache-control", "no-cache")
+
+    fetch(`${API_ENDPOINT}/inputimage`, { headers }).then(async (res) => {
+      const filename = res.headers
+        .get("content-disposition")
+        ?.split("filename=")[1]
+        .split(";")[0]
+
+      const data = await res.blob()
+      if (data && data.type.startsWith("image")) {
+        const userInput = new File(
+          [data],
+          filename !== undefined ? filename : "inputImage"
+        )
+        setInputImage(userInput)
+      }
+    })
+  }, [setInputImage])
+
+  useEffect(() => {
+    fetchInputImage()
+  }, [fetchInputImage])
+
+  return inputImage
+}

web_app/src/hooks/useResolution.tsx

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useState } from 'react'
+
+const useResolution = () => {
+  const [width, setWidth] = useState(window.innerWidth)
+
+  const windowSizeHandler = useCallback(() => {
+    setWidth(window.innerWidth)
+  }, [])
+
+  useEffect(() => {
+    window.addEventListener('resize', windowSizeHandler)
+
+    return () => {
+      window.removeEventListener('resize', windowSizeHandler)
+    }
+  })
+
+  if (width < 768) {
+    return 'mobile'
+  }
+
+  if (width >= 768 && width < 1224) {
+    return 'tablet'
+  }
+
+  if (width >= 1224) {
+    return 'desktop'
+  }
+}
+
+export default useResolution