How to use the @umijs/hooks.useLocalStorageState function in @umijs/hooks

detailPagePath,
}: Props) {
  const { t } = useTranslation()

  const { searchOptions, setSearchOptions } = useContext(SearchContext)
  // combine the context to state
  const [state, dispatch] = useReducer(reducer, {
    ...initState,
    ...searchOptions,
  })

  const [refreshTimes, setRefreshTimes] = useState(0)
  const [showSettings, setShowSettings] = useState(false)
  const [columns, setColumns] = useState([])
  const [visibleColumnKeys, setVisibleColumnKeys] = useLocalStorageState(
    VISIBLE_COLUMN_KEYS,
    defColumnKeys
  )
  const [showFullSQL, setShowFullSQL] = useLocalStorageState(
    SHOW_FULL_SQL,
    false
  )

  useEffect(() => {
    async function queryInstances() {
      const res = await onFetchInstances()
      dispatch({
        type: 'save_instances',
        payload: res || [],
      })
      if (res?.length === 1 && !state.curInstance) {

const { searchOptions, setSearchOptions } = useContext(SearchContext)
  // combine the context to state
  const [state, dispatch] = useReducer(reducer, {
    ...initState,
    ...searchOptions,
  })

  const [refreshTimes, setRefreshTimes] = useState(0)
  const [showSettings, setShowSettings] = useState(false)
  const [columns, setColumns] = useState([])
  const [visibleColumnKeys, setVisibleColumnKeys] = useLocalStorageState(
    VISIBLE_COLUMN_KEYS,
    defColumnKeys
  )
  const [showFullSQL, setShowFullSQL] = useLocalStorageState(
    SHOW_FULL_SQL,
    false
  )

  useEffect(() => {
    async function queryInstances() {
      const res = await onFetchInstances()
      dispatch({
        type: 'save_instances',
        payload: res || [],
      })
      if (res?.length === 1 && !state.curInstance) {
        dispatch({
          type: 'change_instance',
          payload: res[0].uuid,
        })

export default function StatementsOverview() {
  const { t } = useTranslation()

  const [showSettings, setShowSettings] = useState(false)
  const [visibleColumnKeys, setVisibleColumnKeys] = useLocalStorageState(
    STMT_VISIBLE_COLUMN_KEYS,
    DEF_STMT_COLUMN_KEYS
  )
  const [showFullSQL, setShowFullSQL] = useLocalStorageState(
    STMT_SHOW_FULL_SQL,
    false
  )

  const controller = useStatementTableController(visibleColumnKeys, showFullSQL)
  const {
    queryOptions,
    setQueryOptions,
    refresh,
    enable,
    allTimeRanges,
    allSchemas,
    allStmtTypes,
    loadingStatements,
    tableColumns,

const query = DetailPage.parseQuery(useLocation().search)

  const { t } = useTranslation()

  const { data, isLoading, error } = useClientRequest((reqConfig) =>
    client
      .getInstance()
      .slowQueryDetailGet(
        query.connectId!,
        query.digest!,
        query.timestamp!,
        reqConfig
      )
  )

  const [detailExpand, setDetailExpand] = useLocalStorageState(
    SLOW_QUERY_DETAIL_EXPAND,
    {
      prev_query: false,
      query: false,
      plan: false,
    }
  )

  const togglePrevQuery = () =>
    setDetailExpand((prev) => ({ ...prev, prev_query: !prev.prev_query }))
  const toggleQuery = () =>
    setDetailExpand((prev) => ({ ...prev, query: !prev.query }))
  const togglePlan = () =>
    setDetailExpand((prev) => ({ ...prev, plan: !prev.plan }))

  return (

export default function App({ registry }) {
  const [collapsed, setCollapsed] = useLocalStorageState(
    'layout.sider.collapsed',
    false
  )
  const [defaultCollapsed] = useState(collapsed)
  const {
    contentLeftOffset,
    onAnimationStart,
    onAnimationFrame,
  } = useContentLeftOffset(collapsed)
  const transContentBack = useSpring({
    x: collapsed ? collapsedContentOffset : 0,
    onStart: onAnimationStart,
    onFrame: onAnimationFrame,
  })
  const transContainer = useSpring({
    opacity: 1,

export default function StatementsOverview() {
  const { t } = useTranslation()

  const [showSettings, setShowSettings] = useState(false)
  const [visibleColumnKeys, setVisibleColumnKeys] = useLocalStorageState(
    STMT_VISIBLE_COLUMN_KEYS,
    DEF_STMT_COLUMN_KEYS
  )
  const [showFullSQL, setShowFullSQL] = useLocalStorageState(
    STMT_SHOW_FULL_SQL,
    false
  )

  const controller = useStatementTableController(visibleColumnKeys, showFullSQL)
  const {
    queryOptions,
    setQueryOptions,
    refresh,
    enable,
    allTimeRanges,
    allSchemas,

function usePermissionModel() {
  const [acquired, setAcquired] = useLocalStorageState(`${ALIAS_PREFIX}_permission_acquired`, false)

  const checkAcquired = useCallback(() => {
    return new Promise(function(resolve, reject) {
      access(HOSTS, R_OK | W_OK, err => {
        setAcquired(!err)
        return resolve(!err)
      })
    })
  }, [setAcquired])

  useEffect(() => {
    checkAcquired()
  }, [checkAcquired])

  function permissionAcquired() {
    return checkAcquired().then(hasPermission => {

)
  )
  const { t } = useTranslation()
  const planColumns = useMemo(() => genPlanColumns(plans || []), [plans])

  const [selectedPlans, setSelectedPlans] = useState([])
  const selection = useRef(
    new Selection({
      onSelectionChanged: () => {
        const s = selection.current.getSelection() as StatementModel[]
        setSelectedPlans(s.map((v) => v.plan_digest || ''))
      },
    })
  )

  const [sqlExpanded, setSqlExpanded] = useLocalStorageState(
    STMT_DETAIL_EXPAND,
    false
  )
  const toggleSqlExpanded = () => setSqlExpanded((prev) => !prev)

  useEffect(() => {
    if (plans && plans.length > 0) {
      selection.current.setAllSelected(true)
    }
  }, [plans])

  return (
    <div>
      </div>

function List() {
  const { t } = useTranslation()

  const [visibleColumnKeys, setVisibleColumnKeys] = useLocalStorageState(
    SLOW_QUERY_VISIBLE_COLUMN_KEYS,
    DEF_SLOW_QUERY_COLUMN_KEYS
  )
  const [showFullSQL, setShowFullSQL] = useLocalStorageState(
    SLOW_QUERY_SHOW_FULL_SQL,
    false
  )

  const controller = useSlowQueryTableController(visibleColumnKeys, showFullSQL)
  const {
    queryOptions,
    setQueryOptions,
    refresh,
    allSchemas,
    loadingSlowQueries,
    tableColumns,

function useHostsModel() {
  const [sysHosts, setSysHosts] = useState([])
  const [disabledHosts, setDisabledHosts] = useLocalStorageState(`${ALIAS_PREFIX}_disabledHosts`, [])
  const [aliases, setAliases] = useLocalStorageState(`${ALIAS_PREFIX}_aliases`, {})

  const hosts = useMemo(() => sortWithDisabledHosts(sysHosts, disabledHosts), [sysHosts, disabledHosts])

  const addDisabledHost = useCallback(
    host => {
      return new Promise((resolve, reject) => {
        const isDefined = disabledHosts.some(h => h.ip === host.ip && h.domain === host.domain)
        if (isDefined) {
          return reject(`host [${host.ip} ${host.domain}] has been used`)
        }
        setDisabledHosts([...disabledHosts, { ...host, disabled: true }])
        return resolve()
      })
    },
    [disabledHosts, setDisabledHosts]