AddNewRelay.tsx raw

   1  import { Button } from '@/components/ui/button'
   2  import { Input } from '@/components/ui/input'
   3  import { normalizeUrl } from '@/lib/url'
   4  import { useFavoriteRelays } from '@/providers/FavoriteRelaysProvider'
   5  import { useState } from 'react'
   6  import { useTranslation } from 'react-i18next'
   7  
   8  export default function AddNewRelay() {
   9    const { t } = useTranslation()
  10    const { favoriteRelays, addFavoriteRelays } = useFavoriteRelays()
  11    const [input, setInput] = useState('')
  12    const [errorMsg, setErrorMsg] = useState('')
  13  
  14    const saveRelay = async () => {
  15      if (!input) return
  16      const normalizedUrl = normalizeUrl(input)
  17      if (!normalizedUrl) {
  18        setErrorMsg(t('Invalid URL'))
  19        return
  20      }
  21      if (favoriteRelays.includes(normalizedUrl)) {
  22        setErrorMsg(t('Already saved'))
  23        return
  24      }
  25      await addFavoriteRelays([normalizedUrl])
  26      setInput('')
  27    }
  28  
  29    const handleNewRelayInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  30      setInput(e.target.value)
  31      setErrorMsg('')
  32    }
  33  
  34    const handleNewRelayInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
  35      if (event.key === 'Enter') {
  36        event.preventDefault()
  37        saveRelay()
  38      }
  39    }
  40  
  41    return (
  42      <div className="space-y-1">
  43        <div className="flex gap-2 items-center">
  44          <Input
  45            placeholder={t('Add a new relay')}
  46            value={input}
  47            onChange={handleNewRelayInputChange}
  48            onKeyDown={handleNewRelayInputKeyDown}
  49            className={errorMsg ? 'border-destructive' : ''}
  50          />
  51          <Button onClick={saveRelay}>{t('Add')}</Button>
  52        </div>
  53        {errorMsg && <div className="text-destructive text-sm pl-8">{errorMsg}</div>}
  54      </div>
  55    )
  56  }
  57