Add news detail page

.env

@@ -1,3 +1,5 @@
-PUBLIC_URL=http://localhost:3000/
-NEWS_API_URL=https://newsapi.org/
-NEWS_API_KEY=89b13138b013489a8401c8e47b74f623
+REACT_APP_PUBLIC_URL=http://localhost:3000/
+REACT_APP_NEWS_API_URL=https://newsapi.org/v2
+REACT_APP_NEWS_API_KEY=89b13138b013489a8401c8e47b74f623
+REACT_APP_POPULAR_NEWS_API_URL=https://api.nytimes.com/svc/mostpopular/v2
+REACT_APP_POPULAR_NEWS_API_KEY=Kxbuvi0J90MdDLVNRhVqfVvizOPGAAGv

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -12,6 +12,7 @@
     "@testing-library/user-event": "^7.1.2",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
+    "axios": "^0.21.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.0",
     "babel-loader": "8.1.0",
@@ -22,7 +23,7 @@
     "camelcase": "^6.1.0",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "css-loader": "4.3.0",
-    "dotenv": "8.2.0",
+    "dotenv": "^10.0.0",
     "dotenv-expand": "5.1.0",
     "eslint": "^7.11.0",
     "eslint-config-react-app": "^6.0.0",
@@ -43,6 +44,7 @@
     "jest-resolve": "26.6.0",
     "jest-watch-typeahead": "0.6.1",
     "mini-css-extract-plugin": "0.11.3",
+    "moment": "^2.29.1",
     "node-sass": "5.0.0",
     "optimize-css-assets-webpack-plugin": "5.0.4",
     "pnp-webpack-plugin": "1.6.4",
@@ -56,11 +58,13 @@
     "react-app-polyfill": "^2.0.0",
     "react-dev-utils": "^11.0.3",
     "react-dom": "^17.0.2",
+    "react-moment": "^1.1.1",
     "react-redux": "^7.2.3",
     "react-refresh": "^0.8.3",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-transition-group": "^4.4.2",
+    "react-uuid": "^1.0.2",
     "resolve": "1.18.1",
     "resolve-url-loader": "^3.1.2",
     "sass-loader": "^10.0.5",
@@ -69,7 +73,6 @@
     "terser-webpack-plugin": "4.2.3",
     "ts-pnp": "1.2.0",
     "url-loader": "4.1.1",
-    "uuid": "^8.3.2",
     "webpack": "4.44.2",
     "webpack-dev-server": "3.11.1",
     "webpack-manifest-plugin": "2.2.0",

src/App.js

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Redirect, Route, Switch } from 'react-router';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import Layout from './components/Layout';
-import News from './pages/News';
+import News from './pages/News/';
+import Detail from './pages/News/Detail';
+import PopularDetail from './pages/News/PopularDetail';
 import Profile from './pages/Profile';
 import TaskList from './pages/TaskList';
 
@@ -53,12 +55,40 @@ function App() {
             )}
           </Route>
         </TransitionGroup>
+        <TransitionGroup>
+          <Route path="/news/most-popular/:newsId" exact>
+            {({ match }) => (
+              <CSSTransition
+                in={match != null}
+                classNames="pages"
+                timeout={300}
+                unmountOnExit
+              >
+                <PopularDetail />
+              </CSSTransition>
+            )}
+          </Route>
+        </TransitionGroup>
+        <TransitionGroup>
+          <Route path="/news/:newsId" exact>
+            {({ match }) => (
+              <CSSTransition
+                in={match != null}
+                classNames="pages"
+                timeout={300}
+                unmountOnExit
+              >
+                <Detail />
+              </CSSTransition>
+            )}
+          </Route>
+        </TransitionGroup>
         {/* <Route path="*">
           <Redirect from="*" to="/" />
         </Route> */}
       </Layout>
     </Switch>
   );
-}
+};
 
-export default App;
+export default App;

src/api/news.js

@@ -0,0 +1 @@
+import { NEWS } from "../base";

src/assets/styles/_shared.scss

@@ -242,3 +242,20 @@
 .mb-40 {
     margin-bottom: 2.5rem;
 }
+
+.widgets {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    width: 100%;
+    margin-top: 1.4rem !important;
+    grid-gap: 12px;
+
+    .widget {
+        background-color: #4447E2;
+        color: #fff;
+        border-radius: var(--radius);
+        @include font_size(14, px, 500);
+        padding: 10px 20px;
+        text-align: center;
+    }
+}

src/assets/styles/index.scss

@@ -19,6 +19,10 @@ body {
   }
 }
 
+a {
+  text-decoration: none !important;
+}
+
 p {
   margin-bottom: 0 !important;
 }
