Fixed Navbar links for react router

    * project page reloads request appropriate data
    * project page use selectors for redux store
    * cards use ids to load project page easier

Author: bpalomino5

src/components/app/actions/project.js

@@ -12,3 +12,13 @@ export const getProjects = createAction('GET_PROJECTS', async () => {
   const response = await db.getAll('projects');
   return normalize(response, [ schema.project ]);
 });
+
+export const getProject = createAction('GET_PROJECT', async (pid) => {
+  const response = await db.get('projects')(pid);
+  return normalize(response, schema.project);
+});
+
+export const updateProject = createAction('UPDATE_PROJECT', async ({ pid, values }) => {
+  await db.update('projects')(pid)(values);
+  return normalize({ ...values }, schema.project);
+});

src/components/app/actions/tag.js

@@ -2,9 +2,25 @@ import { normalize } from 'normalizr';
 import { createAction } from 'redux-actions';
 
 import { schema } from '../../../utils';
-import { db } from '../../../firebase';
+import { db, Project } from '../../../firebase';
 
 export const getTags = createAction('GET_TAGS', async () => {
   const response = await db.getAll('tags');
   return normalize(response, [ schema.tag ]);
 });
+
+export const getTag = createAction('GET_TAG', async (tid) => {
+  const response = await db.get('tags')(tid);
+  return normalize(response, schema.tag);
+});
+
+export const updateTags = createAction('UPDATE_TAGS', async ({ pid, tags, type }) => {
+  await Project.dropTags(pid)(type);
+  await Promise.all(
+    tags.map(async (tagId) => {
+      await Project.updateFieldArrayWithId(db.add)('tags')(pid)(tagId);
+    }),
+  );
+
+  return normalize({ id: pid, tags }, schema.project);
+});

src/components/app/reducers/project.js

@@ -1,6 +1,6 @@
 import { handleActions } from 'redux-actions';
 
-import { createProject, getProjects } from '../actions';
+import { createProject, getProjects, getProject, updateProject } from '../actions';
 
 const reducer = handleActions(
   {
@@ -20,6 +20,26 @@ const reducer = handleActions(
         ...payload.entities.projects,
       }),
     },
+    [getProject]: {
+      FULFILLED: (state, { payload }) => {
+        const id = payload.result;
+        const values = payload.entities.projects[id];
+        return {
+          ...state,
+          [id]: { ...state[id], ...values },
+        };
+      },
+    },
+    [updateProject]: {
+      FULFILLED: (state, { payload }) => {
+        const id = payload.result;
+        const values = payload.entities.projects[id];
+        return {
+          ...state,
+          [id]: { ...state[id], ...values },
+        };
+      },
+    },
   },
   {},
 );

src/components/app/reducers/tag.js

@@ -1,6 +1,6 @@
 import { handleActions } from 'redux-actions';
 
-import { getTags } from '../actions';
+import { getTags, getTag, updateTags } from '../actions';
 
 const reducer = handleActions(
   {
@@ -10,6 +10,26 @@ const reducer = handleActions(
         ...payload.entities.tags,
       }),
     },
+    [getTag]: {
+      FULFILLED: (state, { payload }) => {
+        const id = payload.result;
+        const values = payload.entities.tags[id];
+        return {
+          ...state,
+          [id]: { ...state[id], ...values },
+        };
+      },
+    },
+    // [updateTags]: {
+    //   FULFILLED: (state, { payload }) => {
+    //     const id = payload.result;
+    //     const values = payload.entities.projects[id].tags;
+    //     return {
+    //       ...state,
+    //       [id]: { ...state[id], ...values },
+    //     };
+    //   },
+    // },
   },
   {},
 );

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

