Add shortcut table sorting

Author: jason-roundtree

.DS_Store

@@ -7,7 +7,7 @@ export default {
             title: 'Name',
             name: 'name',
             type: 'string',
-            validation: Rule => Rule.unique()
+            // validation: Rule => Rule.unique()
         },
         {
             title: 'Mac Command',

studio/schemas/shortcut.js

@@ -1,37 +1,65 @@
-import React from 'react'
+import React, { useState } from 'react'
+import TableRows from './TableRows'
+import styled from 'styled-components'
+import sortAlpha from '../utils/sorting'
+// import sortDown  from '../src/icons/sort-down.svg'
+// import sortUp  from '../src/icons/sort-up.svg'
+// import refresh  from '../src/icons/refresh.svg'
 
+const ShortcutNameTh = styled.th`
+    &:hover {
+        cursor: pointer;
+    }
+`
+const SortTextSpan = styled.span`
+    display: block;
+    font-size: .6em;
+`
 export default function ShortcutTable(props) {
-    // console.log('ShortcutTable props: ', props)
+     // console.log('ShortcutTable props: ', props)
+    const [sortedRows, setSortedRows] = useState(null)
+    const [sortOrder, setSortOrder] = useState('AZ')
+    const sortTextEnum = ['Sorted A-Z', 'Sorted Z-A', 'Unsorted']
+    const [sortText, setSortText] = useState(sortTextEnum[2])
+    const unsortedRows = [...props.section.subsections]
+    
+    function handleShortcutSort() {
+        // console.log('handleShortcutSort')
+        if (sortedRows === null) {
+            setSortedRows(sortAlpha(unsortedRows, 'AZ'))
+            setSortOrder('AZ')
+            setSortText(sortTextEnum[0])
+        } else if (sortOrder === 'AZ') {
+            setSortedRows(sortAlpha(unsortedRows, 'ZA'))
+            setSortOrder('ZA')
+            setSortText(sortTextEnum[1])
+        } else {
+            setSortedRows(null)
+            setSortText(sortTextEnum[2])
+        }
+    }
+
+    // function clearSort() { setSortedRows(null) }
+
     return (
         <div className="table_container">
             <table>
                 <thead>
                     <tr>
-                        <th>Shortcut</th>
+                        <ShortcutNameTh onClick={handleShortcutSort}>
+                            <span>Shortcut</span>
+                            <SortTextSpan>( {sortText} )</SortTextSpan>
+                        </ShortcutNameTh>
                         <th>Mac</th>
                         <th>Windows</th>
                     </tr>
                 </thead>
 
                 <tbody>
-                    {props.section.subsections.map(secData => {
-                        return (
-                            <tr key={secData.name}>
-                                <th className="row_header">{secData.name}</th>
-                                <td>
-                                    {secData.mac_command && 
-                                        <kbd>{secData.mac_command}</kbd>
-                                    }
-                                    
-                                </td>
-                                <td>
-                                    {secData.windows_command && 
-                                        <kbd>{secData.windows_command}</kbd>
-                                    }   
-                                </td>
-                            </tr>
-                        )
-                    })}
+                    {sortedRows 
+                        ? <TableRows rows={sortedRows} />
+                        : <TableRows rows={unsortedRows} />
+                    }
                 </tbody>
             </table>
         </div>

web/components/ShortcutTable.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+export default function TableRows(props) {
+    const rows = props.rows.map(row => {
+        return (
+            <tr key={row.name}>
+                <th className="row_header">{row.name}</th>
+                <td>
+                    {row.mac_command && 
+                        <kbd>{row.mac_command}</kbd>
+                    }
+                </td>
+                <td>
+                    {row.windows_command && 
+                        <kbd>{row.windows_command}</kbd>
+                    }   
+                </td>
+            </tr>
+        )
+    })
+    return rows
+}

web/components/TableRows.js

@@ -8,7 +8,7 @@ import DescriptiveItem from './DescriptiveItem'
 // `
 
 export default function TopicSection(props) {
-    console.log('TS props: ', props);
+    // console.log('TS props: ', props);
     return (
         <section 
             id={props.section.anchor_id}

web/components/TopicSection.js

@@ -0,0 +1,14 @@
+function sortAlpha(arr, order) {
+    // console.log('sorter arr: ', arr)
+    if (order === 'AZ') {
+        return arr.sort((a, b) => {
+            return (a.name > b.name) ? 1 : -1
+        })
+    } else {
+        return arr.sort((a, b) => {
+            return (a.name < b.name) ? 1 : -1
+        })
+    }
+}
+
+export default sortAlpha