trying to fix errors in compiles

1 files changed, 268 insertions, 298 deletions

diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index d77633b8d..1acb3ab38 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -1,29 +1,29 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { intersection } from "lodash";
-import { action, computed, observable, runInAction } from "mobx";
-import { observer } from "mobx-react";
-import * as React from "react";
-import Select from "react-select";
-import * as RequestPromise from "request-promise";
-import { AclAugment, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, DocListCast, DocListCastAsync, Opt, AclSelfEdit } from "../../fields/Doc";
-import { List } from "../../fields/List";
-import { Cast, NumCast, StrCast } from "../../fields/Types";
-import { distributeAcls, GetEffectiveAcl, normalizeEmail, SharingPermissions, TraceMobx } from "../../fields/util";
-import { Utils } from "../../Utils";
-import { DocServer } from "../DocServer";
-import { CollectionView } from "../views/collections/CollectionView";
-import { DictationOverlay } from "../views/DictationOverlay";
-import { MainViewModal } from "../views/MainViewModal";
-import { DocumentView } from "../views/nodes/DocumentView";
-import { TaskCompletionBox } from "../views/nodes/TaskCompletedBox";
-import { SearchBox } from "../views/search/SearchBox";
-import { CurrentUserUtils } from "./CurrentUserUtils";
-import { DocumentManager } from "./DocumentManager";
-import { GroupManager, UserOptions } from "./GroupManager";
-import { GroupMemberView } from "./GroupMemberView";
-import { SelectionManager } from "./SelectionManager";
-import "./SharingManager.scss";
-import { LinkManager } from "./LinkManager";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { intersection } from 'lodash';
+import { action, computed, observable, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import Select from 'react-select';
+import * as RequestPromise from 'request-promise';
+import { AclAugment, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, DocListCast, DocListCastAsync, Opt, AclSelfEdit } from '../../fields/Doc';
+import { List } from '../../fields/List';
+import { Cast, NumCast, StrCast } from '../../fields/Types';
+import { distributeAcls, GetEffectiveAcl, normalizeEmail, SharingPermissions, TraceMobx } from '../../fields/util';
+import { Utils } from '../../Utils';
+import { DocServer } from '../DocServer';
+import { CollectionView } from '../views/collections/CollectionView';
+import { DictationOverlay } from '../views/DictationOverlay';
+import { MainViewModal } from '../views/MainViewModal';
+import { DocumentView } from '../views/nodes/DocumentView';
+import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox';
+import { SearchBox } from '../views/search/SearchBox';
+import { CurrentUserUtils } from './CurrentUserUtils';
+import { DocumentManager } from './DocumentManager';
+import { GroupManager, UserOptions } from './GroupManager';
+import { GroupMemberView } from './GroupMemberView';
+import { SelectionManager } from './SelectionManager';
+import './SharingManager.scss';
+import { LinkManager } from './LinkManager';
 
 export interface User {
     email: string;
@@ -44,19 +44,19 @@ interface GroupedOptions {
 // const DefaultColor = "black";
 
 // used to differentiate between individuals and groups when sharing
-const indType = "!indType/";
-const groupType = "!groupType/";
+const indType = '!indType/';
+const groupType = '!groupType/';
 
-const storage = "data";
+const storage = 'data';
 
 /**
  * A user who also has a sharing doc.
  */
 interface ValidatedUser {
-    user: User;         // database minimal info to identify / communicate with a user (email, sharing doc id)
-    sharingDoc: Doc;    // document to share/message another user
+    user: User; // database minimal info to identify / communicate with a user (email, sharing doc id)
+    sharingDoc: Doc; // document to share/message another user
     linkDatabase: Doc;
-    userColor: string;  // stored on the sharinDoc, extracted for convenience?
+    userColor: string; // stored on the sharinDoc, extracted for convenience?
 }
 
 @observer
@@ -71,8 +71,8 @@ export class SharingManager extends React.Component<{}> {
     @observable private overlayOpacity = 0.4; // for the modal
     @observable private selectedUsers: UserOptions[] | null = null; // users (individuals/groups) selected to share with
     @observable private permissions: SharingPermissions = SharingPermissions.Edit; // the permission with which to share with other users
-    @observable private individualSort: "ascending" | "descending" | "none" = "none"; // sorting options for the list of individuals
-    @observable private groupSort: "ascending" | "descending" | "none" = "none"; // sorting options for the list of groups
+    @observable private individualSort: 'ascending' | 'descending' | 'none' = 'none'; // sorting options for the list of individuals
+    @observable private groupSort: 'ascending' | 'descending' | 'none' = 'none'; // sorting options for the list of groups
     private shareDocumentButtonRef: React.RefObject<HTMLButtonElement> = React.createRef(); // ref for the share button, used for the position of the popup
     private distributeAclsButtonRef: React.RefObject<HTMLButtonElement> = React.createRef(); // ref for the distribute button, used for the position of the popup
     // if both showUserOptions and showGroupOptions are false then both are displayed
@@ -89,7 +89,7 @@ export class SharingManager extends React.Component<{}> {
         [AclAugment, SharingPermissions.Augment],
         [AclSelfEdit, SharingPermissions.SelfEdit],
         [AclEdit, SharingPermissions.Edit],
-        [AclAdmin, SharingPermissions.Admin]
+        [AclAdmin, SharingPermissions.Admin],
     ]);
 
     // private get linkVisible() {
@@ -105,17 +105,20 @@ export class SharingManager extends React.Component<{}> {
             this.isOpen = this.targetDoc !== undefined;
             this.permissions = SharingPermissions.Augment;
         });
-    }
+    };
 
     public close = action(() => {
         this.isOpen = false;
         this.selectedUsers = null; // resets the list of users and selected users (in the react-select component)
         TaskCompletionBox.taskCompleted = false;
-        setTimeout(action(() => {
-            // this.copied = false;
-            DictationOverlay.Instance.hasActiveModal = false;
-            this.targetDoc = undefined;
-        }), 500);
+        setTimeout(
+            action(() => {
+                // this.copied = false;
+                DictationOverlay.Instance.hasActiveModal = false;
+                this.targetDoc = undefined;
+            }),
+            500
+        );
     });
 
     constructor(props: {}) {
@@ -136,7 +139,7 @@ export class SharingManager extends React.Component<{}> {
     populateUsers = async () => {
         if (!this.populating) {
             this.populating = true;
-            const userList = await RequestPromise.get(Utils.prepend("/getUsers"));
+            const userList = await RequestPromise.get(Utils.prepend('/getUsers'));
             const raw = JSON.parse(userList) as User[];
             const sharingDocs: ValidatedUser[] = [];
             const evaluating = raw.map(async user => {
@@ -146,7 +149,8 @@ export class SharingManager extends React.Component<{}> {
                     const linkDatabase = await DocServer.GetRefField(user.linkDatabaseId);
                     if (sharingDoc instanceof Doc && linkDatabase instanceof Doc) {
                         await DocListCastAsync(linkDatabase.data);
-                        (await DocListCastAsync(Cast(linkDatabase, Doc, null).data))?.forEach(async link => { // makes sure link anchors are loaded to avoid incremental updates to computedFns in LinkManager
+                        (await DocListCastAsync(Cast(linkDatabase, Doc, null).data))?.forEach(async link => {
+                            // makes sure link anchors are loaded to avoid incremental updates to computedFns in LinkManager
                             const a1 = await Cast(link?.anchor1, Doc, null);
                             const a2 = await Cast(link?.anchor2, Doc, null);
                         });
@@ -166,7 +170,7 @@ export class SharingManager extends React.Component<{}> {
                 this.populating = false;
             });
         }
-    }
+    };
 
     /**
      * Shares the document with a user.
@@ -179,31 +183,31 @@ export class SharingManager extends React.Component<{}> {
         const isDashboard = DocListCast(CurrentUserUtils.MyDashboards.data).indexOf(target) !== -1;
 
         const docs = SelectionManager.Views().length < 2 ? [target] : SelectionManager.Views().map(docView => docView.props.Document);
-        return !docs.map(doc => {
-            doc.author === Doc.CurrentUserEmail && !doc[myAcl] && distributeAcls(myAcl, SharingPermissions.Admin, doc, undefined, undefined, isDashboard);
-
-            if (permission === SharingPermissions.None) {
-                if (doc[acl] && doc[acl] !== SharingPermissions.None) doc.numUsersShared = NumCast(doc.numUsersShared, 1) - 1;
-            }
-            else {
-                if (!doc[acl] || doc[acl] === SharingPermissions.None) doc.numUsersShared = NumCast(doc.numUsersShared, 0) + 1;
-            }
+        return !docs
+            .map(doc => {
+                doc.author === Doc.CurrentUserEmail && !doc[myAcl] && distributeAcls(myAcl, SharingPermissions.Admin, doc, undefined, undefined, isDashboard);
+
+                if (permission === SharingPermissions.None) {
+                    if (doc[acl] && doc[acl] !== SharingPermissions.None) doc.numUsersShared = NumCast(doc.numUsersShared, 1) - 1;
+                } else {
+                    if (!doc[acl] || doc[acl] === SharingPermissions.None) doc.numUsersShared = NumCast(doc.numUsersShared, 0) + 1;
+                }
 
-            distributeAcls(acl, permission as SharingPermissions, doc, undefined, undefined, isDashboard);
+                distributeAcls(acl, permission as SharingPermissions, doc, undefined, undefined, isDashboard);
 
-            this.setDashboardBackground(doc, permission as SharingPermissions);
-            if (permission !== SharingPermissions.None) return Doc.AddDocToList(sharingDoc, storage, doc);
-            else return GetEffectiveAcl(doc, user.email) === AclPrivate && Doc.RemoveDocFromList(sharingDoc, storage, (doc.aliasOf as Doc || doc));
-        }).some(success => !success);
-    }
+                this.setDashboardBackground(doc, permission as SharingPermissions);
+                if (permission !== SharingPermissions.None) return Doc.AddDocToList(sharingDoc, storage, doc);
+                else return GetEffectiveAcl(doc, user.email) === AclPrivate && Doc.RemoveDocFromList(sharingDoc, storage, (doc.aliasOf as Doc) || doc);
+            })
+            .some(success => !success);
+    };
 
     /**
      * Sets the permission on the target for the group.
-     * @param group 
-     * @param permission 
+     * @param group
+     * @param permission
      */
     setInternalGroupSharing = (group: Doc | { title: string }, permission: string, targetDoc?: Doc) => {
-
         const target = targetDoc || this.targetDoc!;
         const key = normalizeEmail(StrCast(group.title));
         const acl = `acl-${key}`;
@@ -212,38 +216,41 @@ export class SharingManager extends React.Component<{}> {
         const docs = SelectionManager.Views().length < 2 ? [target] : SelectionManager.Views().map(docView => docView.props.Document);
 
         // ! ensures it returns true if document has been shared successfully, false otherwise
-        return !docs.map(doc => {
-            doc.author === Doc.CurrentUserEmail && !doc[`acl-${Doc.CurrentUserEmailNormalized}`] && distributeAcls(`acl-${Doc.CurrentUserEmailNormalized}`, SharingPermissions.Admin, doc, undefined, undefined, isDashboard);
-
-            if (permission === SharingPermissions.None) {
-                if (doc[acl] && doc[acl] !== SharingPermissions.None) doc.numGroupsShared = NumCast(doc.numGroupsShared, 1) - 1;
-            }
-            else {
-                if (!doc[acl] || doc[acl] === SharingPermissions.None) doc.numGroupsShared = NumCast(doc.numGroupsShared, 0) + 1;
-            }
+        return !docs
+            .map(doc => {
+                doc.author === Doc.CurrentUserEmail && !doc[`acl-${Doc.CurrentUserEmailNormalized}`] && distributeAcls(`acl-${Doc.CurrentUserEmailNormalized}`, SharingPermissions.Admin, doc, undefined, undefined, isDashboard);
+
+                if (permission === SharingPermissions.None) {
+                    if (doc[acl] && doc[acl] !== SharingPermissions.None) doc.numGroupsShared = NumCast(doc.numGroupsShared, 1) - 1;
+                } else {
+                    if (!doc[acl] || doc[acl] === SharingPermissions.None) doc.numGroupsShared = NumCast(doc.numGroupsShared, 0) + 1;
+                }
 
-            distributeAcls(acl, permission as SharingPermissions, doc, undefined, undefined, isDashboard);
-            this.setDashboardBackground(doc, permission as SharingPermissions);
+                distributeAcls(acl, permission as SharingPermissions, doc, undefined, undefined, isDashboard);
+                this.setDashboardBackground(doc, permission as SharingPermissions);
 
-            if (group instanceof Doc) {
-                const members: string[] = JSON.parse(StrCast(group.members));
-                const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email));
+                if (group instanceof Doc) {
+                    const members: string[] = JSON.parse(StrCast(group.members));
+                    const users: ValidatedUser[] = this.users.filter(({ user: { email } }) => members.includes(email));
 
-                // if documents have been shared, add the doc to that list if it doesn't already exist, otherwise create a new list with the doc
-                group.docsShared ? Doc.IndexOf(doc, DocListCast(group.docsShared)) === -1 && (group.docsShared as List<Doc>).push(doc) : group.docsShared = new List<Doc>([doc]);
+                    // if documents have been shared, add the doc to that list if it doesn't already exist, otherwise create a new list with the doc
+                    group.docsShared ? Doc.IndexOf(doc, DocListCast(group.docsShared)) === -1 && (group.docsShared as List<Doc>).push(doc) : (group.docsShared = new List<Doc>([doc]));
 
-                return users.map(({ user, sharingDoc }) => {
-                    if (permission !== SharingPermissions.None) return Doc.AddDocToList(sharingDoc, storage, doc); // add the doc to the sharingDoc if it hasn't already been added
-                    else return GetEffectiveAcl(doc, user.email) === AclPrivate && Doc.RemoveDocFromList(sharingDoc, storage, (doc.aliasOf as Doc || doc)); // remove the doc from the list if it already exists
-                }).some(success => !success);
-            }
-        }).some(success => success);
-    }
+                    return users
+                        .map(({ user, sharingDoc }) => {
+                            if (permission !== SharingPermissions.None) return Doc.AddDocToList(sharingDoc, storage, doc); // add the doc to the sharingDoc if it hasn't already been added
+                            else return GetEffectiveAcl(doc, user.email) === AclPrivate && Doc.RemoveDocFromList(sharingDoc, storage, (doc.aliasOf as Doc) || doc); // remove the doc from the list if it already exists
+                        })
+                        .some(success => !success);
+                }
+            })
+            .some(success => success);
+    };
 
     /**
      * Shares the documents shared with a group with a new user who has been added to that group.
-     * @param group 
-     * @param emailId 
+     * @param group
+     * @param emailId
      */
     shareWithAddedMember = (group: Doc, emailId: string, retry: boolean = true) => {
         const user = this.users.find(({ user: { email } }) => email === emailId)!;
@@ -255,30 +262,30 @@ export class SharingManager extends React.Component<{}> {
                     DocListCastAsync(group.docsShared).then(dl => {
                         const filtered = dl?.filter(doc => !userdocs?.includes(doc));
                         filtered && userdocs?.push(...filtered);
-                    }));
+                    })
+                );
             }
         }
