From e159419169df64f9ff1dc36e8336c04fd6ebb827 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 24 Apr 2019 15:22:02 -0400
Subject: [PATCH] feat(projects): add sorter

---
 src/components/projects/Projects.jsx | 81 +++++++++++++++++++---------
 1 file changed, 55 insertions(+), 26 deletions(-)

diff --git a/src/components/projects/Projects.jsx b/src/components/projects/Projects.jsx
index fa19c0f..2b94481 100644
--- a/src/components/projects/Projects.jsx
+++ b/src/components/projects/Projects.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {Fragment, useState} from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import {withDatabase} from "@nozbe/watermelondb/DatabaseProvider";
 import withObservables from "@nozbe/with-observables";
@@ -8,6 +8,16 @@ import {useProjectData} from "./hooks";
 import Loading from "../base/Loading";
 import Grid from '@material-ui/core/Grid';
 import {Link} from "react-router-dom";
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+
+const SORT_TYPES = {
+  date: 'date',
+  name: 'name'
+}
 
 const styles = theme => ({
   root: {
@@ -24,12 +34,12 @@ const styles = theme => ({
   }
 })
 
-// function sortByTitle(a, b) {
-//   if (!a.manifest || !b.manifest) {
-//     return 0;
-//   }
-//   return a.manifest.title.localeCompare(b.manifest.title)
-// }
+function sortByTitle(a, b) {
+  if (!a.manifest || !b.manifest) {
+    return 0;
+  }
+  return a.manifest.title.localeCompare(b.manifest.title)
+}
 
 // No date field, but we can use the ID
 function sortByDate(a, b) {
@@ -40,34 +50,53 @@ function sortByDate(a, b) {
 }
 
 function Projects({projectAddedEvents, classes}) {
+  const [sortType, setSortType] = useState(SORT_TYPES.date);
+
   const projects = projectAddedEvents.map(event => {
     return Object.assign({projectId: event.returnValues.idProject}, useProjectData(event.returnValues.idProject, '', projectAddedEvents));
   })
 
-  projects.sort(sortByDate)
+  let sortFunction = (sortType === SORT_TYPES.name) ? sortByTitle : sortByDate;
+  projects.sort(sortFunction);
 
   return (<div className={classes.root}>
     <h2>Projects</h2>
     {projects.length === 0 && <Loading/>}
     {projects.length > 0 &&
-    <Grid container spacing={40}>
-      {projects.map((project, index) => {
-        if (!project.manifest) {
-          return ''
-        }
-        return (
-          <Grid key={'project-' + index} item xs={12} sm={6} md={4} className="project-list-item">
-            <Link to={`/project/${project.projectId}`} className={classes.link}>
-              <h3>{project.manifest.title}</h3>
-              <p>{project.manifest.subtitle}</p>
-              <p>{project.manifest.description}</p>
-              <p>{project.manifest.avatar &&
-              <img alt="avatar" src={project.manifest.avatar} width={20} height={20}/>}{project.manifest.creator}</p>
-            </Link>
-          </Grid>
-        )
-      })}
-    </Grid>}
+    <Fragment>
+      <FormControl component="fieldset" className={classes.formControl}>
+        <FormLabel component="legend">Sort by</FormLabel>
+        <RadioGroup
+          aria-label="Sort"
+          name="sort"
+          className={classes.group}
+          value={sortType}
+          onChange={(e, value) => setSortType(value)}
+        >
+          <FormControlLabel value={SORT_TYPES.date} control={<Radio />} label="Date" />
+          <FormControlLabel value={SORT_TYPES.name} control={<Radio />} label="Name" />
+        </RadioGroup>
+      </FormControl>
+      <Grid container spacing={40}>
+        {projects.map((project, index) => {
+          if (!project.manifest) {
+            return ''
+          }
+          return (
+            <Grid key={'project-' + index} item xs={12} sm={6} md={4} className="project-list-item">
+              <Link to={`/project/${project.projectId}`} className={classes.link}>
+                <h3>{project.manifest.title}</h3>
+                <p>{project.manifest.subtitle}</p>
+                <p>{project.manifest.description}</p>
+                <p>{project.manifest.avatar &&
+                <img alt="avatar" src={project.manifest.avatar} width={20} height={20}/>}{project.manifest.creator}</p>
+              </Link>
+            </Grid>
+          )
+        })}
+      </Grid>
+    </Fragment>
+    }
   </div>)
 }