updates

dashboard/src/components/InviteEmailModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import {
 	Button,
 	Center,
@@ -30,6 +30,7 @@ import { escape } from 'lodash';
 import { validateEmail, validateURI } from '../utils';
 import { UpdateUser } from '../graphql/mutation';
 import { ArrayInputOperations, csvDemoData } from '../constants';
+import parseCSV from '../utils/parseCSV';
 
 interface stateDataTypes {
 	value: string;
@@ -51,6 +52,16 @@ const InviteEmailModal = () => {
 			isInvalid: false,
 		},
 	]);
+	const [disableSendButton, setDisableSendButton] = useState<boolean>(false);
+	useEffect(() => {
+		if (redirectURI.isInvalid) {
+			setDisableSendButton(true);
+		} else if (emails.some((emailData) => emailData.isInvalid)) {
+			setDisableSendButton(true);
+		} else {
+			setDisableSendButton(false);
+		}
+	}, [redirectURI, emails]);
 	const sendInviteHandler = async () => {
 		onClose();
 	};
@@ -80,8 +91,10 @@ const InviteEmailModal = () => {
 		updatedEmailList[index].isInvalid = !validateEmail(value);
 		setEmails(updatedEmailList);
 	};
-	const onDrop = useCallback((acceptedFiles) => {
-		console.log(acceptedFiles);
+	const onDrop = useCallback(async (acceptedFiles) => {
+		const result = await parseCSV(acceptedFiles[0], ',');
+		setEmails(result);
+		setTabIndex(0);
 	}, []);
 	const handleTabsChange = (index: number) => {
 		setTabIndex(index);
@@ -95,7 +108,10 @@ const InviteEmailModal = () => {
 		updatedRedirectURI.isInvalid = !validateURI(value);
 		setRedirectURI(updatedRedirectURI);
 	};
-	const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+	const { getRootProps, getInputProps, isDragActive } = useDropzone({
+		onDrop,
+		accept: 'text/csv',
+	});
 	return (
 		<>
 			<Button
@@ -275,7 +291,7 @@ const InviteEmailModal = () => {
 							colorScheme="blue"
 							variant="solid"
 							onClick={sendInviteHandler}
-							isDisabled={false}
+							isDisabled={disableSendButton}
 						>
 							<Center h="100%" pt="5%">
 								Send

dashboard/src/constants.ts

@@ -89,8 +89,7 @@ export const ECDSAEncryptionType = {
 	ES512: 'ES512',
 };
 
-export const csvDemoData = `email
-lakhan.demo@contentment.org
+export const csvDemoData = `lakhan.demo@contentment.org
 john@gmail.com
 anik@contentment.org
 harry@potter.com

dashboard/src/utils/parseCSV.ts

@@ -0,0 +1,39 @@
+import _flatten from 'lodash/flatten';
+import { validateEmail } from '.';
+
+interface dataTypes {
+	value: string;
+	isInvalid: boolean;
+}
+
+const parseCSV = (file: File, delimiter: string): Promise<dataTypes[]> => {
+	return new Promise((resolve) => {
+		const reader = new FileReader();
+
+		// When the FileReader has loaded the file...
+		reader.onload = (e: any) => {
+			// Split the result to an array of lines
+			const lines = e.target.result.split('\n');
+			// Split the lines themselves by the specified
+			// delimiter, such as a comma
+			let result = lines.map((line: string) => line.split(delimiter));
+			// As the FileReader reads asynchronously,
+			// we can't just return the result; instead,
+			// we're passing it to a callback function
+			result = _flatten(result);
+			resolve(
+				result.map((email: string) => {
+					return {
+						value: email.trim(),
+						isInvalid: !validateEmail(email.trim()),
+					};
+				})
+			);
+		};
+
+		// Read the file content as a single string
+		reader.readAsText(file);
+	});
+};
+
+export default parseCSV;