-    }
+    };
 
     /**
      * Called from the properties sidebar to change permissions of a user.
      */
     shareFromPropertiesSidebar = (shareWith: string, permission: SharingPermissions, docs: Doc[]) => {
-        if (shareWith !== "Public" && shareWith !== "Override") {
-            const user = this.users.find(({ user: { email } }) => email === (shareWith === "Me" ? Doc.CurrentUserEmail : shareWith));
+        if (shareWith !== 'Public' && shareWith !== 'Override') {
+            const user = this.users.find(({ user: { email } }) => email === (shareWith === 'Me' ? Doc.CurrentUserEmail : shareWith));
             docs.forEach(doc => {
                 if (user) this.setInternalSharing(user, permission, doc);
                 else this.setInternalGroupSharing(GroupManager.Instance.getGroup(shareWith)!, permission, doc);
             });
-        }
-        else {
+        } else {
             const dashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
             docs.forEach(doc => {
                 const isDashboard = dashboards.indexOf(doc) !== -1;
                 if (GetEffectiveAcl(doc) === AclAdmin) distributeAcls(`acl-${shareWith}`, permission, doc, undefined, undefined, isDashboard);
             });
         }
-    }
+    };
 
     /**
      * Sets the background of the Dashboard if it has been shared as a visual indicator
@@ -287,22 +294,21 @@ export class SharingManager extends React.Component<{}> {
         if (Doc.IndexOf(doc, DocListCast(CurrentUserUtils.MyDashboards.data)) !== -1) {
             if (permission !== SharingPermissions.None) {
                 doc.isShared = true;
-                doc.backgroundColor = "green";
-            }
-            else {
+                doc.backgroundColor = 'green';
+            } else {
                 const acls = doc[DataSym][AclSym];
-                if (Object.keys(acls).every(key => key === `acl-${Doc.CurrentUserEmailNormalized}` ? true : [AclUnset, AclPrivate].includes(acls[key]))) {
+                if (Object.keys(acls).every(key => (key === `acl-${Doc.CurrentUserEmailNormalized}` ? true : [AclUnset, AclPrivate].includes(acls[key])))) {
                     doc.isShared = undefined;
                     doc.backgroundColor = undefined;
                 }
             }
         }
-    }
+    };
 
     /**
      * Removes the documents shared with a user through a group when the user is removed from the group.
-     * @param group 
-     * @param emailId 
+     * @param group
+     * @param emailId
      */
     removeMember = (group: Doc, emailId: string) => {
         const user: ValidatedUser = this.users.find(({ user: { email } }) => email === emailId)!;
@@ -315,11 +321,11 @@ export class SharingManager extends React.Component<{}> {
                 })
             );
         }
