react-icons/fi#FiSave TypeScript Examples

Form = ({
  submit,
  loading,
  dirty,
  children,
}: FormProps): JSX.Element => {
  return (
    <form
      onSubmit={(e): void => {
        e.preventDefault();
      }}
    >
      {loading && <Loading />}
      {children}
      <div className="flex w-full bg-white dark:bg-secondaryDark">
        <div className="ml-auto p-2">
          <IconButton disabled={dirty} onClick={submit} icon={<FiSave />} />
        </div>
      </div>
    </form>
  );
}

ConnectionFormModal: React.FC<ConnectionModalProps> = ({
  visible,
  onRequestClose,
  connectionToEdit
}) => {
  const formRef = useRef<FormHandles>(null)
  const { addToast } = useToast()
  const setConnections = useSetRecoilState(connectionsState)
  const { t } = useTranslation('connectionForm')

  const [testConnectionLoading, toggleTestConnectionLoading] = useToggle(false)
  const [createConnectionLoading, toggleCreateConnectionLoading] = useToggle(
    false
  )

  const handleCloseModal = useCallback(() => {
    if (onRequestClose) {
      onRequestClose()
    }
  }, [onRequestClose])

  const handleCreateOrUpdateConnection = useCallback(
    async (data: ConnectionFormData) => {
      try {
        formRef.current?.setErrors({})

        const schema = Yup.object().shape({
          name: Yup.string().required(),
          host: Yup.string().required(),
          port: Yup.number().required(),
          password: Yup.string()
        })

        toggleCreateConnectionLoading()

        await schema.validate(data, {
          abortEarly: false
        })

        const { name, host, port, password } = data

        try {
          const connectionData = {
            name,
            host,
            port: Number(port),
            password
          }

          const connections = connectionToEdit
            ? updateAndGetConnections(connectionToEdit, connectionData)
            : createAndGetConnections(connectionData)

          setConnections(connections)

          addToast({
            type: 'success',
            title: 'Connection saved',
            description: 'You can now connect to your database!'
          })

          handleCloseModal()
        } catch (err) {
          addToast({
            type: 'error',
            title: 'Error saving connection',
            description: err.message || 'Unexpected error occurred, try again.'
          })
        }
      } catch (err) {
        if (err instanceof Yup.ValidationError) {
          const errors = getValidationErrors(err)

          formRef.current?.setErrors(errors)
        }
      } finally {
        toggleCreateConnectionLoading()
      }
    },
    [
      addToast,
      setConnections,
      toggleCreateConnectionLoading,
      connectionToEdit,
      handleCloseModal
    ]
  )

  const handleTestConnection = useCallback(async () => {
    if (!formRef.current) {
      return
    }

    const {
      host,
      port,
      password
    } = formRef.current.getData() as ConnectionFormData

    try {
      formRef.current?.setErrors({})
      toggleTestConnectionLoading()
      const schema = Yup.object().shape({
        host: Yup.string().required(),
        port: Yup.number().required(),
        password: Yup.string()
      })
      const data = {
        host,
        port
      }

      await schema.validate(data, {
        abortEarly: false
      })

      await testConnection({
        host,
        port: Number(port),
        password
      })

      addToast({
        type: 'success',
        title: 'Connection successful',
        description: 'Urrray... You can save your connection now!'
      })
    } catch (err) {
      if (err instanceof Yup.ValidationError) {
        const errors = getValidationErrors(err)
        formRef.current?.setErrors(errors)
      } else {
        addToast({
          type: 'error',
          title: 'Error on connection',
          description: 'Error estabilishing connection with your Redis server'
        })
      }
    } finally {
      toggleTestConnectionLoading()
    }
  }, [addToast, toggleTestConnectionLoading])

  return (
    <Modal visible={visible} onRequestClose={onRequestClose}>
      <h1>
        {connectionToEdit ? t('editConnectionTitle') : t('newConnectionTitle')}
      </h1>

      <Form
        initialData={{
          name: connectionToEdit?.name,
          host: connectionToEdit?.host || 'localhost',
          port: connectionToEdit?.port || '6379'
        }}
        ref={formRef}
        onSubmit={handleCreateOrUpdateConnection}
      >
        <Input name="name" label={t('form.name')} />

        <InputGroup>
          <Input name="host" label={t('form.host')} />
          <Input name="port" label={t('form.port')} />
        </InputGroup>

        <Input
          type="password"
          name="password"
          label={t('form.password')}
          hint={t('form.passwordHint')}
        />

        <ActionsContainer>
          <TestConnectionButton
            loading={testConnectionLoading}
            color="pink"
            onClick={handleTestConnection}
          >
            <FiActivity />
            {t('form.test')}
          </TestConnectionButton>

          <ButtonGroup>
            <Button onClick={handleCloseModal} type="button" color="opaque">
              {t('form.cancel')}
            </Button>
            <Button
              loading={createConnectionLoading}
              type="submit"
              color="purple"
            >
              <FiSave />
              {t('form.save')}
            </Button>
          </ButtonGroup>
        </ActionsContainer>
      </Form>
    </Modal>
  )
}

