Create Page View Component

Author: bhattaraib58

src/components/Pages/PageView/PageView.container.js

@@ -0,0 +1,20 @@
+/* eslint-disable require-jsdoc */
+import { connect } from 'react-redux';
+import { getAllNews } from 'reducers/newsReducer';
+
+import Component from './PageView';
+
+const mapStateToProps = (state) => {
+ return {
+ news: state.news.news,
+ gettingAllNews: state.news.gettingAllNews,
+ gettingAllNewsSuccess: state.news.gettingAllNewsSuccess,
+ gettingAllNewsError: state.news.gettingAllNewsError
+ };
+};
+
+const mapDispatchToProps = {
+ getAllNews
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Component);

src/components/Pages/PageView/PageView.js

@@ -0,0 +1,81 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useMemo } from 'react';
+import BeatLoader from 'react-spinners/BeatLoader';
+
+import { ITEMS_PER_PAGE } from 'constants/numbers';
+
+import Story from 'components/Pages/PageView/Components/Story';
+import NextPage from 'components/Pages/PageView/Components/NextPage';
+
+/**
+ * Page View Component.
+ *
+ * @param {*} props
+ *
+ * @returns {Component}
+ */
+function PageView({
+ news = [],
+ match = {},
+ gettingAllNewsError,
+ gettingAllNews = false,
+ gettingAllNewsSuccess = false,
+
+ getAllNews = () => {}
+}) {
+ const { newsType = 'top', page = 1 } = match?.params;
+ const currentPageNumber = parseInt(page);
+
+ useEffect(() => {
+ const newsEndpoint = newsType + 'stories.json';
+
+ getAllNews({
+ newsType: newsEndpoint
+ });
+ }, [newsType, getAllNews]);
+
+ const stories = useMemo(() => {
+ const previousPage = currentPageNumber - 1;
+ const startItemsIndex = previousPage * ITEMS_PER_PAGE;
+ const endItemsIndex = currentPageNumber * ITEMS_PER_PAGE;
+
+ const currentPageStories = news?.slice(startItemsIndex, endItemsIndex) || [];
+
+ return currentPageStories;
+ }, [news, currentPageNumber]);
+
+ if (gettingAllNews) {
+ return (
+ <div className="center mt-20 mb-20">
+ <BeatLoader color="#F46526" loading={gettingAllNews} size={20} margin={5} />
+ </div>
+ );
+ } else if (!gettingAllNews && !gettingAllNewsSuccess && gettingAllNewsError) {
+ return (
+ <div className="center">
+ <p className="text-danger">{gettingAllNewsError}</p>
+ </div>
+ );
+ }
+
+ return (
+ <div>
+ {stories.map((storyId, index) => (
+ <Story key={storyId} storyId={storyId} storyIndex={(currentPageNumber - 1) * ITEMS_PER_PAGE + index + 1} />
+ ))}
+
+ <NextPage newsType={newsType} page={page} news={news} />
+ </div>
+ );
+}
+
+PageView.propTypes = {
+ getAllNews: PropTypes.func,
+ gettingAllNews: PropTypes.bool,
+ gettingAllNewsError: PropTypes.any,
+ gettingAllNewsSuccess: PropTypes.bool,
+ match: PropTypes.object,
+ news: PropTypes.array
+};
+
+export default PageView;

src/components/Pages/PageView/index.js

@@ -0,0 +1,3 @@
+import PageView from './PageView.container';
+
+export default PageView;