-    }
+    };
 
     /**
      * Removes a group's permissions from documents that have been shared with it.
-     * @param group 
+     * @param group
      */
     removeGroup = (group: Doc) => {
         if (group.docsShared) {
@@ -335,9 +341,7 @@ export class SharingManager extends React.Component<{}> {
                 users.forEach(({ sharingDoc }) => Doc.RemoveDocFromList(sharingDoc, storage, doc));
             });
         }
-    }
-
-
+    };
 
     // private setExternalSharing = (permission: string) => {
     //     const targetDoc = this.targetDoc;
@@ -367,23 +371,23 @@ export class SharingManager extends React.Component<{}> {
      */
     private sharingOptions(uniform: boolean, override?: boolean) {
         const dropdownValues: string[] = Object.values(SharingPermissions);
-        if (!uniform) dropdownValues.unshift("-multiple-");
-        if (override) dropdownValues.unshift("None");
-        return dropdownValues.filter(permission => !Doc.noviceMode || ![SharingPermissions.View, SharingPermissions.SelfEdit].includes(permission as any)).map(permission =>
-        (
-            <option key={permission} value={permission}>
-                {permission}
-            </option>
-        )
-        );
+        if (!uniform) dropdownValues.unshift('-multiple-');
+        if (override) dropdownValues.unshift('None');
+        return dropdownValues
+            .filter(permission => !Doc.noviceMode || ![SharingPermissions.View, SharingPermissions.SelfEdit].includes(permission as any))
+            .map(permission => (
+                <option key={permission} value={permission}>
+                    {permission}
+                </option>
+            ));
     }
 
     private focusOn = (contents: string) => {
-        const title = this.targetDoc ? StrCast(this.targetDoc.title) : "";
+        const title = this.targetDoc ? StrCast(this.targetDoc.title) : '';
         const docs = SelectionManager.Views().length > 1 ? SelectionManager.Views().map(docView => docView.props.Document) : [this.targetDoc];
         return (
             <span
-                className={"focus-span"}
+                className={'focus-span'}
                 title={title}
                 onClick={() => {
                     let context: Opt<CollectionView>;
@@ -404,12 +408,11 @@ export class SharingManager extends React.Component<{}> {
                         this.dialogueBoxOpacity = 1;
                         this.overlayOpacity = 0.4;
                     }
-                })}
-            >
+                })}>
                 {contents}
             </span>
         );
