more lint cleanup

1 files changed, 65 insertions, 20 deletions

diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index c261c0f1e..8d84dbad8 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';
@@ -30,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.
@@ -160,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;
@@ -202,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());
         }
     }
 
@@ -216,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());
             }
         }
     }
@@ -275,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
         );
     };
@@ -292,7 +296,7 @@ export class GroupManager extends ObservableReactComponent<{}> {
                     </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;
@@ -302,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
@@ -310,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={{
@@ -335,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>
         );
@@ -344,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(() => {
@@ -372,28 +386,59 @@ export class GroupManager extends ObservableReactComponent<{}> {
         return (
             <div className="group-interface" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.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>
                         ))}
@@ -404,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} />;
     }
 }