Merge pull request nukeop#351 from saimfd/sort-downloads

Added sort by name in Downloads
ThraxHamilton · Jun 12, 2019 · 46f2065 · 46f2065
2 parents 2d088db + e0eed40
commit 46f2065
Showing 1 changed file with 19 additions and 3 deletions.
diff --git a/app/components/Downloads/DownloadsList/index.js b/app/components/Downloads/DownloadsList/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import { Button, Icon, Segment, Table } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
@@ -11,8 +11,8 @@ const DownloadsList = ({
   items,
   clearFinishedTracks
 }) => {
+  const [sortAsc, setSort] = useState(true);
   const { t } = useTranslation('downloads');
-
   return (
     <Segment inverted>
       <Button primary onClick={ clearFinishedTracks }>
@@ -23,7 +23,23 @@ const DownloadsList = ({
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>{t('status')}</Table.HeaderCell>
-            <Table.HeaderCell>{t('name')}</Table.HeaderCell>
+            <Table.HeaderCell onClick={() => {
+                if(sortAsc){
+                  items.sort((a, b) => {
+                    return a.track.name.toLowerCase() > b.track.name.toLowerCase();
+                  })
+                  setSort(false)
+                } else {
+                  items.sort((a, b) => {
+                    return a.track.name.toLowerCase() < b.track.name.toLowerCase();
+                  })
+                  setSort(true)
+                }
+              }
+            }>{t('name')} {
+                sortAsc ? <Icon name="caret up icon"></Icon> : <Icon name="caret down icon"></Icon>
+              }
+            </Table.HeaderCell>
             <Table.HeaderCell>{t('completion')}</Table.HeaderCell>
           </Table.Row>
         </Table.Header>