Repository: GoThinkster/redux-review
Branch: master
Commit: ee72eba40563
Files: 43
Total size: 69.9 KB
Directory structure:
gitextract_8dxt9i05/
├── .gitignore
├── LICENSE.md
├── README.md
├── package.json
├── public/
│ └── index.html
└── src/
├── agent.js
├── components/
│ ├── App.js
│ ├── Article/
│ │ ├── ArticleActions.js
│ │ ├── ArticleMeta.js
│ │ ├── Comment.js
│ │ ├── CommentContainer.js
│ │ ├── CommentInput.js
│ │ ├── CommentList.js
│ │ ├── DeleteButton.js
│ │ └── index.js
│ ├── ArticleList.js
│ ├── ArticlePreview.js
│ ├── Editor.js
│ ├── Header.js
│ ├── Home/
│ │ ├── Banner.js
│ │ ├── MainView.js
│ │ ├── Tags.js
│ │ └── index.js
│ ├── ListErrors.js
│ ├── ListPagination.js
│ ├── Login.js
│ ├── Profile.js
│ ├── ProfileFavorites.js
│ ├── Register.js
│ └── Settings.js
├── constants/
│ └── actionTypes.js
├── index.js
├── middleware.js
├── reducer.js
├── reducers/
│ ├── article.js
│ ├── articleList.js
│ ├── auth.js
│ ├── common.js
│ ├── editor.js
│ ├── home.js
│ ├── profile.js
│ └── settings.js
└── store.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
# See http://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
node_modules
# testing
coverage
# production
build
# misc
.DS_Store
.env
npm-debug.log
.idea
================================================
FILE: LICENSE.md
================================================
MIT License
Copyright (c) 2020 GoThinkster
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# 
[](http://realworld.io)
> ### React + Redux codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld-example-apps) spec and API.
<a href="https://stackblitz.com/edit/react-redux-realworld" target="_blank"><img width="187" src="https://github.com/gothinkster/realworld/blob/master/media/edit_on_blitz.png?raw=true" /></a> <a href="https://thinkster.io/tutorials/build-a-real-world-react-redux-application" target="_blank"><img width="384" src="https://raw.githubusercontent.com/gothinkster/realworld/master/media/learn-btn-hr.png" /></a>
### [Demo](https://react-redux.realworld.io) [RealWorld](https://github.com/gothinkster/realworld)
Originally created for this [GH issue](https://github.com/reactjs/redux/issues/1353). The codebase is now feature complete; please submit bug fixes via pull requests & feedback via issues.
We also have notes in [**our wiki**](https://github.com/gothinkster/react-redux-realworld-example-app/wiki) about how the various patterns used in this codebase and how they work (thanks [@thejmazz](https://github.com/thejmazz)!)
## Getting started
You can view a live demo over at https://react-redux.realworld.io/
To get the frontend running locally:
- Clone this repo
- `npm install` to install all req'd dependencies
- `npm start` to start the local server (this project uses create-react-app)
Local web server will use port 4100 instead of standard React's port 3000 to prevent conflicts with some backends like Node or Rails. You can configure port in scripts section of `package.json`: we use [cross-env](https://github.com/kentcdodds/cross-env) to set environment variable PORT for React scripts, this is Windows-compatible way of setting environment variables.
Alternatively, you can add `.env` file in the root folder of project to set environment variables (use PORT to change webserver's port). This file will be ignored by git, so it is suitable for API keys and other sensitive stuff. Refer to [dotenv](https://github.com/motdotla/dotenv) and [React](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) documentation for more details. Also, please remove setting variable via script section of `package.json` - `dotenv` never override variables if they are already set.
### Making requests to the backend API
For convenience, we have a live API server running at https://conduit.productionready.io/api for the application to make requests against. You can view [the API spec here](https://github.com/GoThinkster/productionready/blob/master/api) which contains all routes & responses for the server.
The source code for the backend server (available for Node, Rails and Django) can be found in the [main RealWorld repo](https://github.com/gothinkster/realworld).
If you want to change the API URL to a local server, simply edit `src/agent.js` and change `API_ROOT` to the local server's URL (i.e. `http://localhost:3000/api`)
## Functionality overview
The example application is a social blogging site (i.e. a Medium.com clone) called "Conduit". It uses a custom API for all requests, including authentication. You can view a live demo over at https://redux.productionready.io/
**General functionality:**
- Authenticate users via JWT (login/signup pages + logout button on settings page)
- CRU* users (sign up & settings page - no deleting required)
- CRUD Articles
- CR*D Comments on articles (no updating required)
- GET and display paginated lists of articles
- Favorite articles
- Follow other users
**The general page breakdown looks like this:**
- Home page (URL: /#/ )
- List of tags
- List of articles pulled from either Feed, Global, or by Tag
- Pagination for list of articles
- Sign in/Sign up pages (URL: /#/login, /#/register )
- Use JWT (store the token in localStorage)
- Settings page (URL: /#/settings )
- Editor page to create/edit articles (URL: /#/editor, /#/editor/article-slug-here )
- Article page (URL: /#/article/article-slug-here )
- Delete article button (only shown to article's author)
- Render markdown from server client side
- Comments section at bottom of page
- Delete comment button (only shown to comment's author)
- Profile page (URL: /#/@username, /#/@username/favorites )
- Show basic user info
- List of articles populated from author's created articles or author's favorited articles
<br />
[](https://thinkster.io)
================================================
FILE: package.json
================================================
{
"name": "react-redux-realworld-example-app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"cross-env": "^5.1.4",
"react-scripts": "1.1.1"
},
"dependencies": {
"history": "^4.6.3",
"marked": "^0.3.6",
"prop-types": "^15.5.10",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-redux": "^5.0.7",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-router-redux": "^5.0.0-alpha.6",
"redux": "^3.6.0",
"redux-devtools-extension": "^2.13.2",
"redux-logger": "^3.0.1",
"superagent": "^3.8.2",
"superagent-promise": "^1.1.0"
},
"scripts": {
"start": "cross-env PORT=4100 react-scripts start",
"build": "react-scripts build",
"test": "cross-env PORT=4100 react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
================================================
FILE: public/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="//demo.productionready.io/main.css">
<link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!--
Notice the use of %PUBLIC_URL% in the tag above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favico.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Conduit</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
================================================
FILE: src/agent.js
================================================
import superagentPromise from 'superagent-promise';
import _superagent from 'superagent';
const superagent = superagentPromise(_superagent, global.Promise);
const API_ROOT = 'https://conduit.productionready.io/api';
const encode = encodeURIComponent;
const responseBody = res => res.body;
let token = null;
const tokenPlugin = req => {
if (token) {
req.set('authorization', `Token ${token}`);
}
}
const requests = {
del: url =>
superagent.del(`${API_ROOT}${url}`).use(tokenPlugin).then(responseBody),
get: url =>
superagent.get(`${API_ROOT}${url}`).use(tokenPlugin).then(responseBody),
put: (url, body) =>
superagent.put(`${API_ROOT}${url}`, body).use(tokenPlugin).then(responseBody),
post: (url, body) =>
superagent.post(`${API_ROOT}${url}`, body).use(tokenPlugin).then(responseBody)
};
const Auth = {
current: () =>
requests.get('/user'),
login: (email, password) =>
requests.post('/users/login', { user: { email, password } }),
register: (username, email, password) =>
requests.post('/users', { user: { username, email, password } }),
save: user =>
requests.put('/user', { user })
};
const Tags = {
getAll: () => requests.get('/tags')
};
const limit = (count, p) => `limit=${count}&offset=${p ? p * count : 0}`;
const omitSlug = article => Object.assign({}, article, { slug: undefined })
const Articles = {
all: page =>
requests.get(`/articles?${limit(10, page)}`),
byAuthor: (author, page) =>
requests.get(`/articles?author=${encode(author)}&${limit(5, page)}`),
byTag: (tag, page) =>
requests.get(`/articles?tag=${encode(tag)}&${limit(10, page)}`),
del: slug =>
requests.del(`/articles/${slug}`),
favorite: slug =>
requests.post(`/articles/${slug}/favorite`),
favoritedBy: (author, page) =>
requests.get(`/articles?favorited=${encode(author)}&${limit(5, page)}`),
feed: () =>
requests.get('/articles/feed?limit=10&offset=0'),
get: slug =>
requests.get(`/articles/${slug}`),
unfavorite: slug =>
requests.del(`/articles/${slug}/favorite`),
update: article =>
requests.put(`/articles/${article.slug}`, { article: omitSlug(article) }),
create: article =>
requests.post('/articles', { article })
};
const Comments = {
create: (slug, comment) =>
requests.post(`/articles/${slug}/comments`, { comment }),
delete: (slug, commentId) =>
requests.del(`/articles/${slug}/comments/${commentId}`),
forArticle: slug =>
requests.get(`/articles/${slug}/comments`)
};
const Profile = {
follow: username =>
requests.post(`/profiles/${username}/follow`),
get: username =>
requests.get(`/profiles/${username}`),
unfollow: username =>
requests.del(`/profiles/${username}/follow`)
};
export default {
Articles,
Auth,
Comments,
Profile,
Tags,
setToken: _token => { token = _token; }
};
================================================
FILE: src/components/App.js
================================================
import agent from '../agent';
import Header from './Header';
import React from 'react';
import { connect } from 'react-redux';
import { APP_LOAD, REDIRECT } from '../constants/actionTypes';
import { Route, Switch } from 'react-router-dom';
import Article from '../components/Article';
import Editor from '../components/Editor';
import Home from '../components/Home';
import Login from '../components/Login';
import Profile from '../components/Profile';
import ProfileFavorites from '../components/ProfileFavorites';
import Register from '../components/Register';
import Settings from '../components/Settings';
import { store } from '../store';
import { push } from 'react-router-redux';
const mapStateToProps = state => {
return {
appLoaded: state.common.appLoaded,
appName: state.common.appName,
currentUser: state.common.currentUser,
redirectTo: state.common.redirectTo
}};
const mapDispatchToProps = dispatch => ({
onLoad: (payload, token) =>
dispatch({ type: APP_LOAD, payload, token, skipTracking: true }),
onRedirect: () =>
dispatch({ type: REDIRECT })
});
class App extends React.Component {
componentWillReceiveProps(nextProps) {
if (nextProps.redirectTo) {
// this.context.router.replace(nextProps.redirectTo);
store.dispatch(push(nextProps.redirectTo));
this.props.onRedirect();
}
}
componentWillMount() {
const token = window.localStorage.getItem('jwt');
if (token) {
agent.setToken(token);
}
this.props.onLoad(token ? agent.Auth.current() : null, token);
}
render() {
if (this.props.appLoaded) {
return (
<div>
<Header
appName={this.props.appName}
currentUser={this.props.currentUser} />
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Route path="/editor/:slug" component={Editor} />
<Route path="/editor" component={Editor} />
<Route path="/article/:id" component={Article} />
<Route path="/settings" component={Settings} />
<Route path="/@:username/favorites" component={ProfileFavorites} />
<Route path="/@:username" component={Profile} />
</Switch>
</div>
);
}
return (
<div>
<Header
appName={this.props.appName}
currentUser={this.props.currentUser} />
</div>
);
}
}
// App.contextTypes = {
// router: PropTypes.object.isRequired
// };
export default connect(mapStateToProps, mapDispatchToProps)(App);
================================================
FILE: src/components/Article/ArticleActions.js
================================================
import { Link } from 'react-router-dom';
import React from 'react';
import agent from '../../agent';
import { connect } from 'react-redux';
import { DELETE_ARTICLE } from '../../constants/actionTypes';
const mapDispatchToProps = dispatch => ({
onClickDelete: payload =>
dispatch({ type: DELETE_ARTICLE, payload })
});
const ArticleActions = props => {
const article = props.article;
const del = () => {
props.onClickDelete(agent.Articles.del(article.slug))
};
if (props.canModify) {
return (
<span>
<Link
to={`/editor/${article.slug}`}
className="btn btn-outline-secondary btn-sm">
<i className="ion-edit"></i> Edit Article
</Link>
<button className="btn btn-outline-danger btn-sm" onClick={del}>
<i className="ion-trash-a"></i> Delete Article
</button>
</span>
);
}
return (
<span>
</span>
);
};
export default connect(() => ({}), mapDispatchToProps)(ArticleActions);
================================================
FILE: src/components/Article/ArticleMeta.js
================================================
import ArticleActions from './ArticleActions';
import { Link } from 'react-router-dom';
import React from 'react';
const ArticleMeta = props => {
const article = props.article;
return (
<div className="article-meta">
<Link to={`/@${article.author.username}`}>
<img src={article.author.image} alt={article.author.username} />
</Link>
<div className="info">
<Link to={`/@${article.author.username}`} className="author">
{article.author.username}
</Link>
<span className="date">
{new Date(article.createdAt).toDateString()}
</span>
</div>
<ArticleActions canModify={props.canModify} article={article} />
</div>
);
};
export default ArticleMeta;
================================================
FILE: src/components/Article/Comment.js
================================================
import DeleteButton from './DeleteButton';
import { Link } from 'react-router-dom';
import React from 'react';
const Comment = props => {
const comment = props.comment;
const show = props.currentUser &&
props.currentUser.username === comment.author.username;
return (
<div className="card">
<div className="card-block">
<p className="card-text">{comment.body}</p>
</div>
<div className="card-footer">
<Link
to={`/@${comment.author.username}`}
className="comment-author">
<img src={comment.author.image} className="comment-author-img" alt={comment.author.username} />
</Link>
<Link
to={`/@${comment.author.username}`}
className="comment-author">
{comment.author.username}
</Link>
<span className="date-posted">
{new Date(comment.createdAt).toDateString()}
</span>
<DeleteButton show={show} slug={props.slug} commentId={comment.id} />
</div>
</div>
);
};
export default Comment;
================================================
FILE: src/components/Article/CommentContainer.js
================================================
import CommentInput from './CommentInput';
import CommentList from './CommentList';
import { Link } from 'react-router-dom';
import React from 'react';
const CommentContainer = props => {
if (props.currentUser) {
return (
<div className="col-xs-12 col-md-8 offset-md-2">
<div>
<list-errors errors={props.errors}></list-errors>
<CommentInput slug={props.slug} currentUser={props.currentUser} />
</div>
<CommentList
comments={props.comments}
slug={props.slug}
currentUser={props.currentUser} />
</div>
);
} else {
return (
<div className="col-xs-12 col-md-8 offset-md-2">
<p>
<Link to="/login">Sign in</Link>
or
<Link to="/register">sign up</Link>
to add comments on this article.
</p>
<CommentList
comments={props.comments}
slug={props.slug}
currentUser={props.currentUser} />
</div>
);
}
};
export default CommentContainer;
================================================
FILE: src/components/Article/CommentInput.js
================================================
import React from 'react';
import agent from '../../agent';
import { connect } from 'react-redux';
import { ADD_COMMENT } from '../../constants/actionTypes';
const mapDispatchToProps = dispatch => ({
onSubmit: payload =>
dispatch({ type: ADD_COMMENT, payload })
});
class CommentInput extends React.Component {
constructor() {
super();
this.state = {
body: ''
};
this.setBody = ev => {
this.setState({ body: ev.target.value });
};
this.createComment = ev => {
ev.preventDefault();
const payload = agent.Comments.create(this.props.slug,
{ body: this.state.body });
this.setState({ body: '' });
this.props.onSubmit(payload);
};
}
render() {
return (
<form className="card comment-form" onSubmit={this.createComment}>
<div className="card-block">
<textarea className="form-control"
placeholder="Write a comment..."
value={this.state.body}
onChange={this.setBody}
rows="3">
</textarea>
</div>
<div className="card-footer">
<img
src={this.props.currentUser.image}
className="comment-author-img"
alt={this.props.currentUser.username} />
<button
className="btn btn-sm btn-primary"
type="submit">
Post Comment
</button>
</div>
</form>
);
}
}
export default connect(() => ({}), mapDispatchToProps)(CommentInput);
================================================
FILE: src/components/Article/CommentList.js
================================================
import Comment from './Comment';
import React from 'react';
const CommentList = props => {
return (
<div>
{
props.comments.map(comment => {
return (
<Comment
comment={comment}
currentUser={props.currentUser}
slug={props.slug}
key={comment.id} />
);
})
}
</div>
);
};
export default CommentList;
================================================
FILE: src/components/Article/DeleteButton.js
================================================
import React from 'react';
import agent from '../../agent';
import { connect } from 'react-redux';
import { DELETE_COMMENT } from '../../constants/actionTypes';
const mapDispatchToProps = dispatch => ({
onClick: (payload, commentId) =>
dispatch({ type: DELETE_COMMENT, payload, commentId })
});
const DeleteButton = props => {
const del = () => {
const payload = agent.Comments.delete(props.slug, props.commentId);
props.onClick(payload, props.commentId);
};
if (props.show) {
return (
<span className="mod-options">
<i className="ion-trash-a" onClick={del}></i>
</span>
);
}
return null;
};
export default connect(() => ({}), mapDispatchToProps)(DeleteButton);
================================================
FILE: src/components/Article/index.js
================================================
import ArticleMeta from './ArticleMeta';
import CommentContainer from './CommentContainer';
import React from 'react';
import agent from '../../agent';
import { connect } from 'react-redux';
import marked from 'marked';
import { ARTICLE_PAGE_LOADED, ARTICLE_PAGE_UNLOADED } from '../../constants/actionTypes';
const mapStateToProps = state => ({
...state.article,
currentUser: state.common.currentUser
});
const mapDispatchToProps = dispatch => ({
onLoad: payload =>
dispatch({ type: ARTICLE_PAGE_LOADED, payload }),
onUnload: () =>
dispatch({ type: ARTICLE_PAGE_UNLOADED })
});
class Article extends React.Component {
componentWillMount() {
this.props.onLoad(Promise.all([
agent.Articles.get(this.props.match.params.id),
agent.Comments.forArticle(this.props.match.params.id)
]));
}
componentWillUnmount() {
this.props.onUnload();
}
render() {
if (!this.props.article) {
return null;
}
const markup = { __html: marked(this.props.article.body, { sanitize: true }) };
const canModify = this.props.currentUser &&
this.props.currentUser.username === this.props.article.author.username;
return (
<div className="article-page">
<div className="banner">
<div className="container">
<h1>{this.props.article.title}</h1>
<ArticleMeta
article={this.props.article}
canModify={canModify} />
</div>
</div>
<div className="container page">
<div className="row article-content">
<div className="col-xs-12">
<div dangerouslySetInnerHTML={markup}></div>
<ul className="tag-list">
{
this.props.article.tagList.map(tag => {
return (
<li
className="tag-default tag-pill tag-outline"
key={tag}>
{tag}
</li>
);
})
}
</ul>
</div>
</div>
<hr />
<div className="article-actions">
</div>
<div className="row">
<CommentContainer
comments={this.props.comments || []}
errors={this.props.commentErrors}
slug={this.props.match.params.id}
currentUser={this.props.currentUser} />
</div>
</div>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Article);
================================================
FILE: src/components/ArticleList.js
================================================
import ArticlePreview from './ArticlePreview';
import ListPagination from './ListPagination';
import React from 'react';
const ArticleList = props => {
if (!props.articles) {
return (
<div className="article-preview">Loading...</div>
);
}
if (props.articles.length === 0) {
return (
<div className="article-preview">
No articles are here... yet.
</div>
);
}
return (
<div>
{
props.articles.map(article => {
return (
<ArticlePreview article={article} key={article.slug} />
);
})
}
<ListPagination
pager={props.pager}
articlesCount={props.articlesCount}
currentPage={props.currentPage} />
</div>
);
};
export default ArticleList;
================================================
FILE: src/components/ArticlePreview.js
================================================
import React from 'react';
import { Link } from 'react-router-dom';
import agent from '../agent';
import { connect } from 'react-redux';
import { ARTICLE_FAVORITED, ARTICLE_UNFAVORITED } from '../constants/actionTypes';
const FAVORITED_CLASS = 'btn btn-sm btn-primary';
const NOT_FAVORITED_CLASS = 'btn btn-sm btn-outline-primary';
const mapDispatchToProps = dispatch => ({
favorite: slug => dispatch({
type: ARTICLE_FAVORITED,
payload: agent.Articles.favorite(slug)
}),
unfavorite: slug => dispatch({
type: ARTICLE_UNFAVORITED,
payload: agent.Articles.unfavorite(slug)
})
});
const ArticlePreview = props => {
const article = props.article;
const favoriteButtonClass = article.favorited ?
FAVORITED_CLASS :
NOT_FAVORITED_CLASS;
const handleClick = ev => {
ev.preventDefault();
if (article.favorited) {
props.unfavorite(article.slug);
} else {
props.favorite(article.slug);
}
};
return (
<div className="article-preview">
<div className="article-meta">
<Link to={`/@${article.author.username}`}>
<img src={article.author.image} alt={article.author.username} />
</Link>
<div className="info">
<Link className="author" to={`/@${article.author.username}`}>
{article.author.username}
</Link>
<span className="date">
{new Date(article.createdAt).toDateString()}
</span>
</div>
<div className="pull-xs-right">
<button className={favoriteButtonClass} onClick={handleClick}>
<i className="ion-heart"></i> {article.favoritesCount}
</button>
</div>
</div>
<Link to={`/article/${article.slug}`} className="preview-link">
<h1>{article.title}</h1>
<p>{article.description}</p>
<span>Read more...</span>
<ul className="tag-list">
{
article.tagList.map(tag => {
return (
<li className="tag-default tag-pill tag-outline" key={tag}>
{tag}
</li>
)
})
}
</ul>
</Link>
</div>
);
}
export default connect(() => ({}), mapDispatchToProps)(ArticlePreview);
================================================
FILE: src/components/Editor.js
================================================
import ListErrors from './ListErrors';
import React from 'react';
import agent from '../agent';
import { connect } from 'react-redux';
import {
ADD_TAG,
EDITOR_PAGE_LOADED,
REMOVE_TAG,
ARTICLE_SUBMITTED,
EDITOR_PAGE_UNLOADED,
UPDATE_FIELD_EDITOR
} from '../constants/actionTypes';
const mapStateToProps = state => ({
...state.editor
});
const mapDispatchToProps = dispatch => ({
onAddTag: () =>
dispatch({ type: ADD_TAG }),
onLoad: payload =>
dispatch({ type: EDITOR_PAGE_LOADED, payload }),
onRemoveTag: tag =>
dispatch({ type: REMOVE_TAG, tag }),
onSubmit: payload =>
dispatch({ type: ARTICLE_SUBMITTED, payload }),
onUnload: payload =>
dispatch({ type: EDITOR_PAGE_UNLOADED }),
onUpdateField: (key, value) =>
dispatch({ type: UPDATE_FIELD_EDITOR, key, value })
});
class Editor extends React.Component {
constructor() {
super();
const updateFieldEvent =
key => ev => this.props.onUpdateField(key, ev.target.value);
this.changeTitle = updateFieldEvent('title');
this.changeDescription = updateFieldEvent('description');
this.changeBody = updateFieldEvent('body');
this.changeTagInput = updateFieldEvent('tagInput');
this.watchForEnter = ev => {
if (ev.keyCode === 13) {
ev.preventDefault();
this.props.onAddTag();
}
};
this.removeTagHandler = tag => () => {
this.props.onRemoveTag(tag);
};
this.submitForm = ev => {
ev.preventDefault();
const article = {
title: this.props.title,
description: this.props.description,
body: this.props.body,
tagList: this.props.tagList
};
const slug = { slug: this.props.articleSlug };
const promise = this.props.articleSlug ?
agent.Articles.update(Object.assign(article, slug)) :
agent.Articles.create(article);
this.props.onSubmit(promise);
};
}
componentWillReceiveProps(nextProps) {
if (this.props.match.params.slug !== nextProps.match.params.slug) {
if (nextProps.match.params.slug) {
this.props.onUnload();
return this.props.onLoad(agent.Articles.get(this.props.match.params.slug));
}
this.props.onLoad(null);
}
}
componentWillMount() {
if (this.props.match.params.slug) {
return this.props.onLoad(agent.Articles.get(this.props.match.params.slug));
}
this.props.onLoad(null);
}
componentWillUnmount() {
this.props.onUnload();
}
render() {
return (
<div className="editor-page">
<div className="container page">
<div className="row">
<div className="col-md-10 offset-md-1 col-xs-12">
<ListErrors errors={this.props.errors}></ListErrors>
<form>
<fieldset>
<fieldset className="form-group">
<input
className="form-control form-control-lg"
type="text"
placeholder="Article Title"
value={this.props.title}
onChange={this.changeTitle} />
</fieldset>
<fieldset className="form-group">
<input
className="form-control"
type="text"
placeholder="What's this article about?"
value={this.props.description}
onChange={this.changeDescription} />
</fieldset>
<fieldset className="form-group">
<textarea
className="form-control"
rows="8"
placeholder="Write your article (in markdown)"
value={this.props.body}
onChange={this.changeBody}>
</textarea>
</fieldset>
<fieldset className="form-group">
<input
className="form-control"
type="text"
placeholder="Enter tags"
value={this.props.tagInput}
onChange={this.changeTagInput}
onKeyUp={this.watchForEnter} />
<div className="tag-list">
{
(this.props.tagList || []).map(tag => {
return (
<span className="tag-default tag-pill" key={tag}>
<i className="ion-close-round"
onClick={this.removeTagHandler(tag)}>
</i>
{tag}
</span>
);
})
}
</div>
</fieldset>
<button
className="btn btn-lg pull-xs-right btn-primary"
type="button"
disabled={this.props.inProgress}
onClick={this.submitForm}>
Publish Article
</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Editor);
================================================
FILE: src/components/Header.js
================================================
import React from 'react';
import { Link } from 'react-router-dom';
const LoggedOutView = props => {
if (!props.currentUser) {
return (
<ul className="nav navbar-nav pull-xs-right">
<li className="nav-item">
<Link to="/" className="nav-link">
Home
</Link>
</li>
<li className="nav-item">
<Link to="/login" className="nav-link">
Sign in
</Link>
</li>
<li className="nav-item">
<Link to="/register" className="nav-link">
Sign up
</Link>
</li>
</ul>
);
}
return null;
};
const LoggedInView = props => {
if (props.currentUser) {
return (
<ul className="nav navbar-nav pull-xs-right">
<li className="nav-item">
<Link to="/" className="nav-link">
Home
</Link>
</li>
<li className="nav-item">
<Link to="/editor" className="nav-link">
<i className="ion-compose"></i> New Post
</Link>
</li>
<li className="nav-item">
<Link to="/settings" className="nav-link">
<i className="ion-gear-a"></i> Settings
</Link>
</li>
<li className="nav-item">
<Link
to={`/@${props.currentUser.username}`}
className="nav-link">
<img src={props.currentUser.image} className="user-pic" alt={props.currentUser.username} />
{props.currentUser.username}
</Link>
</li>
</ul>
);
}
return null;
};
class Header extends React.Component {
render() {
return (
<nav className="navbar navbar-light">
<div className="container">
<Link to="/" className="navbar-brand">
{this.props.appName.toLowerCase()}
</Link>
<LoggedOutView currentUser={this.props.currentUser} />
<LoggedInView currentUser={this.props.currentUser} />
</div>
</nav>
);
}
}
export default Header;
================================================
FILE: src/components/Home/Banner.js
================================================
import React from 'react';
const Banner = ({ appName, token }) => {
if (token) {
return null;
}
return (
<div className="banner">
<div className="container">
<h1 className="logo-font">
{appName.toLowerCase()}
</h1>
<p>A place to share your knowledge.</p>
</div>
</div>
);
};
export default Banner;
================================================
FILE: src/components/Home/MainView.js
================================================
import ArticleList from '../ArticleList';
import React from 'react';
import agent from '../../agent';
import { connect } from 'react-redux';
import { CHANGE_TAB } from '../../constants/actionTypes';
const YourFeedTab = props => {
if (props.token) {
const clickHandler = ev => {
ev.preventDefault();
props.onTabClick('feed', agent.Articles.feed, agent.Articles.feed());
}
return (
<li className="nav-item">
<a href=""
className={ props.tab === 'feed' ? 'nav-link active' : 'nav-link' }
onClick={clickHandler}>
Your Feed
</a>
</li>
);
}
return null;
};
const GlobalFeedTab = props => {
const clickHandler = ev => {
ev.preventDefault();
props.onTabClick('all', agent.Articles.all, agent.Articles.all());
};
return (
<li className="nav-item">
<a
href=""
className={ props.tab === 'all' ? 'nav-link active' : 'nav-link' }
onClick={clickHandler}>
Global Feed
</a>
</li>
);
};
const TagFilterTab = props => {
if (!props.tag) {
return null;
}
return (
<li className="nav-item">
<a href="" className="nav-link active">
<i className="ion-pound"></i> {props.tag}
</a>
</li>
);
};
const mapStateToProps = state => ({
...state.articleList,
tags: state.home.tags,
token: state.common.token
});
const mapDispatchToProps = dispatch => ({
onTabClick: (tab, pager, payload) => dispatch({ type: CHANGE_TAB, tab, pager, payload })
});
const MainView = props => {
return (
<div className="col-md-9">
<div className="feed-toggle">
<ul className="nav nav-pills outline-active">
<YourFeedTab
token={props.token}
tab={props.tab}
onTabClick={props.onTabClick} />
<GlobalFeedTab tab={props.tab} onTabClick={props.onTabClick} />
<TagFilterTab tag={props.tag} />
</ul>
</div>
<ArticleList
pager={props.pager}
articles={props.articles}
loading={props.loading}
articlesCount={props.articlesCount}
currentPage={props.currentPage} />
</div>
);
};
export default connect(mapStateToProps, mapDispatchToProps)(MainView);
================================================
FILE: src/components/Home/Tags.js
================================================
import React from 'react';
import agent from '../../agent';
const Tags = props => {
const tags = props.tags;
if (tags) {
return (
<div className="tag-list">
{
tags.map(tag => {
const handleClick = ev => {
ev.preventDefault();
props.onClickTag(tag, page => agent.Articles.byTag(tag, page), agent.Articles.byTag(tag));
};
return (
<a
href=""
className="tag-default tag-pill"
key={tag}
onClick={handleClick}>
{tag}
</a>
);
})
}
</div>
);
} else {
return (
<div>Loading Tags...</div>
);
}
};
export default Tags;
================================================
FILE: src/components/Home/index.js
================================================
import Banner from './Banner';
import MainView from './MainView';
import React from 'react';
import Tags from './Tags';
import agent from '../../agent';
import { connect } from 'react-redux';
import {
HOME_PAGE_LOADED,
HOME_PAGE_UNLOADED,
APPLY_TAG_FILTER
} from '../../constants/actionTypes';
const Promise = global.Promise;
const mapStateToProps = state => ({
...state.home,
appName: state.common.appName,
token: state.common.token
});
const mapDispatchToProps = dispatch => ({
onClickTag: (tag, pager, payload) =>
dispatch({ type: APPLY_TAG_FILTER, tag, pager, payload }),
onLoad: (tab, pager, payload) =>
dispatch({ type: HOME_PAGE_LOADED, tab, pager, payload }),
onUnload: () =>
dispatch({ type: HOME_PAGE_UNLOADED })
});
class Home extends React.Component {
componentWillMount() {
const tab = this.props.token ? 'feed' : 'all';
const articlesPromise = this.props.token ?
agent.Articles.feed :
agent.Articles.all;
this.props.onLoad(tab, articlesPromise, Promise.all([agent.Tags.getAll(), articlesPromise()]));
}
componentWillUnmount() {
this.props.onUnload();
}
render() {
return (
<div className="home-page">
<Banner token={this.props.token} appName={this.props.appName} />
<div className="container page">
<div className="row">
<MainView />
<div className="col-md-3">
<div className="sidebar">
<p>Popular Tags</p>
<Tags
tags={this.props.tags}
onClickTag={this.props.onClickTag} />
</div>
</div>
</div>
</div>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Home);
================================================
FILE: src/components/ListErrors.js
================================================
import React from 'react';
class ListErrors extends React.Component {
render() {
const errors = this.props.errors;
if (errors) {
return (
<ul className="error-messages">
{
Object.keys(errors).map(key => {
return (
<li key={key}>
{key} {errors[key]}
</li>
);
})
}
</ul>
);
} else {
return null;
}
}
}
export default ListErrors;
================================================
FILE: src/components/ListPagination.js
================================================
import React from 'react';
import agent from '../agent';
import { connect } from 'react-redux';
import { SET_PAGE } from '../constants/actionTypes';
const mapDispatchToProps = dispatch => ({
onSetPage: (page, payload) =>
dispatch({ type: SET_PAGE, page, payload })
});
const ListPagination = props => {
if (props.articlesCount <= 10) {
return null;
}
const range = [];
for (let i = 0; i < Math.ceil(props.articlesCount / 10); ++i) {
range.push(i);
}
const setPage = page => {
if(props.pager) {
props.onSetPage(page, props.pager(page));
}else {
props.onSetPage(page, agent.Articles.all(page))
}
};
return (
<nav>
<ul className="pagination">
{
range.map(v => {
const isCurrent = v === props.currentPage;
const onClick = ev => {
ev.preventDefault();
setPage(v);
};
return (
<li
className={ isCurrent ? 'page-item active' : 'page-item' }
onClick={onClick}
key={v.toString()}>
<a className="page-link" href="">{v + 1}</a>
</li>
);
})
}
</ul>
</nav>
);
};
export default connect(() => ({}), mapDispatchToProps)(ListPagination);
================================================
FILE: src/components/Login.js
================================================
import { Link } from 'react-router-dom';
import ListErrors from './ListErrors';
import React from 'react';
import agent from '../agent';
import { connect } from 'react-redux';
import {
UPDATE_FIELD_AUTH,
LOGIN,
LOGIN_PAGE_UNLOADED
} from '../constants/actionTypes';
const mapStateToProps = state => ({ ...state.auth });
const mapDispatchToProps = dispatch => ({
onChangeEmail: value =>
dispatch({ type: UPDATE_FIELD_AUTH, key: 'email', value }),
onChangePassword: value =>
dispatch({ type: UPDATE_FIELD_AUTH, key: 'password', value }),
onSubmit: (email, password) =>
dispatch({ type: LOGIN, payload: agent.Auth.login(email, password) }),
onUnload: () =>
dispatch({ type: LOGIN_PAGE_UNLOADED })
});
class Login extends React.Component {
constructor() {
super();
this.changeEmail = ev => this.props.onChangeEmail(ev.target.value);
this.changePassword = ev => this.props.onChangePassword(ev.target.value);
this.submitForm = (email, password) => ev => {
ev.preventDefault();
this.props.onSubmit(email, password);
};
}
componentWillUnmount() {
this.props.onUnload();
}
render() {
const email = this.props.email;
const password = this.props.password;
return (
<div className="auth-page">
<div className="container page">
<div className="row">
<div className="col-md-6 offset-md-3 col-xs-12">
<h1 className="text-xs-center">Sign In</h1>
<p className="text-xs-center">
<Link to="/register">
Need an account?
</Link>
</p>
<ListErrors errors={this.props.errors} />
<form onSubmit={this.submitForm(email, password)}>
<fieldset>
<fieldset className="form-group">
<input
className="form-control form-control-lg"
type="email"
placeholder="Email"
value={email}
onChange={this.changeEmail} />
</fieldset>
<fieldset className="form-group">
<input
className="form-control form-control-lg"
type="password"
placeholder="Password"
value={password}
onChange={this.changePassword} />
</fieldset>
<button
className="btn btn-lg btn-primary pull-xs-right"
type="submit"
disabled={this.props.inProgress}>
Sign in
</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Login);
================================================
FILE: src/components/Profile.js
================================================
import ArticleList from './ArticleList';
import React from 'react';
import { Link } from 'react-router-dom';
import agent from '../agent';
import { connect } from 'react-redux';
import {
FOLLOW_USER,
UNFOLLOW_USER,
PROFILE_PAGE_LOADED,
PROFILE_PAGE_UNLOADED
} from '../constants/actionTypes';
const EditProfileSettings = props => {
if (props.isUser) {
return (
<Link
to="/settings"
className="btn btn-sm btn-outline-secondary action-btn">
<i className="ion-gear-a"></i> Edit Profile Settings
</Link>
);
}
return null;
};
const FollowUserButton = props => {
if (props.isUser) {
return null;
}
let classes = 'btn btn-sm action-btn';
if (props.user.following) {
classes += ' btn-secondary';
} else {
classes += ' btn-outline-secondary';
}
const handleClick = ev => {
ev.preventDefault();
if (props.user.following) {
props.unfollow(props.user.username)
} else {
props.follow(props.user.username)
}
};
return (
<button
className={classes}
onClick={handleClick}>
<i className="ion-plus-round"></i>
{props.user.following ? 'Unfollow' : 'Follow'} {props.user.username}
</button>
);
};
const mapStateToProps = state => ({
...state.articleList,
currentUser: state.common.currentUser,
profile: state.profile
});
const mapDispatchToProps = dispatch => ({
onFollow: username => dispatch({
type: FOLLOW_USER,
payload: agent.Profile.follow(username)
}),
onLoad: payload => dispatch({ type: PROFILE_PAGE_LOADED, payload }),
onUnfollow: username => dispatch({
type: UNFOLLOW_USER,
payload: agent.Profile.unfollow(username)
}),
onUnload: () => dispatch({ type: PROFILE_PAGE_UNLOADED })
});
class Profile extends React.Component {
componentWillMount() {
this.props.onLoad(Promise.all([
agent.Profile.get(this.props.match.params.username),
agent.Articles.byAuthor(this.props.match.params.username)
]));
}
componentWillUnmount() {
this.props.onUnload();
}
renderTabs() {
return (
<ul className="nav nav-pills outline-active">
<li className="nav-item">
<Link
className="nav-link active"
to={`/@${this.props.profile.username}`}>
My Articles
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to={`/@${this.props.profile.username}/favorites`}>
Favorited Articles
</Link>
</li>
</ul>
);
}
render() {
const profile = this.props.profile;
if (!profile) {
return null;
}
const isUser = this.props.currentUser &&
this.props.profile.username === this.props.currentUser.username;
return (
<div className="profile-page">
<div className="user-info">
<div className="container">
<div className="row">
<div className="col-xs-12 col-md-10 offset-md-1">
<img src={profile.image} className="user-img" alt={profile.username} />
<h4>{profile.username}</h4>
<p>{profile.bio}</p>
<EditProfileSettings isUser={isUser} />
<FollowUserButton
isUser={isUser}
user={profile}
follow={this.props.onFollow}
unfollow={this.props.onUnfollow}
/>
</div>
</div>
</div>
</div>
<div className="container">
<div className="row">
<div className="col-xs-12 col-md-10 offset-md-1">
<div className="articles-toggle">
{this.renderTabs()}
</div>
<ArticleList
pager={this.props.pager}
articles={this.props.articles}
articlesCount={this.props.articlesCount}
state={this.props.currentPage} />
</div>
</div>
</div>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Profile);
export { Profile, mapStateToProps };
================================================
FILE: src/components/ProfileFavorites.js
================================================
import { Profile, mapStateToProps } from './Profile';
import React from 'react';
import { Link } from 'react-router-dom';
import agent from '../agent';
import { connect } from 'react-redux';
import {
PROFILE_PAGE_LOADED,
PROFILE_PAGE_UNLOADED
} from '../constants/actionTypes';
const mapDispatchToProps = dispatch => ({
onLoad: (pager, payload) =>
dispatch({ type: PROFILE_PAGE_LOADED, pager, payload }),
onUnload: () =>
dispatch({ type: PROFILE_PAGE_UNLOADED })
});
class ProfileFavorites extends Profile {
componentWillMount() {
this.props.onLoad(page => agent.Articles.favoritedBy(this.props.match.params.username, page), Promise.all([
agent.Profile.get(this.props.match.params.username),
agent.Articles.favoritedBy(this.props.match.params.username)
]));
}
componentWillUnmount() {
this.props.onUnload();
}
renderTabs() {
return (
<ul className="nav nav-pills outline-active">
<li className="nav-item">
<Link
className="nav-link"
to={`/@${this.props.profile.username}`}>
My Articles
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link active"
to={`/@${this.props.profile.username}/favorites`}>
Favorited Articles
</Link>
</li>
</ul>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ProfileFavorites);
================================================
FILE: src/components/Register.js
================================================
import { Link } from 'react-router-dom';
import ListErrors from './ListErrors';
import React from 'react';
import agent from '../agent';
import { connect } from 'react-redux';
import {
UPDATE_FIELD_AUTH,
REGISTER,
REGISTER_PAGE_UNLOADED
} from '../constants/actionTypes';
const mapStateToProps = state => ({ ...state.auth });
const mapDispatchToProps = dispatch => ({
onChangeEmail: value =>
dispatch({ type: UPDATE_FIELD_AUTH, key: 'email', value }),
onChangePassword: value =>
dispatch({ type: UPDATE_FIELD_AUTH, key: 'password', value }),
onChangeUsername: value =>
dispatch({ type: UPDATE_FIELD_AUTH, key: 'username', value }),
onSubmit: (username, email, password) => {
const payload = agent.Auth.register(username, email, password);
dispatch({ type: REGISTER, payload })
},
onUnload: () =>
dispatch({ type: REGISTER_PAGE_UNLOADED })
});
class Register extends React.Component {
constructor() {
super();
this.changeEmail = ev => this.props.onChangeEmail(ev.target.value);
this.changePassword = ev => this.props.onChangePassword(ev.target.value);
this.changeUsername = ev => this.props.onChangeUsername(ev.target.value);
this.submitForm = (username, email, password) => ev => {
ev.preventDefault();
this.props.onSubmit(username, email, password);
}
}
componentWillUnmount() {
this.props.onUnload();
}
render() {
const email = this.props.email;
const password = this.props.password;
const username = this.props.username;
return (
<div className="auth-page">
<div className="container page">
<div className="row">
<div className="col-md-6 offset-md-3 col-xs-12">
<h1 className="text-xs-center">Sign Up</h1>
<p className="text-xs-center">
<Link to="/login">
Have an account?
</Link>
</p>
<ListErrors errors={this.props.errors} />
<form onSubmit={this.submitForm(username, email, password)}>
<fieldset>
<fieldset className="form-group">
<input
className="form-control form-control-lg"
type="text"
placeholder="Username"
value={this.props.username}
onChange={this.changeUsername} />
</fieldset>
<fieldset className="form-group">
<input
className="form-control form-control-lg"
type="email"
placeholder="Email"
value={this.props.email}
onChange={this.changeEmail} />
</fieldset>
<fieldset className="form-group">
<input
className="form-control form-control-lg"
type="password"
placeholder="Password"
value={this.props.password}
onChange={this.changePassword} />
</fieldset>
<button
className="btn btn-lg btn-primary pull-xs-right"
type="submit"
disabled={this.props.inProgress}>
Sign up
</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Register);
================================================
FILE: src/components/Settings.js
================================================
import ListErrors from './ListErrors';
import React from 'react';
import agent from '../agent';
import { connect } from 'react-redux';
import {
SETTINGS_SAVED,
SETTINGS_PAGE_UNLOADED,
LOGOUT
} from '../constants/actionTypes';
class SettingsForm extends React.Component {
constructor() {
super();
this.state = {
image: '',
username: '',
bio: '',
email: '',
password: ''
};
this.updateState = field => ev => {
const state = this.state;
const newState = Object.assign({}, state, { [field]: ev.target.value });
this.setState(newState);
};
this.submitForm = ev => {
ev.preventDefault();
const user = Object.assign({}, this.state);
if (!user.password) {
delete user.password;
}
this.props.onSubmitForm(user);
};
}
componentWillMount() {
if (this.props.currentUser) {
Object.assign(this.state, {
image: this.props.currentUser.image || '',
username: this.props.currentUser.username,
bio: this.props.currentUser.bio,
email: this.props.currentUser.email
});
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.currentUser) {
this.setState(Object.assign({}, this.state, {
image: nextProps.currentUser.image || '',
username: nextProps.currentUser.username,
bio: nextProps.currentUser.bio,
email: nextProps.currentUser.email
}));
}
}
render() {
return (
<form onSubmit={this.submitForm}>
<fieldset>
<fieldset className="form-group">
<input
className="form-control"
type="text"
placeholder="URL of profile picture"
value={this.state.image}
onChange={this.updateState('image')} />
</fieldset>
<fieldset className="form-group">
<input
className="form-control form-control-lg"
type="text"
placeholder="Username"
value={this.state.username}
onChange={this.updateState('username')} />
</fieldset>
<fieldset className="form-group">
<textarea
className="form-control form-control-lg"
rows="8"
placeholder="Short bio about you"
value={this.state.bio}
onChange={this.updateState('bio')}>
</textarea>
</fieldset>
<fieldset className="form-group">
<input
className="form-control form-control-lg"
type="email"
placeholder="Email"
value={this.state.email}
onChange={this.updateState('email')} />
</fieldset>
<fieldset className="form-group">
<input
className="form-control form-control-lg"
type="password"
placeholder="New Password"
value={this.state.password}
onChange={this.updateState('password')} />
</fieldset>
<button
className="btn btn-lg btn-primary pull-xs-right"
type="submit"
disabled={this.state.inProgress}>
Update Settings
</button>
</fieldset>
</form>
);
}
}
const mapStateToProps = state => ({
...state.settings,
currentUser: state.common.currentUser
});
const mapDispatchToProps = dispatch => ({
onClickLogout: () => dispatch({ type: LOGOUT }),
onSubmitForm: user =>
dispatch({ type: SETTINGS_SAVED, payload: agent.Auth.save(user) }),
onUnload: () => dispatch({ type: SETTINGS_PAGE_UNLOADED })
});
class Settings extends React.Component {
render() {
return (
<div className="settings-page">
<div className="container page">
<div className="row">
<div className="col-md-6 offset-md-3 col-xs-12">
<h1 className="text-xs-center">Your Settings</h1>
<ListErrors errors={this.props.errors}></ListErrors>
<SettingsForm
currentUser={this.props.currentUser}
onSubmitForm={this.props.onSubmitForm} />
<hr />
<button
className="btn btn-outline-danger"
onClick={this.props.onClickLogout}>
Or click here to logout.
</button>
</div>
</div>
</div>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Settings);
================================================
FILE: src/constants/actionTypes.js
================================================
export const APP_LOAD = 'APP_LOAD';
export const REDIRECT = 'REDIRECT';
export const ARTICLE_SUBMITTED = 'ARTICLE_SUBMITTED';
export const SETTINGS_SAVED = 'SETTINGS_SAVED';
export const DELETE_ARTICLE = 'DELETE_ARTICLE';
export const SETTINGS_PAGE_UNLOADED = 'SETTINGS_PAGE_UNLOADED';
export const HOME_PAGE_LOADED = 'HOME_PAGE_LOADED';
export const HOME_PAGE_UNLOADED = 'HOME_PAGE_UNLOADED';
export const ARTICLE_PAGE_LOADED = 'ARTICLE_PAGE_LOADED';
export const ARTICLE_PAGE_UNLOADED = 'ARTICLE_PAGE_UNLOADED';
export const ADD_COMMENT = 'ADD_COMMENT';
export const DELETE_COMMENT = 'DELETE_COMMENT';
export const ARTICLE_FAVORITED = 'ARTICLE_FAVORITED';
export const ARTICLE_UNFAVORITED = 'ARTICLE_UNFAVORITED';
export const SET_PAGE = 'SET_PAGE';
export const APPLY_TAG_FILTER = 'APPLY_TAG_FILTER';
export const CHANGE_TAB = 'CHANGE_TAB';
export const PROFILE_PAGE_LOADED = 'PROFILE_PAGE_LOADED';
export const PROFILE_PAGE_UNLOADED = 'PROFILE_PAGE_UNLOADED';
export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';
export const REGISTER = 'REGISTER';
export const LOGIN_PAGE_UNLOADED = 'LOGIN_PAGE_UNLOADED';
export const REGISTER_PAGE_UNLOADED = 'REGISTER_PAGE_UNLOADED';
export const ASYNC_START = 'ASYNC_START';
export const ASYNC_END = 'ASYNC_END';
export const EDITOR_PAGE_LOADED = 'EDITOR_PAGE_LOADED';
export const EDITOR_PAGE_UNLOADED = 'EDITOR_PAGE_UNLOADED';
export const ADD_TAG = 'ADD_TAG';
export const REMOVE_TAG = 'REMOVE_TAG';
export const UPDATE_FIELD_AUTH = 'UPDATE_FIELD_AUTH';
export const UPDATE_FIELD_EDITOR = 'UPDATE_FIELD_EDITOR';
export const FOLLOW_USER = 'FOLLOW_USER';
export const UNFOLLOW_USER = 'UNFOLLOW_USER';
export const PROFILE_FAVORITES_PAGE_UNLOADED = 'PROFILE_FAVORITES_PAGE_UNLOADED';
export const PROFILE_FAVORITES_PAGE_LOADED = 'PROFILE_FAVORITES_PAGE_LOADED';
================================================
FILE: src/index.js
================================================
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import React from 'react';
import { store, history} from './store';
import { Route, Switch } from 'react-router-dom';
import { ConnectedRouter } from 'react-router-redux';
import App from './components/App';
ReactDOM.render((
<Provider store={store}>
<ConnectedRouter history={history}>
<Switch>
<Route path="/" component={App} />
</Switch>
</ConnectedRouter>
</Provider>
), document.getElementById('root'));
================================================
FILE: src/middleware.js
================================================
import agent from './agent';
import {
ASYNC_START,
ASYNC_END,
LOGIN,
LOGOUT,
REGISTER
} from './constants/actionTypes';
const promiseMiddleware = store => next => action => {
if (isPromise(action.payload)) {
store.dispatch({ type: ASYNC_START, subtype: action.type });
const currentView = store.getState().viewChangeCounter;
const skipTracking = action.skipTracking;
action.payload.then(
res => {
const currentState = store.getState()
if (!skipTracking && currentState.viewChangeCounter !== currentView) {
return
}
console.log('RESULT', res);
action.payload = res;
store.dispatch({ type: ASYNC_END, promise: action.payload });
store.dispatch(action);
},
error => {
const currentState = store.getState()
if (!skipTracking && currentState.viewChangeCounter !== currentView) {
return
}
console.log('ERROR', error);
action.error = true;
action.payload = error.response.body;
if (!action.skipTracking) {
store.dispatch({ type: ASYNC_END, promise: action.payload });
}
store.dispatch(action);
}
);
return;
}
next(action);
};
const localStorageMiddleware = store => next => action => {
if (action.type === REGISTER || action.type === LOGIN) {
if (!action.error) {
window.localStorage.setItem('jwt', action.payload.user.token);
agent.setToken(action.payload.user.token);
}
} else if (action.type === LOGOUT) {
window.localStorage.setItem('jwt', '');
agent.setToken(null);
}
next(action);
};
function isPromise(v) {
return v && typeof v.then === 'function';
}
export { promiseMiddleware, localStorageMiddleware }
================================================
FILE: src/reducer.js
================================================
import article from './reducers/article';
import articleList from './reducers/articleList';
import auth from './reducers/auth';
import { combineReducers } from 'redux';
import common from './reducers/common';
import editor from './reducers/editor';
import home from './reducers/home';
import profile from './reducers/profile';
import settings from './reducers/settings';
import { routerReducer } from 'react-router-redux';
export default combineReducers({
article,
articleList,
auth,
common,
editor,
home,
profile,
settings,
router: routerReducer
});
================================================
FILE: src/reducers/article.js
================================================
import {
ARTICLE_PAGE_LOADED,
ARTICLE_PAGE_UNLOADED,
ADD_COMMENT,
DELETE_COMMENT
} from '../constants/actionTypes';
export default (state = {}, action) => {
switch (action.type) {
case ARTICLE_PAGE_LOADED:
return {
...state,
article: action.payload[0].article,
comments: action.payload[1].comments
};
case ARTICLE_PAGE_UNLOADED:
return {};
case ADD_COMMENT:
return {
...state,
commentErrors: action.error ? action.payload.errors : null,
comments: action.error ?
null :
(state.comments || []).concat([action.payload.comment])
};
case DELETE_COMMENT:
const commentId = action.commentId
return {
...state,
comments: state.comments.filter(comment => comment.id !== commentId)
};
default:
return state;
}
};
================================================
FILE: src/reducers/articleList.js
================================================
import {
ARTICLE_FAVORITED,
ARTICLE_UNFAVORITED,
SET_PAGE,
APPLY_TAG_FILTER,
HOME_PAGE_LOADED,
HOME_PAGE_UNLOADED,
CHANGE_TAB,
PROFILE_PAGE_LOADED,
PROFILE_PAGE_UNLOADED,
PROFILE_FAVORITES_PAGE_LOADED,
PROFILE_FAVORITES_PAGE_UNLOADED
} from '../constants/actionTypes';
export default (state = {}, action) => {
switch (action.type) {
case ARTICLE_FAVORITED:
case ARTICLE_UNFAVORITED:
return {
...state,
articles: state.articles.map(article => {
if (article.slug === action.payload.article.slug) {
return {
...article,
favorited: action.payload.article.favorited,
favoritesCount: action.payload.article.favoritesCount
};
}
return article;
})
};
case SET_PAGE:
return {
...state,
articles: action.payload.articles,
articlesCount: action.payload.articlesCount,
currentPage: action.page
};
case APPLY_TAG_FILTER:
return {
...state,
pager: action.pager,
articles: action.payload.articles,
articlesCount: action.payload.articlesCount,
tab: null,
tag: action.tag,
currentPage: 0
};
case HOME_PAGE_LOADED:
return {
...state,
pager: action.pager,
tags: action.payload[0].tags,
articles: action.payload[1].articles,
articlesCount: action.payload[1].articlesCount,
currentPage: 0,
tab: action.tab
};
case HOME_PAGE_UNLOADED:
return {};
case CHANGE_TAB:
return {
...state,
pager: action.pager,
articles: action.payload.articles,
articlesCount: action.payload.articlesCount,
tab: action.tab,
currentPage: 0,
tag: null
};
case PROFILE_PAGE_LOADED:
case PROFILE_FAVORITES_PAGE_LOADED:
return {
...state,
pager: action.pager,
articles: action.payload[1].articles,
articlesCount: action.payload[1].articlesCount,
currentPage: 0
};
case PROFILE_PAGE_UNLOADED:
case PROFILE_FAVORITES_PAGE_UNLOADED:
return {};
default:
return state;
}
};
================================================
FILE: src/reducers/auth.js
================================================
import {
LOGIN,
REGISTER,
LOGIN_PAGE_UNLOADED,
REGISTER_PAGE_UNLOADED,
ASYNC_START,
UPDATE_FIELD_AUTH
} from '../constants/actionTypes';
export default (state = {}, action) => {
switch (action.type) {
case LOGIN:
case REGISTER:
return {
...state,
inProgress: false,
errors: action.error ? action.payload.errors : null
};
case LOGIN_PAGE_UNLOADED:
case REGISTER_PAGE_UNLOADED:
return {};
case ASYNC_START:
if (action.subtype === LOGIN || action.subtype === REGISTER) {
return { ...state, inProgress: true };
}
break;
case UPDATE_FIELD_AUTH:
return { ...state, [action.key]: action.value };
default:
return state;
}
return state;
};
================================================
FILE: src/reducers/common.js
================================================
import {
APP_LOAD,
REDIRECT,
LOGOUT,
ARTICLE_SUBMITTED,
SETTINGS_SAVED,
LOGIN,
REGISTER,
DELETE_ARTICLE,
ARTICLE_PAGE_UNLOADED,
EDITOR_PAGE_UNLOADED,
HOME_PAGE_UNLOADED,
PROFILE_PAGE_UNLOADED,
PROFILE_FAVORITES_PAGE_UNLOADED,
SETTINGS_PAGE_UNLOADED,
LOGIN_PAGE_UNLOADED,
REGISTER_PAGE_UNLOADED
} from '../constants/actionTypes';
const defaultState = {
appName: 'Conduit',
token: null,
viewChangeCounter: 0
};
export default (state = defaultState, action) => {
switch (action.type) {
case APP_LOAD:
return {
...state,
token: action.token || null,
appLoaded: true,
currentUser: action.payload ? action.payload.user : null
};
case REDIRECT:
return { ...state, redirectTo: null };
case LOGOUT:
return { ...state, redirectTo: '/', token: null, currentUser: null };
case ARTICLE_SUBMITTED:
const redirectUrl = `/article/${action.payload.article.slug}`;
return { ...state, redirectTo: redirectUrl };
case SETTINGS_SAVED:
return {
...state,
redirectTo: action.error ? null : '/',
currentUser: action.error ? null : action.payload.user
};
case LOGIN:
case REGISTER:
return {
...state,
redirectTo: action.error ? null : '/',
token: action.error ? null : action.payload.user.token,
currentUser: action.error ? null : action.payload.user
};
case DELETE_ARTICLE:
return { ...state, redirectTo: '/' };
case ARTICLE_PAGE_UNLOADED:
case EDITOR_PAGE_UNLOADED:
case HOME_PAGE_UNLOADED:
case PROFILE_PAGE_UNLOADED:
case PROFILE_FAVORITES_PAGE_UNLOADED:
case SETTINGS_PAGE_UNLOADED:
case LOGIN_PAGE_UNLOADED:
case REGISTER_PAGE_UNLOADED:
return { ...state, viewChangeCounter: state.viewChangeCounter + 1 };
default:
return state;
}
};
================================================
FILE: src/reducers/editor.js
================================================
import {
EDITOR_PAGE_LOADED,
EDITOR_PAGE_UNLOADED,
ARTICLE_SUBMITTED,
ASYNC_START,
ADD_TAG,
REMOVE_TAG,
UPDATE_FIELD_EDITOR
} from '../constants/actionTypes';
export default (state = {}, action) => {
switch (action.type) {
case EDITOR_PAGE_LOADED:
return {
...state,
articleSlug: action.payload ? action.payload.article.slug : '',
title: action.payload ? action.payload.article.title : '',
description: action.payload ? action.payload.article.description : '',
body: action.payload ? action.payload.article.body : '',
tagInput: '',
tagList: action.payload ? action.payload.article.tagList : []
};
case EDITOR_PAGE_UNLOADED:
return {};
case ARTICLE_SUBMITTED:
return {
...state,
inProgress: null,
errors: action.error ? action.payload.errors : null
};
case ASYNC_START:
if (action.subtype === ARTICLE_SUBMITTED) {
return { ...state, inProgress: true };
}
break;
case ADD_TAG:
return {
...state,
tagList: state.tagList.concat([state.tagInput]),
tagInput: ''
};
case REMOVE_TAG:
return {
...state,
tagList: state.tagList.filter(tag => tag !== action.tag)
};
case UPDATE_FIELD_EDITOR:
return { ...state, [action.key]: action.value };
default:
return state;
}
return state;
};
================================================
FILE: src/reducers/home.js
================================================
import { HOME_PAGE_LOADED, HOME_PAGE_UNLOADED } from '../constants/actionTypes';
export default (state = {}, action) => {
switch (action.type) {
case HOME_PAGE_LOADED:
return {
...state,
tags: action.payload[0].tags
};
case HOME_PAGE_UNLOADED:
return {};
default:
return state;
}
};
================================================
FILE: src/reducers/profile.js
================================================
import {
PROFILE_PAGE_LOADED,
PROFILE_PAGE_UNLOADED,
FOLLOW_USER,
UNFOLLOW_USER
} from '../constants/actionTypes';
export default (state = {}, action) => {
switch (action.type) {
case PROFILE_PAGE_LOADED:
return {
...action.payload[0].profile
};
case PROFILE_PAGE_UNLOADED:
return {};
case FOLLOW_USER:
case UNFOLLOW_USER:
return {
...action.payload.profile
};
default:
return state;
}
};
================================================
FILE: src/reducers/settings.js
================================================
import {
SETTINGS_SAVED,
SETTINGS_PAGE_UNLOADED,
ASYNC_START
} from '../constants/actionTypes';
export default (state = {}, action) => {
switch (action.type) {
case SETTINGS_SAVED:
return {
...state,
inProgress: false,
errors: action.error ? action.payload.errors : null
};
case SETTINGS_PAGE_UNLOADED:
return {};
case ASYNC_START:
return {
...state,
inProgress: true
};
default:
return state;
}
};
================================================
FILE: src/store.js
================================================
import { applyMiddleware, createStore } from 'redux';
import { createLogger } from 'redux-logger'
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import { promiseMiddleware, localStorageMiddleware } from './middleware';
import reducer from './reducer';
import { routerMiddleware } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory';
export const history = createHistory();
// Build the middleware for intercepting and dispatching navigation actions
const myRouterMiddleware = routerMiddleware(history);
const getMiddleware = () => {
if (process.env.NODE_ENV === 'production') {
return applyMiddleware(myRouterMiddleware, promiseMiddleware, localStorageMiddleware);
} else {
// Enable additional logging in non-production environments.
return applyMiddleware(myRouterMiddleware, promiseMiddleware, localStorageMiddleware, createLogger())
}
};
export const store = createStore(
reducer, composeWithDevTools(getMiddleware()));
gitextract_8dxt9i05/
├── .gitignore
├── LICENSE.md
├── README.md
├── package.json
├── public/
│ └── index.html
└── src/
├── agent.js
├── components/
│ ├── App.js
│ ├── Article/
│ │ ├── ArticleActions.js
│ │ ├── ArticleMeta.js
│ │ ├── Comment.js
│ │ ├── CommentContainer.js
│ │ ├── CommentInput.js
│ │ ├── CommentList.js
│ │ ├── DeleteButton.js
│ │ └── index.js
│ ├── ArticleList.js
│ ├── ArticlePreview.js
│ ├── Editor.js
│ ├── Header.js
│ ├── Home/
│ │ ├── Banner.js
│ │ ├── MainView.js
│ │ ├── Tags.js
│ │ └── index.js
│ ├── ListErrors.js
│ ├── ListPagination.js
│ ├── Login.js
│ ├── Profile.js
│ ├── ProfileFavorites.js
│ ├── Register.js
│ └── Settings.js
├── constants/
│ └── actionTypes.js
├── index.js
├── middleware.js
├── reducer.js
├── reducers/
│ ├── article.js
│ ├── articleList.js
│ ├── auth.js
│ ├── common.js
│ ├── editor.js
│ ├── home.js
│ ├── profile.js
│ └── settings.js
└── store.js
SYMBOL INDEX (89 symbols across 16 files)
FILE: src/agent.js
constant API_ROOT (line 6) | const API_ROOT = 'https://conduit.productionready.io/api';
FILE: src/components/App.js
class App (line 33) | class App extends React.Component {
method componentWillReceiveProps (line 34) | componentWillReceiveProps(nextProps) {
method componentWillMount (line 42) | componentWillMount() {
method render (line 51) | render() {
FILE: src/components/Article/CommentInput.js
class CommentInput (line 11) | class CommentInput extends React.Component {
method constructor (line 12) | constructor() {
method render (line 31) | render() {
FILE: src/components/Article/index.js
class Article (line 21) | class Article extends React.Component {
method componentWillMount (line 22) | componentWillMount() {
method componentWillUnmount (line 29) | componentWillUnmount() {
method render (line 33) | render() {
FILE: src/components/ArticlePreview.js
constant FAVORITED_CLASS (line 7) | const FAVORITED_CLASS = 'btn btn-sm btn-primary';
constant NOT_FAVORITED_CLASS (line 8) | const NOT_FAVORITED_CLASS = 'btn btn-sm btn-outline-primary';
FILE: src/components/Editor.js
class Editor (line 33) | class Editor extends React.Component {
method constructor (line 34) | constructor() {
method componentWillReceiveProps (line 73) | componentWillReceiveProps(nextProps) {
method componentWillMount (line 83) | componentWillMount() {
method componentWillUnmount (line 90) | componentWillUnmount() {
method render (line 94) | render() {
FILE: src/components/Header.js
class Header (line 72) | class Header extends React.Component {
method render (line 73) | render() {
FILE: src/components/Home/index.js
class Home (line 30) | class Home extends React.Component {
method componentWillMount (line 31) | componentWillMount() {
method componentWillUnmount (line 40) | componentWillUnmount() {
method render (line 44) | render() {
FILE: src/components/ListErrors.js
class ListErrors (line 3) | class ListErrors extends React.Component {
method render (line 4) | render() {
FILE: src/components/Login.js
class Login (line 25) | class Login extends React.Component {
method constructor (line 26) | constructor() {
method componentWillUnmount (line 36) | componentWillUnmount() {
method render (line 40) | render() {
FILE: src/components/Profile.js
class Profile (line 77) | class Profile extends React.Component {
method componentWillMount (line 78) | componentWillMount() {
method componentWillUnmount (line 85) | componentWillUnmount() {
method renderTabs (line 89) | renderTabs() {
method render (line 111) | render() {
FILE: src/components/ProfileFavorites.js
class ProfileFavorites (line 18) | class ProfileFavorites extends Profile {
method componentWillMount (line 19) | componentWillMount() {
method componentWillUnmount (line 26) | componentWillUnmount() {
method renderTabs (line 30) | renderTabs() {
FILE: src/components/Register.js
class Register (line 29) | class Register extends React.Component {
method constructor (line 30) | constructor() {
method componentWillUnmount (line 41) | componentWillUnmount() {
method render (line 45) | render() {
FILE: src/components/Settings.js
class SettingsForm (line 11) | class SettingsForm extends React.Component {
method constructor (line 12) | constructor() {
method componentWillMount (line 41) | componentWillMount() {
method componentWillReceiveProps (line 52) | componentWillReceiveProps(nextProps) {
method render (line 63) | render() {
class Settings (line 139) | class Settings extends React.Component {
method render (line 140) | render() {
FILE: src/constants/actionTypes.js
constant APP_LOAD (line 1) | const APP_LOAD = 'APP_LOAD';
constant REDIRECT (line 2) | const REDIRECT = 'REDIRECT';
constant ARTICLE_SUBMITTED (line 3) | const ARTICLE_SUBMITTED = 'ARTICLE_SUBMITTED';
constant SETTINGS_SAVED (line 4) | const SETTINGS_SAVED = 'SETTINGS_SAVED';
constant DELETE_ARTICLE (line 5) | const DELETE_ARTICLE = 'DELETE_ARTICLE';
constant SETTINGS_PAGE_UNLOADED (line 6) | const SETTINGS_PAGE_UNLOADED = 'SETTINGS_PAGE_UNLOADED';
constant HOME_PAGE_LOADED (line 7) | const HOME_PAGE_LOADED = 'HOME_PAGE_LOADED';
constant HOME_PAGE_UNLOADED (line 8) | const HOME_PAGE_UNLOADED = 'HOME_PAGE_UNLOADED';
constant ARTICLE_PAGE_LOADED (line 9) | const ARTICLE_PAGE_LOADED = 'ARTICLE_PAGE_LOADED';
constant ARTICLE_PAGE_UNLOADED (line 10) | const ARTICLE_PAGE_UNLOADED = 'ARTICLE_PAGE_UNLOADED';
constant ADD_COMMENT (line 11) | const ADD_COMMENT = 'ADD_COMMENT';
constant DELETE_COMMENT (line 12) | const DELETE_COMMENT = 'DELETE_COMMENT';
constant ARTICLE_FAVORITED (line 13) | const ARTICLE_FAVORITED = 'ARTICLE_FAVORITED';
constant ARTICLE_UNFAVORITED (line 14) | const ARTICLE_UNFAVORITED = 'ARTICLE_UNFAVORITED';
constant SET_PAGE (line 15) | const SET_PAGE = 'SET_PAGE';
constant APPLY_TAG_FILTER (line 16) | const APPLY_TAG_FILTER = 'APPLY_TAG_FILTER';
constant CHANGE_TAB (line 17) | const CHANGE_TAB = 'CHANGE_TAB';
constant PROFILE_PAGE_LOADED (line 18) | const PROFILE_PAGE_LOADED = 'PROFILE_PAGE_LOADED';
constant PROFILE_PAGE_UNLOADED (line 19) | const PROFILE_PAGE_UNLOADED = 'PROFILE_PAGE_UNLOADED';
constant LOGIN (line 20) | const LOGIN = 'LOGIN';
constant LOGOUT (line 21) | const LOGOUT = 'LOGOUT';
constant REGISTER (line 22) | const REGISTER = 'REGISTER';
constant LOGIN_PAGE_UNLOADED (line 23) | const LOGIN_PAGE_UNLOADED = 'LOGIN_PAGE_UNLOADED';
constant REGISTER_PAGE_UNLOADED (line 24) | const REGISTER_PAGE_UNLOADED = 'REGISTER_PAGE_UNLOADED';
constant ASYNC_START (line 25) | const ASYNC_START = 'ASYNC_START';
constant ASYNC_END (line 26) | const ASYNC_END = 'ASYNC_END';
constant EDITOR_PAGE_LOADED (line 27) | const EDITOR_PAGE_LOADED = 'EDITOR_PAGE_LOADED';
constant EDITOR_PAGE_UNLOADED (line 28) | const EDITOR_PAGE_UNLOADED = 'EDITOR_PAGE_UNLOADED';
constant ADD_TAG (line 29) | const ADD_TAG = 'ADD_TAG';
constant REMOVE_TAG (line 30) | const REMOVE_TAG = 'REMOVE_TAG';
constant UPDATE_FIELD_AUTH (line 31) | const UPDATE_FIELD_AUTH = 'UPDATE_FIELD_AUTH';
constant UPDATE_FIELD_EDITOR (line 32) | const UPDATE_FIELD_EDITOR = 'UPDATE_FIELD_EDITOR';
constant FOLLOW_USER (line 33) | const FOLLOW_USER = 'FOLLOW_USER';
constant UNFOLLOW_USER (line 34) | const UNFOLLOW_USER = 'UNFOLLOW_USER';
constant PROFILE_FAVORITES_PAGE_UNLOADED (line 35) | const PROFILE_FAVORITES_PAGE_UNLOADED = 'PROFILE_FAVORITES_PAGE_UNLOADED';
constant PROFILE_FAVORITES_PAGE_LOADED (line 36) | const PROFILE_FAVORITES_PAGE_LOADED = 'PROFILE_FAVORITES_PAGE_LOADED';
FILE: src/middleware.js
function isPromise (line 63) | function isPromise(v) {
Condensed preview — 43 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (77K chars).
[
{
"path": ".gitignore",
"chars": 185,
"preview": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n\n# testing\ncovera"
},
{
"path": "LICENSE.md",
"chars": 1068,
"preview": "MIT License\n\nCopyright (c) 2020 GoThinkster\n\nPermission is hereby granted, free of charge, to any person obtaining a cop"
},
{
"path": "README.md",
"chars": 4837,
"preview": "# \n\n[![RealWorld Frontend](https://img.shields.io/badge/realworld-frontend"
},
{
"path": "package.json",
"chars": 840,
"preview": "{\n \"name\": \"react-redux-realworld-example-app\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"devDependencies\": {\n \"cr"
},
{
"path": "public/index.html",
"chars": 1543,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/agent.js",
"chars": 2850,
"preview": "import superagentPromise from 'superagent-promise';\nimport _superagent from 'superagent';\n\nconst superagent = superagent"
},
{
"path": "src/components/App.js",
"chars": 2664,
"preview": "import agent from '../agent';\nimport Header from './Header';\nimport React from 'react';\nimport { connect } from 'react-r"
},
{
"path": "src/components/Article/ArticleActions.js",
"chars": 1000,
"preview": "import { Link } from 'react-router-dom';\nimport React from 'react';\nimport agent from '../../agent';\nimport { connect } "
},
{
"path": "src/components/Article/ArticleMeta.js",
"chars": 750,
"preview": "import ArticleActions from './ArticleActions';\nimport { Link } from 'react-router-dom';\nimport React from 'react';\n\ncons"
},
{
"path": "src/components/Article/Comment.js",
"chars": 1072,
"preview": "import DeleteButton from './DeleteButton';\nimport { Link } from 'react-router-dom';\nimport React from 'react';\n\nconst Co"
},
{
"path": "src/components/Article/CommentContainer.js",
"chars": 1060,
"preview": "import CommentInput from './CommentInput';\nimport CommentList from './CommentList';\nimport { Link } from 'react-router-d"
},
{
"path": "src/components/Article/CommentInput.js",
"chars": 1518,
"preview": "import React from 'react';\nimport agent from '../../agent';\nimport { connect } from 'react-redux';\nimport { ADD_COMMENT "
},
{
"path": "src/components/Article/CommentList.js",
"chars": 425,
"preview": "import Comment from './Comment';\nimport React from 'react';\n\nconst CommentList = props => {\n return (\n <div>\n {"
},
{
"path": "src/components/Article/DeleteButton.js",
"chars": 718,
"preview": "import React from 'react';\nimport agent from '../../agent';\nimport { connect } from 'react-redux';\nimport { DELETE_COMME"
},
{
"path": "src/components/Article/index.js",
"chars": 2594,
"preview": "import ArticleMeta from './ArticleMeta';\nimport CommentContainer from './CommentContainer';\nimport React from 'react';\ni"
},
{
"path": "src/components/ArticleList.js",
"chars": 785,
"preview": "import ArticlePreview from './ArticlePreview';\nimport ListPagination from './ListPagination';\nimport React from 'react';"
},
{
"path": "src/components/ArticlePreview.js",
"chars": 2262,
"preview": "import React from 'react';\nimport { Link } from 'react-router-dom';\nimport agent from '../agent';\nimport { connect } fro"
},
{
"path": "src/components/Editor.js",
"chars": 5393,
"preview": "import ListErrors from './ListErrors';\nimport React from 'react';\nimport agent from '../agent';\nimport { connect } from "
},
{
"path": "src/components/Header.js",
"chars": 2063,
"preview": "import React from 'react';\nimport { Link } from 'react-router-dom';\n\nconst LoggedOutView = props => {\n if (!props.curre"
},
{
"path": "src/components/Home/Banner.js",
"chars": 366,
"preview": "import React from 'react';\n\nconst Banner = ({ appName, token }) => {\n if (token) {\n return null;\n }\n return (\n "
},
{
"path": "src/components/Home/MainView.js",
"chars": 2264,
"preview": "import ArticleList from '../ArticleList';\nimport React from 'react';\nimport agent from '../../agent';\nimport { connect }"
},
{
"path": "src/components/Home/Tags.js",
"chars": 774,
"preview": "import React from 'react';\nimport agent from '../../agent';\n\nconst Tags = props => {\n const tags = props.tags;\n if (ta"
},
{
"path": "src/components/Home/index.js",
"chars": 1779,
"preview": "import Banner from './Banner';\nimport MainView from './MainView';\nimport React from 'react';\nimport Tags from './Tags';\n"
},
{
"path": "src/components/ListErrors.js",
"chars": 505,
"preview": "import React from 'react';\n\nclass ListErrors extends React.Component {\n render() {\n const errors = this.props.errors"
},
{
"path": "src/components/ListPagination.js",
"chars": 1324,
"preview": "import React from 'react';\nimport agent from '../agent';\nimport { connect } from 'react-redux';\nimport { SET_PAGE } from"
},
{
"path": "src/components/Login.js",
"chars": 2913,
"preview": "import { Link } from 'react-router-dom';\nimport ListErrors from './ListErrors';\nimport React from 'react';\nimport agent "
},
{
"path": "src/components/Profile.js",
"chars": 4196,
"preview": "import ArticleList from './ArticleList';\nimport React from 'react';\nimport { Link } from 'react-router-dom';\nimport agen"
},
{
"path": "src/components/ProfileFavorites.js",
"chars": 1458,
"preview": "import { Profile, mapStateToProps } from './Profile';\nimport React from 'react';\nimport { Link } from 'react-router-dom'"
},
{
"path": "src/components/Register.js",
"chars": 3603,
"preview": "import { Link } from 'react-router-dom';\nimport ListErrors from './ListErrors';\nimport React from 'react';\nimport agent "
},
{
"path": "src/components/Settings.js",
"chars": 4567,
"preview": "import ListErrors from './ListErrors';\nimport React from 'react';\nimport agent from '../agent';\nimport { connect } from "
},
{
"path": "src/constants/actionTypes.js",
"chars": 1813,
"preview": "export const APP_LOAD = 'APP_LOAD';\nexport const REDIRECT = 'REDIRECT';\nexport const ARTICLE_SUBMITTED = 'ARTICLE_SUBMIT"
},
{
"path": "src/index.js",
"chars": 519,
"preview": "import ReactDOM from 'react-dom';\nimport { Provider } from 'react-redux';\nimport React from 'react';\nimport { store, his"
},
{
"path": "src/middleware.js",
"chars": 1774,
"preview": "import agent from './agent';\nimport {\n ASYNC_START,\n ASYNC_END,\n LOGIN,\n LOGOUT,\n REGISTER\n} from './constants/acti"
},
{
"path": "src/reducer.js",
"chars": 570,
"preview": "import article from './reducers/article';\nimport articleList from './reducers/articleList';\nimport auth from './reducers"
},
{
"path": "src/reducers/article.js",
"chars": 874,
"preview": "import {\n ARTICLE_PAGE_LOADED,\n ARTICLE_PAGE_UNLOADED,\n ADD_COMMENT,\n DELETE_COMMENT\n} from '../constants/actionType"
},
{
"path": "src/reducers/articleList.js",
"chars": 2243,
"preview": "import {\n ARTICLE_FAVORITED,\n ARTICLE_UNFAVORITED,\n SET_PAGE,\n APPLY_TAG_FILTER,\n HOME_PAGE_LOADED,\n HOME_PAGE_UNL"
},
{
"path": "src/reducers/auth.js",
"chars": 759,
"preview": "import {\n LOGIN,\n REGISTER,\n LOGIN_PAGE_UNLOADED,\n REGISTER_PAGE_UNLOADED,\n ASYNC_START,\n UPDATE_FIELD_AUTH\n} from"
},
{
"path": "src/reducers/common.js",
"chars": 1893,
"preview": "import {\n APP_LOAD,\n REDIRECT,\n LOGOUT,\n ARTICLE_SUBMITTED,\n SETTINGS_SAVED,\n LOGIN,\n REGISTER,\n DELETE_ARTICLE,"
},
{
"path": "src/reducers/editor.js",
"chars": 1438,
"preview": "import {\n EDITOR_PAGE_LOADED,\n EDITOR_PAGE_UNLOADED,\n ARTICLE_SUBMITTED,\n ASYNC_START,\n ADD_TAG,\n REMOVE_TAG,\n UP"
},
{
"path": "src/reducers/home.js",
"chars": 340,
"preview": "import { HOME_PAGE_LOADED, HOME_PAGE_UNLOADED } from '../constants/actionTypes';\n\nexport default (state = {}, action) =>"
},
{
"path": "src/reducers/profile.js",
"chars": 474,
"preview": "import {\n PROFILE_PAGE_LOADED,\n PROFILE_PAGE_UNLOADED,\n FOLLOW_USER,\n UNFOLLOW_USER\n} from '../constants/actionTypes"
},
{
"path": "src/reducers/settings.js",
"chars": 502,
"preview": "import {\n SETTINGS_SAVED,\n SETTINGS_PAGE_UNLOADED,\n ASYNC_START\n} from '../constants/actionTypes';\n\nexport default (s"
},
{
"path": "src/store.js",
"chars": 1013,
"preview": "import { applyMiddleware, createStore } from 'redux';\nimport { createLogger } from 'redux-logger'\nimport { composeWithDe"
}
]
About this extraction
This page contains the full source code of the GoThinkster/redux-review GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 43 files (69.9 KB), approximately 17.2k tokens, and a symbol index with 89 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.