wip for create batch users modal

src/modules/users/Users.tsx

@@ -4,14 +4,16 @@ import { SearchIcon, PlusIcon } from '@heroicons/react/solid';
 import { CogIcon, TrashIcon } from '@heroicons/react/outline';
 import { useUsers } from 'src/services/users';
 import { Table } from 'src/components';
-import { debounce } from 'lodash';
+import _, { debounce } from 'lodash';
 import { useAuth } from 'src/services/auth';
 
 import { UserModal } from '../../components/UserModal';
+import { MultipleUsersModal } from './components';
 
 export const Users: React.FC = () => {
   const [selectedRowsIds, setSelectedRowsIds] = useState({});
   const [configureModal, setConfigureModal] = useState(false);
+  const [multipleUsersModal, setMultipleUsersModal] = useState(false);
   const [userId, setUserId] = useState(null);
   const [search, setSearch] = useState('');
   const { users, loadUsers, userTableLoading } = useUsers();
@@ -106,6 +108,14 @@ export const Users: React.FC = () => {
                 <PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
                 Add new user
               </button>
+              <button
+                onClick={() => setMultipleUsersModal(true)}
+                type="button"
+                className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
+              >
+                <PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
+                Add new users
+              </button>
             </div>
           )}
         </div>
@@ -166,6 +176,13 @@ export const Users: React.FC = () => {
         {configureModal && (
           <UserModal open={configureModal} onClose={configureModalClose} userId={userId} setUserId={setUserId} />
         )}
+        {multipleUsersModal && (
+          <MultipleUsersModal
+            open={multipleUsersModal}
+            onClose={() => setMultipleUsersModal(false)}
+            onUpload={_.noop}
+          />
+        )}
       </div>
     </div>
   );

src/modules/users/components/MultipleUsersModal/MultipleUsersModal.tsx

+import React, { ChangeEvent, ChangeEventHandler, useEffect, useState } from 'react';
+import _ from 'lodash';
+// import { TrashIcon } from '@heroicons/react/outline';
+// import { useFieldArray, useForm, useWatch } from 'react-hook-form';
+import { Modal, Tabs } from 'src/components';
+// import { Input, Select } from 'src/components/Form';
+import { useUsers } from 'src/services/users';
+import { useAuth } from 'src/services/auth';
+import { MultipleUsersModalProps } from './types';
+import { csvFileToArray } from './utils';
+
+export const MultipleUsersModal = ({ open, onClose, onUpload }: MultipleUsersModalProps) => {
+  const [file, setFile] = useState<File>();
+  const { userModalLoading } = useUsers();
+  const { currentUser, isAdmin } = useAuth();
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setFile(_.get(e.target, 'files[0]'));
+    console.log(_.get(e.target, 'files[0]'));
+  };
+
+  const handleSubmit = () => {
+    // e.preventDefault();
+
+    if (file) {
+      const formData = new FormData();
+      formData.append('image', file, file.name);
+
+      // console.log('csv to array', csvFileToArray(file));
+      console.log('submit', formData);
+    } else {
+      console.log('nothing in file?');
+    }
+  };
+
+  const renderUpload = () => {
+    return (
+      <div>
+        <div>Please upload CSV file using , as a delimiter</div>
+        <div>
+          <input type="file" id="csvFileInput" accept=".csv" onChange={handleOnChange} />
+          <button onClick={handleSubmit}>IMPORT CSV</button>
+        </div>
+      </div>
+    );
+  };
+
+  const renderMultilineInput = () => {
+    return (
+      <div>
+        <textarea
+          rows={5}
+          name="description"
+          className="w-full rounded-md border-gray-700 focus:border-gray-700 shadow-none focus:shadow-slate-800"
+        >
+          Enter details here...
+        </textarea>
+      </div>
+    );
+  };
+
+  const handleSave = async () => {
+    // try {
+    //   if (userId) {
+    //     await handleSubmit((data) => editUserById(data))();
+    //   } else {
+    //     await handleSubmit((data) => createNewUser(data))();
+    //   }
+    // } catch (e: any) {
+    //   // Continue
+    // }
+
+    onUpload();
+
+    onClose();
+  };
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <>
+      <Modal
+        onClose={handleClose}
+        open={open}
+        onSave={handleSave}
+        isLoading={userModalLoading}
+        // leftActions={
+        //   userId &&
+        //   user.email !== currentUser?.email && (
+        //     <button
+        //       onClick={deleteModalOpen}
+        //       type="button"
+        //       className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+        //     >
+        //       <TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
+        //       Delete
+        //     </button>
+        //   )
+        // }
+        useCancelButton
+      >
+        <div className="bg-white px-4">
+          <div className="space-y-10 divide-y divide-gray-200">
+            <div>
+              <div>
+                <h3 className="text-lg leading-6 font-medium text-gray-900">Add new users</h3>
+              </div>
+              <div className="sm:p-6">
+                <Tabs
+                  tabs={[
+                    { name: 'Add users', component: renderMultilineInput() },
+                    { name: 'Import from file', component: renderUpload() },
+                  ]}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};

src/modules/users/components/MultipleUsersModal/index.ts

+export { MultipleUsersModal } from './MultipleUsersModal';

src/modules/users/components/MultipleUsersModal/types.ts

+export type MultipleUsersModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onUpload: () => void;
+};

src/modules/users/components/MultipleUsersModal/utils.ts

+import { User } from 'src/services/users';
+
+export const csvFileToArray = (csvData: string) => {
+  const csvRows = csvData.slice(csvData.indexOf('\n') + 1).split('\n');
+
+  const array = csvRows.map((i) => {
+    const values = i.split(',');
+    const email = values[0];
+    const name = values[1];
+    return { email, name, app_roles: [], preferredUsername: '', status: '', id: '' } as User;
+  });
+
+  return array;
+};

src/modules/users/components/index.ts

+export { MultipleUsersModal } from './MultipleUsersModal';