From 2913fa06035b18c61fe8c2a121c6203c63200679 Mon Sep 17 00:00:00 2001
From: Anik Ghosh <tech.anikghosh@gmail.com>
Date: Tue, 15 Mar 2022 23:51:54 +0530
Subject: [PATCH] updates

---
 dashboard/src/components/InviteEmailModal.tsx | 26 ++++++++++---
 dashboard/src/constants.ts                    |  3 +-
 dashboard/src/utils/parseCSV.ts               | 39 +++++++++++++++++++
 3 files changed, 61 insertions(+), 7 deletions(-)
 create mode 100644 dashboard/src/utils/parseCSV.ts

diff --git a/dashboard/src/components/InviteEmailModal.tsx b/dashboard/src/components/InviteEmailModal.tsx
index 33bb792..7cd9ad2 100644
--- a/dashboard/src/components/InviteEmailModal.tsx
+++ b/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
diff --git a/dashboard/src/constants.ts b/dashboard/src/constants.ts
index 6900730..ead6fdd 100644
--- a/dashboard/src/constants.ts
+++ b/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
diff --git a/dashboard/src/utils/parseCSV.ts b/dashboard/src/utils/parseCSV.ts
new file mode 100644
index 0000000..bc73de2
--- /dev/null
+++ b/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;