mate-academy · Uran-web · Oct 6, 2021 · Oct 6, 2021
diff --git a/README.md b/README.md
@@ -1,9 +1,5 @@
-# React TypeScript Starter Pack
+Description:
+ - News page with ability to search articles and choose categories.
 
-To use this template click `Use this template`
 
-### Available Scripts
-
-`Deploy` - available to deploy your application to gh-pages
-
-`SCSS Preprocessor` - available to write your styles with modern style language
+- [DEMO](https://uran-web.github.io/react-typescript-starter-pack/);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "@types/node": "^12.20.10",
     "@types/react": "^17.0.4",
     "@types/react-dom": "^17.0.3",
+    "classnames": "^2.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

diff --git a/public/images/header.jpg b/public/images/header.jpg
diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,12 @@
       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`.
     -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+      crossorigin="anonymous"
+    >
     <title>React App</title>
   </head>
   <body>

diff --git a/public/search.svg b/public/search.svg
diff --git a/src/App.scss b/src/App.scss
@@ -1,3 +1,155 @@
 .starter {
   font-size: 18px;
 }
+
+.menu {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  z-index: 1020;
+}
+
+.container {
+  padding: 14px 60px 0;
+  background-color: #fff;
+}
+
+.card-body--head-article {
+  padding: 41px 82px 43px 57px;
+}
+
+.card-title {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  line-height: 24px;
+
+  &--head-title {
+    font-size: 30px;
+    line-height: 36px;
+  }
+}
+
+.mb-27 {
+  margin-bottom: 27px;
+}
+
+.mb-30 {
+  margin-bottom: 30px;
+}
+
+.h-100 {
+  height: 382px;
+}
+
+.card-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.element {
+  margin: 0;
+}
+
+.gu-image {
+  width: 100%;
+  height: 179px;
+
+  object-fit: fill;
+}
+
+.element-image__caption, .element-image__credit {
+  display: none;
+}
+
+.card-text {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 17px;
+
+  color: #718096;
+
+  &--bot {
+    margin: 0;
+
+    font-size: 12px;
+    line-height: 15px;
+  }
+
+  &--small-card {
+    height: 85px;
+    overflow: hidden;
+  }
+}
+
+.card-date {
+  margin: 0;
+
+  font-family: Inter;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 15px;
+
+  color: #2D3748;
+}
+
+.article-details {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &__text {
+    margin: 0;
+  }
+}
+
+.article-link {
+  color: black;
+  font-weight: bold;
+  text-decoration: none;
+
+  &__text {
+    margin: 0;
+  }
+}
+
+.article-link:hover {
+  text-decoration: underline;
+}
+
+.footer {
+  padding-bottom: 50px;
+}
+
+.footer-copyright {
+  margin: 0;
+  padding-bottom: 1px;
+
+  font-family: Inter;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 19px;
+}
+
+.logo-footer {
+  display: flex;
+  margin-right: 50px;
+
+  font-family: Inter;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 19px;
+}
+
+.logo-bar--rights {
+  align-items: flex-end;
+  font-size: 16px;
+  line-height: 19px;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,27 +1,129 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import './App.scss';
-
-interface Props {
-  onClick: () => void;
-}
-
-export const Provider: React.FC<Props> = React.memo(
-  ({ onClick, children }) => (
-    <button
-      type="button"
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  ),
-);
+import { SearchBar } from './components/SearchBar/SearchBar';
+import { getData } from './api/api';
 
 export const App: React.FC = () => {
+  const [articleData, setArticleData] = useState<Article[]>([]);
+  const [currentCategory, setCurrentCategory] = useState<string>('');
+  const [query, setQuery] = useState<string>('');
+  const [articles, setArticles] = useState<Article[]>();
+
+  useEffect(() => {
+    getData(currentCategory).then(response => {
+      setArticleData(response.response.results);
+      setArticles(response.response.results);
+    });
+  }, [currentCategory]);
+
+  const sortedByDate = () => {
+    const sorted = [...articleData].sort((article1: Article, article2: Article) => {
+      return (
+        article1.webPublicationDate.localeCompare(article2.webPublicationDate)
+      );
+    });
+
+    return sorted;
+  };
+
+  const sortedArticles = sortedByDate();
+
+  useEffect(() => {
+    const filtered = sortedArticles.filter(article => {
+      if (query.length === 0) {
+        return (
+          article.webTitle?.includes(' ')
+        );
+      }
+
+      return (
+        article.webTitle?.includes(query)
+      );
+    });
+
+    setArticles(filtered);
+  }, [query]);
+
+  const renderArticleCard = (article: Article) => {
+    const createdDateYear = new Date(article.webPublicationDate);
+    const dateToday = new Date();
+    const oneDay = 1000 * 60 * 60 * 24;
+    const daysAgo = Math.floor(+(dateToday.getTime() - +createdDateYear.getTime()) / oneDay);
+
+    return (
+      <div className="col" key={article.id}>
+        <div className="card h-100">
+          <div dangerouslySetInnerHTML={{ __html: `${article.fields?.main}` }} className="card-img-top"></div>
+          <div className="card-body">
+            <h5 className="card-title">{article.webTitle}</h5>
+            <p className="card-text card-text--small-card">{article.fields?.bodyText}</p>
+            <div className="article-details">
+              <div className="article-details__body">
+                <p className="article-details__text">{`Created ${daysAgo} days ago`}</p>
+              </div>
+              <a href="/" className="article-link">
+                <p className="article-link__text">Read more</p>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   return (
-    <div className="starter">
-      <Provider onClick={() => ({})}>
-        <TodoList />
-      </Provider>
-    </div>
+    <>
+      <nav className="menu">
+        <div className="container">
+          <SearchBar
+            setCurrentCategory={setCurrentCategory}
+            setQueryFromBar={setQuery}
+          />
+        </div>
+      </nav>
+
+      <header>
+        <div className="container">
+          <div className="card mb-3">
+            <div className="row g-0">
+              <div className="col-md-8">
+                <div className="card-body card-body--head-article">
+                  <h5 className="card-title mb-27 card-title--head-title">Always intreating news!</h5>
+                  <p className="card-text mb-30">Look at these amazing world actions!</p>
+                  <div className="card-inner">
+                    <p className="card-text card-text--bot">Last updated 3 mins ago</p>
+                    <p className="card-date">Last updated 3 mins ago</p>
+                  </div>
+                </div>
+              </div>
+              <div className="col-md-4">
+                <img src="images/header.jpg" className="img-fluid rounded-start" alt="img"></img>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main>
+        <div className="container">
+          <div className="row row-cols-1 row-cols-md-3 g-4 mb-30">
+            {articles?.map(renderArticleCard)}
+          </div>
+        </div>
+      </main>
+
+      <footer className="footer">
+        <div className="container">
+          <div className="logo-footer logo-bar--rights">
+            <a href="/" className="logo-bar__article">
+              Week News&nbsp;
+            </a>
+            <p className="footer-copyright">2021 copyright all rights reserved</p>
+          </div>
+        </div>
+      </footer>
+      <div className="starter">
+      </div>
+    </>
   );
 };
diff --git a/src/api/api.tsx b/src/api/api.tsx
@@ -0,0 +1,11 @@
+export const BASE_URL = 'https://content.guardianapis.com/search?q=';
+
+export const getData = async (query: string) => {
+  const response = await fetch(`${BASE_URL}${query}&show-tags=all&page-size=20&show-fields=all&order-by=relevance&api-key=141f90d4-5cce-4f13-8f4e-2b6cf69cd8cb`);
+
+  if (!response.ok) {
+    throw new Error(`${response.status} - ${response.statusText}`);
+  }
+
+  return response.json();
+};