invite email modal added

dashboard/package.json

@@ -24,6 +24,7 @@
 		"lodash": "^4.17.21",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
+		"react-dropzone": "^12.0.4",
 		"react-icons": "^4.3.1",
 		"react-router-dom": "^6.2.1",
 		"typescript": "^4.5.4",

dashboard/src/components/InviteEmailModal.tsx

@@ -0,0 +1,254 @@
+import React, { useState, useCallback } from 'react';
+import {
+	Button,
+	Center,
+	Flex,
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+	useDisclosure,
+	useToast,
+	Tabs,
+	TabList,
+	Tab,
+	TabPanels,
+	TabPanel,
+	InputGroup,
+	Input,
+	InputRightElement,
+	Text,
+	Link,
+} from '@chakra-ui/react';
+import { useClient } from 'urql';
+import { FaUserPlus, FaMinusCircle, FaPlus, FaUpload } from 'react-icons/fa';
+import { useDropzone } from 'react-dropzone';
+import { escape } from 'lodash';
+import { validateEmail } from '../utils';
+import { UpdateUser } from '../graphql/mutation';
+import { ArrayInputOperations, csvDemoData } from '../constants';
+
+interface emailDataTypes {
+	value: string;
+	isInvalid: boolean;
+}
+
+const InviteEmailModal = () => {
+	const client = useClient();
+	const toast = useToast();
+	const { isOpen, onOpen, onClose } = useDisclosure();
+	const [emails, setEmails] = useState<emailDataTypes[]>([
+		{
+			value: '',
+			isInvalid: false,
+		},
+		{
+			value: '',
+			isInvalid: false,
+		},
+		{
+			value: '',
+			isInvalid: false,
+		},
+		{
+			value: '',
+			isInvalid: false,
+		},
+	]);
+	const sendInviteHandler = async () => {
+		onClose();
+	};
+	const updateEmailListHandler = (operation: string, index: number = 0) => {
+		switch (operation) {
+			case ArrayInputOperations.APPEND:
+				setEmails([
+					...emails,
+					{
+						value: '',
+						isInvalid: false,
+					},
+				]);
+				break;
+			case ArrayInputOperations.REMOVE:
+				const updatedEmailList = [...emails];
+				updatedEmailList.splice(index, 1);
+				setEmails(updatedEmailList);
+				break;
+			default:
+				break;
+		}
+	};
+	const inputChangeHandler = (value: string, index: number) => {
+		const updatedEmailList = [...emails];
+		updatedEmailList[index].value = value;
+		updatedEmailList[index].isInvalid = !validateEmail(value);
+		setEmails(updatedEmailList);
+	};
+	const onDrop = useCallback((acceptedFiles) => {
+		console.log(acceptedFiles);
+	}, []);
+	const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+	return (
+		<>
+			<Button
+				leftIcon={<FaUserPlus />}
+				colorScheme="blue"
+				variant="solid"
+				onClick={onOpen}
+				isDisabled={false}
+				size="sm"
+			>
+				<Center h="100%" pt="5%">
+					Invite Email
+				</Center>
+			</Button>
+			<Modal isOpen={isOpen} onClose={onClose} size="xl">
+				<ModalOverlay />
+				<ModalContent>
+					<ModalHeader>Invite Email</ModalHeader>
+					<ModalCloseButton />
+					<ModalBody>
+						<Tabs isFitted variant="enclosed">
+							<TabList>
+								<Tab>Enter emails</Tab>
+								<Tab>Upload CSV</Tab>
+							</TabList>
+							<TabPanels
+								border="1px"
+								borderTop="0"
+								borderBottomRadius="5px"
+								borderColor="inherit"
+							>
+								<TabPanel>
+									<Flex flexDirection="column">
+										<Flex
+											width="100%"
+											justifyContent="space-between"
+											alignItems="center"
+											marginBottom="2%"
+										>
+											<Flex marginLeft="2.5%">Emails</Flex>
+											<Flex>
+												<Button
+													leftIcon={<FaPlus />}
+													colorScheme="blue"
+													h="1.75rem"
+													size="sm"
+													variant="ghost"
+													onClick={() =>
+														updateEmailListHandler(ArrayInputOperations.APPEND)
+													}
+												>
+													Add more emails
+												</Button>
+											</Flex>
+										</Flex>
+										{emails.map((emailData, index) => (
+											<Flex
+												key={`email-data-${index}`}
+												justifyContent="center"
+												alignItems="center"
+											>
+												<InputGroup size="md" marginBottom="2.5%">
+													<Input
+														pr="4.5rem"
+														type="text"
+														placeholder="name@domain.com"
+														value={emailData.value}
+														isInvalid={emailData.isInvalid}
+														onChange={(e) =>
+															inputChangeHandler(e.currentTarget.value, index)
+														}
+													/>
+													<InputRightElement width="3rem">
+														<Button
+															h="1.75rem"
+															size="sm"
+															colorScheme="blackAlpha"
+															variant="ghost"
+															onClick={() =>
+																updateEmailListHandler(
+																	ArrayInputOperations.REMOVE,
+																	index
+																)
+															}
+														>
+															<FaMinusCircle />
+														</Button>
+													</InputRightElement>
+												</InputGroup>
+											</Flex>
+										))}
+									</Flex>
+								</TabPanel>
+								<TabPanel>
+									<Flex
+										justify="center"
+										align="center"
+										textAlign="center"
+										bg="#f0f0f0"
+										h={231}
+										p={50}
+										m={2}
+										borderRadius={5}
+										{...getRootProps()}
+									>
+										<input {...getInputProps()} />
+										{isDragActive ? (
+											<Text>Drop the files here...</Text>
+										) : (
+											<Flex
+												flexDirection="column"
+												justifyContent="center"
+												alignItems="center"
+											>
+												<Center boxSize="20" color="blackAlpha.500">
+													<FaUpload fontSize="40" />
+												</Center>
+												<Text>
+													Drag 'n' drop the csv file here, or click to select.
+												</Text>
+												<Text size="xs">
+													Download{' '}
+													<Link
+														href={`data:text/csv;charset=utf-8,${escape(
+															csvDemoData
+														)}`}
+														download="sample.csv"
+														color="blue.600"
+														onClick={(e) => e.stopPropagation()}
+													>
+														{' '}
+														sample.csv
+													</Link>{' '}
+													and modify it.{' '}
+												</Text>
+											</Flex>
+										)}
+									</Flex>
+								</TabPanel>
+							</TabPanels>
+						</Tabs>
+					</ModalBody>
+					<ModalFooter>
+						<Button
+							colorScheme="blue"
+							variant="solid"
+							onClick={sendInviteHandler}
+							isDisabled={false}
+						>
+							<Center h="100%" pt="5%">
+								Send
+							</Center>
+						</Button>
+					</ModalFooter>
+				</ModalContent>
+			</Modal>
+		</>
+	);
+};
+
+export default InviteEmailModal;

