From dc9075eb7186de1b9fb17d41e78691221f32eab5 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 24 Apr 2019 09:34:45 -0400
Subject: [PATCH 1/4] fix: fix profile being undefined on page reload

---
 src/actions/delegates.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/actions/delegates.js b/src/actions/delegates.js
index cb6acf3..121bd3a 100644
--- a/src/actions/delegates.js
+++ b/src/actions/delegates.js
@@ -23,7 +23,7 @@ const createDelegate = (newDelegate, delegateInfo, pledge, profile, idx) => {
 const delegateRecordExists = (profile, pledge, idx, existing) => {
   const record = existing.find(delegate => {
     const { delegateIndex } = delegate
-    if (
+    if (profile &&
       profile.id === delegate.profile.id &&
         pledge.idPledge === delegate.idPledge &&
         idx === delegateIndex

From 2ab5b718316e1216fd4ba763c357ddf1b0cc1057 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 24 Apr 2019 09:35:17 -0400
Subject: [PATCH 2/4] refactor(main): simplify list items for menu

---
 src/components/MainCointainer.jsx | 47 ++++++++++---------------------
 1 file changed, 15 insertions(+), 32 deletions(-)

diff --git a/src/components/MainCointainer.jsx b/src/components/MainCointainer.jsx
index 015ce16..75961d9 100644
--- a/src/components/MainCointainer.jsx
+++ b/src/components/MainCointainer.jsx
@@ -92,6 +92,15 @@ const styles = theme => ({
   }
 })
 
+const MenuItem = ({to, name, className, icon}) => (
+  <Link to={to} className={className}>
+    <ListItem button>
+      <ListItemIcon>{icon}</ListItemIcon>
+      <ListItemText primary={name}/>
+    </ListItem>
+  </Link>
+)
+
 class PersistentDrawerLeft extends React.Component {
   state = {
     open: false,
@@ -153,40 +162,14 @@ class PersistentDrawerLeft extends React.Component {
               {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
             </IconButton>
           </div>
-          <Divider />
+          <Divider/>
           <List>
-            <Link to="/dashboard" className={classes.link}>
-              <ListItem button>
-                <ListItemIcon><InboxIcon /></ListItemIcon>
-                <ListItemText primary="Dashboard" />
-              </ListItem>
-            </Link>
+            <MenuItem name="Dashboard" to="/dashboard" className={classes.link} icon={<InboxIcon/>}/>
+            <MenuItem name="Funds Management" to="/funds-management" className={classes.link} icon={<InboxIcon/>}/>
+            <MenuItem name="Insights" to="/insights/" className={classes.link} icon={<InboxIcon/>}/>
+            <MenuItem name="Admin" to="/admin/" className={classes.link} icon={<InboxIcon/>}/>
           </List>
-          <List>
-            <Link to="/funds-management/" className={classes.link}>
-              <ListItem button>
-                <ListItemIcon><InboxIcon /></ListItemIcon>
-                <ListItemText primary="Funds Management" />
-              </ListItem>
-            </Link>
-          </List>
-          <List>
-            <Link to="/insights/" className={classes.link}>
-              <ListItem button>
-                <ListItemIcon><InboxIcon /></ListItemIcon>
-                <ListItemText primary="Insights" />
-              </ListItem>
-            </Link>
-          </List>
-          <List>
-            <Link to="/admin/" className={classes.link}>
-              <ListItem button>
-                <ListItemIcon><InboxIcon /></ListItemIcon>
-                <ListItemText primary="Admin" />
-              </ListItem>
-            </Link>
-          </List>
-          <Divider />
+          <Divider/>
         </Drawer>
         <main
           className={classNames(classes.content, {

From 49b0adea7064b6b527bc75900fd7d3061e71eff9 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 24 Apr 2019 15:11:22 -0400
Subject: [PATCH 3/4] feat(projects): add base projects list

---
 src/components/MainCointainer.jsx    |  4 ++
 src/components/projects/Projects.jsx | 84 ++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 src/components/projects/Projects.jsx

diff --git a/src/components/MainCointainer.jsx b/src/components/MainCointainer.jsx
index 75961d9..061c541 100644
--- a/src/components/MainCointainer.jsx
+++ b/src/components/MainCointainer.jsx
@@ -18,11 +18,13 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import InboxIcon from '@material-ui/icons/MoveToInbox';
+import ProjectIcon from '@material-ui/icons/Work';
 import { ScaleLoader } from 'react-spinners'
 import FundsManagement from './FundsManagement'
 import ContractAdmin from './ContractAdmin'
 import TransferGraph from './TransfersGraph'
 import Dashboard from './Dashboard'
+import Projects from './projects/Projects'
 import Project from './projects/Project'
 import BackProject from './projects/BackProject'
 import CreateProject from './projects/CreateProject'
@@ -165,6 +167,7 @@ class PersistentDrawerLeft extends React.Component {
           <Divider/>
           <List>
             <MenuItem name="Dashboard" to="/dashboard" className={classes.link} icon={<InboxIcon/>}/>
+            <MenuItem name="Projects" to="/projects" className={classes.link} icon={<ProjectIcon/>}/>
             <MenuItem name="Funds Management" to="/funds-management" className={classes.link} icon={<InboxIcon/>}/>
             <MenuItem name="Insights" to="/insights/" className={classes.link} icon={<InboxIcon/>}/>
             <MenuItem name="Admin" to="/admin/" className={classes.link} icon={<InboxIcon/>}/>
@@ -183,6 +186,7 @@ class PersistentDrawerLeft extends React.Component {
               <Route path="/admin" component={ContractAdmin} />
               <Route path="/funds-management" render={() => <FundsManagement open={open} />} />
               <Route path="/insights" component={TransferGraph} />
+              <Route path="/projects" component={Projects} />
               <Route path="/project/:id" component={Project} />
               <Route path="/create-project/" render={(props) => <CreateProject {...props} />} />
               <Route path="/back-project/:id" component={BackProject} />
diff --git a/src/components/projects/Projects.jsx b/src/components/projects/Projects.jsx
new file mode 100644
index 0000000..fa19c0f
--- /dev/null
+++ b/src/components/projects/Projects.jsx
@@ -0,0 +1,84 @@
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import {withDatabase} from "@nozbe/watermelondb/DatabaseProvider";
+import withObservables from "@nozbe/with-observables";
+import {Q} from "@nozbe/watermelondb";
+import PropTypes from 'prop-types'
+import {useProjectData} from "./hooks";
+import Loading from "../base/Loading";
+import Grid from '@material-ui/core/Grid';
+import {Link} from "react-router-dom";
+
+const styles = theme => ({
+  root: {
+    margin: '1.75rem 4.5rem',
+    ...theme.typography.body1
+  },
+  link: {
+    textDecoration: 'none',
+    ...theme.typography.body1,
+    '&:hover': {
+      textDecoration: 'underline',
+      cursor: 'pointer'
+    }
+  }
+})
+
+// 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) {
+  if (parseInt(a.projectId, 10) > parseInt(b.projectId, 10)) {
+    return -1;
+  }
+  return 1;
+}
+
+function Projects({projectAddedEvents, classes}) {
+  const projects = projectAddedEvents.map(event => {
+    return Object.assign({projectId: event.returnValues.idProject}, useProjectData(event.returnValues.idProject, '', projectAddedEvents));
+  })
+
+  projects.sort(sortByDate)
+
+  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>}
+  </div>)
+}
+
+Projects.propTypes = {
+  projectAddedEvents: PropTypes.array,
+  classes: PropTypes.object
+}
+
+const StyledProject = withStyles(styles)(Projects)
+export default withDatabase(withObservables([], ({ database }) => ({
+  projectAddedEvents: database.collections.get('lp_events').query(
+    Q.where('event', 'ProjectAdded')
+  ).observe()
+}))(StyledProject))

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 4/4] 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>)
 }