import { useState, Fragment, useEffect } from 'react'; import { Dialog, Transition } from '@headlessui/react'; import Swal from 'sweetalert2'; import { useDispatch } from 'react-redux'; import { setPageTitle } from '../../store/themeConfigSlice'; const Contacts = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle('Contacts')); }); const [addContactModal, setAddContactModal] = useState(false); const [value, setValue] = useState('list'); const [defaultParams] = useState({ id: null, name: '', email: '', phone: '', role: '', location: '', }); const [params, setParams] = useState(JSON.parse(JSON.stringify(defaultParams))); const changeValue = (e: any) => { const { value, id } = e.target; setParams({ ...params, [id]: value }); }; const [search, setSearch] = useState(''); const [contactList] = useState([ { id: 1, path: 'profile-35.png', name: 'Alan Green', role: 'Web Developer', email: 'alan@mail.com', location: 'Boston, USA', phone: '+1 202 555 0197', posts: 25, followers: '5K', following: 500, }, { id: 2, path: 'profile-35.png', name: 'Linda Nelson', role: 'Web Designer', email: 'linda@mail.com', location: 'Sydney, Australia', phone: '+1 202 555 0170', posts: 25, followers: '21.5K', following: 350, }, { id: 3, path: 'profile-35.png', name: 'Lila Perry', role: 'UX/UI Designer', email: 'lila@mail.com', location: 'Miami, USA', phone: '+1 202 555 0105', posts: 20, followers: '21.5K', following: 350, }, { id: 4, path: 'profile-35.png', name: 'Andy King', role: 'Project Lead', email: 'andy@mail.com', location: 'Tokyo, Japan', phone: '+1 202 555 0194', posts: 25, followers: '21.5K', following: 300, }, { id: 5, path: 'profile-35.png', name: 'Jesse Cory', role: 'Web Developer', email: 'jesse@mail.com', location: 'Edinburgh, UK', phone: '+1 202 555 0161', posts: 30, followers: '20K', following: 350, }, { id: 6, path: 'profile-35.png', name: 'Xavier', role: 'UX/UI Designer', email: 'xavier@mail.com', location: 'New York, USA', phone: '+1 202 555 0155', posts: 25, followers: '21.5K', following: 350, }, { id: 7, path: 'profile-35.png', name: 'Susan', role: 'Project Manager', email: 'susan@mail.com', location: 'Miami, USA', phone: '+1 202 555 0118', posts: 40, followers: '21.5K', following: 350, }, { id: 8, path: 'profile-35.png', name: 'Raci Lopez', role: 'Web Developer', email: 'traci@mail.com', location: 'Edinburgh, UK', phone: '+1 202 555 0135', posts: 25, followers: '21.5K', following: 350, }, { id: 9, path: 'profile-35.png', name: 'Steven Mendoza', role: 'HR', email: 'sokol@verizon.net', location: 'Monrovia, US', phone: '+1 202 555 0100', posts: 40, followers: '21.8K', following: 300, }, { id: 10, path: 'profile-35.png', name: 'James Cantrell', role: 'Web Developer', email: 'sravani@comcast.net', location: 'Michigan, US', phone: '+1 202 555 0134', posts: 100, followers: '28K', following: 520, }, { id: 11, path: 'profile-35.png', name: 'Reginald Brown', role: 'Web Designer', email: 'drhyde@gmail.com', location: 'Entrimo, Spain', phone: '+1 202 555 0153', posts: 35, followers: '25K', following: 500, }, { id: 12, path: 'profile-35.png', name: 'Stacey Smith', role: 'Chief technology officer', email: 'maikelnai@optonline.net', location: 'Lublin, Poland', phone: '+1 202 555 0115', posts: 21, followers: '5K', following: 200, }, ]); const [filteredItems, setFilteredItems] = useState(contactList); useEffect(() => { setFilteredItems(() => { return contactList.filter((item: any) => { return item.name.toLowerCase().includes(search.toLowerCase()); }); }); }, [search, contactList]); const saveUser = () => { if (!params.name) { showMessage('Name is required.', 'error'); return true; } if (!params.email) { showMessage('Email is required.', 'error'); return true; } if (!params.phone) { showMessage('Phone is required.', 'error'); return true; } if (!params.role) { showMessage('Occupation is required.', 'error'); return true; } if (params.id) { //update user let user: any = filteredItems.find((d: any) => d.id === params.id); user.name = params.name; user.email = params.email; user.phone = params.phone; user.role = params.role; user.location = params.location; } else { //add user let maxUserId = filteredItems.length ? filteredItems.reduce((max: any, character: any) => (character.id > max ? character.id : max), filteredItems[0].id) : 0; let user = { id: maxUserId + 1, path: 'profile-35.png', name: params.name, email: params.email, phone: params.phone, role: params.role, location: params.location, posts: 20, followers: '5K', following: 500, }; filteredItems.splice(0, 0, user); // searchContacts(); } showMessage('User has been saved successfully.'); setAddContactModal(false); }; const editUser = (user: any = null) => { const json = JSON.parse(JSON.stringify(defaultParams)); setParams(json); if (user) { let json1 = JSON.parse(JSON.stringify(user)); setParams(json1); } setAddContactModal(true); }; const deleteUser = (user: any = null) => { setFilteredItems(filteredItems.filter((d: any) => d.id !== user.id)); showMessage('User has been deleted successfully.'); }; const showMessage = (msg = '', type = 'success') => { const toast: any = Swal.mixin({ toast: true, position: 'top', showConfirmButton: false, timer: 3000, customClass: { container: 'toast' }, }); toast.fire({ icon: type, title: msg, padding: '10px 20px', }); }; return (

Contacts

setSearch(e.target.value)} />

{value === 'list' && (

{filteredItems.map((contact: any) => { return ( ); })}

Name	Email	Location	Phone	Actions
{contact.path && ( )} {!contact.path && contact.name && ( )} {!contact.path && !contact.name && ( )} {contact.name}	{contact.email}	{contact.location}	{contact.phone}

)} {value === 'grid' && (

{filteredItems.map((contact: any) => { return (

{contact.name}

{contact.role}

{contact.posts}

Posts

{contact.following}

Following

{contact.followers}

Followers

Email :

{contact.email}

Phone :

{contact.phone}

Address :

{contact.location}

); })}

)}

); }; export default Contacts;