feat(projects): add base projects list

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} />

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))