Merge branch 'restoringEslint' into sarah-ai-visualization

1 files changed, 81 insertions, 32 deletions

diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index f4f879208..5701a22c0 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button, IconButton, Size, Type } from 'browndash-components';
 import { action, computed, makeObservable, observable } from 'mobx';
@@ -5,19 +7,20 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import Select from 'react-select';
 import * as RequestPromise from 'request-promise';
+import { ClientUtils } from '../../ClientUtils';
+import { Utils } from '../../Utils';
 import { DateField } from '../../fields/DateField';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
 import { Id } from '../../fields/FieldSymbols';
 import { listSpec } from '../../fields/Schema';
 import { Cast, StrCast } from '../../fields/Types';
-import { Utils } from '../../Utils';
 import { MainViewModal } from '../views/MainViewModal';
+import { ObservableReactComponent } from '../views/ObservableReactComponent';
 import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox';
 import './GroupManager.scss';
 import { GroupMemberView } from './GroupMemberView';
-import { SettingsManager } from './SettingsManager';
 import { SharingManager, User } from './SharingManager';
-import { ObservableReactComponent } from '../views/ObservableReactComponent';
+import { SnappingManager } from './SnappingManager';
 
 /**
  * Interface for options for the react-select component
@@ -29,6 +32,7 @@ export interface UserOptions {
 
 @observer
 export class GroupManager extends ObservableReactComponent<{}> {
+    // eslint-disable-next-line no-use-before-define
     static Instance: GroupManager;
     @observable isOpen: boolean = false; // whether the GroupManager is to be displayed or not.
     @observable private users: string[] = []; // list of users populated from the database.
@@ -55,7 +59,7 @@ export class GroupManager extends ObservableReactComponent<{}> {
      */
     populateUsers = async () => {
         if (Doc.UserDoc()[Id] !== Utils.GuestID()) {
-            const userList = await RequestPromise.get(Utils.prepend('/getUsers'));
+            const userList = await RequestPromise.get(ClientUtils.prepend('/getUsers'));
             const raw = JSON.parse(userList) as User[];
             raw.map(action(user => !this.users.some(umail => umail === user.email) && this.users.push(user.email)));
         }
@@ -73,7 +77,7 @@ export class GroupManager extends ObservableReactComponent<{}> {
      */
     @action
     open = () => {
-        // SelectionManager.DeselectAll();
+        // DocumentView.DeselectAll();
         this.isOpen = true;
         this.populateUsers();
     };
@@ -135,7 +139,7 @@ export class GroupManager extends ObservableReactComponent<{}> {
     hasEditAccess(groupDoc: Doc): boolean {
         if (!groupDoc) return false;
         const accessList: string[] = JSON.parse(StrCast(groupDoc.owners));
-        return accessList.includes(Doc.CurrentUserEmail) || this.adminGroupMembers?.includes(Doc.CurrentUserEmail);
+        return accessList.includes(ClientUtils.CurrentUserEmail()) || this.adminGroupMembers?.includes(ClientUtils.CurrentUserEmail());
     }
 
     /**
@@ -147,7 +151,7 @@ export class GroupManager extends ObservableReactComponent<{}> {
         const name = groupName.toLowerCase() === 'admin' ? 'Admin' : groupName;
         const groupDoc = new Doc('GROUP:' + name, true);
         groupDoc.title = name;
-        groupDoc.owners = JSON.stringify([Doc.CurrentUserEmail]);
+        groupDoc.owners = JSON.stringify([ClientUtils.CurrentUserEmail()]);
         groupDoc.members = JSON.stringify(memberEmails);
         this.addGroup(groupDoc);
     }
@@ -159,7 +163,7 @@ export class GroupManager extends ObservableReactComponent<{}> {
     addGroup(groupDoc: Doc): boolean {
         if (this.GroupManagerDoc) {
             Doc.AddDocToList(this.GroupManagerDoc, 'data', groupDoc);
-            this.GroupManagerDoc['data_modificationDate'] = new DateField();
+            this.GroupManagerDoc.data_modificationDate = new DateField();
             return true;
         }
         return false;
@@ -176,11 +180,11 @@ export class GroupManager extends ObservableReactComponent<{}> {
                 Doc.RemoveDocFromList(this.GroupManagerDoc, 'data', group);
                 SharingManager.Instance.removeGroup(group);
                 const members = JSON.parse(StrCast(group.members));
-                if (members.includes(Doc.CurrentUserEmail)) {
+                if (members.includes(ClientUtils.CurrentUserEmail())) {
                     const index = DocListCast(this.GroupManagerDoc.data).findIndex(grp => grp === group);
                     index !== -1 && Cast(this.GroupManagerDoc.data, listSpec(Doc), [])?.splice(index, 1);
                 }
-                this.GroupManagerDoc['data_modificationDate'] = new DateField();
+                this.GroupManagerDoc.data_modificationDate = new DateField();
                 if (group === this.currentGroup) {
                     this.currentGroup = undefined;
                 }
@@ -201,7 +205,7 @@ export class GroupManager extends ObservableReactComponent<{}> {
             !memberList.includes(email) && memberList.push(email);
             groupDoc.members = JSON.stringify(memberList);
             SharingManager.Instance.shareWithAddedMember(groupDoc, email);
-            this.GroupManagerDoc && (this.GroupManagerDoc['data_modificationDate'] = new DateField());
+            this.GroupManagerDoc && (this.GroupManagerDoc.data_modificationDate = new DateField());
         }
     }
 
@@ -215,10 +219,9 @@ export class GroupManager extends ObservableReactComponent<{}> {
             const memberList = JSON.parse(StrCast(groupDoc.members));
             const index = memberList.indexOf(email);
             if (index !== -1) {
-                const user = memberList.splice(index, 1)[0];
                 groupDoc.members = JSON.stringify(memberList);
                 SharingManager.Instance.removeMember(groupDoc, email);
-                this.GroupManagerDoc && (this.GroupManagerDoc['data_modificationDate'] = new DateField());
+                this.GroupManagerDoc && (this.GroupManagerDoc.data_modificationDate = new DateField());
             }
         }
     }
@@ -260,7 +263,10 @@ export class GroupManager extends ObservableReactComponent<{}> {
             alert('Please select a unique group name');
             return;
         }
-        this.createGroupDoc(value, this.selectedUsers?.map(user => user.value));
+        this.createGroupDoc(
+            value,
+            this.selectedUsers?.map(user => user.value)
+        );
         this.selectedUsers = null;
         this.inputRef.current!.value = '';
         this.buttonColour = '#979797';
@@ -271,7 +277,9 @@ export class GroupManager extends ObservableReactComponent<{}> {
         TaskCompletionBox.textDisplayed = 'Group created!';
         TaskCompletionBox.taskCompleted = true;
         setTimeout(
-            action(() => (TaskCompletionBox.taskCompleted = false)),
+            action(() => {
+                TaskCompletionBox.taskCompleted = false;
+            }),
             2000
         );
     };
@@ -281,14 +289,14 @@ export class GroupManager extends ObservableReactComponent<{}> {
      */
     private get groupCreationModal() {
         const contents = (
-            <div className="group-create" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
+            <div className="group-create" style={{ background: SnappingManager.userBackgroundColor, color: SnappingManager.userColor }}>
                 <div className="group-heading" style={{ marginBottom: 0 }}>
                     <p>
                         <b>New Group</b>
                     </p>
                     <div className="close-button">
                         <Button
-                            icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
+                            icon={<FontAwesomeIcon icon="times" size="lg" />}
                             onClick={action(() => {
                                 this.createGroupModalOpen = false;
                                 TaskCompletionBox.taskCompleted = false;
@@ -298,7 +306,17 @@ export class GroupManager extends ObservableReactComponent<{}> {
                     </div>
                 </div>
                 <div className="group-input" style={{ border: StrCast(Doc.UserDoc().userColor) }}>
-                    <input ref={this.inputRef} onKeyDown={this.handleKeyDown} autoFocus type="text" placeholder="Group name" onChange={action(() => (this.buttonColour = this.inputRef.current?.value ? 'black' : '#979797'))} />
+                    <input
+                        ref={this.inputRef}
+                        onKeyDown={this.handleKeyDown}
+                        // eslint-disable-next-line jsx-a11y/no-autofocus
+                        autoFocus
+                        type="text"
+                        placeholder="Group name"
+                        onChange={action(() => {
+                            this.buttonColour = this.inputRef.current?.value ? 'black' : '#979797';
+                        })}
+                    />
                 </div>
                 <div style={{ border: StrCast(Doc.UserDoc().userColor) }}>
                     <Select
@@ -306,7 +324,7 @@ export class GroupManager extends ObservableReactComponent<{}> {
                         isMulti
                         options={this.options}
                         onChange={this.handleChange}
-                        placeholder={'Select users'}
+                        placeholder="Select users"
                         value={this.selectedUsers}
                         closeMenuOnSelect={false}
                         styles={{
@@ -331,8 +349,8 @@ export class GroupManager extends ObservableReactComponent<{}> {
                         }}
                     />
                 </div>
-                <div className={'create-button'}>
-                    <Button text={'Create'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} />
+                <div className="create-button">
+                    <Button text="Create" type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} />
                 </div>
             </div>
         );
@@ -340,7 +358,7 @@ export class GroupManager extends ObservableReactComponent<{}> {
         return (
             <MainViewModal
                 isDisplayed={this.createGroupModalOpen}
-                interactive={true}
+                interactive
                 contents={contents}
                 dialogueBoxStyle={{ width: '90%', height: '70%' }}
                 closeOnExternalClick={action(() => {
@@ -366,30 +384,61 @@ export class GroupManager extends ObservableReactComponent<{}> {
         const groups = this.groupSort === 'ascending' ? this.allGroups.sort(sortGroups) : this.groupSort === 'descending' ? this.allGroups.sort(sortGroups).reverse() : this.allGroups;
 
         return (
-            <div className="group-interface" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
+            <div className="group-interface" style={{ background: SnappingManager.userBackgroundColor, color: SnappingManager.userColor }}>
                 {this.groupCreationModal}
-                {this.currentGroup ? <GroupMemberView group={this.currentGroup} onCloseButtonClick={action(() => (this.currentGroup = undefined))} /> : null}
+                {this.currentGroup ? (
+                    <GroupMemberView
+                        group={this.currentGroup}
+                        onCloseButtonClick={action(() => {
+                            this.currentGroup = undefined;
+                        })}
+                    />
+                ) : null}
                 <div className="group-heading">
                     <p>
                         <b>Manage Groups</b>
                     </p>
-                    <Button icon={<FontAwesomeIcon icon={'plus'} />} iconPlacement={'left'} text={'Create Group'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (this.createGroupModalOpen = true))} />
-                    <div className={'close-button'}>
-                        <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={this.close} color={StrCast(Doc.UserDoc().userColor)} />
+                    <Button
+                        icon={<FontAwesomeIcon icon="plus" />}
+                        iconPlacement="left"
+                        text="Create Group"
+                        type={Type.TERT}
+                        color={StrCast(Doc.UserDoc().userColor)}
+                        onClick={action(() => {
+                            this.createGroupModalOpen = true;
+                        })}
+                    />
+                    <div className="close-button">
+                        <Button icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={this.close} color={StrCast(Doc.UserDoc().userColor)} />
                     </div>
                 </div>
                 <div className="main-container">
-                    <div className="sort-groups" onClick={action(() => (this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'))}>
+                    <div
+                        className="sort-groups"
+                        onClick={action(() => {
+                            this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending';
+                        })}>
                         Name
                         <IconButton icon={<FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
                     </div>
-                    <div className={'style-divider'} style={{ background: StrCast(Doc.UserDoc().userColor) }} />
+                    <div className="style-divider" style={{ background: StrCast(Doc.UserDoc().userColor) }} />
                     <div className="group-body" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                         {groups.map(group => (
                             <div className="group-row" key={StrCast(group.title || group.groupName)}>
                                 <div className="group-name">{StrCast(group.title || group.groupName)}</div>
-                                <div className="group-info" onClick={action(() => (this.currentGroup = group))}>
-                                    <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (this.currentGroup = group))} />
+                                <div
+                                    className="group-info"
+                                    onClick={action(() => {
+                                        this.currentGroup = group;
+                                    })}>
+                                    <IconButton
+                                        icon={<FontAwesomeIcon icon="info-circle" />}
+                                        size={Size.XSMALL}
+                                        color={StrCast(Doc.UserDoc().userColor)}
+                                        onClick={action(() => {
+                                            this.currentGroup = group;
+                                        })}
+                                    />
                                 </div>
                             </div>
                         ))}
@@ -400,6 +449,6 @@ export class GroupManager extends ObservableReactComponent<{}> {
     }
 
     render() {
-        return <MainViewModal contents={this.groupInterface} isDisplayed={this.isOpen} interactive={true} dialogueBoxStyle={{ zIndex: 1002 }} overlayStyle={{ zIndex: 1001 }} closeOnExternalClick={this.close} />;
+        return <MainViewModal contents={this.groupInterface} isDisplayed={this.isOpen} interactive dialogueBoxStyle={{ zIndex: 1002 }} overlayStyle={{ zIndex: 1001 }} closeOnExternalClick={this.close} />;
     }
 }