dashboard/src/constants.ts

@@ -88,3 +88,10 @@ export const ECDSAEncryptionType = {
 	ES384: 'ES384',
 	ES512: 'ES512',
 };
+
+export const csvDemoData = `email
+lakhan.demo@contentment.org
+john@gmail.com
+anik@contentment.org
+harry@potter.com
+anikgh89@gmail.com`;

dashboard/src/pages/Users.tsx

@@ -42,6 +42,7 @@ import { UserDetailsQuery } from '../graphql/queries';
 import { UpdateUser } from '../graphql/mutation';
 import EditUserModal from '../components/EditUserModal';
 import DeleteUserModal from '../components/DeleteUserModal';
+import InviteEmailModal from '../components/InviteEmailModal';
 
 interface paginationPropTypes {
 	limit: number;
@@ -177,6 +178,7 @@ export default function Users() {
 				<Text fontSize="md" fontWeight="bold">
 					Users
 				</Text>
+				<InviteEmailModal />
 			</Flex>
 			{!loading ? (
 				userList.length > 0 ? (

dashboard/src/utils/index.ts

@@ -64,3 +64,14 @@ export const getObjectDiff = (obj1: any, obj2: any) => {
 
 	return diff;
 };
+
+export const validateEmail = (email: string) => {
+	if (!email || email === '') return true;
+	return email
+		.toLowerCase()
+		.match(
+			/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+		)
+		? true
+		: false;
+};