Compass/web/hooks/use-editable-user-info.ts

import {APIError} from 'common/api/utils'
import {User} from 'common/user'
import {cleanDisplayName, cleanUsername} from 'common/util/clean-username'
import {useState} from 'react'
import {updateUser} from 'web/lib/api'

type UserInfoState = {
  name: string
  username: string
  loadingName: boolean
  loadingUsername: boolean
  errorName: string
  errorUsername: string
}

export const useEditableUserInfo = (user: User) => {
  const [userInfo, setUserInfo] = useState<UserInfoState>({
    name: user.name,
    username: user.username,
    loadingName: false,
    loadingUsername: false,
    errorName: '',
    errorUsername: '',
  })

  const updateUserState = (newState: Partial<UserInfoState>) => {
    setUserInfo((prevState) => ({...prevState, ...newState}))
  }

  const updateDisplayName = async () => {
    const newName = cleanDisplayName(userInfo.name)
    if (newName === user.name) return

    updateUserState({loadingName: true, errorName: ''})
    if (!newName) return updateUserState({name: user.name})

    try {
      await updateUser({name: newName})
      updateUserState({errorName: '', name: newName})
    } catch (reason) {
      updateUserState({
        errorName: (reason as APIError).message,
        name: user.name,
      })
    }

    updateUserState({loadingName: false})
  }

  const updateUsername = async () => {
    const newUsername = cleanUsername(userInfo.username)
    // console.log({newUsername})
    if (newUsername === user.username) return true

    updateUserState({loadingUsername: true, errorUsername: ''})

    let success = true
    try {
      await updateUser({username: newUsername})
      updateUserState({errorUsername: '', username: newUsername})
      user.username = newUsername
    } catch (reason) {
      updateUserState({errorUsername: (reason as APIError).message})
      success = false
    }

    updateUserState({loadingUsername: false})
    return success
  }

  return {
    userInfo,
    updateDisplayName,
    updateUserState,
    updateUsername,
  }
}