-    }
+    };
 
     /**
      * Handles changes in the users selected in react-select
@@ -417,7 +420,7 @@ export class SharingManager extends React.Component<{}> {
     @action
     handleUsersChange = (selectedOptions: any) => {
         this.selectedUsers = selectedOptions as UserOptions[];
-    }
+    };
 
     /**
      * Handles changes in the permission chosen to share with someone with
@@ -425,7 +428,7 @@ export class SharingManager extends React.Component<{}> {
     @action
     handlePermissionsChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
         this.permissions = event.currentTarget.value as SharingPermissions;
-    }
+    };
 
     /**
      * Calls the relevant method for sharing, displays the popup, and resets the relevant variables.
@@ -436,8 +439,7 @@ export class SharingManager extends React.Component<{}> {
             this.selectedUsers.forEach(user => {
                 if (user.value.includes(indType)) {
                     this.setInternalSharing(this.users.find(u => u.user.email === user.label)!, this.permissions);
-                }
-                else {
+                } else {
                     this.setInternalGroupSharing(GroupManager.Instance.getGroup(user.label)!, this.permissions);
                 }
             });
@@ -445,13 +447,16 @@ export class SharingManager extends React.Component<{}> {
             const { left, width, top, height } = this.shareDocumentButtonRef.current!.getBoundingClientRect();
             TaskCompletionBox.popupX = left - 1.5 * width;
             TaskCompletionBox.popupY = top - 1.5 * height;
-            TaskCompletionBox.textDisplayed = "Document shared!";
+            TaskCompletionBox.textDisplayed = 'Document shared!';
             TaskCompletionBox.taskCompleted = true;
-            setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2000);
+            setTimeout(
+                action(() => (TaskCompletionBox.taskCompleted = false)),
+                2000
+            );
 
             this.selectedUsers = null;
         }
-    }
+    };
 
     // distributeOverCollection = (targetDoc?: Doc) => {
     //     const target = targetDoc || this.targetDoc!;
@@ -471,7 +476,7 @@ export class SharingManager extends React.Component<{}> {
         const { email: e1 } = u1.user;
         const { email: e2 } = u2.user;
         return e1 < e2 ? -1 : e1 === e2 ? 0 : 1;
-    }
+    };
 
     /**
      * Sorting algorithm to sort groups.
@@ -480,7 +485,7 @@ export class SharingManager extends React.Component<{}> {
         const g1 = StrCast(group1.title);
         const g2 = StrCast(group2.title);
         return g1 < g2 ? -1 : g1 === g2 ? 0 : 1;
-    }
+    };
 
     /**
      * @returns the main interface of the SharingManager.
@@ -488,28 +493,29 @@ export class SharingManager extends React.Component<{}> {
     @computed get sharingInterface() {
         TraceMobx();
         const groupList = GroupManager.Instance?.allGroups || [];
-        const sortedUsers = this.users.slice().sort(this.sortUsers).map(({ user: { email } }) => ({ label: email, value: indType + email }));
-        const sortedGroups = groupList.slice().sort(this.sortGroups).map(({ title }) => ({ label: StrCast(title), value: groupType + StrCast(title) }));
+        const sortedUsers = this.users
+            .slice()
+            .sort(this.sortUsers)
+            .map(({ user: { email } }) => ({ label: email, value: indType + email }));
+        const sortedGroups = groupList
+            .slice()
+            .sort(this.sortGroups)
+            .map(({ title }) => ({ label: StrCast(title), value: groupType + StrCast(title) }));
 
         // the next block handles the users shown (individuals/groups/both)
         const options: GroupedOptions[] = [];
         if (GroupManager.Instance) {
             if ((this.showUserOptions && this.showGroupOptions) || (!this.showUserOptions && !this.showGroupOptions)) {
-                options.push(
-                    { label: 'Individuals', options: sortedUsers },
-                    { label: 'Groups', options: sortedGroups });
-            }
-            else if (this.showUserOptions) options.push({ label: 'Individuals', options: sortedUsers });
+                options.push({ label: 'Individuals', options: sortedUsers }, { label: 'Groups', options: sortedGroups });
+            } else if (this.showUserOptions) options.push({ label: 'Individuals', options: sortedUsers });
             else options.push({ label: 'Groups', options: sortedGroups });
         }
 
-        const users = this.individualSort === "ascending" ? this.users.slice().sort(this.sortUsers) : this.individualSort === "descending" ? this.users.slice().sort(this.sortUsers).reverse() : this.users;
-        const groups = this.groupSort === "ascending" ? groupList.slice().sort(this.sortGroups) : this.groupSort === "descending" ? groupList.slice().sort(this.sortGroups).reverse() : groupList;
+        const users = this.individualSort === 'ascending' ? this.users.slice().sort(this.sortUsers) : this.individualSort === 'descending' ? this.users.slice().sort(this.sortUsers).reverse() : this.users;
+        const groups = this.groupSort === 'ascending' ? groupList.slice().sort(this.sortGroups) : this.groupSort === 'descending' ? groupList.slice().sort(this.sortGroups).reverse() : groupList;
 
         // handles the case where multiple documents are selected
-        let docs = SelectionManager.Views().length < 2 ?
-            [this.layoutDocAcls ? this.targetDoc : this.targetDoc?.[DataSym]]
-            : SelectionManager.Views().map(docView => this.layoutDocAcls ? docView.props.Document : docView.props.Document?.[DataSym]);
+        let docs = SelectionManager.Views().length < 2 ? [this.layoutDocAcls ? this.targetDoc : this.targetDoc?.[DataSym]] : SelectionManager.Views().map(docView => (this.layoutDocAcls ? docView.props.Document : docView.props.Document?.[DataSym]));
 
         if (this.myDocAcls) {
             const newDocs: Doc[] = [];
@@ -524,107 +530,78 @@ export class SharingManager extends React.Component<{}> {
         const admin = this.myDocAcls ? Boolean(docs.length) : effectiveAcls.every(acl => acl === AclAdmin);
 
         // users in common between all docs
-        const commonKeys = intersection(...docs.map(doc => this.layoutDocAcls ? doc?.[AclSym] && Object.keys(doc[AclSym]) : doc?.[DataSym]?.[AclSym] && Object.keys(doc[DataSym][AclSym])));
+        const commonKeys = intersection(...docs.map(doc => (this.layoutDocAcls ? doc?.[AclSym] && Object.keys(doc[AclSym]) : doc?.[DataSym]?.[AclSym] && Object.keys(doc[DataSym][AclSym]))));
 
         // the list of users shared with
-        const userListContents: (JSX.Element | null)[] = users.filter(({ user }) => docs.length > 1 ? commonKeys.includes(`acl-${normalizeEmail(user.email)}`) : docs[0]?.author !== user.email).map(({ user, linkDatabase, sharingDoc, userColor }) => {
-            const userKey = `acl-${normalizeEmail(user.email)}`;
-            const uniform = docs.every(doc => this.layoutDocAcls ? doc?.[AclSym]?.[userKey] === docs[0]?.[AclSym]?.[userKey] : doc?.[DataSym]?.[AclSym]?.[userKey] === docs[0]?.[DataSym]?.[AclSym]?.[userKey]);
-            const permissions = uniform ? StrCast(targetDoc?.[userKey]) : "-multiple-";
-
-            return !permissions ? (null) : (
-                <div
-                    key={userKey}
-                    className={"container"}
-                >
-                    <span className={"padding"}>{user.email}</span>
-                    <div className="edit-actions">
-                        {admin || this.myDocAcls ? (
-                            <select
-                                className={"permissions-dropdown"}
-                                value={permissions}
-                                onChange={e => this.setInternalSharing({ user, linkDatabase, sharingDoc, userColor }, e.currentTarget.value)}
-                            >
-                                {this.sharingOptions(uniform)}
-                            </select>
-                        ) : (
-                            <div className={"permissions-dropdown"}>
-                                {permissions}
-                            </div>
-                        )}
+        const userListContents: (JSX.Element | null)[] = users
+            .filter(({ user }) => (docs.length > 1 ? commonKeys.includes(`acl-${normalizeEmail(user.email)}`) : docs[0]?.author !== user.email))
+            .map(({ user, linkDatabase, sharingDoc, userColor }) => {
+                const userKey = `acl-${normalizeEmail(user.email)}`;
+                const uniform = docs.every(doc => (this.layoutDocAcls ? doc?.[AclSym]?.[userKey] === docs[0]?.[AclSym]?.[userKey] : doc?.[DataSym]?.[AclSym]?.[userKey] === docs[0]?.[DataSym]?.[AclSym]?.[userKey]));
+                const permissions = uniform ? StrCast(targetDoc?.[userKey]) : '-multiple-';
+
+                return !permissions ? null : (
+                    <div key={userKey} className={'container'}>
+                        <span className={'padding'}>{user.email}</span>
+                        <div className="edit-actions">
+                            {admin || this.myDocAcls ? (
+                                <select className={'permissions-dropdown'} value={permissions} onChange={e => this.setInternalSharing({ user, linkDatabase, sharingDoc, userColor }, e.currentTarget.value)}>
+                                    {this.sharingOptions(uniform)}
+                                </select>
+                            ) : (
+                                <div className={'permissions-dropdown'}>{permissions}</div>
+                            )}
+                        </div>
                     </div>
-                </div>
-            );
-        });
+                );
+            });
 
         // checks if every doc has the same author
         const sameAuthor = docs.every(doc => doc?.author === docs[0]?.author);
 
         // the owner of the doc and the current user are placed at the top of the user list.
         userListContents.unshift(
-            sameAuthor ?
-                (
-                    <div
-                        key={"owner"}
-                        className={"container"}
-                    >
-                        <span className={"padding"}>{targetDoc?.author === Doc.CurrentUserEmail ? "Me" : targetDoc?.author}</span>
-                        <div className="edit-actions">
-                            <div className={"permissions-dropdown"}>
-                                Owner
-                            </div>
-                        </div>
+            sameAuthor ? (
+                <div key={'owner'} className={'container'}>
+                    <span className={'padding'}>{targetDoc?.author === Doc.CurrentUserEmail ? 'Me' : targetDoc?.author}</span>
+                    <div className="edit-actions">
+                        <div className={'permissions-dropdown'}>Owner</div>
                     </div>
-                ) : null,
-            sameAuthor && targetDoc?.author !== Doc.CurrentUserEmail ?
-                (
-                    <div
-                        key={"me"}
-                        className={"container"}
-                    >
-                        <span className={"padding"}>Me</span>
-                        <div className="edit-actions">
-                            <div className={"permissions-dropdown"}>
-                                {effectiveAcls.every(acl => acl === effectiveAcls[0]) ? this.AclMap.get(effectiveAcls[0])! : "-multiple-"}
-                            </div>
-                        </div>
+                </div>
+            ) : null,
+            sameAuthor && targetDoc?.author !== Doc.CurrentUserEmail ? (
+                <div key={'me'} className={'container'}>
+                    <span className={'padding'}>Me</span>
+                    <div className="edit-actions">
+                        <div className={'permissions-dropdown'}>{effectiveAcls.every(acl => acl === effectiveAcls[0]) ? this.AclMap.get(effectiveAcls[0])! : '-multiple-'}</div>
                     </div>
-                ) : null
+                </div>
+            ) : null
         );
 
-
         // the list of groups shared with
-        const groupListMap: (Doc | { title: string })[] = groups.filter(({ title }) => docs.length > 1 ? commonKeys.includes(`acl-${normalizeEmail(StrCast(title))}`) : true);
-        groupListMap.unshift({ title: "Public" });//, { title: "ALL" });
+        const groupListMap: (Doc | { title: string })[] = groups.filter(({ title }) => (docs.length > 1 ? commonKeys.includes(`acl-${normalizeEmail(StrCast(title))}`) : true));
+        groupListMap.unshift({ title: 'Public' }); //, { title: "ALL" });
         const groupListContents = groupListMap.map(group => {
             const groupKey = `acl-${StrCast(group.title)}`;
-            const uniform = docs.every(doc => this.layoutDocAcls ? doc?.[AclSym]?.[groupKey] === docs[0]?.[AclSym]?.[groupKey] : doc?.[DataSym]?.[AclSym]?.[groupKey] === docs[0]?.[DataSym]?.[AclSym]?.[groupKey]);
-            const permissions = uniform ? StrCast(targetDoc?.[`acl-${StrCast(group.title)}`]) : "-multiple-";
-
-            return !permissions ? (null) : (
-                <div
-                    key={groupKey}
-                    className={"container"}
-                >
-                    <div className={"padding"}>{group.title}</div>
-                    {group instanceof Doc ?
-                        (<div className="group-info" onClick={action(() => GroupManager.Instance.currentGroup = group)}>
-                            <FontAwesomeIcon icon={"info-circle"} color={"#e8e8e8"} size={"sm"} style={{ backgroundColor: "#1e89d7", borderRadius: "100%", border: "1px solid #1e89d7" }} />
-                        </div>)
-                        : (null)}
+            const uniform = docs.every(doc => (this.layoutDocAcls ? doc?.[AclSym]?.[groupKey] === docs[0]?.[AclSym]?.[groupKey] : doc?.[DataSym]?.[AclSym]?.[groupKey] === docs[0]?.[DataSym]?.[AclSym]?.[groupKey]));
+            const permissions = uniform ? StrCast(targetDoc?.[`acl-${StrCast(group.title)}`]) : '-multiple-';
+
+            return !permissions ? null : (
+                <div key={groupKey} className={'container'}>
+                    <div className={'padding'}>{StrCast(group.title)}</div>
+                    {group instanceof Doc ? (
+                        <div className="group-info" onClick={action(() => (GroupManager.Instance.currentGroup = group))}>
+                            <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} />
+                        </div>
+                    ) : null}
                     <div className="edit-actions">
                         {admin || this.myDocAcls ? (
-                            <select
-                                className={"permissions-dropdown"}
-                                value={permissions}
-                                onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}
-                            >
-                                {this.sharingOptions(uniform, group.title === "Override")}
+                            <select className={'permissions-dropdown'} value={permissions} onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}>
+                                {this.sharingOptions(uniform, group.title === 'Override')}
                             </select>
                         ) : (
-                            <div className={"permissions-dropdown"}>
-                                {permissions}
-                            </div>
+                            <div className={'permissions-dropdown'}>{permissions}</div>
                         )}
                     </div>
                 </div>
@@ -632,102 +609,95 @@ export class SharingManager extends React.Component<{}> {
         });
 
         return (
-            <div className={"sharing-interface"}>
-                {GroupManager.Instance?.currentGroup ?
-                    <GroupMemberView
-                        group={GroupManager.Instance.currentGroup}
-                        onCloseButtonClick={action(() => GroupManager.Instance.currentGroup = undefined)}
-                    /> :
-                    null}
+            <div className={'sharing-interface'}>
+                {GroupManager.Instance?.currentGroup ? <GroupMemberView group={GroupManager.Instance.currentGroup} onCloseButtonClick={action(() => (GroupManager.Instance.currentGroup = undefined))} /> : null}
                 <div className="sharing-contents">
-                    <p className={"share-title"}><b>Share </b>{this.focusOn(docs.length < 2 ? StrCast(targetDoc?.title, "this document") : "-multiple-")}</p>
-                    <div className={"close-button"} onClick={this.close}>
-                        <FontAwesomeIcon icon={"times"} color={"black"} size={"lg"} />
+                    <p className={'share-title'}>
+                        <b>Share </b>
+                        {this.focusOn(docs.length < 2 ? StrCast(targetDoc?.title, 'this document') : '-multiple-')}
+                    </p>
+                    <div className={'close-button'} onClick={this.close}>
+                        <FontAwesomeIcon icon={'times'} color={'black'} size={'lg'} />
                     </div>
                     {/* {this.linkVisible ?
                         <div>
                             {this.sharingUrl}
                         </div> :
                         (null)} */}
