Project Page, Like, and Project fields refactored

    * dashboard updated
    * contact modal
    * updated Like Button
    * like button in card and project page
    * home orders project by likes

Author: bpalomino5

src/components/app/actions/project.js

@@ -23,7 +23,7 @@ export const getProject = createAction('GET_PROJECT', async (pid) => {
   return normalize(response, schema.project);
 });
 
-export const updateProject = createAction('UPDATE_PROJECT', async ({ values }) => {
+export const updateProject = createAction('UPDATE_PROJECT', async (values) => {
   let imageURLs = [ ...values.images ];
   if (values.images.length > 0 && values.images[0] instanceof File) {
     await storage.deleteProjectImages(values.id);

src/components/app/selectors.js

@@ -3,7 +3,7 @@ import { createSelector } from 'reselect';
 
 const getTags = state => state.data.tags;
 
-const getProjects = state => orderBy(state.data.projects, [ 'title' ], [ 'asc' ]);
+const getProjects = state => orderBy(state.data.projects, [ 'name' ], [ 'asc' ]);
 
 export default createSelector(
   [ getTags, getProjects ],

src/components/home/Home.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Row, Col } from 'reactstrap';
+import { orderBy } from 'lodash';
 import Banner from './components/banner';
 import Card from '../shared/card';
 import useProjects from '../../hooks/use-projects';
@@ -15,7 +16,8 @@ const SectionTitle = styled.h3`
 `;
 
 const Home = ({ history }) => {
-  const projects = useProjects();
+  let projects = useProjects();
+  projects = orderBy(projects, p => Object.keys(p.likes).length, [ 'desc' ]);
   return (
     <div>
       <Header>

src/components/project-page/ProjectPage.jsx

@@ -1,58 +1,74 @@
 import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
 import { some, get, isNil } from 'lodash';
 import { withRouter } from 'react-router-dom';
 
-import { Row } from 'reactstrap';
-
 import Dashboard from './components/dashboard';
-import BannerContent from './components/banner-content';
-import ProjectInfoContent from './components/project-info-content';
-import SocialContentSection from './components/social-content-section';
 import EditProjectBanner from './components/edit-project-banner';
-
+import Info from './components/info';
+import Need from './components/need';
+import About from './components/about';
+import Image from './components/image';
+import Likes from './components/likes';
+import ContactModal from '../shared/contact-modal';
 import useProject from '../../hooks/use-project';
 import useUser from '../../hooks/use-user';
+import useModal from '../../hooks/use-modal';
+
+const Container = styled.section`
+  display: grid;
+  grid-template-columns: 20% 1fr 20%;
+  grid-template-rows: auto auto auto auto;
+  grid-template-areas: 'banner banner banner' 'image info likes' '. need .' '. about .';
+`;
+
+const CONTACT_MODAL_ID = 'CONTACT_MODAL_ID';
 
 const ProjectPage = ({ location }) => {
   const [ showDashboard, setShowDashboard ] = useState(false);
   const [ editable, setEditable ] = useState(false);
 
   const pid = get(location, 'state.id', null);
-  const { project } = useProject(pid);
+  const { project, tags } = useProject(pid);
   const { user } = useUser();
+  const { closeModal, openModal, isModalOpen } = useModal();
 
   useEffect(() => {
     if (project && user) {
-      const _editable = some(project.team, id => id === user.id)
-        || some(project.admin, id => id === user.id)
-        || project.owner === user.id;
+      const _editable = some(project.admin, id => id === user.id) || project.owner === user.id;
       setEditable(_editable);
     }
   }, [ project, user ]);
 
-  const toggleDashboard = toggle => () => setShowDashboard(toggle);
-
   if (isNil(project)) {
     return <div>Loading...</div>;
   }
   if (showDashboard) {
-    return <Dashboard pid={pid} onClose={toggleDashboard(false)} />;
+    return <Dashboard pid={pid} onClose={() => setShowDashboard(false)} />;
   }
   return (
-    <section>
-      {editable ? <EditProjectBanner onEdit={toggleDashboard(true)} /> : <div />}
-      <Row>
-        <BannerContent name={project.name} images={project.images} />
-        <ProjectInfoContent project={project} />
-      </Row>
-      <SocialContentSection
-        isOwner={editable}
-        projectId={pid}
-        ourstory={project.about ? project.about : ''}
-        selected={location.hash}
+    <Container>
+      {editable && <EditProjectBanner onEdit={() => setShowDashboard(true)} />}
+      <Image images={project.images} />
+      <Info name={project.name} description={project.description} tags={tags} />
+      <Likes pid={pid} />
+      <Need roles={project.roles} onContact={openModal(CONTACT_MODAL_ID)} />
+      <About about={project.about} images={project.images} links={project.links} />
+      <ContactModal
+        open={isModalOpen(CONTACT_MODAL_ID)}
+        toggle={closeModal}
+        buttonLabel={`Contact ${ project.name }`}
+        modalBody={<a href={`mailto:${ project.contact }`}>{project.contact}</a>}
       />
-    </section>
+    </Container>
   );
 };
 
 export default withRouter(ProjectPage);
+
+/* <SocialContentSection
+        isOwner={editable}
+        projectId={pid}
+        ourstory={project.about ? project.about : ''}
+        selected={location.hash}
+      /> */

src/components/project-page/components/about/About.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+import { isEmpty } from 'lodash';
+import Carousel from '../carousel';
+import Button from '../../../shared/button';
+
+const Container = styled.div`
+  padding: 50px 0px;
+  grid-area: about;
+
+  h5 {
+    margin-bottom: 20px;
+  }
+
+  p {
+    margin-top: 20px;
+    font-size: 14pt;
+    color: gray;
+  }
+`;
+
+const About = ({ about, images, links }) => {
+  if (isEmpty(about) && images.length === 0) {
+    return null;
+  }
+  return (
+    <Container>
+      <h5>More about us:</h5>
+      {images.length > 0 && <Carousel items={images} />}
+      <p>{about}</p>
+      <div>
+        {links.map(link => (
+          <a href={link.url}>
+            <Button variant="link">{link.name}</Button>
+          </a>
+        ))}
+      </div>
+    </Container>
+  );
+};
+export default About;

src/components/project-page/components/about/index.js

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

src/components/project-page/components/banner-content/BannerContent.jsx

@@ -1,7 +1,13 @@
 import React, { Component } from 'react';
 import { Carousel as RSCarousel, CarouselItem, CarouselIndicators } from 'reactstrap';
 
-const imageStyle = { height: 'auto', maxHeight: '500px' };
+const imageStyle = {
+  height: '320px',
+  objectFit: 'contain',
+  width: '100%',
+  paddingLeft: '15%',
+  paddingRight: '15%',
+};
 
 class Carousel extends Component {
   state = { activeIndex: 0 };

src/components/project-page/components/banner-content/index.js

@@ -7,6 +7,7 @@ import DescriptionForm from './components/description-form';
 import TagsForm from './components/tags-form';
 import TeamForm from './components/team-form';
 import LinksForm from './components/links-form';
+import RolesForm from './components/roles-form';
 import SettingsForm from './components/settings-form';
 import Header from './components/header';
 import Sidebar from './components/sidebar';
@@ -19,7 +20,7 @@ const Container = styled.div`
   .dashboard {
     display: grid;
     grid-template-columns: 0.3fr 1fr;
-    grid-template-rows: 1fr 45px;
+    grid-template-rows: 1fr 50px;
     grid-template-areas:
       'menu forms'
       'menu toolbar';
@@ -82,6 +83,9 @@ const Dashboard = ({ pid, onClose }) => {
       case 'links':
         setCurrentForm(<LinksForm />);
         break;
+      case 'roles':
+        setCurrentForm(<RolesForm />);
+        break;
       case 'settings':
         setCurrentForm(<SettingsForm pid={pid} />);
         break;
@@ -92,7 +96,7 @@ const Dashboard = ({ pid, onClose }) => {
   };
 
   const handleSubmit = (values) => {
-    updateProject({ values });
+    updateProject(values);
     setTimeout(onClose, 3000);
   };
 
@@ -103,7 +107,7 @@ const Dashboard = ({ pid, onClose }) => {
         enableReinitialize
         initialValues={{ ...project }}
         onSubmit={handleSubmit}
-        render={() => (
+        render={({ values }) => (
           <Form>
             <section className="dashboard">
               <Sidebar onSelectCategory={handleSidebar} />