feat: display collections and drb books

package.json

@@ -8,17 +8,21 @@
         "@babel/preset-react": "^7.0.0",
         "@material-ui/core": "^4.2.1",
         "@material-ui/icons": "^4.2.1",
+        "axios": "^0.19.0",
         "react": "^16.8.6",
         "react-dom": "^16.8.6",
         "react-loader-spinner": "^2.3.0",
         "react-redux": "^7.1.0",
+        "react-redux-loading": "^1.0.1",
         "react-router": "^5.0.1",
         "react-router-dom": "^5.0.1",
         "react-scripts": "3.0.1",
         "redux": "^4.0.4",
         "redux-logger": "^3.0.6",
         "redux-mock-store": "^1.5.3",
-        "redux-thunk": "^2.3.0"
+        "redux-thunk": "^2.3.0",
+        "slugify": "^1.3.4",
+        "titlecase": "^1.1.3"
     },
     "scripts": {
         "start": "react-scripts start",

src/actions/actions.types.js

@@ -0,0 +1,3 @@
+export const SET_AUTH_USER = 'SET_AUTH_USER';
+
+export const GET_DRB_BOOKS = 'GET_DRB_BOOKS';

src/actions/authUser.js

@@ -1,13 +1,10 @@
-import { SET_AUTH_USER } from './constants';
+// /* eslint-disable no-unused-vars */
+// import { SET_AUTH_USER } from './actions.types';
 
-// action creator
-export const set_auth_action_creator = id => ({ type: SET_AUTH_USER, id });
+// // action creator
+// export const set_auth_action_creator = id => ({ type: SET_AUTH_USER, id });
 
-// action dispatcher
-export const set_auth_user = () => {
-    return dispatch => {
-        return new Promise.resolve('AUTH_USER_ID').then(user => {
-            dispatch(set_auth_action_creator(user));
-        });
-    };
-};
+// // action dispatcher
+// export const set_auth_user = () => dispatch => {
+//     return dispatch;
+// };

src/actions/drbActions.js

@@ -0,0 +1,12 @@
+import { GET_DRB_BOOKS } from './actions.types';
+
+const get_drb_books_action_creator = booklist => {
+    return {
+        type: GET_DRB_BOOKS,
+        booklist,
+    };
+};
+
+export const get_drb_books = (book_list) => dispatch => {
+    dispatch(get_drb_books_action_creator(book_list));
+};

src/components/AppRoutes.js

@@ -4,16 +4,16 @@ import PageLoader from './PageLoader';
 import PublicRoute from '../routes/PublicRoute';
 import Error404 from './Error404';
 
-const env = process.env.NODE_ENV;
-const path = env === 'development' ? '/' : '/Ethodoxy/';
-
 const Home = lazy(() => import('./Home'));
+const DouayBooks = lazy(() => import('./Douay.books'));
 
 const Routes = () => (
-    <Router>
+    // eslint-disable-next-line no-undef
+    <Router basename={process.env.PUBLIC_URL}>
         <Suspense fallback={<PageLoader />}>
             <Switch>
-                <PublicRoute exact path={path} component={Home} />
+                <PublicRoute exact path='/' component={ Home } />
+                <PublicRoute exact path='/douay-rheims-bible' component={ DouayBooks } />
 
                 {/* catch all invalid urls */}
                 <Route component={Error404} />

src/components/Douay.books.js

@@ -0,0 +1,98 @@
+import React, { Fragment, useState, useEffect } from 'react';
+import axios from 'axios';
+import titlecase from 'titlecase';
+import slugify from 'slugify';
+
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+import { useDispatch } from 'react-redux';
+
+import { DR_BOOKS_URL, default_headers } from '../constants';
+import LinkGridItem from './LinkGridItem';
+
+import { get_drb_books } from '../actions/drbActions';
+
+const useStyles = makeStyles({
+    container: {
+        paddingTop: '20px'
+    },
+});
+
+const DouayBooks = () => {
+    const classes = useStyles();
+    const dispatch = useDispatch();
+    const [books, setBooks] = useState(['a']);
+
+    useEffect(() => {
+        const getBooks = async () => {
+            let books = [];
+            let url = DR_BOOKS_URL;
+            const config = { headers: { ...default_headers }};
+
+            while (url) {
+                const { data } = await axios.get(url, config);
+                const { results, next } = data;
+                books = books.concat(results);
+                url = next;
+            }
+            setBooks(books);
+            dispatch(get_drb_books(books));
+        };
+        getBooks();
+    }, [dispatch]);
+
+
+    return (
+        <Fragment>
+            <h2>Douay-Rheims Bible</h2>
+
+            <h3>Old Testament</h3>
+            <Grid
+                container
+                spacing={2}
+                classes={{
+                    root: classes.container
+                }}
+            >
+                {
+                    books
+                        .filter(book => book.testament==='old testament')
+                        .map(book => {
+                            return (
+                                <LinkGridItem
+                                    key={ book.id }
+                                    title={ titlecase(book.name) }
+                                    location={ `/${slugify(book.name)}` }
+                                />
+                            );
+                        })
+                }
+            </Grid>
+
+            <h3>New Testament</h3>
+            <Grid
+                container
+                spacing={2}
+                classes={{
+                    root: classes.container
+                }}
+            >
+                {
+                    books
+                        .filter(book => book.testament==='new testament')
+                        .map(book => {
+                            return (
+                                <LinkGridItem
+                                    key={ book.id }
+                                    title={ titlecase(book.name) }
+                                    location={ `/${slugify(book.name)}` }
+                                />
+                            );
+                        })
+                }
+            </Grid>
+        </Fragment>
+    );
+};
+
+export default DouayBooks;

src/components/ErrorBoundary.js

@@ -11,6 +11,7 @@ class ErrorBoundary extends Component {
 
     componentDidCatch(error, info) {
         // You can also log the error to an error reporting service
+        // eslint-disable-next-line no-console
         console.log({ error, info });
     }
 
@@ -27,7 +28,9 @@ class ErrorBoundary extends Component {
 }
 
 ErrorBoundary.propTypes = {
-    children: propTypes.object.isRequired
+    children: propTypes.oneOfType([
+        propTypes.array, propTypes.object
+    ]).isRequired,
 };
 
 export default ErrorBoundary;

src/components/Footer.js

@@ -4,7 +4,7 @@ const Footer = () => {
     return (
         <footer>
             <p>
-                Built with <code>material UI</code> and <code>React</code>
+                Built with <code>React</code> and <code>material UI</code> (<code>orjichidi95@gmail.com</code>)
             </p>
         </footer>
     );

src/components/Home.js

@@ -1,11 +1,38 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
 import { connect } from 'react-redux';
 
-const Home = props => {
-    return <div className="App">Welcome {props.auth}</div>;
+import LinkGridItem from './LinkGridItem';
+
+const useStyles = makeStyles({
+    container: {
+        paddingTop: '20px'
+    },
+});
+
+const Home = () => {
+    const classes = useStyles();
+
+    return (
+        <Fragment>
+            <h2>Available titles</h2>
+            <Grid
+                container
+                spacing={2}
+                classes={{
+                    root: classes.container
+                }}
+            >
+                <LinkGridItem title='Douay-Rheims Bible' location='/douay-rheims-bible' />
+                <LinkGridItem title='Challoner Commentary' location='/challoner' />
+            </Grid>
+        </Fragment>
+    );
 };
 
+
 Home.propTypes = {
     auth: PropTypes.string
 };

src/components/LinkGridItem.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+    item: {
+        // padding: '0px',
+        // margin: '5px',
+    }
+});
+
+const LinkGridItem = props => {
+    const classes = useStyles();
+    const { title, location } = props;
+
+    return (
+        <Grid
+            item
+            classes={{
+                item: classes.item
+            }}
+        >
+            <Link className='book-link' to={ location }>{ title }</Link>
+        </Grid>
+    );
+};
+
+
+LinkGridItem.propTypes = {
+    location: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired
+};
+
+export default LinkGridItem;

src/components/NavBar.js

@@ -42,15 +42,6 @@ const useStyles = makeStyles(theme => ({
             width: 'auto'
         }
     },
-    searchIcon: {
-        width: theme.spacing(7),
-        height: '100%',
-        position: 'absolute',
-        pointerEvents: 'none',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
     inputRoot: {
         color: 'inherit'
     },
@@ -173,7 +164,7 @@ const NavBar = () => {
                     >
                         <MenuIcon />
                     </IconButton>
-                    <Typography className={classes.title} variant="h6" noWrap>
+                    <Typography className={classes.title} variant="h5" noWrap>
                         Ethodoxy
                     </Typography>
 

src/components/useAxiosGet.js

@@ -0,0 +1,19 @@
+// eslint-disable-next-line no-unused-vars
+import React, { useState, useEffect } from 'react';
+
+import axios from 'axios';
+import { default_headers } from '../constants';
+
+const useAxiosGet = url => {
+    const [ data, setData ] = useState(null);
+    const getData = async () => {
+        const config = { headers: { ...default_headers }};
+        const resp = await axios.get(url, config);
+        const json = resp.json();
+        setData(json);
+    };
+    useEffect(() => { getData(url); [url];});
+    return data;
+};
+
+export default useAxiosGet;

src/constants.js

@@ -0,0 +1,9 @@
+export const BASE_URL = 'https://ethodoxy.herokuapp.com/api/v1';
+export const DR_BOOKS_URL = `${BASE_URL}/books/`;
+
+export const default_headers = {
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': 'PUT, GET, PATCH, POST',
+    'Access-Control-Allow-Headers': 'Content-Type',
+    'Access-Control-Max-Age': '3000',
+};