1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- import { makeStyles, Button, TextField, Typography } from '@material-ui/core'
- import React, { useState } from 'react';
- import { useDispatch } from 'react-redux';
- import { asyncAddContact } from '../../../../redux/contacts/operations'
- import ToolBar from './ToolBar';
- const useStyles = makeStyles({
- container: {
- display: 'flex',
- alignItems: 'center',
- alignContent:'center',
- flexDirection: 'column',
- width: 350,
- margin: '0 auto',
- paddingBottom: 24,
- },
- title: {
- marginBottom: 20,
- textAlign: 'center',
- },
- buttonNext: {
- marginTop: 20,
- height: 50,
- color: '#f8f8f8',
- backgroundColor:'#1d74c5',
- },
- textField: {
- marginBottom:20
- }
- })
- interface IAddContact {
- setSelectedIndex: React.Dispatch<React.SetStateAction<number | null>>,
- handleClick: () => void
- }
- const AddContact = ({setSelectedIndex,handleClick}:IAddContact) => {
- const classes = useStyles()
- const dispatch = useDispatch()
- const [number, setNumber] = useState<string>('')
- const handleTextField = (e: React.ChangeEvent<HTMLInputElement>) => {
- const value = e.target.value.split(' ').join('').trim()
- setNumber(value)
- }
- const handleAddContact = async () => {
- dispatch(asyncAddContact(number))
- setNumber('')
- setSelectedIndex(1)
- }
- const isValidNumber = () => {
- if (number.length < 13 || number.length > 13) return false
- if(number.slice(0,1) === '+') return true
- return true
- }
- const handlePressEnter = (e: React.KeyboardEvent<HTMLDivElement>) => {
- if(e.code === 'Enter' && isValidNumber()) handleAddContact()
- }
-
- return (
- <>
- <ToolBar handleClick={handleClick}/>
- <div onKeyDown={handlePressEnter} className={classes.container} >
- <Typography
- className={classes.title}
- variant="h5"
- color="initial">
- Add new contact
- </Typography>
- <TextField
- id="number"
- name='NUMBER'
- label="Write down a number,+ is requirement"
- value={number}
- fullWidth
- variant='outlined'
- onChange={handleTextField}
- className={classes.textField}
- required
- />
- {isValidNumber() &&
- <Button
- onClick={handleAddContact}
- className={classes.buttonNext}
- color='primary'
- variant="contained"
- fullWidth
- > ADD
- </Button>}
- </div>
- </>
- );
- };
- export default AddContact;
|