From cb3288500aa0bc2475295c7c7aaa9224f93302d7 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 11 Jul 2020 16:57:30 -0700
Subject: [PATCH] Fix render performance and avoid re-rendering rows constantly

---
 .../components/server/files/FileObjectRow.tsx | 30 +-------------
 .../server/files/SelectFileCheckbox.tsx       | 39 +++++++++++++++++++
 resources/scripts/state/server/files.ts       | 10 +++++
 3 files changed, 51 insertions(+), 28 deletions(-)
 create mode 100644 resources/scripts/components/server/files/SelectFileCheckbox.tsx

diff --git a/resources/scripts/components/server/files/FileObjectRow.tsx b/resources/scripts/components/server/files/FileObjectRow.tsx
index c95698f4f..934fd6320 100644
--- a/resources/scripts/components/server/files/FileObjectRow.tsx
+++ b/resources/scripts/components/server/files/FileObjectRow.tsx
@@ -10,27 +10,15 @@ import { NavLink, useHistory, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 import isEqual from 'react-fast-compare';
 import styled from 'styled-components/macro';
-import Input from '@/components/elements/Input';
+import SelectFileCheckbox from '@/components/server/files/SelectFileCheckbox';
 
 const Row = styled.div`
     ${tw`flex bg-neutral-700 rounded-sm mb-px text-sm hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600`};
 `;
 
-const Checkbox = styled(Input)`
-    && {
-        ${tw`border-neutral-500`};
-        
-        &:not(:checked) {
-            ${tw`hover:border-neutral-300`};
-        }
-    }
-`;
-
 const FileObjectRow = ({ file }: { file: FileObject }) => {
     const directory = ServerContext.useStoreState(state => state.files.directory);
-    const selectedFiles = ServerContext.useStoreState(state => state.files.selectedFiles);
     const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
-    const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
 
     const history = useHistory();
     const match = useRouteMatch();
@@ -57,21 +45,7 @@ const FileObjectRow = ({ file }: { file: FileObject }) => {
                 window.dispatchEvent(new CustomEvent(`pterodactyl:files:ctx:${file.uuid}`, { detail: e.clientX }));
             }}
         >
-            <label css={tw`flex-none p-4 absolute self-center z-30 cursor-pointer`}>
-                <Checkbox
-                    name={'selectedFiles'}
-                    value={file.name}
-                    checked={selectedFiles.indexOf(file.name) >= 0}
-                    type={'checkbox'}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        if (e.currentTarget.checked) {
-                            setSelectedFiles(selectedFiles.filter(f => f !== file.name).concat(file.name));
-                        } else {
-                            setSelectedFiles(selectedFiles.filter(f => f !== file.name));
-                        }
-                    }}
-                />
-            </label>
+            <SelectFileCheckbox name={file.name}/>
             <NavLink
                 to={`${match.url}/${file.isFile ? 'edit/' : ''}#${cleanDirectoryPath(`${directory}/${file.name}`)}`}
                 css={tw`flex flex-1 text-neutral-300 no-underline p-3`}
diff --git a/resources/scripts/components/server/files/SelectFileCheckbox.tsx b/resources/scripts/components/server/files/SelectFileCheckbox.tsx
new file mode 100644
index 000000000..d262d2dcc
--- /dev/null
+++ b/resources/scripts/components/server/files/SelectFileCheckbox.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import tw from 'twin.macro';
+import { ServerContext } from '@/state/server';
+import styled from 'styled-components/macro';
+import Input from '@/components/elements/Input';
+
+const Checkbox = styled(Input)`
+    && {
+        ${tw`border-neutral-500`};
+        
+        &:not(:checked) {
+            ${tw`hover:border-neutral-300`};
+        }
+    }
+`;
+
+export default ({ name }: { name: string }) => {
+    const isChecked = ServerContext.useStoreState(state => state.files.selectedFiles.indexOf(name) >= 0);
+    const appendSelectedFile = ServerContext.useStoreActions(actions => actions.files.appendSelectedFile);
+    const removeSelectedFile = ServerContext.useStoreActions(actions => actions.files.removeSelectedFile);
+
+    return (
+        <label css={tw`flex-none p-4 absolute self-center z-30 cursor-pointer`}>
+            <Checkbox
+                name={'selectedFiles'}
+                value={name}
+                checked={isChecked}
+                type={'checkbox'}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    if (e.currentTarget.checked) {
+                        appendSelectedFile(name);
+                    } else {
+                        removeSelectedFile(name);
+                    }
+                }}
+            />
+        </label>
+    );
+};
diff --git a/resources/scripts/state/server/files.ts b/resources/scripts/state/server/files.ts
index b2ba1a11b..04098572d 100644
--- a/resources/scripts/state/server/files.ts
+++ b/resources/scripts/state/server/files.ts
@@ -7,6 +7,8 @@ export interface ServerFileStore {
 
     setDirectory: Action<ServerFileStore, string>;
     setSelectedFiles: Action<ServerFileStore, string[]>;
+    appendSelectedFile: Action<ServerFileStore, string>;
+    removeSelectedFile: Action<ServerFileStore, string>;
 }
 
 const files: ServerFileStore = {
@@ -20,6 +22,14 @@ const files: ServerFileStore = {
     setSelectedFiles: action((state, payload) => {
         state.selectedFiles = payload;
     }),
+
+    appendSelectedFile: action((state, payload) => {
+        state.selectedFiles = state.selectedFiles.filter(f => f !== payload).concat(payload);
+    }),
+
+    removeSelectedFile: action((state, payload) => {
+        state.selectedFiles = state.selectedFiles.filter(f => f !== payload);
+    }),
 };
 
 export default files;