function RangeSelector(props: Props): React.ReactElement {
  const {
    handRange,
    setComboActive,
    setComboInactive,
    setSuitComboActive,
    setSuitComboInactive,
    setRange,
    setRangePairs,
    setRangeBroadway,
    setRangeAll,
    clearRange,
    activeCombo,
    className = '',
  } = props;

  function setRangeText(rangeStr: string) {
    setRange(HandRange.fromString(rangeStr));
  }

  const comboCount = handRange.comboCount();
  const comboStates = handRange.comboStates();
  const rangeStr = handRange.toString();

  const suitCombos = new Array(16).fill(0).map((_, i) => <SuitCombo key={`${activeCombo}-${i}`} comboIndex={activeCombo} suitIndex={i}/>);
  const suitStates = handRange.comboState(activeCombo);

  return (
    <RangeSelectorStyle className={className}>
      <div className="range-selector-top-bar">
          <div className="range-selector-top-bar-left">
              <div className="range-title">
                  <h2>Raise first in</h2>
                  <FiEdit2/>
              </div>
              <div className="range-pos-game">
                  <span>6-MAX CASH</span>
                  <span>UTG+1</span>
              </div>
          </div>
          <div className="range-selector-top-bar-right">
              <Button onClick={() => {}} icon={<FiTrash2/>}>
                  Delete
              </Button>
              <Button onClick={() => {}} icon={<FiSave/>}>
                  Save
              </Button>
          </div>
      </div>
      <Matrix
        elements={COMBO_NAMES}
        states={comboStates}
        onSelectElement={setComboActive}
        onDeselectElement={setComboInactive}
        rows={13}
        cols={13}
        className="range-selector-matrix"
      />
      <div className="range-selector-bottom-bar">
        <div className="range-selector-controls">
          <div className="combo-count">
            <span className="combo-count-selected">{comboCount}</span>/1326 combos selected{' '}
            <span className="combo-count-selected">({((comboCount * 100) / 1326).toPrecision(3)}%)</span>
          </div>
          <div className="range-selector-controls-buttons">
            <div className="range-selector-control-btn" onClick={setRangeAll}>
              All
            </div>
            <div className="range-selector-control-btn" onClick={setRangePairs}>
              Pairs
            </div>
            <div className="range-selector-control-btn" onClick={setRangeBroadway}>
              Broadway
            </div>
            <div className="range-selector-control-btn range-selector-clear-btn" onClick={clearRange}>
              Clear
            </div>
          </div>
          <TextArea
            rows={4}
            cols={4}
            className="range-selector-text-area"
            placeholder="Enter range e.g. (QQ+,AK)"
            onChange={setRangeText}
            value={rangeStr}
          />
        </div>
        <Matrix
          className="range-selector-suit-matrix"
          onSelectElement={setSuitComboActive}
          onDeselectElement={setSuitComboInactive}
          elements={suitCombos}
          states={suitStates}
          rows={4}
          cols={4}
        />
      </div>
    </RangeSelectorStyle>
  );
}