@@ -9,6 +9,7 @@ const renderProjects = projects =>
   projects.map((p, i) => (
     <Col sm key={i}>
       <Card
+        id={p.id}
         name={p.name}
         shortname={p.shortname}
         description={p.description}

src/components/home/Home.jsx

@@ -37,6 +37,7 @@ const Home = ({ history }) => {
         {projects.slice(0, 3).map((p, i) => (
           <Col sm key={i}>
             <Card
+              id={p.id}
               name={p.name}
               shortname={p.shortname}
               description={p.description}
@@ -56,6 +57,7 @@ const Home = ({ history }) => {
         {projects.slice(3, 6).map((p, i) => (
           <Col sm key={i}>
             <Card
+              id={p.id}
               name={p.name}
               shortname={p.shortname}
               description={p.description}

src/components/project-page/ProjectPage.jsx

@@ -1,82 +1,61 @@
 import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
-import some from 'lodash/some';
+import { some, get, isNil } from 'lodash';
 import { withRouter } from 'react-router-dom';
 
 import { Row } from 'reactstrap';
-import { auth, db } from '../../firebase';
+import { useSelector, useDispatch } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { getProject } from '../app/actions';
+import { auth } from '../../firebase';
 
 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';
 
-const LoadingView = styled.div`
-  display: flex;
-  height: 70vh;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-`;
+const ProjectPage = ({ location }) => {
+  const [ showDashboard, setShowDashboard ] = useState(false);
+  const [ editable, setEditable ] = useState(false);
 
-const ProjectPage = ({ match, location }) => {
-  const [ loadingState, setLoadingState ] = useState(false);
-  const [ showDashboardState, setShowDashboardState ] = useState(false);
-  const [ projectDataState, setProjectDataState ] = useState({});
-  const [ editableState, setEditableState ] = useState(false);
-  const [ pidState, setPidState ] = useState(null);
+  const pid = get(location, 'state.id', null);
+  const project = useSelector(state => state.data.projects[pid]);
+  const dispatch = useDispatch();
+  const actions = bindActionCreators({ getProject }, dispatch);
 
   useEffect(() => {
-    const init = async () => {
-      setLoadingState(true);
-
-      const { shortname } = match.params;
-      const projects = await db.getAllByFilter('projects')(
-        db.where('shortname')('==')(shortname.trim()),
-      );
-
-      if (projects !== undefined && projects.length === 1) {
-        const project = projects[0];
-        setProjectDataState(project);
-        setPidState(project.id);
-        // a project is editable if the user either belongs to the team or the admin
-        if (auth.isLoggedIn()) {
-          const { uid: currentUserId } = auth.getUserInfo();
-          if (currentUserId) {
-            const editable = some(project.team, id => id === currentUserId)
-              || some(project.admin, id => id === currentUserId)
-              || project.owner === currentUserId;
-            // set whether or not editable
-            setEditableState(editable);
-          }
-        }
-      }
-      setLoadingState(false);
-    };
-
-    init();
+    actions.getProject(pid);
   }, []);
 
-  const toggleDashboard = toggle => () => setShowDashboardState(toggle);
+  useEffect(() => {
+    const info = auth.getUserInfo();
+    if (project && info) {
+      const _editable = some(project.team, id => id === info.uid)
+        || some(project.admin, id => id === info.uid)
+        || project.owner === info.uid;
+      setEditable(_editable);
+    }
+  }, [ project ]);
+
+  const toggleDashboard = toggle => () => setShowDashboard(toggle);
 
-  if (loadingState) {
-    return <LoadingView>Loading ...</LoadingView>;
+  if (isNil(project)) {
+    return <div>Loading...</div>;
   }
-  if (pidState && showDashboardState) {
-    return <Dashboard pid={pidState} handleCloseDashboard={toggleDashboard(false)} />;
+  if (showDashboard) {
+    return <Dashboard pid={pid} handleCloseDashboard={toggleDashboard(false)} />;
   }
   return (
     <section>
-      {editableState ? <EditProjectBanner onEdit={toggleDashboard(true)} /> : <div />}
+      {editable ? <EditProjectBanner onEdit={toggleDashboard(true)} /> : <div />}
       <Row>
-        <BannerContent name={projectDataState.name} images={projectDataState.images} />
-        <ProjectInfoContent project={projectDataState} />
+        <BannerContent name={project.name} images={project.images} />
+        <ProjectInfoContent project={project} />
       </Row>
       <SocialContentSection
-        isOwner={editableState}
-        projectId={pidState}
-        ourstory={projectDataState.about ? projectDataState.about : ''}
+        isOwner={editable}
+        projectId={pid}
+        ourstory={project.about ? project.about : ''}
         selected={location.hash}
       />
     </section>

src/components/project-page/components/dashboard/components/description-form/DescriptionForm.jsx

@@ -2,23 +2,21 @@ import React from 'react';
 import styled from 'styled-components';
 import { Formik, Field, Form, ErrorMessage } from 'formik';
 
+import useProject from '../../../../../../hooks/use-project';
 import SaveButton from '../../../../../shared/save-button';
-import useFirestoreProject from '../../../../../../hooks/use-firestore-project';
 import { DescriptionSchema } from '../../validation';
 
-const initialValues = { name: '', description: '' };
-
 const DescriptionForm = ({ className, pid }) => {
-  const { values, success, loading, handleSave } = useFirestoreProject(pid, initialValues);
+  const { project, handleSave, success, loading } = useProject(pid);
   return (
     <section className={className}>
       <h2>Description</h2>
       <div className="wrapper">
         <Formik
           enableReinitialize
           validationSchema={DescriptionSchema}
-          initialValues={{ name: values.name, description: values.description }}
-          onSubmit={vals => handleSave(vals)}
+          initialValues={{ name: project.name, description: project.description }}
+          onSubmit={values => handleSave(values)}
           render={({ status }) => (
             <Form>
               <h5>Project name</h5>

src/components/project-page/components/dashboard/components/tags-form/TagsForm.jsx

@@ -1,16 +1,28 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { bindActionCreators } from 'redux';
+import { useDispatch } from 'react-redux';
 import CategoryForm from './components/category-form';
 import OrganizationForm from './components/organization-form';
 import ReleaseForm from './components/release-form';
 
-const TagsForm = ({ pid }) => (
-  <section>
-    <h2>Tags</h2>
-    <hr />
-    <CategoryForm pid={pid} />
-    <OrganizationForm pid={pid} />
-    <ReleaseForm pid={pid} />
-  </section>
-);
+import { getTags } from '../../../../../app/actions';
+
+const TagsForm = ({ pid }) => {
+  const dispatch = useDispatch();
+  const actions = bindActionCreators({ getTags }, dispatch);
+  useEffect(() => {
+    actions.getTags();
+  }, []);
+
+  return (
+    <section>
+      <h2>Tags</h2>
+      <hr />
+      <CategoryForm pid={pid} />
+      <OrganizationForm pid={pid} />
+      <ReleaseForm pid={pid} />
+    </section>
+  );
+};
 
 export default TagsForm;

src/components/project-page/components/dashboard/components/tags-form/components/category-form/CategoryForm.jsx

@@ -1,30 +1,50 @@
 import React from 'react';
+import { Formik } from 'formik';
 import styled from 'styled-components';
 import Select from 'react-select';
 import SaveButton from '../../../../../../../shared/save-button';
-import useTags from '../../../../../../../../hooks/use-tags';
+import useTag from '../../../../../../../../hooks/use-tag';
 
 const CategoryForm = ({ className, pid }) => {
-  const { handleSave, handleChange, success, loading, tags, chosenTags } = useTags(
-    pid,
-    'project-category',
-  );
+  const { tags, chosenTags, handleSave } = useTag(pid, 'project-category');
+  const submitForm = (values, { setSubmitting, setStatus }) => {
+    handleSave(values.chosenTags.map(tag => tag.id));
+    setSubmitting(false);
+    setStatus({ success: true });
+  };
+
   return (
     <article className={className}>
-      <h3>Category</h3>
-      <span className="helpText">
-        Choose tags that best describe the category or discipline your project falls under.
-      </span>
-      <Select
-        captureMenuScroll={false}
-        value={chosenTags}
-        isMulti
-        name="category"
-        options={tags}
-        onChange={handleChange}
-        classNamePrefix="select"
+      <Formik
+        enableReinitialize
+        initialValues={{ chosenTags }}
+        onSubmit={submitForm}
+        render={({ values, setFieldValue, handleSubmit, isSubmitting, status }) => (
+          <form onSubmit={handleSubmit}>
+            <h3>Category</h3>
+            <span className="helpText">
+              Choose tags that best describe the category or discipline your project falls under.
+            </span>
+            <Select
+              captureMenuScroll={false}
+              value={values.chosenTags}
+              getOptionLabel={option => option.name}
+              getOptionValue={option => option.id}
+              isMulti
+              name="category"
+              options={tags}
+              onChange={value => setFieldValue('chosenTags', value)}
+              classNamePrefix="select"
+            />
+            <SaveButton
+              type="submit"
+              disabled={isSubmitting}
+              success={status && status.success}
+              loading={isSubmitting}
+            />
+          </form>
+        )}
       />
-      <SaveButton loading={loading} disabled={loading} success={success} onClick={handleSave} />
     </article>
   );
 };