Project List updates based on applied filters

    * New Shareable Card component created
    * ProjectList component handles the viewing logic
    * explore projects manages filter events
    * handles filtering when no cards has filters
    * Added images to cards cleaned up a bit

Author: bpalomino5

src/components/explore-projects/ExploreProjects.jsx

@@ -1,56 +1,46 @@
-import React, { Component } from 'react';
-import sizeMe from 'react-sizeme';
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
 
-// database
-import { Row, Col } from 'reactstrap';
 import { db } from '../../firebase';
 
-// custom components
-import ProjectCard from '../shared/project-card';
 import Filter from '../shared/filter';
+import ProjectList from './components/project-list';
 
-// styles
-const headerStyle = { marginBottom: '20px' };
+const Header = styled.h2`
+  margin-bottom: 20px;
+`;
 
-class ExploreProjects extends Component {
-  state = { projects: [], filterTypes: [ 'project-category', 'release-status', 'organization' ] };
+const filterTypes = [ 'project-category', 'release-status', 'organization' ];
 
-  componentDidMount = async () => {
-    const projects = await db.getAll('projects');
-    this.setState({ projects });
-  };
+const ExploreProjects = () => {
+  const [ appliedTags, setAppliedTags ] = useState([]);
+  const [ projects, setProjects ] = useState([]);
+
+  useEffect(() => {
+    const init = async () => {
+      const _projects = await db.getAll('projects');
+      setProjects(_projects);
+    };
 
-  updateLikes = (likes, index) => {
-    const { projects } = this.state;
-    projects[index].likes = likes;
-    this.setState({ projects });
+    init();
+  }, []);
+
+  const handleFilter = (tag) => {
+    const index = appliedTags.findIndex(_tag => _tag === tag.id);
+    if (index === -1) {
+      setAppliedTags([ ...appliedTags, tag.id ]);
+    } else {
+      setAppliedTags(prevState => [ ...prevState.slice(0, index), ...prevState.slice(index + 1) ]);
+    }
   };
 
-  render() {
-    const { projects, filterTypes } = this.state;
-    const {
-      size: { width },
-    } = this.props;
-    return (
-      <div>
-        <h2 style={headerStyle}>All Projects</h2>
-        <Filter types={filterTypes} projects={projects} />
-        <Row>
-          {projects.map((p, i) => (
-            <Col sm key={i}>
-              <ProjectCard
-                width={width}
-                key={i}
-                shortname={p.shortname}
-                name={p.name}
-                id={p.id}
-                text={p.card_des}
-              />
-            </Col>
-          ))}
-        </Row>
-      </div>
-    );
-  }
-}
-export default sizeMe()(ExploreProjects);
+  return (
+    <div>
+      <Header>All Projects</Header>
+      <Filter types={filterTypes} onFilter={handleFilter} />
+      <ProjectList projects={projects} appliedTags={appliedTags} />
+    </div>
+  );
+};
+
+export default ExploreProjects;

src/components/explore-projects/components/project-list/ProjectList.jsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import { Row, Col } from 'reactstrap';
+
+import { difference } from 'lodash';
+import { db } from '../../../../firebase';
+
+import Card from '../../../shared/card';
+
+const renderProjects = allTags => projects =>
+  projects.map((p, i) => (
+    <Col sm key={i}>
+      <Card
+        name={p.name}
+        shortname={p.shortname}
+        description={p.description}
+        image={p.images && p.images[0]}
+        tags={p.tags}
+        allTags={allTags}
+      />
+    </Col>
+  ));
+
+const ProjectList = ({ projects, appliedTags }) => {
+  const [ allTags, setAllTags ] = useState([]);
+  const [ filteredProjects, setFilteredProjects ] = useState([]);
+
+  useEffect(() => {
+    const init = async () => {
+      const _tags = await db.getAll('tags');
+      setAllTags(_tags);
+    };
+    init();
+  }, []);
+
+  useEffect(() => {
+    const filtered = projects.filter(
+      project => project.tags && difference(appliedTags, project.tags).length === 0,
+    );
+    setFilteredProjects(filtered);
+  }, [ appliedTags ]);
+
+  return (
+    <Row>
+      {appliedTags.length > 0
+        ? renderProjects(allTags)(filteredProjects)
+        : renderProjects(allTags)(projects)}
+    </Row>
+  );
+};
+
+export default ProjectList;

src/components/explore-projects/components/project-list/index.js

@@ -0,0 +1 @@
+export { default } from './ProjectList';

src/components/shared/card/Card.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import styled from 'styled-components';
+
+import CardImage from './components/card-image';
+import CardTitle from './components/card-title';
+import CardBody from './components/card-body';
+import CardTags from './components/card-tags';
+
+const Container = styled.div`
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(33, 33, 33, 0.2);
+  border-radius: 0.5rem;
+  margin-bottom: 10px;
+  min-width: 318px;
+  max-width: 320px;
+
+  :hover {
+    cursor: pointer;
+  }
+
+  :hover #project-title {
+    text-decoration: underline;
+    color: #0056b3;
+  }
+`;
+
+const CardHeader = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+
+  padding: 30px 20px 0px;
+  max-height: min-content;
+`;
+
+const Card = ({ history, name, shortname, description, image, tags, allTags }) => {
+  const openProject = () => {
+    if (shortname !== undefined) {
+      history.push(`/projects/${ shortname }`);
+    }
+  };
+
+  return (
+    <Container onClick={openProject}>
+      <CardHeader>
+        <CardTitle title={name} />
+        <CardImage image={image} />
+      </CardHeader>
+      <CardTags tags={tags} allTags={allTags} />
+      <CardBody>{description}</CardBody>
+    </Container>
+  );
+};
+
+Card.defaultProps = {
+  description: '',
+};
+
+export default withRouter(Card);

src/components/shared/card/components/card-body/CardBody.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  margin: 0px 20px 30px;
+  // padding-top: 10px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  height: 78px;
+`;
+
+const Text = styled.div`
+  line-height: 1.3;
+  font-size: 1.25rem;
+  color: lightslategrey;
+`;
+
+const CardBody = ({ children }) => (
+  <Container>
+    <Text>{children}</Text>
+  </Container>
+);
+
+export default CardBody;

src/components/shared/card/components/card-body/index.js

@@ -0,0 +1 @@
+export { default } from './CardBody';

src/components/shared/card/components/card-image/CardImage.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  img {
+    max-width: 120px;
+    max-height: 84px;
+    width: auto;
+    height: auto;
+  }
+`;
+
+const CardImage = ({ image }) => (
+  <Container>
+    <img src={image || 'https://via.placeholder.com/300'} alt="project cover" />
+  </Container>
+);
+
+export default CardImage;

src/components/shared/card/components/card-image/index.js

@@ -0,0 +1 @@
+export { default } from './CardImage';

src/components/shared/card/components/card-tags/CardTags.jsx

@@ -0,0 +1,28 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  max-height: min-content;
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  color: #007bff;
+  padding: 10px 20px;
+`;
+
+const CardTags = ({ tags, allTags }) => {
+  const _tags = useMemo(() => allTags.filter(tag => tags.includes(tag.id)), [ tags, allTags ]);
+  return (
+    <Container>
+      {_tags.map(tag => (
+        <span>#{tag.name}</span>
+      ))}
+    </Container>
+  );
+};
+
+CardTags.defaultProps = {
+  tags: [],
+};
+
+export default CardTags;

src/components/shared/card/components/card-tags/index.js

@@ -0,0 +1 @@
+export { default } from './CardTags';

src/components/shared/card/components/card-title/CardTitle.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  // height: min-content;
+  // align-self: flex-end;
+`;
+
+const CardTitle = ({ title }) => (
+  <Container id="project-title">
+    <h4>{title}</h4>
+  </Container>
+);
+
+export default CardTitle;

src/components/shared/card/components/card-title/index.js

@@ -0,0 +1 @@
+export { default } from './CardTitle';

src/components/shared/card/index.js

@@ -0,0 +1 @@
+export { default } from './Card';

src/components/shared/filter/Filter.jsx

@@ -1,12 +1,17 @@
 import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
 
 import { Row } from 'reactstrap';
 import { db } from '../../../firebase';
 
 import FilterDropdown from './components/filter-dropdown';
 import SearchBar from './components/search-bar';
 
-const Filter = ({ types, projects }) => {
+const Container = styled.div`
+  margin-bottom: 10px;
+`;
+
+const Filter = ({ types, onFilter }) => {
   const [ categories, setCategories ] = useState([]);
   const [ toggles, setToggles ] = useState([]);
 
@@ -38,8 +43,6 @@ const Filter = ({ types, projects }) => {
   };
 
   const onSelectTag = (i, j) => {
-    console.log('i', i);
-    console.log('j', j);
     setCategories(prevState => [
       ...prevState.slice(0, i),
       [
@@ -49,10 +52,12 @@ const Filter = ({ types, projects }) => {
       ],
       ...prevState.slice(i + 1),
     ]);
+
+    onFilter(categories[i][j]);
   };
 
   return (
-    <div>
+    <Container>
       <SearchBar categories={categories} handleCancel={onSelectTag} />
       <Row>
         {categories.map((category, i) => (
@@ -65,7 +70,7 @@ const Filter = ({ types, projects }) => {
           />
         ))}
       </Row>
-    </div>
+    </Container>
   );
 };