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')}
         />