use-project.ts — ui Source File

Architecture documentation for use-project.ts, a typescript file in the ui codebase. 3 imports, 0 dependents.

File typescript ComponentRegistry Styles 3 imports 1 functions

Entity Profile

ComponentRegistry→ Styles→ use-project.ts — ui Source File

Dependency Diagram

graph LR
  1a05ec04_02d8_c5a9_3623_834caab071eb["use-project.ts"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  1a05ec04_02d8_c5a9_3623_834caab071eb --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  cba8a664_3253_9b8c_8abe_9f0e33bbc037["jotai"]
  1a05ec04_02d8_c5a9_3623_834caab071eb --> cba8a664_3253_9b8c_8abe_9f0e33bbc037
  68f194ce_9060_f5f9_d266_dd66c3d544fb["utils"]
  1a05ec04_02d8_c5a9_3623_834caab071eb --> 68f194ce_9060_f5f9_d266_dd66c3d544fb
  style 1a05ec04_02d8_c5a9_3623_834caab071eb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import { useAtom } from "jotai"
import { atomWithStorage } from "jotai/utils"

type Project = {
  blocks: string[]
}

const projectAtom = atomWithStorage<Project>("project", {
  blocks: [],
})

export function useProject() {
  const [isAdded, setIsAdded] = React.useState(false)
  const [project, setProject] = useAtom(projectAtom)

  const addBlock = React.useCallback((block: string) => {
    setProject((prev) => {
      if (prev.blocks.includes(block)) {
        return prev
      }
      return { ...prev, blocks: [...prev.blocks, block] }
    })
    setIsAdded(true)

    setTimeout(() => {
      setIsAdded(false)
    }, 2000)
  }, [])

  const removeBlock = React.useCallback((block: string) => {
    setProject((prev) => ({
      ...prev,
      blocks: prev.blocks.filter((b) => b !== block),
    }))
  }, [])

  const hasBlock = React.useCallback((block: string) => {
    return project.blocks.includes(block)
  }, [])

  const resetProject = React.useCallback(() => {
    setProject({ blocks: [] })
  }, [])

  return { project, addBlock, removeBlock, resetProject, hasBlock, isAdded }
}