-                    {<div className="share-container">
-                        <div className="share-setup">
-                            <Select
-                                className="user-search"
-                                placeholder="Enter user or group name..."
-                                isMulti
-                                isSearchable
-                                closeMenuOnSelect={false}
-                                options={options}
-                                onKeyDown={e => e.stopPropagation()}
-                                onChange={this.handleUsersChange}
-                                value={this.selectedUsers}
-                                styles={{
-                                    indicatorSeparator: () => ({
-                                        visibility: "hidden"
-                                    })
-                                }}
-                            />
-                            <select className="permissions-select" onChange={this.handlePermissionsChange} value={this.permissions}>
-                                {this.sharingOptions(true)}
-                            </select>
-                            <button ref={this.shareDocumentButtonRef} className="share-button" onClick={this.share}>
-                                Share
-                            </button>
-                        </div>
-                        <div className="sort-checkboxes">
-                            <input type="checkbox" onChange={action(() => this.showUserOptions = !this.showUserOptions)} /> <label style={{ marginRight: 10 }}>Individuals</label>
-                            <input type="checkbox" onChange={action(() => this.showGroupOptions = !this.showGroupOptions)} /> <label>Groups</label>
-                        </div>
+                    {
+                        <div className="share-container">
+                            <div className="share-setup">
+                                <Select
+                                    className="user-search"
+                                    placeholder="Enter user or group name..."
+                                    isMulti
+                                    isSearchable
+                                    closeMenuOnSelect={false}
+                                    options={options}
+                                    onKeyDown={e => e.stopPropagation()}
+                                    onChange={this.handleUsersChange}
+                                    value={this.selectedUsers}
+                                    styles={{
+                                        indicatorSeparator: () => ({
+                                            visibility: 'hidden',
+                                        }),
+                                    }}
+                                />
+                                <select className="permissions-select" onChange={this.handlePermissionsChange} value={this.permissions}>
+                                    {this.sharingOptions(true)}
+                                </select>
+                                <button ref={this.shareDocumentButtonRef} className="share-button" onClick={this.share}>
+                                    Share
+                                </button>
+                            </div>
+                            <div className="sort-checkboxes">
+                                <input type="checkbox" onChange={action(() => (this.showUserOptions = !this.showUserOptions))} /> <label style={{ marginRight: 10 }}>Individuals</label>
+                                <input type="checkbox" onChange={action(() => (this.showGroupOptions = !this.showGroupOptions))} /> <label>Groups</label>
+                            </div>
 
-                        <div className="acl-container">
-                            {Doc.noviceMode ? (null) :
-                                <div className="layoutDoc-acls">
-                                    <input type="checkbox" onChange={action(() => this.layoutDocAcls = !this.layoutDocAcls)} checked={this.layoutDocAcls} /> <label>Layout</label>
-                                </div>}
+                            <div className="acl-container">
+                                {Doc.noviceMode ? null : (
+                                    <div className="layoutDoc-acls">
+                                        <input type="checkbox" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} /> <label>Layout</label>
+                                    </div>
+                                )}
+                            </div>
                         </div>
-                    </div>
                     }
                     <div className="main-container">
