Submit Project with Formik

    * small tweak on cards, fixed updateProject reducer
    * cleaned up Filter ui, card, and buttons
    * adding more padding to button

Author: bpalomino5

src/components/app/App.jsx

@@ -30,9 +30,11 @@ import ProfilePage from '../profile-page';
 import ExploreProfiles from '../explore-profiles';
 import ExploreProjects from '../explore-projects';
 import ForgotPassword from '../forgot-password';
+import SubmitProject from '../submit-project';
 
 import './App.css';
 import useUser from '../../hooks/use-user';
+import useProjects from '../../hooks/use-projects';
 
 const mainContainerStyle = { marginBottom: '100px', marginTop: '50px' };
 
@@ -53,6 +55,8 @@ library.add(
 
 const App = () => {
   useUser(true);
+  useProjects(true);
+
   return (
     <ThemeProvider theme={{ mode: 'bubbly' }}>
       <div className="App">
@@ -70,6 +74,7 @@ const App = () => {
           <Route path="/profile/:id" exact component={ProfilePage} />
           <Route path="/signupin" exact component={SignUpIn} />
           <Route path="/signupin/forgotpassword" exact component={ForgotPassword} />
+          <Route path="/submitproject" exact component={SubmitProject} />
           <MessengerCustomerChat pageId="1191043211036808" appId="295451067827152" />
         </Container>
         <Footer />

src/components/app/actions/project.js

@@ -23,15 +23,16 @@ export const getProject = createAction('GET_PROJECT', async (pid) => {
   return normalize(response, schema.project);
 });
 
-export const updateProject = createAction('UPDATE_PROJECT', async ({ pid, 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(pid);
-    imageURLs = await storage.uploadProjectImages(pid, imageURLs);
+    await storage.deleteProjectImages(values.id);
+    imageURLs = await storage.uploadProjectImages(values.id, imageURLs);
   }
   // update Project
-  await db.update('projects')(pid)({
-    ...values,
+  const { id, ...rest } = values;
+  await db.update('projects')(values.id)({
+    ...rest,
     images: imageURLs,
   });
   return normalize({ ...values, images: imageURLs }, schema.project);

src/components/create-project/CreateProject.jsx

@@ -6,7 +6,7 @@ import ProjectList from './components/project-list';
 import useProjects from '../../hooks/use-projects';
 
 const Header = styled.h2`
-  margin-bottom: 20px;
+  margin-bottom: 0px;
 `;
 
 const filterTypes = [ 'project-category', 'release-status', 'organization' ];

src/components/create-project/components/create-button/CreateButton.jsx

@@ -21,6 +21,7 @@ const Home = ({ history }) => {
       <Header>
         <h1>Find any opportunity anytime. </h1>
         <Banner
+          gotoSubmit={() => history.push('/submitproject')}
           goToSignUp={() => history.push('/signupin')}
           goToAbout={() => history.push('/about')}
         />

src/components/create-project/components/create-button/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import Button from '../../../shared/button';
-import CreateProject from '../../../create-project';
 
 const Container = styled.div`
   span {
@@ -10,13 +9,15 @@ const Container = styled.div`
   }
 `;
 
-const Banner = ({ goToSignUp, goToAbout }) => (
+const Banner = ({ goToSignUp, goToAbout, gotoSubmit }) => (
   <Container>
     <Button variant="link" onClick={goToAbout}>
       Learn More
     </Button>
     <span>&emsp; | &emsp;</span>
-    <CreateProject />
+    <Button variant="link" onClick={gotoSubmit}>
+      Submit a Project
+    </Button>
     <span>&emsp; | &emsp;</span>
     <Button variant="link" onClick={goToSignUp}>
       Sign Up

src/components/create-project/components/new-project-modal/NewProjectModal.jsx

@@ -92,8 +92,7 @@ const Dashboard = ({ pid, onClose }) => {
   };
 
   const handleSubmit = (values) => {
-    const { id, ...rest } = values;
-    updateProject({ pid, values: rest });
+    updateProject({ values });
     setTimeout(onClose, 3000);
   };
 

src/components/create-project/components/new-project-modal/index.js

@@ -8,7 +8,6 @@ const buttonStyle = theme.variants('mode', 'variant', {
       border: 2px solid ${ props => props.color || '#ff6e6e' };
       color: ${ props => props.color || '#ff6e6e' };
       font-weight: bold;
-
       :focus {
         outline: 0;
         box-shadow: 0 0 0 0.2rem #d7d9e8;
@@ -51,9 +50,10 @@ const buttonStyle = theme.variants('mode', 'variant', {
 });
 
 const Button = styled.button`
-  padding: 0.2em 1em;
+  padding: 0.4em 1em;
   font-family: HelveticaNeue;
   border-radius: 3px;
+  background: white;
   ${ buttonStyle }
 `;
 

src/components/create-project/index.js

@@ -12,8 +12,8 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   border: 1px solid rgba(33, 33, 33, 0.2);
-  border-radius: 0.5rem;
-  margin-bottom: 10px;
+  border-radius: 2rem;
+  margin-bottom: 30px;
   min-width: 318px;
   max-width: 320px;
 

src/components/explore-projects/ExploreProjects.jsx

@@ -12,7 +12,7 @@ const Container = styled.div`
 
 const CardImage = ({ image }) => (
   <Container>
-    <img src={image || 'https://via.placeholder.com/300'} alt="project cover" />
+    {image && <img src={image || 'https://via.placeholder.com/300'} alt="project cover" />}
   </Container>
 );
 

src/components/home/Home.jsx

@@ -9,6 +9,7 @@ import SearchBar from './components/search-bar';
 
 const Container = styled.div`
   margin-bottom: 10px;
+  padding: 15px 20px;
 `;
 
 const Filter = ({ types, onFilter }) => {

src/components/home/components/banner/Banner.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import { Dropdown,
+import {
+  Dropdown,
   DropdownMenu,
   DropdownToggle,
   DropdownItem,
   Col,
   Label,
-  Input } from 'reactstrap';
+  Input,
+} from 'reactstrap';
 
 const DropdownElement = ({ checked, index, label, onSelect }) => (
   <DropdownItem onClick={() => onSelect(index)}>
@@ -16,15 +18,26 @@ const DropdownElement = ({ checked, index, label, onSelect }) => (
   </DropdownItem>
 );
 
-const MenuModifiers = { setMaxHeight: { enabled: true,
-  order: 890,
-  fn: data => ({ ...data, styles: { ...data.styles, overflow: 'auto', maxHeight: 200 } }) } };
+const titles = {
+  'project-category': 'Discipline',
+  'release-status': 'Status',
+  organization: 'Organization Type',
+};
+const getMappedTitle = title => titles[title];
+
+const MenuModifiers = {
+  setMaxHeight: {
+    enabled: true,
+    order: 890,
+    fn: data => ({ ...data, styles: { ...data.styles, overflow: 'auto', maxHeight: 200 } }),
+  },
+};
 
 const FilterDropdown = ({ isOpen, toggle, title, filterItems, onSelect }) => (
   <Col>
     <Dropdown style={{ marginTop: 5 }} isOpen={isOpen} toggle={toggle}>
       <DropdownToggle caret tag="span" style={{ cursor: 'pointer' }}>
-        {title}
+        {getMappedTitle(title)}
       </DropdownToggle>
       <DropdownMenu modifiers={MenuModifiers}>
         {filterItems.map((item, i) => (

src/components/project-page/components/dashboard/Dashboard.jsx

@@ -2,12 +2,12 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Button } from 'reactstrap';
 import { Icon } from 'react-icons-kit';
 import { ic_clear } from 'react-icons-kit/md/ic_clear';
+import Button from '../../../button';
 
 const Tag = ({ text, handleCancel, className }) => (
-  <Button onClick={handleCancel} className={className}>
+  <Button color="#A6A7AB" onClick={handleCancel} className={className}>
     {text} <Icon icon={ic_clear} />
   </Button>
 );

src/components/shared/button/Button.jsx

@@ -12,6 +12,6 @@ const Container = styled.footer`
   }
 `;
 
-const Footer = () => <Container>©Thinkspaces 2018. All rights reserved.</Container>;
+const Footer = () => <Container>©Thinkspaces 2019. All rights reserved.</Container>;
 
 export default Footer;

src/components/shared/card/Card.jsx

@@ -60,7 +60,7 @@ const Navbar = () => {
               </NavLink>
             </NavItem>
             <NavItem>
-              <NavLink className="nav" to="/">
+              <NavLink className="nav" to="/submitproject">
                 Submit a Project
               </NavLink>
             </NavItem>