@@ -217,7 +221,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    
+
     .create-task {
       background-color: var(--color-input);
       border-radius: var(--radius);
@@ -308,27 +312,30 @@ body {
   margin: 4rem 0 6.25rem 0;
   border-radius: var(--radius);
   background-color: var(--color-bg-indigo);
-
+  
   &-inner {
     padding: 1.25rem;
     display: flex;
     align-items: center;
   }
-
+  
   &-img {
-    flex: 0.6;
+    flex: 0.4;
     border-radius: var(--radius);
     overflow: hidden;
-
+    
     img {
       width: 100%;
     }
   }
-
+  
   &-content {
-    flex: 0.4;
+    flex: 0.6;
     color: var(--color-white);
     padding-left: 2.5rem;
+    text-decoration: none !important;
+    display: flex;
+    flex-direction: column;
 
     &-title {
       @include font_size(2.125, rem, 500);
@@ -338,6 +345,7 @@ body {
     &-info {
       @include font_size(1.125, rem, 400);
       padding-bottom: 2.5rem;
+      color: var(--color-white)
     }
 
     &-date {
@@ -367,6 +375,7 @@ body {
 
       img {
         width: 100%;
+        height: 220px;
       }
     }
 
@@ -542,3 +551,35 @@ body {
     }
   }
 }
+
+.news-detail {
+  .open-remote {
+    padding: 15px 40px;
+    text-align: center;
+    color: var(--color-white);
+    background-color: transparent;
+    border: 2px solid var(--color-purple);
+    margin-top: 8px !important;
+    border-radius: var(--radius);
+    width: max-content;
+  }
+
+  .byline {
+    border-radius: var(--radius);
+    padding: 8px 30px;
+    background-color: #4447E2;
+    color: var(--color-white);
+    width: max-content;
+    margin-bottom: 18px;
+  }
+
+  &-bottom {
+    width: 100%;
+
+    .source-date {
+      display: flex;
+      align-items: center;
+      color: #fff;
+    }
+  }
+}

src/assets/utils/index.js

@@ -1,3 +1,5 @@
+import moment from "moment";
+
 export const scrollToTop = () => {
     window.scrollTo({
         behavior: 'smooth',
@@ -20,4 +22,36 @@ export const toLocale = (str, locale, currency) => {
     }
 
     return parseFloat(str).toLocaleString(locale, options);
+};
+
+export const formatDate = (date) => {
+    const options = { year: 'numeric', month: 'long', day: 'numeric' };
+
+    return new Date(date).toLocaleDateString('en-Us', options);
+};
+
+export const truncateString = (str, number) => {
+    if (str.length > number) {
+        return str.slice(0, number) + '...';
+    }
+};
+
+export const randomObject = (array) => {
+    const random = Math.floor(Math.random() * array.length);
+
+    return array[random];
+};
+
+export const increaseResolution = async (image) => {
+    return image;
+};
+
+export const removeSpaceFromEndpoint = endpoint => {
+   return encodeURIComponent(decodeURIComponent(endpoint).replaceAll(/\s+/g, '-'))
+};
+
+export const compareTime = (updated) => {
+    const diff = moment(updated).fromNow();
+
+    return diff;
 }

src/base.js

@@ -0,0 +1,6 @@
+export const NEWS = {
+    BASE_URL: process.env.REACT_APP_NEWS_API_URL,
+    API_KEY: process.env.REACT_APP_NEWS_API_KEY,
+    MOST_POPULAR_URL: process.env.REACT_APP_POPULAR_NEWS_API_URL,
+    MOST_POPULAR_KEY: process.env.REACT_APP_POPULAR_NEWS_API_KEY
+}

src/components/News/Banner.js

@@ -1,22 +1,22 @@
-import React from 'react'
+import Image from '../../shared/Image'
+
+const Banner = ({ img, title, info, date }) => {
 
-const Banner = () => {
     return (
         <div className="news-banner">
             <div className="news-banner-inner">
                 <div className="news-banner-img">
-                    <img src={'/assets/images/news-1.svg'} alt="Promotion Service News" />
+                    <Image source={img} />
                 </div>
                 <div className="news-banner-content">
                     <p className="news-banner-content-title">
-                        Dribbble Russia VK Community officially launched!
+                        {title}
                     </p>
                     <p className="news-banner-content-info">
-                        Send your portfolio to our manager on e-mail and get
-                        a chance to be a part of our new big Dribbblers group!
+                        {info}
                     </p>
                     <p className="news-banner-content-date">
-                        Aug 14, 2020
+                        {date}
                     </p>
                 </div>
             </div>

src/index.js

@@ -4,10 +4,14 @@ import './assets/styles/index.scss';
 import App from './App';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { BrowserRouter as Router } from 'react-router-dom'
+import { Provider } from 'react-redux';
+import store from './redux/store';
 
 ReactDOM.render(
-  <Router>
-    <App />
-  </Router>,
+  <Provider store={store}>
+    <Router>
+      <App />
+    </Router>
+  </Provider>,
   document.getElementById('root')
 );