Add Redux/Thunk with bare minimum setup

.eslintignore

@@ -1,3 +1,4 @@
 node_modules/
 .next/
 next.config.js
+client/@types/

.eslintrc.json

@@ -12,6 +12,7 @@
     "prettier"
   ],
   "env": {
+    "browser": true,
     "node": true,
     "es6": true
   },

client/@types/global.d.ts

@@ -0,0 +1,10 @@
+/**
+ * For special typings in NextJS/ReactJS using TS...
+ * there are some pretty good patterns followed here - https://github.com/deptno/next.js-typescript-starter-kit
+ */
+
+interface Window {
+  __REDUX_DEVTOOLS_EXTENSION__: any;
+  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any;
+  __REACT_DEVTOOLS_GLOBAL_HOOK__: any;
+}

client/components/AddSponsor.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import fetch from 'isomorphic-fetch';
 import useForm from 'react-hook-form';
 
 import {
@@ -8,29 +7,20 @@ import {
   ResponseDiv,
   SubmitBtn,
 } from 'client/styles/components/AddSponsor';
-import {
-  IAddSponsorProps,
-  ISponsorData,
-} from 'client/interfaces/components/AddSponsor';
 
-const AddSponsor: React.FC<IAddSponsorProps> = ({ eventId, chapterId }) => {
+const AddSponsor: React.FC = () => {
   const [responseMsg, setResponseMsg] = React.useState('');
 
   const { register, handleSubmit, errors } = useForm();
 
+  // TODO: Get data from store
+  // const eventId = useSelector(state => state.selectedChapter.eventId);
+  // const chapterId = useSelector(state => state.selectedChapter.id);
+
   const onSubmit = async data => {
-    const { name, website, type }: ISponsorData = data;
     try {
-      await fetch(`/${chapterId}/events/${eventId}/sponsors`, {
-        // TODO: create route
-        method: 'post',
-        body: {
-          name,
-          website,
-          type,
-        },
-      });
-      setResponseMsg(`${name} has been added as a ${type} sponsor.`);
+      // await dispatch(sponsorActions.submit(eventId, chapterId));
+      setResponseMsg(`${data.name} has been added as a ${data.type} sponsor.`);
     } catch (e) {
       setResponseMsg('Uh oh, something went wrong.');
       // TODO: more descriptive error messages

client/components/ProgressCardContent.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CardContent, CircularProgress } from '@material-ui/core';
+
+interface IProps {
+  loading: boolean;
+}
+
+const ProgressCardContent: React.FC<IProps> = props => (
+  <CardContent>
+    {props.loading ? <CircularProgress /> : props.children}
+  </CardContent>
+);
+
+export default ProgressCardContent;

client/components/index.ts

@@ -1,4 +1,5 @@
 import SomeComponent from './SomeComponent';
 import AddSponsor from './AddSponsor';
+import ProgressCardContent from './ProgressCardContent';
 
-export { SomeComponent, AddSponsor };
+export { SomeComponent, AddSponsor, ProgressCardContent };

client/interfaces/models.d.ts

@@ -0,0 +1,7 @@
+// Here types are inherited from actual DB Modal Types
+// created [here](types/models.d.ts)
+// This is re
+
+import { ISponsor } from 'types/models';
+
+export type ISponsorResponse = Omit<ISponsor, 'createdAt' | 'updatedAt'>;

client/modules/home.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect } from 'react';
+import { Card, Typography, Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import { useSelector, useDispatch } from 'react-redux';
+import { SomeComponent, ProgressCardContent } from 'client/components';
+import { AppStoreState } from 'client/store/reducers';
+import { chapterActions } from 'client/store/actions';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    padding: 15,
+  },
+}));
+
+const Home: React.FC = () => {
+  const classes = useStyles();
+
+  const { error, loading, name, description } = useSelector(
+    (state: AppStoreState) => ({
+      error: state.chapter.error,
+      loading: state.chapter.loading,
+      name: state.chapter.name,
+      description: state.chapter.description,
+    }),
+  );
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(chapterActions.fetchChapter('1'));
+  }, []);
+
+  return (
+    <>
+      <SomeComponent />
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item xs={10}>
+          {!error && (
+            <Card>
+              <ProgressCardContent loading={loading}>
+                <Typography gutterBottom variant="h5" component="h2">
+                  {name}
+                </Typography>
+                <Typography variant="body2" color="textSecondary" component="p">
+                  {description}
+                </Typography>
+              </ProgressCardContent>
+            </Card>
+          )}
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+
+export default Home;

client/services/http-service.ts

@@ -0,0 +1,32 @@
+/**
+ * This Class is a very minimal wrapper around fetch
+ * to make API calls easy.
+ */
+
+import fetch from 'cross-fetch';
+
+export class HttpService<V = any> {
+  public static baseUrl = '/api/v1'; // TODO: need to create some ENV for this
+  public static baseHeaders = {
+    'Content-Type': 'application/json',
+  };
+
+  public stringifyParams(params: Record<string, string>) {
+    return Object.keys(params).reduce((acc, key, i) => {
+      return Object.prototype.hasOwnProperty.call(params, key)
+        ? `${acc}${i !== 0 ? '&' : '?'}${key}=${params[key]}`
+        : acc;
+    }, '');
+  }
+
+  public async get(
+    url: string,
+    params: Record<string, string>,
+    headers: Record<string, string>,
+  ) {
+    return fetch(HttpService.baseUrl + url + this.stringifyParams(params), {
+      headers: { ...HttpService.baseHeaders, ...headers },
+      method: 'GET',
+    }).then<V>(res => res.json());
+  }
+}

client/store/actions/chapter.ts

@@ -0,0 +1,48 @@
+import { ActionCreator } from 'redux';
+import { HttpService } from 'client/services/http-service';
+import { chapterTypes } from '../types';
+
+/****************
+ * Actions
+ ****************/
+export const fetchStart = (): chapterTypes.IChapterActionTypes => {
+  return {
+    type: chapterTypes.FETCH_START,
+  };
+};
+
+export const fetchSuccess = (
+  chapter: chapterTypes.IChapterModal,
+): chapterTypes.IChapterActionTypes => {
+  return {
+    type: chapterTypes.FETCH_SUCCESS,
+    payload: chapter,
+  };
+};
+
+export const fetchFail = (error: string): chapterTypes.IChapterActionTypes => {
+  return {
+    payload: error,
+    type: chapterTypes.FETCH_FAIL,
+  };
+};
+
+/****************
+ * Side-Effects
+ ****************/
+export const fetchChapter: ActionCreator<
+  chapterTypes.ThunkResult<Promise<void>>
+> = (id: string) => async dispatch => {
+  dispatch(fetchStart());
+
+  // TODO: for the PR to be simple, haven't added any specific HTTP Service,
+  // But we can make HTTPService some kind of builder, to return us back with specific
+  // modal service, like ChapterHttpService.
+  const http = new HttpService<chapterTypes.IChapterModal>();
+  try {
+    const resData = await http.get(`/chapters/${id}`, {}, {});
+    dispatch(fetchSuccess(resData));
+  } catch (err) {
+    dispatch(fetchFail(err));
+  }
+};

client/store/actions/index.ts

@@ -0,0 +1,3 @@
+import * as chapterActions from './chapter';
+
+export { chapterActions };

client/store/reducers/chapter.ts

@@ -0,0 +1,39 @@
+import produce from 'immer';
+import { chapterTypes } from '../types';
+
+const initialState: chapterTypes.IChapterStoreState = {
+  name: '',
+  description: '',
+  category: '',
+  loading: false,
+  error: '',
+};
+
+const reducer = (
+  state = initialState,
+  action: chapterTypes.IChapterActionTypes,
+) =>
+  produce(state, draft => {
+    switch (action.type) {
+      case chapterTypes.FETCH_START:
+        draft.error = '';
+        draft.loading = true;
+        break;
+      case chapterTypes.FETCH_SUCCESS:
+        draft.id = action.payload.id;
+        draft.name = action.payload.name;
+        draft.description = action.payload.description;
+        draft.category = action.payload.category;
+        draft.error = '';
+        draft.loading = false;
+        break;
+      case chapterTypes.FETCH_FAIL:
+        draft.error = action.payload;
+        draft.loading = false;
+        break;
+      default:
+        return state;
+    }
+  });
+
+export default reducer;

client/store/reducers/index.ts

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import chapterReducer from './chapter';
+
+export const rootReducer = combineReducers({
+  chapter: chapterReducer,
+});
+
+export type AppStoreState = ReturnType<typeof rootReducer>;

client/store/types/chapter.ts

@@ -0,0 +1,45 @@
+import { ThunkAction } from 'redux-thunk';
+import { AppStoreState } from '../reducers';
+
+export const FETCH_START = 'fcc/chapter/CHAPTER_START';
+export const FETCH_SUCCESS = 'fcc/chapter/CHAPTER_SUCCESS';
+export const FETCH_FAIL = 'fcc/chapter/CHAPTER_FAIL';
+
+export interface IChapterModal {
+  id?: string;
+  name: string;
+  description: string;
+  category: string;
+}
+
+export interface IChapterStoreState extends IChapterModal {
+  loading: boolean;
+  error: string; // Should reflect a generic Error Type here
+}
+
+interface IChapterFetchStartAction {
+  type: typeof FETCH_START;
+}
+
+interface IChapterFetchSuccessAction {
+  type: typeof FETCH_SUCCESS;
+  payload: IChapterModal;
+}
+
+interface IChapterFetchFailureAction {
+  type: typeof FETCH_FAIL;
+  payload: string;
+}
+
+export type IChapterActionTypes =
+  | IChapterFetchStartAction
+  | IChapterFetchSuccessAction
+  | IChapterFetchFailureAction;
+
+// https://github.com/reduxjs/redux-thunk/issues/103#issuecomment-298526567
+export type ThunkResult<R> = ThunkAction<
+  R,
+  AppStoreState,
+  null,
+  IChapterActionTypes
+>;

client/store/types/index.ts

@@ -0,0 +1,3 @@
+import * as chapterTypes from './chapter';
+
+export { chapterTypes };