From 58a8d986cfc44ce3d79f7bc7039975a6ec97271b Mon Sep 17 00:00:00 2001
From: vmaggioli <vinmags16@gmail.com>
Date: Sun, 8 Mar 2020 18:57:09 -0400
Subject: [PATCH 01/11] Add play all function

---
 app/components/FileLoader.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js
index f85388759..eeb643cd1 100644
--- a/app/components/FileLoader.js
+++ b/app/components/FileLoader.js
@@ -172,6 +172,11 @@ export default class FileLoader extends Component {
     });
   };
 
+  queueAllFiles = () => {
+    const filteredFiles = this.processFiles(this.state.files)
+    this.props.queueFiles(_.reverse(filteredFiles));
+  }
+
   renderGlobalError() {
     const errors = this.props.errors || {};
     const errorKey = 'fileLoader-global';
@@ -405,10 +410,14 @@ export default class FileLoader extends Component {
   }
 
   renderQueueButtons() {
-    if (this.state.selections.length === 0) {
-      return;
-    }
-    return (
+    return this.state.selections.length === 0 ? (
+      <div className={styles['queue-buttons']}>
+        <Button onClick={this.queueAllFiles}>
+          <Icon name="play circle" />
+          Play all
+        </Button>
+      </div>
+    ) : (
       <div className={styles['queue-buttons']}>
         <Button onClick={this.queueFiles}>
           <Icon name="play circle" />

From 04f1749bce59a1323ac334e242cdafbdb21f6635 Mon Sep 17 00:00:00 2001
From: vmaggioli <vinmags16@gmail.com>
Date: Mon, 9 Mar 2020 10:25:51 -0400
Subject: [PATCH 02/11] Switch to select all functionality

---
 app/components/FileLoader.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js
index eeb643cd1..5f31dce9f 100644
--- a/app/components/FileLoader.js
+++ b/app/components/FileLoader.js
@@ -172,9 +172,8 @@ export default class FileLoader extends Component {
     });
   };
 
-  queueAllFiles = () => {
-    const filteredFiles = this.processFiles(this.state.files)
-    this.props.queueFiles(_.reverse(filteredFiles));
+  selectAll = () => {
+    this.setState({ selections: this.props.store.files });
   }
 
   renderGlobalError() {
@@ -412,9 +411,9 @@ export default class FileLoader extends Component {
   renderQueueButtons() {
     return this.state.selections.length === 0 ? (
       <div className={styles['queue-buttons']}>
-        <Button onClick={this.queueAllFiles}>
-          <Icon name="play circle" />
-          Play all
+        <Button onClick={this.selectAll}>
+          <Icon name="plus" />
+          Select all
         </Button>
       </div>
     ) : (

From ab640f821416774c0cc0ac6019c077f1f124660a Mon Sep 17 00:00:00 2001
From: Fair2Dare <vinmags16@gmail.com>
Date: Sat, 14 Mar 2020 15:59:59 -0400
Subject: [PATCH 03/11] Switch select all to checkbox

---
 app/components/FileLoader.js   | 34 ++++++++++++++++++++++++----------
 app/components/FileLoader.scss | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js
index 5f31dce9f..b9e83d853 100644
--- a/app/components/FileLoader.js
+++ b/app/components/FileLoader.js
@@ -12,6 +12,7 @@ import {
   Loader,
   Visibility,
 } from 'semantic-ui-react';
+import classNames from 'classnames';
 import styles from './FileLoader.scss';
 import FileRow from './FileRow';
 import DismissibleMessage from './common/DismissibleMessage';
@@ -51,6 +52,7 @@ export default class FileLoader extends Component {
 
     this.state = {
       selections: [],
+      areAllSelected: false,
     };
   }
 
@@ -127,6 +129,7 @@ export default class FileLoader extends Component {
 
     this.setState({
       selections: newSelections,
+      areAllSelected: newSelections.length === this.props.store.files.length,
     });
   };
 
@@ -162,6 +165,7 @@ export default class FileLoader extends Component {
   queueClear = () => {
     this.setState({
       selections: [],
+      areAllSelected: false,
     });
   };
 
@@ -173,7 +177,10 @@ export default class FileLoader extends Component {
   };
 
   selectAll = () => {
-    this.setState({ selections: this.props.store.files });
+    this.setState((prevState) => ({
+      selections: prevState.areAllSelected ? [] : this.props.store.files,
+      areAllSelected: !prevState.areAllSelected,
+    }));
   }
 
   renderGlobalError() {
@@ -339,10 +346,21 @@ export default class FileLoader extends Component {
       return this.renderEmptyLoader();
     }
 
+    const cellStyles = classNames({
+      [styles['select-cell']]: true,
+      [styles['selected']]: this.state.areAllSelected,
+    });
+
+    const selectAllIcon = this.state.areAllSelected ? (
+      <Icon size="big" name="check square outline" onClick={this.selectAll} className={cellStyles} />
+    ) : (
+      <Icon size="big" name="square outline" onClick={this.selectAll} className={cellStyles} />
+    )
+
     // Generate header row
     const headerRow = (
       <Table.Row>
-        <Table.HeaderCell />
+        <Table.HeaderCell>{selectAllIcon}</Table.HeaderCell>
         <Table.HeaderCell>Details</Table.HeaderCell>
         <Table.HeaderCell>Time</Table.HeaderCell>
         <Table.HeaderCell />
@@ -409,14 +427,10 @@ export default class FileLoader extends Component {
   }
 
   renderQueueButtons() {
-    return this.state.selections.length === 0 ? (
-      <div className={styles['queue-buttons']}>
-        <Button onClick={this.selectAll}>
-          <Icon name="plus" />
-          Select all
-        </Button>
-      </div>
-    ) : (
+    if (this.state.selections.length === 0) {
+      return;
+    }
+    return (
       <div className={styles['queue-buttons']}>
         <Button onClick={this.queueFiles}>
           <Icon name="play circle" />
diff --git a/app/components/FileLoader.scss b/app/components/FileLoader.scss
index b4ad32709..117ad957a 100644
--- a/app/components/FileLoader.scss
+++ b/app/components/FileLoader.scss
@@ -80,4 +80,34 @@
     cursor: pointer;
     text-decoration: underline;
   }
-}
\ No newline at end of file
+}
+
+.select-cell {
+  margin-left: 10px !important;
+
+  i {
+    color: #94969A;
+  }
+
+  i:hover {
+    color: #FFFFFF;
+    cursor: pointer;
+  }
+
+  &.selected {
+    i {
+      color: rgba(255, 255, 255, 0.75);
+    }
+
+    i:hover {
+      color: #FFFFFF;
+      cursor: pointer;
+    }
+  }
+
+  .pos-text {
+    margin-left: 4px;
+    font-weight: bold;
+    color: rgba(255, 255, 255, 0.5);
+  }
+}

From 9e90390bb5a0dc7ab4f9dd7085a2cc4d4a4f95fa Mon Sep 17 00:00:00 2001
From: Fair2Dare <vinmags16@gmail.com>
Date: Mon, 16 Mar 2020 14:41:44 -0400
Subject: [PATCH 04/11] Add shift+enter selecting

---
 app/components/FileLoader.js   | 53 ++++++++++++++++++++++++++++++++--
 app/components/FileLoader.scss |  4 +++
 app/components/FileRow.js      |  2 +-
 app/utils/keymap.js            | 11 +++++++
 4 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 app/utils/keymap.js

diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js
index b9e83d853..2b2e7335f 100644
--- a/app/components/FileLoader.js
+++ b/app/components/FileLoader.js
@@ -22,6 +22,8 @@ import PageWrapper from './PageWrapper';
 import Scroller from './common/Scroller';
 import { MIN_GAME_LENGTH_SECONDS } from '../actions/fileLoader';
 
+import keymap from '../utils/keymap'
+
 const GAME_BATCH_SIZE = 50;
 
 export default class FileLoader extends Component {
@@ -112,7 +114,14 @@ export default class FileLoader extends Component {
     this.refTableScroll = element;
   };
 
-  onSelect = selectedFile => {
+  onSelect = (selectedFile, fileIndex) => {
+    // shift clicking has gmail behavior
+    console.log(keymap.Shift);
+    if (keymap.Shift) {
+      this.handleShiftSelect(selectedFile, fileIndex);
+      return;
+    }
+
     const newSelections = [];
 
     let wasSeen = false;
@@ -133,6 +142,44 @@ export default class FileLoader extends Component {
     });
   };
 
+  handleShiftSelect = (selectedFile, fileIndex) => {
+    // Shift clicking on an already selected file removes all consecutive selections on and after it
+    // eslint-disable-next-line react/no-access-state-in-setstate
+    let newSelections = [...this.state.selections];
+    const files = this.props.store.files;
+    if (this.state.selections.indexOf(selectedFile) !== -1) {
+      const startingFileIndex = files.indexOf(selectedFile);
+      let numToRemove = 0;
+      for (let i = startingFileIndex; i < files.length; i++) {
+        if (this.state.selections.indexOf(files[i]) === -1) {
+          break;
+        }
+        numToRemove++;
+      }
+      newSelections.splice(this.state.selections.indexOf(selectedFile), numToRemove);
+      this.setState({
+        selections: newSelections,
+        areAllSelected: newSelections.length === this.props.store.files.length,
+      });
+      return;
+    }
+
+    // Shift clicking on a not selected file selects all files before it up to another already selected file
+    let newFiles = [];
+    for (let i = fileIndex; i >= 0; i--) {
+      if (this.state.selections.indexOf(files[i]) !== -1) {
+        break;
+      }
+      newFiles.push(files[i]);
+    }
+    newFiles = newFiles.reverse();
+    newSelections = [...this.state.selections, ...newFiles];
+    this.setState({
+      selections: newSelections,
+      areAllSelected: newSelections.length === this.props.store.files.length,
+    });
+  };
+
   renderSidebar() {
     const store = this.props.store || {};
 
@@ -361,8 +408,8 @@ export default class FileLoader extends Component {
     const headerRow = (
       <Table.Row>
         <Table.HeaderCell>{selectAllIcon}</Table.HeaderCell>
-        <Table.HeaderCell>Details</Table.HeaderCell>
-        <Table.HeaderCell>Time</Table.HeaderCell>
+        <Table.HeaderCell className={styles['table-header']}>Details</Table.HeaderCell>
+        <Table.HeaderCell className={styles['table-header']}>Time</Table.HeaderCell>
         <Table.HeaderCell />
       </Table.Row>
     );
diff --git a/app/components/FileLoader.scss b/app/components/FileLoader.scss
index 117ad957a..168dab1b5 100644
--- a/app/components/FileLoader.scss
+++ b/app/components/FileLoader.scss
@@ -111,3 +111,7 @@
     color: rgba(255, 255, 255, 0.5);
   }
 }
+
+.table-header {
+  font-size: 1.2em;
+}
diff --git a/app/components/FileRow.js b/app/components/FileRow.js
index c58bd09c3..4c6bccd38 100644
--- a/app/components/FileRow.js
+++ b/app/components/FileRow.js
@@ -57,7 +57,7 @@ export default class FileRow extends Component {
   };
 
   onSelect = () => {
-    this.props.onSelect(this.props.file);
+    this.props.onSelect(this.props.file, this.props.fileIndex);
   };
 
   viewStats = (e) => {
diff --git a/app/utils/keymap.js b/app/utils/keymap.js
new file mode 100644
index 000000000..5b4c22fbf
--- /dev/null
+++ b/app/utils/keymap.js
@@ -0,0 +1,11 @@
+const keyMap = {};
+
+document.addEventListener('keydown', (event) => {
+  keyMap[event.key] = true;
+});
+
+document.addEventListener('keyup', (event) => {
+  keyMap[event.key] = false;
+});
+
+export default keyMap;

From e1ca289680a06b06e31709e2b4fc379ff7cf1cbc Mon Sep 17 00:00:00 2001
From: Fair2Dare <vinmags16@gmail.com>
Date: Wed, 18 Mar 2020 10:43:16 -0400
Subject: [PATCH 05/11] Add vertical align for table headers

---
 app/components/FileLoader.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js
index 2b2e7335f..55c697718 100644
--- a/app/components/FileLoader.js
+++ b/app/components/FileLoader.js
@@ -407,9 +407,9 @@ export default class FileLoader extends Component {
     // Generate header row
     const headerRow = (
       <Table.Row>
-        <Table.HeaderCell>{selectAllIcon}</Table.HeaderCell>
-        <Table.HeaderCell className={styles['table-header']}>Details</Table.HeaderCell>
-        <Table.HeaderCell className={styles['table-header']}>Time</Table.HeaderCell>
+        <Table.HeaderCell verticalAlign="bottom">{selectAllIcon}</Table.HeaderCell>
+        <Table.HeaderCell verticalAlign="bottom" className={styles['table-header']}>Details</Table.HeaderCell>
+        <Table.HeaderCell verticalAlign="bottom" className={styles['table-header']}>Time</Table.HeaderCell>
         <Table.HeaderCell />
       </Table.Row>
     );

From e6cd02df733130daf3980dc71f86cb8a3b31fd45 Mon Sep 17 00:00:00 2001
From: Vince Au <vinceau09@gmail.com>
Date: Sun, 29 Nov 2020 15:22:29 +1100
Subject: [PATCH 06/11] Clean up key listeners on unmount

---
 app/components/FileLoader.js | 22 ++++++++++++++++++----
 app/utils/keymap.js          | 11 -----------
 2 files changed, 18 insertions(+), 15 deletions(-)
 delete mode 100644 app/utils/keymap.js

diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js
index 55c697718..4461e05ae 100644
--- a/app/components/FileLoader.js
+++ b/app/components/FileLoader.js
@@ -22,8 +22,6 @@ import PageWrapper from './PageWrapper';
 import Scroller from './common/Scroller';
 import { MIN_GAME_LENGTH_SECONDS } from '../actions/fileLoader';
 
-import keymap from '../utils/keymap'
-
 const GAME_BATCH_SIZE = 50;
 
 export default class FileLoader extends Component {
@@ -55,6 +53,7 @@ export default class FileLoader extends Component {
     this.state = {
       selections: [],
       areAllSelected: false,
+      shiftPressed: false,
     };
   }
 
@@ -78,6 +77,10 @@ export default class FileLoader extends Component {
 
       this.refTableScroll.scrollTo(xPos, yPos);
     }
+
+    // Listen for the shift key
+    document.addEventListener("keydown", this.shiftKeyListener);
+    document.addEventListener("keyup", this.shiftKeyListener);
   }
 
   componentDidUpdate(prevProps) {
@@ -106,6 +109,18 @@ export default class FileLoader extends Component {
     });
 
     this.props.dismissError('fileLoader-global');
+
+    // Stop listening for the shift key
+    document.removeEventListener("keydown", this.shiftKeyListener);
+    document.removeEventListener("keyup", this.shiftKeyListener);
+  }
+
+  shiftKeyListener(event) {
+    if (event.key === "Shift") {
+      this.setState({
+        shiftPressed: Boolean(event.type === "keydown"),
+      });
+    }
   }
 
   refTableScroll = null;
@@ -116,8 +131,7 @@ export default class FileLoader extends Component {
 
   onSelect = (selectedFile, fileIndex) => {
     // shift clicking has gmail behavior
-    console.log(keymap.Shift);
-    if (keymap.Shift) {
+    if (this.state.shiftPressed) {
       this.handleShiftSelect(selectedFile, fileIndex);
       return;
     }
diff --git a/app/utils/keymap.js b/app/utils/keymap.js
deleted file mode 100644
index 5b4c22fbf..000000000
--- a/app/utils/keymap.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const keyMap = {};
-
-document.addEventListener('keydown', (event) => {
-  keyMap[event.key] = true;
-});
-
-document.addEventListener('keyup', (event) => {
-  keyMap[event.key] = false;
-});
-
-export default keyMap;

From 04d6644302f072f8fbf2b9edf8338b9718c87863 Mon Sep 17 00:00:00 2001
From: Vince Au <vinceau09@gmail.com>
Date: Sun, 29 Nov 2020 15:25:25 +1100
Subject: [PATCH 07/11] Fix shift key listener binding

---
 app/components/FileLoader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js
index 4461e05ae..3b9f7ec59 100644
--- a/app/components/FileLoader.js
+++ b/app/components/FileLoader.js
@@ -115,7 +115,7 @@ export default class FileLoader extends Component {
     document.removeEventListener("keyup", this.shiftKeyListener);
   }
 
-  shiftKeyListener(event) {
+  shiftKeyListener = (event) => {
     if (event.key === "Shift") {
       this.setState({
         shiftPressed: Boolean(event.type === "keydown"),

From f7c2e7914bd77d6cd22ea26ac259622912f11ea9 Mon Sep 17 00:00:00 2001
From: Vince Au <vinceau09@gmail.com>
Date: Sun, 29 Nov 2020 15:26:39 +1100
Subject: [PATCH 08/11] Disable user text selection

---
 app/components/FileLoader.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/FileLoader.scss b/app/components/FileLoader.scss
index 168dab1b5..414fad06a 100644
--- a/app/components/FileLoader.scss
+++ b/app/components/FileLoader.scss
@@ -28,6 +28,7 @@
 }
 
 .file-table {
+  user-select: none;
   min-width: 600px;
 }
 

From 99ff29a357db5d8851dcdfe1d8a6f44e0a924e65 Mon Sep 17 00:00:00 2001
From: Nikhil Narayana <nikhil.narayana@live.com>
Date: Sat, 28 Nov 2020 20:34:27 -0800
Subject: [PATCH 09/11] fix styling on the select all checkbox

---
 app/components/FileLoader.js   | 10 +++++++---
 app/components/FileLoader.scss | 18 +++++++++++++-----
 app/components/FileRow.scss    | 14 +++++++-------
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js
index 3b9f7ec59..51a6ce717 100644
--- a/app/components/FileLoader.js
+++ b/app/components/FileLoader.js
@@ -412,16 +412,20 @@ export default class FileLoader extends Component {
       [styles['selected']]: this.state.areAllSelected,
     });
 
+    const iconStyle = classNames({ [styles['select-all-icon']]: true})
+
+    console.log(this.state.areAllSelected);
+
     const selectAllIcon = this.state.areAllSelected ? (
-      <Icon size="big" name="check square outline" onClick={this.selectAll} className={cellStyles} />
+      <Icon size="big" name="check square outline" onClick={this.selectAll} className={iconStyle} />
     ) : (
-      <Icon size="big" name="square outline" onClick={this.selectAll} className={cellStyles} />
+      <Icon size="big" name="square outline" onClick={this.selectAll} className={iconStyle} />
     )
 
     // Generate header row
     const headerRow = (
       <Table.Row>
-        <Table.HeaderCell verticalAlign="bottom">{selectAllIcon}</Table.HeaderCell>
+        <Table.HeaderCell verticalAlign="bottom" className={cellStyles} >{selectAllIcon}</Table.HeaderCell>
         <Table.HeaderCell verticalAlign="bottom" className={styles['table-header']}>Details</Table.HeaderCell>
         <Table.HeaderCell verticalAlign="bottom" className={styles['table-header']}>Time</Table.HeaderCell>
         <Table.HeaderCell />
diff --git a/app/components/FileLoader.scss b/app/components/FileLoader.scss
index 414fad06a..d0715fc94 100644
--- a/app/components/FileLoader.scss
+++ b/app/components/FileLoader.scss
@@ -1,4 +1,4 @@
-@import "../colors.global.scss";
+@import '../colors.global.scss';
 
 .layout {
   display: grid;
@@ -83,15 +83,19 @@
   }
 }
 
-.select-cell {
+.select-all-icon {
   margin-left: 10px !important;
+}
+
+.select-cell {
+  margin: 6px !important;
 
   i {
-    color: #94969A;
+    color: #94969a;
   }
 
   i:hover {
-    color: #FFFFFF;
+    color: #ffffff;
     cursor: pointer;
   }
 
@@ -101,7 +105,7 @@
     }
 
     i:hover {
-      color: #FFFFFF;
+      color: #ffffff;
       cursor: pointer;
     }
   }
@@ -111,6 +115,10 @@
     font-weight: bold;
     color: rgba(255, 255, 255, 0.5);
   }
+
+  .select-content-wrapper {
+    margin-left: 10px;
+  }
 }
 
 .table-header {
diff --git a/app/components/FileRow.scss b/app/components/FileRow.scss
index 445ee5111..e56cbe524 100644
--- a/app/components/FileRow.scss
+++ b/app/components/FileRow.scss
@@ -21,13 +21,13 @@
 .actions-cell {
   text-align: center;
 
-  button>i {
-    color: #94969A;
+  button > i {
+    color: #94969a;
   }
 
   button:hover {
     i {
-      color: #FFFFFF;
+      color: #ffffff;
     }
   }
 }
@@ -36,11 +36,11 @@
   margin: 6px !important;
 
   i {
-    color: #94969A;
+    color: #94969a;
   }
 
   i:hover {
-    color: #FFFFFF;
+    color: #ffffff;
     cursor: pointer;
   }
 
@@ -50,7 +50,7 @@
     }
 
     i:hover {
-      color: #FFFFFF;
+      color: #ffffff;
       cursor: pointer;
     }
   }
@@ -83,4 +83,4 @@
     cursor: pointer;
     text-decoration: underline;
   }
-}
\ No newline at end of file
+}

From e93d7c2dcd9d97af2ed9e022659bfbe0a727b955 Mon Sep 17 00:00:00 2001
From: Nikhil Narayana <nikhil.narayana@live.com>
Date: Sat, 28 Nov 2020 20:35:16 -0800
Subject: [PATCH 10/11] remove extra log

---
 app/components/FileLoader.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js
index 51a6ce717..f16607921 100644
--- a/app/components/FileLoader.js
+++ b/app/components/FileLoader.js
@@ -414,8 +414,6 @@ export default class FileLoader extends Component {
 
     const iconStyle = classNames({ [styles['select-all-icon']]: true})
 
-    console.log(this.state.areAllSelected);
-
     const selectAllIcon = this.state.areAllSelected ? (
       <Icon size="big" name="check square outline" onClick={this.selectAll} className={iconStyle} />
     ) : (

From daae08c10306fc89dbefafb2e5aa27fcf5fff19f Mon Sep 17 00:00:00 2001
From: Nikhil Narayana <nikhil.narayana@live.com>
Date: Sat, 28 Nov 2020 20:47:05 -0800
Subject: [PATCH 11/11] clear select all if unfiltering and check the correct
 files array

---
 app/components/FileLoader.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/FileLoader.js b/app/components/FileLoader.js
index f16607921..fb23f2401 100644
--- a/app/components/FileLoader.js
+++ b/app/components/FileLoader.js
@@ -239,7 +239,7 @@ export default class FileLoader extends Component {
 
   selectAll = () => {
     this.setState((prevState) => ({
-      selections: prevState.areAllSelected ? [] : this.props.store.files,
+      selections: prevState.areAllSelected ? [] : (this.props.store.filterReplays ? this.props.store.files : this.props.store.allFiles) || [],
       areAllSelected: !prevState.areAllSelected,
     }));
   }
@@ -300,6 +300,7 @@ export default class FileLoader extends Component {
       this.props.setFilterReplays(false);
       this.setState({
         selections: [],
+        areAllSelected: false,
       });
     }