Setup redux structure

    * setup redux utils, devtools, folder structure
    * data model is normalized via ids and jsons
    * promise middleware to handle api requests
    * ready to test with react redux hooks
    * schema to create associations between data sets
    * reselect to organize complex selectors

Author: bpalomino5

package-lock.json

@@ -17,6 +17,7 @@
     "formik": "^1.5.4",
     "i": "^0.3.6",
     "lodash": "^4.17.11",
+    "normalizr": "^3.4.1",
     "prop-types": "^15.7.2",
     "react": "^16.8.2",
     "react-avatar": "^3.5.0",
@@ -26,13 +27,18 @@
     "react-icons-kit": "^1.2.1",
     "react-messenger-customer-chat": "^0.7.2",
     "react-modal": "^3.8.1",
-    "react-redux": "^6.0.0",
+    "react-redux": "^7.1.0",
     "react-router-dom": "^4.3.1",
     "react-scripts": "^2.1.5",
     "react-select": "^2.4.3",
     "react-share": "^2.4.0",
     "react-sortable-hoc": "^1.8.3",
     "reactstrap": "^6.5.0",
+    "redux": "^4.0.4",
+    "redux-actions": "^2.6.5",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-promise-middleware": "^6.1.1",
+    "reselect": "^4.0.0",
     "styled-components": "^4.3.2",
     "styled-theming": "^2.2.0",
     "uuid": "^3.3.2",

package.json

@@ -0,0 +1,2 @@
+export * from './project';
+export * from './tag';

src/components/app/actions/index.js

@@ -0,0 +1,14 @@
+import { normalize } from 'normalizr';
+import { createAction } from 'redux-actions';
+import { schema } from '../../../utils';
+import { db, Project } from '../../../firebase';
+
+export const createProject = createAction('CREATE_PROJECT', async (values) => {
+  const response = await Project.create(values);
+  return response;
+});
+
+export const getProjects = createAction('GET_PROJECTS', async () => {
+  const response = await db.getAll('projects');
+  return normalize(response, [ schema.project ]);
+});

src/components/app/actions/project.js

@@ -0,0 +1,10 @@
+import { normalize } from 'normalizr';
+import { createAction } from 'redux-actions';
+
+import { schema } from '../../../utils';
+import { db } from '../../../firebase';
+
+export const getTags = createAction('GET_TAGS', async () => {
+  const response = await db.getAll('tags');
+  return normalize(response, [ schema.tag ]);
+});

src/components/app/actions/tag.js

@@ -1 +1,5 @@
+import * as actions from './actions';
+
+export { actions };
+export { default as getRootReducer } from './reducers';
 export { default } from './App';

src/components/app/index.js

@@ -0,0 +1,18 @@
+import { combineReducers } from 'redux';
+
+import projects from './project';
+import tags from './tag';
+
+export default () => {
+  const data = combineReducers({
+    projects,
+    tags,
+  });
+
+  const appReducer = combineReducers({
+    data,
+  });
+
+  const rootReducer = (state, action) => appReducer(state, action);
+  return rootReducer;
+};

src/components/app/reducers/index.js

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

src/components/app/reducers/project.js

@@ -0,0 +1,17 @@
+import { handleActions } from 'redux-actions';
+
+import { getTags } from '../actions';
+
+const reducer = handleActions(
+  {
+    [getTags]: {
+      FULFILLED: (state, { payload }) => ({
+        ...state,
+        ...payload.entities.tags,
+      }),
+    },
+  },
+  {},
+);
+
+export default reducer;

src/components/app/reducers/tag.js

@@ -0,0 +1,15 @@
+import { orderBy, isNil } from 'lodash';
+import { createSelector } from 'reselect';
+
+const getTags = state => state.data.tags;
+
+const getProjects = state => orderBy(state.data.projects, [ 'title' ], [ 'asc' ]);
+
+export default createSelector(
+  [ getTags, getProjects ],
+  (tags, projects) =>
+    projects.map(project =>
+      (!isNil(project.tags)
+        ? { ...project, tags: project.tags.map(id => tags[id]) }
+        : { ...project, tags: [] })),
+);

src/components/app/selectors.js

@@ -1,10 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
-import { db } from '../../firebase';
-
 import Filter from '../shared/filter';
 import ProjectList from './components/project-list';
+import useProjects from '../../hooks/use-projects';
 
 const Header = styled.h2`
   margin-bottom: 20px;
@@ -14,16 +13,7 @@ const filterTypes = [ 'project-category', 'release-status', 'organization' ];
 
 const ExploreProjects = () => {
   const [ appliedTags, setAppliedTags ] = useState([]);
-  const [ projects, setProjects ] = useState([]);
-
-  useEffect(() => {
-    const init = async () => {
-      const _projects = await db.getAll('projects');
-      setProjects(_projects);
-    };
-
-    init();
-  }, []);
+  const projects = useProjects();
 
   const handleFilter = (tag) => {
     const index = appliedTags.findIndex(_tag => _tag === tag.id);