status-im/liquid-funding
2
0
Fork 0
mirror of https://github.com/status-im/liquid-funding.git synced 2025-01-27 03:34:51 +00:00
Code Issues Projects Releases Wiki Activity

feat(projects): add sorter

Browse Source
This commit is contained in:
Jonathan Rainville 2019-04-24 15:22:02 -04:00
parent 49b0adea70
commit e159419169
No known key found for this signature in database
GPG Key ID: 5F4630B759727D9C
1 changed files with 55 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/projects/Projects.jsx
View File

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