├── .gitignore
├── .static
├── README.md
├── app.json
├── package-lock.json
├── package.json
├── public
├── index.html
└── manifest.json
└── src
├── App.js
├── App.test.js
├── back.jpg
├── back1.svg
├── bookdiary
├── 1080p Card.png
├── Landing Page.png
├── iPhone 6-7-8 – 1.png
└── iPhone 6-7-8 – 2.png
├── components
├── AuthorCard.js
├── Card.js
├── Cards.js
├── CategoryCard.js
├── Icon.js
├── Input.js
├── LandingPage.js
├── LandingPageContent.js
├── Menu.js
├── MenuLikes.js
├── SearchList.js
└── SinglePageCard.js
├── config.js
├── css
└── index.css
├── index.js
├── serviceWorker.js
├── store
├── actions
│ └── BooksAction.js
└── reducers
│ └── rootReducer.js
└── strip.png
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/.static:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosmicjs/react-book-app/2f415225e775fb722b69251da350ee5701c3c9fc/.static
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Book App
2 | 
3 | # [Demo](https://cosmicjs.com/apps/react-book-app)
4 | Uses:
5 | - React for UI
6 | - Redux for state mangaement
7 | - [Cosmic JS](https://cosmicjs.com) for content management
8 | - HTML
9 | - CSS
10 | - AdobeXD
11 | - (RWD - mobile, tablet, desktop) / css-grid, media
12 |
13 |
14 | ## Screenshots
15 | 
16 | 
17 |
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "dokku": {
4 | "predeploy": "npm run build"
5 | }
6 | }
7 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-book-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "^16.6.0",
7 | "react-dom": "^16.6.0",
8 | "react-redux": "^5.1.0",
9 | "react-router-dom": "^4.3.1",
10 | "react-scripts": "2.1.1",
11 | "redux": "^4.0.1",
12 | "redux-thunk": "^2.3.0",
13 | "sal.js": "^0.5.0"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test",
19 | "eject": "react-scripts eject"
20 | },
21 | "eslintConfig": {
22 | "extends": "react-app"
23 | },
24 | "browserslist": [
25 | ">0.2%",
26 | "not dead",
27 | "not ie <= 11",
28 | "not op_mini all"
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React App
27 |
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
33 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {BrowserRouter, Route, Switch} from 'react-router-dom'
3 | import { connect } from 'react-redux';
4 | import sal from 'sal.js';
5 |
6 | import LandingPage from './components/LandingPage';
7 | import { FetchApiBooks } from './store/actions/BooksAction';
8 | import Icon from './components/Icon';
9 | import SinglePageCard from './components/SinglePageCard';
10 | import CategoryCard from './components/CategoryCard';
11 | import AuthorCard from './components/AuthorCard';
12 |
13 | class App extends Component {
14 |
15 | componentDidMount () {
16 |
17 | this.props.fetchBooks();
18 | sal({
19 | threshold: 1,
20 | once: false,
21 | });
22 |
23 | }
24 | render() {
25 | return (
26 |
27 |
28 |
29 |
30 |
36 |
37 |
38 | );
39 | }
40 | }
41 |
42 | const mapDispatchToProps = (dispatch) => {
43 | return{
44 | fetchBooks: () => {
45 | dispatch(FetchApiBooks());
46 | }
47 | }
48 | }
49 | export default connect(null,mapDispatchToProps)(App);
50 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(
9 | {props.author && }
10 | {props.booksList ? :
12 | )
13 | }
14 | const mapStateToProps = (state, ownProps) => {
15 | const author = ownProps.match.params.author_slug;
16 | console.log('author', state);
17 | return{
18 | booksList:state.books.filter(cat => {
19 | return cat.metadata.author.slug === author
20 | }),
21 | author: state.author.find(item => {return(item.slug === author)})
22 | }
23 | }
24 |
25 | export default connect(mapStateToProps)(AuthorCard);
26 |
--------------------------------------------------------------------------------
/src/components/Card.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosmicjs/react-book-app/2f415225e775fb722b69251da350ee5701c3c9fc/src/components/Card.js
--------------------------------------------------------------------------------
/src/components/Cards.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { connect } from 'react-redux'
3 | import { Link } from 'react-router-dom'
4 |
5 | const Cards = (props) => {
6 |
7 | const Save = (item) => {
8 | props.hitLike(item);
9 | }
10 |
11 | return (
12 |
13 |
14 |
15 | {
16 | props.booksList.map((item, index) => {
17 | return(
18 |
22 |
23 |
24 |
25 |
26 |
27 | Save(index, item.slug)} >
28 |
30 |
32 |
33 |
34 |
35 |
36 |
37 |
{item.title}
38 |
39 |
40 |
Author: {item.metadata.author.title}
41 |
Genres: {item.metadata.category.title}
42 |
43 | )
44 | })
45 | }
46 |
10 | {props.category && }
11 | {props.booksList ? :
13 | )
14 | }
15 | const mapStateToProps = (state, ownProps) => {
16 | const category = ownProps.match.params.category_slug;
17 | return{
18 | booksList:state.books.filter(cat => {
19 | // console.log("from map", cat.metadata.category.slug);
20 | return cat.metadata.category.slug === category
21 | }),
22 | category: state.menu.find(item => (item.slug === category))
23 | }
24 | }
25 | export default connect(mapStateToProps)(CategoryCard);
26 |
--------------------------------------------------------------------------------
/src/components/Icon.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Menu from './Menu';
3 | import MenuLikes from './MenuLikes';
4 | import Input from './Input';
5 | import { Link } from 'react-router-dom';
6 | import SearchList from './SearchList';
7 |
8 | export default function Icon() {
9 | return (
10 |
11 |
7 |
9 | )
10 | }
11 | }
12 | const mapStateToProps = (state) => {
13 | return{
14 | input: state.input
15 | }
16 | }
17 | const mapDispatchToProps = (dispatch) => {
18 | return{
19 | handleInput: (e) => {
20 | dispatch({type:'INPUT_CHANGE', input:e.target.value})
21 | }
22 | }
23 | }
24 | export default connect(mapStateToProps, mapDispatchToProps)(Input);
25 |
--------------------------------------------------------------------------------
/src/components/LandingPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Cards from './Cards';
3 | import { Link } from 'react-router-dom';
4 | import { connect } from 'react-redux';
5 |
6 |
7 | const LandingPage = (props)=>{
8 | return (
9 |
10 |
11 |
12 |
16 |
Books Diary
17 |
" Gabriel.s small cottage was lit by a single candle that cast light on a collection of weapons along one wall and a few books on a bookshelf on another "
18 |
19 |
20 |
21 |
Favourite
22 |
23 |
7 |
8 |
9 |
10 |
{props.page}
11 | {props.body ?
:
Loading...
}
12 |
13 |
14 |
14 |
15 | {
16 | menuCategory && menuCategory.map((item, index) => {
17 | return (
18 | {item.title}
19 | )
20 | })
21 | }
22 |
23 |
6 |
7 |
8 |
11 |
16 |
31 | //
32 | //
36 | //
7 | {
8 | props.value && props.lists.map((item, index) => {
9 | return(
10 |
11 |
{item.title}
12 |
{item.metadata.author.title}
13 |
14 | )
15 | })
16 | }
17 |
14 |
15 |
16 |
{
}
17 |
18 |
19 |
{props.book.title}
20 |
21 |
22 |
Go back
23 |
24 |
25 |
26 |
27 | { props.book.metadata.category.title}
28 |
29 |
30 |
31 |