-                        <div className={"individual-container"}>
-                            <div
-                                className="user-sort"
-                                onClick={action(() => this.individualSort = this.individualSort === "ascending" ? "descending" : this.individualSort === "descending" ? "none" : "ascending")}>
-                                Individuals {this.individualSort === "ascending" ? <FontAwesomeIcon icon={"caret-up"} size={"xs"} />
-                                    : this.individualSort === "descending" ? <FontAwesomeIcon icon={"caret-down"} size={"xs"} />
-                                        : <FontAwesomeIcon icon={"caret-right"} size={"xs"} />}
-                            </div>
-                            <div className={"users-list"}>
-                                {userListContents}
+                        <div className={'individual-container'}>
+                            <div className="user-sort" onClick={action(() => (this.individualSort = this.individualSort === 'ascending' ? 'descending' : this.individualSort === 'descending' ? 'none' : 'ascending'))}>
+                                Individuals{' '}
+                                {this.individualSort === 'ascending' ? (
+                                    <FontAwesomeIcon icon={'caret-up'} size={'xs'} />
+                                ) : this.individualSort === 'descending' ? (
+                                    <FontAwesomeIcon icon={'caret-down'} size={'xs'} />
+                                ) : (
+                                    <FontAwesomeIcon icon={'caret-right'} size={'xs'} />
+                                )}
                             </div>
