🔨 Remove jQuery & implement useEffect for event listener

YenHub · Jun 20, 2021 · b3b122f · b3b122f
1 parent 219281f
commit b3b122f
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 50 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -26,8 +26,6 @@
 <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script integrity="sha512-Y7qVUZ8537hMyRuTkXZ+HoeftU+6y/21fYQSpWMvqrp+OndzeLbeHVduOli2M3vHvg5uQzt8d9n5w//GXzeYsQ==" src="%PUBLIC_URL%/tableSort.js"></script>
 </body>
 
 </html>
diff --git a/client/public/tableSort.js b/client/public/tableSort.js
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -9,6 +9,7 @@ import { Scrollbar } from 'react-scrollbars-custom';
 import { store } from './Services/State/Store';
 
 import { setBoolSetting } from './Services/ReactUtils';
+import { sortTable } from './Services/BrowserUtils';
 
 const getTheme = (darkMode: boolean) => createMuiTheme({
     palette: {
@@ -38,14 +39,24 @@ const App: FC = () => {
     const { state } = globalState;
     const { darkMode, mdMode, previewMode } = state;
 
+    // Auto Table Sorting
+    useEffect(() => {
+        window.addEventListener('click', sortTable);
+
+        return () => window.removeEventListener('click', sortTable);
+    }, []);
+
+    // Settings: Darkmode
     useEffect(() => {
         setBoolSetting('darkMode', darkMode);
     }, [darkMode]);
 
+    // Settings: MarkDown Mode
     useEffect(() => {
         setBoolSetting('mdMode', mdMode);
     }, [mdMode]);
 
+    // Settings: MarkDown Preview Mode
     useEffect(() => {
         setBoolSetting('previewMode', previewMode);
     }, [previewMode]);

diff --git a/client/src/Services/BrowserUtils.ts b/client/src/Services/BrowserUtils.ts
@@ -20,3 +20,43 @@ export const downloadFile = (content: string): void => {
         document.body.removeChild(link);
     }
 };
+
+export const sortTable = (e: MouseEvent) => {
+    // Identify the index of the column clicked
+    const element = e.target as HTMLElement;
+    if (element.tagName !== 'TH') {
+        return;
+    }
+    const columnInd = Array.from(element.parentNode!.children).indexOf(element);
+    const table = element.closest('table');
+    const sortAsc = element.getAttribute('data-sortAsc') === 'true';
+    let switching = true;
+    let rows, i, shouldSwitch;
+    /* Iterate our elements until no more switching is required */
+    while (switching) {
+        /* Assume we don't need to switch */
+        switching = false;
+        rows = table!.rows;
+        /* Iterate all but the first row (header) */
+        for (i = 1; i < (rows.length - 1); i++) {
+            /* Assume we don't need to switch */
+            shouldSwitch = false;
+            /* Get the text for the cells we want to compare */
+            const textX = rows[i].getElementsByTagName('TD')[columnInd].innerHTML.toString();
+            const textY = rows[i + 1].getElementsByTagName('TD')[columnInd].innerHTML.toString();
+            const triggerSwitch = sortAsc ? textX.localeCompare(textY) < 0 : textX.localeCompare(textY) > 0;
+
+            if (triggerSwitch) {
+                /* Break out of the loop & switch rows */
+                shouldSwitch = true;
+                break;
+            }
+        }
+        if (shouldSwitch) {
+            /* Switch the elements & continue switching */
+            rows[i].parentNode!.insertBefore(rows[i + 1], rows[i]);
+            switching = true;
+        }
+    }
+    element.setAttribute('data-sortAsc', sortAsc ? 'false' : 'true');
+};
diff --git a/client/tslint.json b/client/tslint.json
@@ -154,7 +154,7 @@
     "valid-typeof": true,
     "cyclomatic-complexity": [
       true,
-      10
+      11
     ],
     "curly": [
       true,