feat: add basic list view

2025-02-03 15:13:33 +00:00 · 2019-04-26 11:50:15 -04:00 · 2019-04-26 11:50:15 -04:00 · a0b613a25e
commit a0b613a25e
parent 20dff143d2
3 changed files with 189 additions and 68 deletions
--- a/package.json
+++ b/package.json
@ -76,6 +76,7 @@
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "chai": "^4.1.0",
    "chart.js": "^2.7.3",
+    "classnames": "^2.2.6",
    "cryptocurrency-icons": "^0.9.3",
    "css-loader": "1.0.0",
    "cytoscape": "^3.3.0",
@ -190,8 +191,18 @@
      "react-app"
    ],
    "plugins": [
-      ["@babel/plugin-proposal-decorators", { "legacy": true }],
-      ["@babel/plugin-proposal-class-properties", { "loose": true }],
+      [
+        "@babel/plugin-proposal-decorators",
+        {
+          "legacy": true
+        }
+      ],
+      [
+        "@babel/plugin-proposal-class-properties",
+        {
+          "loose": true
+        }
+      ],
      [
        "@babel/plugin-transform-runtime",
        {
--- a/src/components/projects/Projects.jsx
+++ b/src/components/projects/Projects.jsx
@ -21,6 +21,12 @@ import InputAdornment from '@material-ui/core/InputAdornment';
 import SearchIcon from '@material-ui/icons/Search';
 import ListIcon from '@material-ui/icons/Reorder';
 import DashboardIcon from '@material-ui/icons/Dashboard';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import classnames from 'classnames';

 import defaultProjectImage from '../../images/default-project-img.png';
 import newProjectImage from '../../images/new-project.png';
@ -30,7 +36,8 @@ const SORT_TYPES = {
  name: 'name'
 }

-const styles = theme => ({
+const styles = theme => {
+  return ({
    root: {
      margin: '1.75rem 4.5rem',
      ...theme.typography.body1
@ -41,6 +48,12 @@ const styles = theme => ({
    search: {
      height: 36
    },
+    formatBtn: {
+      cursor: 'pointer',
+      '&:hover, &.active': {
+        color: 'black'
+      }
+    },
    title: {
      fontSize: '20px',
      textAlign: 'center',
@ -50,7 +63,7 @@ const styles = theme => ({
      height: 235,
      position: 'relative'
    },
-  avatar: {
+    avatarGrid: {
      position: 'absolute',
      top: 26,
      left: 26
@ -72,8 +85,22 @@ const styles = theme => ({
      margin: 0,
      paddingTop: 115,
      paddingBottom: 43
+    },
+    nameCell: {
+      fontSize: 18
+    },
+    darkRow: {
+      backgroundColor: theme.palette.common.grey
+    },
+    addProjectRow: {
+      borderTop: '0.25px solid ' + theme.palette.text.grey,
+      cursor: 'pointer',
+      '& td': {
+        paddingTop: 35
      }
-})
+    }
+  })
+}

 function sortByTitle(a, b) {
  if (!a.manifest || !b.manifest) {
@ -111,7 +138,7 @@ function ProjectCard({classes, project}) {
        <Typography component="p" className={classes['card-content']} color="textSecondary">
          Delegate: {project.manifest.creator} {/*TODO check if that really is the delegate*/}
        </Typography>
-        {project.manifest.avatar && <img className={classes.avatar} alt="avatar" src={project.manifest.avatar} width={40} height={40}/>}
+        {project.manifest.avatar && <img className={classes.avatarGrid} alt="avatar" src={project.manifest.avatar} width={40} height={40}/>}
      </CardContent>
    </CardActionArea>
    <CardActions className={classes['card-actions']}>
@ -122,36 +149,8 @@ function ProjectCard({classes, project}) {
  </Card>)
 }

-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));
-  })
-
-  let sortFunction = (sortType === SORT_TYPES.name) ? sortByTitle : sortByDate;
-  projects.sort(sortFunction);
-
-  return (<div className={classes.root}>
-    <Typography className={classes.title} component="h2" gutterBottom>All projects</Typography>
-    {projects.length === 0 && <Loading/>}
-    {projects.length > 0 &&
-    <Fragment>
-      <div className={classes.filters}>
-        <FormControl>
-          <TextField
-            variant="outlined"
-            placeholder="Filter by tags"
-            InputProps={{
-              className: classes.search,
-              startAdornment: <InputAdornment position="start"><SearchIcon/></InputAdornment>,
-            }}
-          />
-        </FormControl>
-        <DashboardIcon color="disabled" fontSize="large"/>
-        <ListIcon color="disabled" fontSize="large"/>
-      </div>
-      <Grid container spacing={40}>
+function GridView({classes, projects}) {
+  return (<Grid container spacing={40}>
    {projects.map((project, index) => {
      if (!project.manifest) {
        return ''
@ -168,7 +167,110 @@ function Projects({projectAddedEvents, classes}) {
        </CardActionArea>
      </Card>
    </Grid>
-      </Grid>
+  </Grid>)
+}
+
+const CustomTableCell = withStyles(theme => ({
+  head: {
+    color: theme.palette.text.grey,
+    fontSize: 15,
+    border: 0
+  },
+  body: {
+    fontSize: 16,
+    border: 0,
+    height: 80
+  }
+}))(TableCell);
+
+function ListView({classes, projects, history}) {
+  let rowCounter = -1;
+  return (<Table className={classes.table}>
+    <TableHead>
+      <TableRow>
+        <CustomTableCell>&nbsp;</CustomTableCell>
+        <CustomTableCell>Project name</CustomTableCell>
+        <CustomTableCell>Description</CustomTableCell>
+        <CustomTableCell>Funding details</CustomTableCell>
+        <CustomTableCell>Delegate</CustomTableCell>
+        <CustomTableCell>&nbsp;</CustomTableCell>
+        <CustomTableCell>&nbsp;</CustomTableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {projects.map((project, index) => {
+        rowCounter++;
+        if (!project.manifest) {
+          return ''
+        }
+        return (
+          <TableRow className={classnames(classes.row, {[classes.darkRow]: rowCounter%2})} key={'project-' + index}>
+            <CustomTableCell>
+              {project.manifest.avatar &&
+              <img className={classes.avatar} alt="avatar" src={project.manifest.avatar} width={40} height={40}/>}
+            </CustomTableCell>
+            <CustomTableCell className={classes.nameCell}>{project.manifest.title}</CustomTableCell>
+            <CustomTableCell>{project.manifest.description}</CustomTableCell>
+            <CustomTableCell>76% of 2.055 ETH<br/>3 funders</CustomTableCell>
+            <CustomTableCell>{project.manifest.creator}</CustomTableCell>
+            <CustomTableCell>&lt;3</CustomTableCell>
+            <CustomTableCell>
+              <Button size="small" color="primary" href={`/#/project/${project.projectId}`}>Read more</Button>
+            </CustomTableCell>
+          </TableRow>
+        )
+      })}
+      <TableRow className={classnames(classes.row, classes.addProjectRow)} hover onClick={() => history.push('/create-project/')}>
+        <CustomTableCell>
+          <img alt="add project" src={newProjectImage} width={40} height={40}/>
+        </CustomTableCell>
+        <CustomTableCell>Add your own project</CustomTableCell>
+        <CustomTableCell/>
+        <CustomTableCell/>
+        <CustomTableCell/>
+        <CustomTableCell/>
+        <CustomTableCell/>
+      </TableRow>
+    </TableBody>
+  </Table>)
+}
+
+function Projects({projectAddedEvents, classes, history}) {
+  const [sortType, _setSortType] = useState(SORT_TYPES.date);
+  const [isGridView, setIsGridView] = useState(true);
+
+  const projects = projectAddedEvents.map(event => {
+    return Object.assign({projectId: event.returnValues.idProject}, useProjectData(event.returnValues.idProject, '', projectAddedEvents));
+  })
+
+  let sortFunction = (sortType === SORT_TYPES.name) ? sortByTitle : sortByDate;
+  projects.sort(sortFunction);
+
+  return (<div className={classes.root}>
+    <Typography className={classes.title} component="h2" gutterBottom>All projects</Typography>
+
+    {projects.length === 0 && <Loading/>}
+
+    {projects.length > 0 &&
+    <Fragment>
+      <div className={classes.filters}>
+        <FormControl>
+          <TextField
+            variant="outlined"
+            placeholder="Filter by tags"
+            InputProps={{
+              className: classes.search,
+              startAdornment: <InputAdornment position="start"><SearchIcon/></InputAdornment>,
+            }}
+          />
+        </FormControl>
+
+        <DashboardIcon className={classnames(classes.formatBtn, {'active': isGridView})} color="disabled" fontSize="large" onClick={() => setIsGridView(true)}/>
+        <ListIcon className={classnames(classes.formatBtn, {'active': !isGridView})} color="disabled" fontSize="large" onClick={() => setIsGridView(false)}/>
+      </div>
+
+      {!isGridView && ListView({classes, projects, history})}
+      {isGridView && GridView({classes, projects})}
    </Fragment>
    }
  </div>)
--- a/src/index.js
+++ b/src/index.js
@ -12,6 +12,14 @@ const theme = createMuiTheme({
    useNextVariants: true,
    fontFamily: ['Inter', '-apple-system', 'BlinkMacSystemFont', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial', "Noto Sans", 'sans-serif', "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"].join(','),
  },
+  palette: {
+    common: {
+      grey: '#F5F7F8'
+    },
+    text: {
+      grey: '#939BA1'
+    }
+  }
 });

 render(