+                            <div className={'users-list'}>{userListContents}</div>
                         </div>
-                        <div className={"group-container"}>
-                            <div
-                                className="user-sort"
-                                onClick={action(() => this.groupSort = this.groupSort === "ascending" ? "descending" : this.groupSort === "descending" ? "none" : "ascending")}>
-                                Groups {this.groupSort === "ascending" ? <FontAwesomeIcon icon={"caret-up"} size={"xs"} />
-                                    : this.groupSort === "descending" ? <FontAwesomeIcon icon={"caret-down"} size={"xs"} />
-                                        : <FontAwesomeIcon icon={"caret-right"} size={"xs"} />}
-
-                            </div>
-                            <div className={"groups-list"}>
-                                {groupListContents}
+                        <div className={'group-container'}>
+                            <div className="user-sort" onClick={action(() => (this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'))}>
+                                Groups{' '}
+                                {this.groupSort === 'ascending' ? (
+                                    <FontAwesomeIcon icon={'caret-up'} size={'xs'} />
+                                ) : this.groupSort === 'descending' ? (
+                                    <FontAwesomeIcon icon={'caret-down'} size={'xs'} />
+                                ) : (
+                                    <FontAwesomeIcon icon={'caret-right'} size={'xs'} />
+                                )}
                             </div>
+                            <div className={'groups-list'}>{groupListContents}</div>
                         </div>
                     </div>
-
                 </div>
             </div>
         );
     }
 
     render() {
-        return <MainViewModal
-            contents={this.sharingInterface}
-            isDisplayed={this.isOpen}
-            interactive={true}
-            dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
-            overlayDisplayedOpacity={this.overlayOpacity}
-            closeOnExternalClick={this.close}
-        />;
+        return <MainViewModal contents={this.sharingInterface} isDisplayed={this.isOpen} interactive={true} dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity} overlayDisplayedOpacity={this.overlayOpacity} closeOnExternalClick={this.close} />;
     }
-}
\ No newline at end of file
+}