Fix render performance and avoid re-rendering rows constantly

Author: DaneEveritt

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`}

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>
+    );
+};

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;