[
{
"path": ".gitignore",
"content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n\n# testing\ncoverage\n\n# production\nbuild\n\n# misc\n.DS_Store\n.env\nnpm-debug.log\n.idea"
},
{
"path": "LICENSE.md",
"content": "MIT License\n\nCopyright (c) 2020 GoThinkster\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# \n\n[](http://realworld.io)\n\n> ### 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.\n\nConduit \n \n \n
\n \n \n\n"
},
{
"path": "src/agent.js",
"content": "import superagentPromise from 'superagent-promise';\nimport _superagent from 'superagent';\n\nconst superagent = superagentPromise(_superagent, global.Promise);\n\nconst API_ROOT = 'https://conduit.productionready.io/api';\n\nconst encode = encodeURIComponent;\nconst responseBody = res => res.body;\n\nlet token = null;\nconst tokenPlugin = req => {\n if (token) {\n req.set('authorization', `Token ${token}`);\n }\n}\n\nconst requests = {\n del: url =>\n superagent.del(`${API_ROOT}${url}`).use(tokenPlugin).then(responseBody),\n get: url =>\n superagent.get(`${API_ROOT}${url}`).use(tokenPlugin).then(responseBody),\n put: (url, body) =>\n superagent.put(`${API_ROOT}${url}`, body).use(tokenPlugin).then(responseBody),\n post: (url, body) =>\n superagent.post(`${API_ROOT}${url}`, body).use(tokenPlugin).then(responseBody)\n};\n\nconst Auth = {\n current: () =>\n requests.get('/user'),\n login: (email, password) =>\n requests.post('/users/login', { user: { email, password } }),\n register: (username, email, password) =>\n requests.post('/users', { user: { username, email, password } }),\n save: user =>\n requests.put('/user', { user })\n};\n\nconst Tags = {\n getAll: () => requests.get('/tags')\n};\n\nconst limit = (count, p) => `limit=${count}&offset=${p ? p * count : 0}`;\nconst omitSlug = article => Object.assign({}, article, { slug: undefined })\nconst Articles = {\n all: page =>\n requests.get(`/articles?${limit(10, page)}`),\n byAuthor: (author, page) =>\n requests.get(`/articles?author=${encode(author)}&${limit(5, page)}`),\n byTag: (tag, page) =>\n requests.get(`/articles?tag=${encode(tag)}&${limit(10, page)}`),\n del: slug =>\n requests.del(`/articles/${slug}`),\n favorite: slug =>\n requests.post(`/articles/${slug}/favorite`),\n favoritedBy: (author, page) =>\n requests.get(`/articles?favorited=${encode(author)}&${limit(5, page)}`),\n feed: () =>\n requests.get('/articles/feed?limit=10&offset=0'),\n get: slug =>\n requests.get(`/articles/${slug}`),\n unfavorite: slug =>\n requests.del(`/articles/${slug}/favorite`),\n update: article =>\n requests.put(`/articles/${article.slug}`, { article: omitSlug(article) }),\n create: article =>\n requests.post('/articles', { article })\n};\n\nconst Comments = {\n create: (slug, comment) =>\n requests.post(`/articles/${slug}/comments`, { comment }),\n delete: (slug, commentId) =>\n requests.del(`/articles/${slug}/comments/${commentId}`),\n forArticle: slug =>\n requests.get(`/articles/${slug}/comments`)\n};\n\nconst Profile = {\n follow: username =>\n requests.post(`/profiles/${username}/follow`),\n get: username =>\n requests.get(`/profiles/${username}`),\n unfollow: username =>\n requests.del(`/profiles/${username}/follow`)\n};\n\nexport default {\n Articles,\n Auth,\n Comments,\n Profile,\n Tags,\n setToken: _token => { token = _token; }\n};\n"
},
{
"path": "src/components/App.js",
"content": "import agent from '../agent';\nimport Header from './Header';\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport { APP_LOAD, REDIRECT } from '../constants/actionTypes';\nimport { Route, Switch } from 'react-router-dom';\nimport Article from '../components/Article';\nimport Editor from '../components/Editor';\nimport Home from '../components/Home';\nimport Login from '../components/Login';\nimport Profile from '../components/Profile';\nimport ProfileFavorites from '../components/ProfileFavorites';\nimport Register from '../components/Register';\nimport Settings from '../components/Settings';\nimport { store } from '../store';\nimport { push } from 'react-router-redux';\n\nconst mapStateToProps = state => {\n return {\n appLoaded: state.common.appLoaded,\n appName: state.common.appName,\n currentUser: state.common.currentUser,\n redirectTo: state.common.redirectTo\n }};\n\nconst mapDispatchToProps = dispatch => ({\n onLoad: (payload, token) =>\n dispatch({ type: APP_LOAD, payload, token, skipTracking: true }),\n onRedirect: () =>\n dispatch({ type: REDIRECT })\n});\n\nclass App extends React.Component {\n componentWillReceiveProps(nextProps) {\n if (nextProps.redirectTo) {\n // this.context.router.replace(nextProps.redirectTo);\n store.dispatch(push(nextProps.redirectTo));\n this.props.onRedirect();\n }\n }\n\n componentWillMount() {\n const token = window.localStorage.getItem('jwt');\n if (token) {\n agent.setToken(token);\n }\n\n this.props.onLoad(token ? agent.Auth.current() : null, token);\n }\n\n render() {\n if (this.props.appLoaded) {\n return (\n \n \n \n \n
\n );\n }\n return (\n \n
\n );\n }\n}\n\n// App.contextTypes = {\n// router: PropTypes.object.isRequired\n// };\n\nexport default connect(mapStateToProps, mapDispatchToProps)(App);\n"
},
{
"path": "src/components/Article/ArticleActions.js",
"content": "import { Link } from 'react-router-dom';\nimport React from 'react';\nimport agent from '../../agent';\nimport { connect } from 'react-redux';\nimport { DELETE_ARTICLE } from '../../constants/actionTypes';\n\nconst mapDispatchToProps = dispatch => ({\n onClickDelete: payload =>\n dispatch({ type: DELETE_ARTICLE, payload })\n});\n\nconst ArticleActions = props => {\n const article = props.article;\n const del = () => {\n props.onClickDelete(agent.Articles.del(article.slug))\n };\n if (props.canModify) {\n return (\n \n\n \n \n \n\n \n );\n }\n\n return (\n \n \n );\n};\n\nexport default connect(() => ({}), mapDispatchToProps)(ArticleActions);\n"
},
{
"path": "src/components/Article/ArticleMeta.js",
"content": "import ArticleActions from './ArticleActions';\nimport { Link } from 'react-router-dom';\nimport React from 'react';\n\nconst ArticleMeta = props => {\n const article = props.article;\n return (\n \n
\n
\n \n\n
\n \n {new Date(article.createdAt).toDateString()}\n \n
\n\n
\n
\n
\n
\n
\n \n {comment.author.username}\n \n \n {new Date(comment.createdAt).toDateString()}\n \n \n
\n
\n
\n\n
\n
\n {\n props.comments.map(comment => {\n return (\n
\n );\n};\n\nexport default CommentList;\n"
},
{
"path": "src/components/Article/DeleteButton.js",
"content": "import React from 'react';\nimport agent from '../../agent';\nimport { connect } from 'react-redux';\nimport { DELETE_COMMENT } from '../../constants/actionTypes';\n\nconst mapDispatchToProps = dispatch => ({\n onClick: (payload, commentId) =>\n dispatch({ type: DELETE_COMMENT, payload, commentId })\n});\n\nconst DeleteButton = props => {\n const del = () => {\n const payload = agent.Comments.delete(props.slug, props.commentId);\n props.onClick(payload, props.commentId);\n };\n\n if (props.show) {\n return (\n \n \n );\n }\n return null;\n};\n\nexport default connect(() => ({}), mapDispatchToProps)(DeleteButton);\n"
},
{
"path": "src/components/Article/index.js",
"content": "import ArticleMeta from './ArticleMeta';\nimport CommentContainer from './CommentContainer';\nimport React from 'react';\nimport agent from '../../agent';\nimport { connect } from 'react-redux';\nimport marked from 'marked';\nimport { ARTICLE_PAGE_LOADED, ARTICLE_PAGE_UNLOADED } from '../../constants/actionTypes';\n\nconst mapStateToProps = state => ({\n ...state.article,\n currentUser: state.common.currentUser\n});\n\nconst mapDispatchToProps = dispatch => ({\n onLoad: payload =>\n dispatch({ type: ARTICLE_PAGE_LOADED, payload }),\n onUnload: () =>\n dispatch({ type: ARTICLE_PAGE_UNLOADED })\n});\n\nclass Article extends React.Component {\n componentWillMount() {\n this.props.onLoad(Promise.all([\n agent.Articles.get(this.props.match.params.id),\n agent.Comments.forArticle(this.props.match.params.id)\n ]));\n }\n\n componentWillUnmount() {\n this.props.onUnload();\n }\n\n render() {\n if (!this.props.article) {\n return null;\n }\n\n const markup = { __html: marked(this.props.article.body, { sanitize: true }) };\n const canModify = this.props.currentUser &&\n this.props.currentUser.username === this.props.article.author.username;\n return (\n \n\n
\n
\n\n
{this.props.article.title} \n
\n\n
\n
\n\n
\n\n
\n
\n\n
\n\n
\n {\n this.props.article.tagList.map(tag => {\n return (\n \n {tag}\n \n );\n })\n }\n \n\n
\n
\n\n
\n\n
\n
\n\n
\n
\n
\n
Loading...
\n );\n }\n\n if (props.articles.length === 0) {\n return (\n \n No articles are here... yet.\n
\n );\n }\n\n return (\n \n {\n props.articles.map(article => {\n return (\n
\n );\n })\n }\n\n
\n
\n
\n
\n
\n \n\n
\n \n {new Date(article.createdAt).toDateString()}\n \n
\n\n
\n \n \n
\n
\n\n
\n
{article.title} \n
{article.description}
\n
Read more... \n
\n {\n article.tagList.map(tag => {\n return (\n \n {tag}\n \n )\n })\n }\n \n \n
\n\n \n \n\n \n \n\n \n \n\n \n );\n }\n return null;\n};\n\nconst LoggedInView = props => {\n if (props.currentUser) {\n return (\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n );\n }\n\n return null;\n};\n\nclass Header extends React.Component {\n render() {\n return (\n \n \n\n
\n \n );\n }\n}\n\nexport default Header;\n"
},
{
"path": "src/components/Home/Banner.js",
"content": "import React from 'react';\n\nconst Banner = ({ appName, token }) => {\n if (token) {\n return null;\n }\n return (\n \n
\n
\n {appName.toLowerCase()}\n \n
A place to share your knowledge.
\n
\n
\n \n Your Feed\n \n \n );\n }\n return null;\n};\n\nconst GlobalFeedTab = props => {\n const clickHandler = ev => {\n ev.preventDefault();\n props.onTabClick('all', agent.Articles.all, agent.Articles.all());\n };\n return (\n \n \n Global Feed\n \n \n );\n};\n\nconst TagFilterTab = props => {\n if (!props.tag) {\n return null;\n }\n\n return (\n \n \n \n \n );\n};\n\nconst mapStateToProps = state => ({\n ...state.articleList,\n tags: state.home.tags,\n token: state.common.token\n});\n\nconst mapDispatchToProps = dispatch => ({\n onTabClick: (tab, pager, payload) => dispatch({ type: CHANGE_TAB, tab, pager, payload })\n});\n\nconst MainView = props => {\n return (\n \n );\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(MainView);\n"
},
{
"path": "src/components/Home/Tags.js",
"content": "import React from 'react';\nimport agent from '../../agent';\n\nconst Tags = props => {\n const tags = props.tags;\n if (tags) {\n return (\n \n {\n tags.map(tag => {\n const handleClick = ev => {\n ev.preventDefault();\n props.onClickTag(tag, page => agent.Articles.byTag(tag, page), agent.Articles.byTag(tag));\n };\n\n return (\n
\n {tag}\n \n );\n })\n }\n Loading Tags...
\n );\n }\n};\n\nexport default Tags;\n"
},
{
"path": "src/components/Home/index.js",
"content": "import Banner from './Banner';\nimport MainView from './MainView';\nimport React from 'react';\nimport Tags from './Tags';\nimport agent from '../../agent';\nimport { connect } from 'react-redux';\nimport {\n HOME_PAGE_LOADED,\n HOME_PAGE_UNLOADED,\n APPLY_TAG_FILTER\n} from '../../constants/actionTypes';\n\nconst Promise = global.Promise;\n\nconst mapStateToProps = state => ({\n ...state.home,\n appName: state.common.appName,\n token: state.common.token\n});\n\nconst mapDispatchToProps = dispatch => ({\n onClickTag: (tag, pager, payload) =>\n dispatch({ type: APPLY_TAG_FILTER, tag, pager, payload }),\n onLoad: (tab, pager, payload) =>\n dispatch({ type: HOME_PAGE_LOADED, tab, pager, payload }),\n onUnload: () =>\n dispatch({ type: HOME_PAGE_UNLOADED })\n});\n\nclass Home extends React.Component {\n componentWillMount() {\n const tab = this.props.token ? 'feed' : 'all';\n const articlesPromise = this.props.token ?\n agent.Articles.feed :\n agent.Articles.all;\n\n this.props.onLoad(tab, articlesPromise, Promise.all([agent.Tags.getAll(), articlesPromise()]));\n }\n\n componentWillUnmount() {\n this.props.onUnload();\n }\n\n render() {\n return (\n \n\n
\n\n
\n
\n
\n\n
\n
\n\n
Popular Tags
\n\n
\n\n
\n
\n
\n
\n\n
\n {\n Object.keys(errors).map(key => {\n return (\n \n {key} {errors[key]}\n \n );\n })\n }\n \n );\n } else {\n return null;\n }\n }\n}\n\nexport default ListErrors;\n"
},
{
"path": "src/components/ListPagination.js",
"content": "import React from 'react';\nimport agent from '../agent';\nimport { connect } from 'react-redux';\nimport { SET_PAGE } from '../constants/actionTypes';\n\nconst mapDispatchToProps = dispatch => ({\n onSetPage: (page, payload) =>\n dispatch({ type: SET_PAGE, page, payload })\n});\n\nconst ListPagination = props => {\n if (props.articlesCount <= 10) {\n return null;\n }\n\n const range = [];\n for (let i = 0; i < Math.ceil(props.articlesCount / 10); ++i) {\n range.push(i);\n }\n\n const setPage = page => {\n if(props.pager) {\n props.onSetPage(page, props.pager(page));\n }else {\n props.onSetPage(page, agent.Articles.all(page))\n }\n };\n\n return (\n \n \n\n {\n range.map(v => {\n const isCurrent = v === props.currentPage;\n const onClick = ev => {\n ev.preventDefault();\n setPage(v);\n };\n return (\n \n\n {v + 1} \n\n \n );\n })\n }\n\n \n \n );\n};\n\nexport default connect(() => ({}), mapDispatchToProps)(ListPagination);\n"
},
{
"path": "src/components/Login.js",
"content": "import { Link } from 'react-router-dom';\nimport ListErrors from './ListErrors';\nimport React from 'react';\nimport agent from '../agent';\nimport { connect } from 'react-redux';\nimport {\n UPDATE_FIELD_AUTH,\n LOGIN,\n LOGIN_PAGE_UNLOADED\n} from '../constants/actionTypes';\n\nconst mapStateToProps = state => ({ ...state.auth });\n\nconst mapDispatchToProps = dispatch => ({\n onChangeEmail: value =>\n dispatch({ type: UPDATE_FIELD_AUTH, key: 'email', value }),\n onChangePassword: value =>\n dispatch({ type: UPDATE_FIELD_AUTH, key: 'password', value }),\n onSubmit: (email, password) =>\n dispatch({ type: LOGIN, payload: agent.Auth.login(email, password) }),\n onUnload: () =>\n dispatch({ type: LOGIN_PAGE_UNLOADED })\n});\n\nclass Login extends React.Component {\n constructor() {\n super();\n this.changeEmail = ev => this.props.onChangeEmail(ev.target.value);\n this.changePassword = ev => this.props.onChangePassword(ev.target.value);\n this.submitForm = (email, password) => ev => {\n ev.preventDefault();\n this.props.onSubmit(email, password);\n };\n }\n\n componentWillUnmount() {\n this.props.onUnload();\n }\n\n render() {\n const email = this.props.email;\n const password = this.props.password;\n return (\n \n
\n
\n\n
\n
Sign In \n
\n
\n\n
\n\n
\n
\n\n
\n
\n
\n \n \n \n \n My Articles\n \n \n\n \n \n Favorited Articles\n \n \n \n );\n }\n\n render() {\n const profile = this.props.profile;\n if (!profile) {\n return null;\n }\n\n const isUser = this.props.currentUser &&\n this.props.profile.username === this.props.currentUser.username;\n\n return (\n \n\n
\n
\n
\n
\n\n
\n
{profile.username} \n
{profile.bio}
\n\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n\n
\n\n
\n {this.renderTabs()}\n
\n\n
\n
\n\n
\n
\n\n
\n \n \n My Articles\n \n \n\n \n \n Favorited Articles\n \n \n \n );\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ProfileFavorites);\n"
},
{
"path": "src/components/Register.js",
"content": "import { Link } from 'react-router-dom';\nimport ListErrors from './ListErrors';\nimport React from 'react';\nimport agent from '../agent';\nimport { connect } from 'react-redux';\nimport {\n UPDATE_FIELD_AUTH,\n REGISTER,\n REGISTER_PAGE_UNLOADED\n} from '../constants/actionTypes';\n\nconst mapStateToProps = state => ({ ...state.auth });\n\nconst mapDispatchToProps = dispatch => ({\n onChangeEmail: value =>\n dispatch({ type: UPDATE_FIELD_AUTH, key: 'email', value }),\n onChangePassword: value =>\n dispatch({ type: UPDATE_FIELD_AUTH, key: 'password', value }),\n onChangeUsername: value =>\n dispatch({ type: UPDATE_FIELD_AUTH, key: 'username', value }),\n onSubmit: (username, email, password) => {\n const payload = agent.Auth.register(username, email, password);\n dispatch({ type: REGISTER, payload })\n },\n onUnload: () =>\n dispatch({ type: REGISTER_PAGE_UNLOADED })\n});\n\nclass Register extends React.Component {\n constructor() {\n super();\n this.changeEmail = ev => this.props.onChangeEmail(ev.target.value);\n this.changePassword = ev => this.props.onChangePassword(ev.target.value);\n this.changeUsername = ev => this.props.onChangeUsername(ev.target.value);\n this.submitForm = (username, email, password) => ev => {\n ev.preventDefault();\n this.props.onSubmit(username, email, password);\n }\n }\n\n componentWillUnmount() {\n this.props.onUnload();\n }\n\n render() {\n const email = this.props.email;\n const password = this.props.password;\n const username = this.props.username;\n\n return (\n \n
\n
\n\n
\n
Sign Up \n
\n
\n\n
\n\n
\n
\n\n
\n
\n
\n
\n
\n
\n\n
Your Settings \n\n \n Or click here to logout.\n \n\n \n
\n
\n
\n \n \n \n \n \n\n), document.getElementById('root'));\n"
},
{
"path": "src/middleware.js",
"content": "import agent from './agent';\nimport {\n ASYNC_START,\n ASYNC_END,\n LOGIN,\n LOGOUT,\n REGISTER\n} from './constants/actionTypes';\n\nconst promiseMiddleware = store => next => action => {\n if (isPromise(action.payload)) {\n store.dispatch({ type: ASYNC_START, subtype: action.type });\n\n const currentView = store.getState().viewChangeCounter;\n const skipTracking = action.skipTracking;\n\n action.payload.then(\n res => {\n const currentState = store.getState()\n if (!skipTracking && currentState.viewChangeCounter !== currentView) {\n return\n }\n console.log('RESULT', res);\n action.payload = res;\n store.dispatch({ type: ASYNC_END, promise: action.payload });\n store.dispatch(action);\n },\n error => {\n const currentState = store.getState()\n if (!skipTracking && currentState.viewChangeCounter !== currentView) {\n return\n }\n console.log('ERROR', error);\n action.error = true;\n action.payload = error.response.body;\n if (!action.skipTracking) {\n store.dispatch({ type: ASYNC_END, promise: action.payload });\n }\n store.dispatch(action);\n }\n );\n\n return;\n }\n\n next(action);\n};\n\nconst localStorageMiddleware = store => next => action => {\n if (action.type === REGISTER || action.type === LOGIN) {\n if (!action.error) {\n window.localStorage.setItem('jwt', action.payload.user.token);\n agent.setToken(action.payload.user.token);\n }\n } else if (action.type === LOGOUT) {\n window.localStorage.setItem('jwt', '');\n agent.setToken(null);\n }\n\n next(action);\n};\n\nfunction isPromise(v) {\n return v && typeof v.then === 'function';\n}\n\n\nexport { promiseMiddleware, localStorageMiddleware }\n"
},
{
"path": "src/reducer.js",
"content": "import article from './reducers/article';\nimport articleList from './reducers/articleList';\nimport auth from './reducers/auth';\nimport { combineReducers } from 'redux';\nimport common from './reducers/common';\nimport editor from './reducers/editor';\nimport home from './reducers/home';\nimport profile from './reducers/profile';\nimport settings from './reducers/settings';\nimport { routerReducer } from 'react-router-redux';\n\nexport default combineReducers({\n article,\n articleList,\n auth,\n common,\n editor,\n home,\n profile,\n settings,\n router: routerReducer\n});\n"
},
{
"path": "src/reducers/article.js",
"content": "import {\n ARTICLE_PAGE_LOADED,\n ARTICLE_PAGE_UNLOADED,\n ADD_COMMENT,\n DELETE_COMMENT\n} from '../constants/actionTypes';\n\nexport default (state = {}, action) => {\n switch (action.type) {\n case ARTICLE_PAGE_LOADED:\n return {\n ...state,\n article: action.payload[0].article,\n comments: action.payload[1].comments\n };\n case ARTICLE_PAGE_UNLOADED:\n return {};\n case ADD_COMMENT:\n return {\n ...state,\n commentErrors: action.error ? action.payload.errors : null,\n comments: action.error ?\n null :\n (state.comments || []).concat([action.payload.comment])\n };\n case DELETE_COMMENT:\n const commentId = action.commentId\n return {\n ...state,\n comments: state.comments.filter(comment => comment.id !== commentId)\n };\n default:\n return state;\n }\n};\n"
},
{
"path": "src/reducers/articleList.js",
"content": "import {\n ARTICLE_FAVORITED,\n ARTICLE_UNFAVORITED,\n SET_PAGE,\n APPLY_TAG_FILTER,\n HOME_PAGE_LOADED,\n HOME_PAGE_UNLOADED,\n CHANGE_TAB,\n PROFILE_PAGE_LOADED,\n PROFILE_PAGE_UNLOADED,\n PROFILE_FAVORITES_PAGE_LOADED,\n PROFILE_FAVORITES_PAGE_UNLOADED\n} from '../constants/actionTypes';\n\nexport default (state = {}, action) => {\n switch (action.type) {\n case ARTICLE_FAVORITED:\n case ARTICLE_UNFAVORITED:\n return {\n ...state,\n articles: state.articles.map(article => {\n if (article.slug === action.payload.article.slug) {\n return {\n ...article,\n favorited: action.payload.article.favorited,\n favoritesCount: action.payload.article.favoritesCount\n };\n }\n return article;\n })\n };\n case SET_PAGE:\n return {\n ...state,\n articles: action.payload.articles,\n articlesCount: action.payload.articlesCount,\n currentPage: action.page\n };\n case APPLY_TAG_FILTER:\n return {\n ...state,\n pager: action.pager,\n articles: action.payload.articles,\n articlesCount: action.payload.articlesCount,\n tab: null,\n tag: action.tag,\n currentPage: 0\n };\n case HOME_PAGE_LOADED:\n return {\n ...state,\n pager: action.pager,\n tags: action.payload[0].tags,\n articles: action.payload[1].articles,\n articlesCount: action.payload[1].articlesCount,\n currentPage: 0,\n tab: action.tab\n };\n case HOME_PAGE_UNLOADED:\n return {};\n case CHANGE_TAB:\n return {\n ...state,\n pager: action.pager,\n articles: action.payload.articles,\n articlesCount: action.payload.articlesCount,\n tab: action.tab,\n currentPage: 0,\n tag: null\n };\n case PROFILE_PAGE_LOADED:\n case PROFILE_FAVORITES_PAGE_LOADED:\n return {\n ...state,\n pager: action.pager,\n articles: action.payload[1].articles,\n articlesCount: action.payload[1].articlesCount,\n currentPage: 0\n };\n case PROFILE_PAGE_UNLOADED:\n case PROFILE_FAVORITES_PAGE_UNLOADED:\n return {};\n default:\n return state;\n }\n};\n"
},
{
"path": "src/reducers/auth.js",
"content": "import {\n LOGIN,\n REGISTER,\n LOGIN_PAGE_UNLOADED,\n REGISTER_PAGE_UNLOADED,\n ASYNC_START,\n UPDATE_FIELD_AUTH\n} from '../constants/actionTypes';\n\nexport default (state = {}, action) => {\n switch (action.type) {\n case LOGIN:\n case REGISTER:\n return {\n ...state,\n inProgress: false,\n errors: action.error ? action.payload.errors : null\n };\n case LOGIN_PAGE_UNLOADED:\n case REGISTER_PAGE_UNLOADED:\n return {};\n case ASYNC_START:\n if (action.subtype === LOGIN || action.subtype === REGISTER) {\n return { ...state, inProgress: true };\n }\n break;\n case UPDATE_FIELD_AUTH:\n return { ...state, [action.key]: action.value };\n default:\n return state;\n }\n\n return state;\n};\n"
},
{
"path": "src/reducers/common.js",
"content": "import {\n APP_LOAD,\n REDIRECT,\n LOGOUT,\n ARTICLE_SUBMITTED,\n SETTINGS_SAVED,\n LOGIN,\n REGISTER,\n DELETE_ARTICLE,\n ARTICLE_PAGE_UNLOADED,\n EDITOR_PAGE_UNLOADED,\n HOME_PAGE_UNLOADED,\n PROFILE_PAGE_UNLOADED,\n PROFILE_FAVORITES_PAGE_UNLOADED,\n SETTINGS_PAGE_UNLOADED,\n LOGIN_PAGE_UNLOADED,\n REGISTER_PAGE_UNLOADED\n} from '../constants/actionTypes';\n\nconst defaultState = {\n appName: 'Conduit',\n token: null,\n viewChangeCounter: 0\n};\n\nexport default (state = defaultState, action) => {\n switch (action.type) {\n case APP_LOAD:\n return {\n ...state,\n token: action.token || null,\n appLoaded: true,\n currentUser: action.payload ? action.payload.user : null\n };\n case REDIRECT:\n return { ...state, redirectTo: null };\n case LOGOUT:\n return { ...state, redirectTo: '/', token: null, currentUser: null };\n case ARTICLE_SUBMITTED:\n const redirectUrl = `/article/${action.payload.article.slug}`;\n return { ...state, redirectTo: redirectUrl };\n case SETTINGS_SAVED:\n return {\n ...state,\n redirectTo: action.error ? null : '/',\n currentUser: action.error ? null : action.payload.user\n };\n case LOGIN:\n case REGISTER:\n return {\n ...state,\n redirectTo: action.error ? null : '/',\n token: action.error ? null : action.payload.user.token,\n currentUser: action.error ? null : action.payload.user\n };\n case DELETE_ARTICLE:\n return { ...state, redirectTo: '/' };\n case ARTICLE_PAGE_UNLOADED:\n case EDITOR_PAGE_UNLOADED:\n case HOME_PAGE_UNLOADED:\n case PROFILE_PAGE_UNLOADED:\n case PROFILE_FAVORITES_PAGE_UNLOADED:\n case SETTINGS_PAGE_UNLOADED:\n case LOGIN_PAGE_UNLOADED:\n case REGISTER_PAGE_UNLOADED:\n return { ...state, viewChangeCounter: state.viewChangeCounter + 1 };\n default:\n return state;\n }\n};\n"
},
{
"path": "src/reducers/editor.js",
"content": "import {\n EDITOR_PAGE_LOADED,\n EDITOR_PAGE_UNLOADED,\n ARTICLE_SUBMITTED,\n ASYNC_START,\n ADD_TAG,\n REMOVE_TAG,\n UPDATE_FIELD_EDITOR\n} from '../constants/actionTypes';\n\nexport default (state = {}, action) => {\n switch (action.type) {\n case EDITOR_PAGE_LOADED:\n return {\n ...state,\n articleSlug: action.payload ? action.payload.article.slug : '',\n title: action.payload ? action.payload.article.title : '',\n description: action.payload ? action.payload.article.description : '',\n body: action.payload ? action.payload.article.body : '',\n tagInput: '',\n tagList: action.payload ? action.payload.article.tagList : []\n };\n case EDITOR_PAGE_UNLOADED:\n return {};\n case ARTICLE_SUBMITTED:\n return {\n ...state,\n inProgress: null,\n errors: action.error ? action.payload.errors : null\n };\n case ASYNC_START:\n if (action.subtype === ARTICLE_SUBMITTED) {\n return { ...state, inProgress: true };\n }\n break;\n case ADD_TAG:\n return {\n ...state,\n tagList: state.tagList.concat([state.tagInput]),\n tagInput: ''\n };\n case REMOVE_TAG:\n return {\n ...state,\n tagList: state.tagList.filter(tag => tag !== action.tag)\n };\n case UPDATE_FIELD_EDITOR:\n return { ...state, [action.key]: action.value };\n default:\n return state;\n }\n\n return state;\n};\n"
},
{
"path": "src/reducers/home.js",
"content": "import { HOME_PAGE_LOADED, HOME_PAGE_UNLOADED } from '../constants/actionTypes';\n\nexport default (state = {}, action) => {\n switch (action.type) {\n case HOME_PAGE_LOADED:\n return {\n ...state,\n tags: action.payload[0].tags\n };\n case HOME_PAGE_UNLOADED:\n return {};\n default:\n return state;\n }\n};\n"
},
{
"path": "src/reducers/profile.js",
"content": "import {\n PROFILE_PAGE_LOADED,\n PROFILE_PAGE_UNLOADED,\n FOLLOW_USER,\n UNFOLLOW_USER\n} from '../constants/actionTypes';\n\nexport default (state = {}, action) => {\n switch (action.type) {\n case PROFILE_PAGE_LOADED:\n return {\n ...action.payload[0].profile\n };\n case PROFILE_PAGE_UNLOADED:\n return {};\n case FOLLOW_USER:\n case UNFOLLOW_USER:\n return {\n ...action.payload.profile\n };\n default:\n return state;\n }\n};\n"
},
{
"path": "src/reducers/settings.js",
"content": "import {\n SETTINGS_SAVED,\n SETTINGS_PAGE_UNLOADED,\n ASYNC_START\n} from '../constants/actionTypes';\n\nexport default (state = {}, action) => {\n switch (action.type) {\n case SETTINGS_SAVED:\n return {\n ...state,\n inProgress: false,\n errors: action.error ? action.payload.errors : null\n };\n case SETTINGS_PAGE_UNLOADED:\n return {};\n case ASYNC_START:\n return {\n ...state,\n inProgress: true\n };\n default:\n return state;\n }\n};\n"
},
{
"path": "src/store.js",
"content": "import { applyMiddleware, createStore } from 'redux';\nimport { createLogger } from 'redux-logger'\nimport { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';\nimport { promiseMiddleware, localStorageMiddleware } from './middleware';\nimport reducer from './reducer';\n\nimport { routerMiddleware } from 'react-router-redux'\nimport createHistory from 'history/createBrowserHistory';\n\nexport const history = createHistory();\n\n// Build the middleware for intercepting and dispatching navigation actions\nconst myRouterMiddleware = routerMiddleware(history);\n\nconst getMiddleware = () => {\n if (process.env.NODE_ENV === 'production') {\n return applyMiddleware(myRouterMiddleware, promiseMiddleware, localStorageMiddleware);\n } else {\n // Enable additional logging in non-production environments.\n return applyMiddleware(myRouterMiddleware, promiseMiddleware, localStorageMiddleware, createLogger())\n }\n};\n\nexport const store = createStore(\n reducer, composeWithDevTools(getMiddleware()));\n"
}
] ![](\"https://github.com/gothinkster/realworld/blob/master/media/edit_on_blitz.png?raw=true\")
![](\"https://raw.githubusercontent.com/gothinkster/realworld/master/media/learn-btn-hr.png\")
\n\n### [Demo](https://react-redux.realworld.io) [RealWorld](https://github.com/gothinkster/realworld)\n\nOriginally 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.\n\nWe 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)!)\n\n\n## Getting started\n\nYou can view a live demo over at https://react-redux.realworld.io/\n\nTo get the frontend running locally:\n\n- Clone this repo\n- `npm install` to install all req'd dependencies\n- `npm start` to start the local server (this project uses create-react-app)\n\nLocal 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.\n \nAlternatively, 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. \n\n### Making requests to the backend API\n\nFor 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.\n\nThe 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).\n\nIf 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`)\n\n\n## Functionality overview\n\nThe 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/\n\n**General functionality:**\n\n- Authenticate users via JWT (login/signup pages + logout button on settings page)\n- CRU* users (sign up & settings page - no deleting required)\n- CRUD Articles\n- CR*D Comments on articles (no updating required)\n- GET and display paginated lists of articles\n- Favorite articles\n- Follow other users\n\n**The general page breakdown looks like this:**\n\n- Home page (URL: /#/ )\n - List of tags\n - List of articles pulled from either Feed, Global, or by Tag\n - Pagination for list of articles\n- Sign in/Sign up pages (URL: /#/login, /#/register )\n - Use JWT (store the token in localStorage)\n- Settings page (URL: /#/settings )\n- Editor page to create/edit articles (URL: /#/editor, /#/editor/article-slug-here )\n- Article page (URL: /#/article/article-slug-here )\n - Delete article button (only shown to article's author)\n - Render markdown from server client side\n - Comments section at bottom of page\n - Delete comment button (only shown to comment's author)\n- Profile page (URL: /#/@username, /#/@username/favorites )\n - Show basic user info\n - List of articles populated from author's created articles or author's favorited articles\n\n