Full Technical Test

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/no-unescaped-entities": "off",
+    "@next/next/no-page-custom-font": "off"
+  }
 }

api/index.js

@@ -0,0 +1,43 @@
+export const API_URL = "https://api.nytimes.com/svc/topstories/v2";
+export const API_KEY = "Zr1xxvARH1xSYni8cgAZyPKAy54k7iAY";
+
+export const sections = [
+  "arts",
+  "automobiles",
+  "books",
+  "business",
+  "fashion",
+  "food",
+  "health",
+  "home",
+  "insider",
+  "magazine",
+  "movies",
+  "nyregion",
+  "obituaries",
+  "opinion",
+  "politics",
+  "realestate",
+  "science",
+  "sports",
+  "sundayreview",
+  "technology",
+  "theater",
+  "t-magazine",
+  "travel",
+  "upshot",
+  "us",
+  "world",
+];
+
+export function GET_NEWS_BY_SECTION({ section }) {
+  return {
+    url: `${API_URL}/${section ? section : "world"}.json?api-key=${API_KEY}`,
+    options: {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+      },
+    },
+  };
+}

assets/arrow-down.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const ArrowDown = (props) => (
+  <svg
+    width={15}
+    height={10}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="m8.23 8.222 5.191-5.538c.6-.639.146-1.684-.73-1.684H2.309c-.875 0-1.328 1.045-.73 1.684L6.77 8.222a1 1 0 0 0 1.46 0Z"
+      fill="#fff"
+      stroke="#fff"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default ArrowDown;

assets/arrow.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+const Arrow = (props) => (
+  <svg
+    width={15}
+    height={10}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M1 5h13m0 0-4-4m4 4-4 4"
+      stroke="#3E64FF"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Arrow;

assets/global.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+const Global = (props) => (
+  <svg
+    width={21}
+    height={21}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.495 0C4.694 0 0 4.699 0 10.5S4.694 21 10.495 21C16.296 21 21 16.301 21 10.5S16.296 0 10.495 0Zm7.271 6.3h-3.097a16.682 16.682 0 0 0-1.45-3.738c1.933.662 3.539 2 4.547 3.738ZM10.5 2.137A14.543 14.543 0 0 1 12.505 6.3h-4.01A14.54 14.54 0 0 1 10.5 2.137ZM2.373 12.6a8.404 8.404 0 0 1-.273-2.1c0-.725.1-1.428.273-2.1h3.544a17.27 17.27 0 0 0-.142 2.1c0 .714.058 1.412.147 2.1H2.373Zm.856 2.1h3.097a16.818 16.818 0 0 0 1.45 3.743A8.418 8.418 0 0 1 3.228 14.7Zm3.097-8.4H3.23a8.418 8.418 0 0 1 4.546-3.743A16.819 16.819 0 0 0 6.326 6.3ZM10.5 18.863A14.821 14.821 0 0 1 8.495 14.7h4.01a14.821 14.821 0 0 1-2.005 4.163Zm2.457-6.263H8.043a14.59 14.59 0 0 1-.168-2.1c0-.714.068-1.412.168-2.1h4.914c.1.688.168 1.386.168 2.1 0 .714-.068 1.412-.168 2.1Zm.268 5.838a16.776 16.776 0 0 0 1.449-3.738h3.097a8.445 8.445 0 0 1-4.546 3.738Zm1.853-5.838c.084-.688.147-1.386.147-2.1 0-.714-.058-1.412-.147-2.1h3.544c.173.672.278 1.375.278 2.1 0 .725-.1 1.428-.278 2.1h-3.544Z"
+      fill="#fff"
+    />
+  </svg>
+);
+
+export default Global;

assets/moon.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+const Moon = (props) => (
+  <svg
+    width={24}
+    height={24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M21.64 13a1 1 0 0 0-1.05-.14 8.05 8.05 0 0 1-3.37.73 8.15 8.15 0 0 1-8.14-8.1 8.59 8.59 0 0 1 .25-2A1 1 0 0 0 8 2.36a10.14 10.14 0 1 0 14 11.69 1 1 0 0 0-.36-1.05Zm-9.5 6.69A8.14 8.14 0 0 1 7.08 5.22v.27a10.15 10.15 0 0 0 12.24 9.92 8.11 8.11 0 0 1-7.18 4.32v-.04Z"
+      fill="#fff"
+    />
+  </svg>
+);
+
+export default Moon;

assets/plan-icon.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+const PlanIcon = (props) => (
+  <svg
+    width={32}
+    height={30}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M21.94 7.989h-7.948c-.7 0-1.268.57-1.268 1.275 0 .704.567 1.274 1.268 1.274h7.947c.701 0 1.268-.57 1.268-1.274 0-.705-.567-1.275-1.268-1.275ZM24.983 14.15H13.992c-.7 0-1.268.57-1.268 1.275 0 .704.567 1.275 1.268 1.275h10.99c.701 0 1.269-.57 1.269-1.275 0-.704-.568-1.275-1.268-1.275Z"
+      fill="#3E64FF"
+    />
+    <path
+      d="M30.732 0H8.285c-.7 0-1.268.57-1.268 1.275V13.3h-2.24C2.143 13.3 0 15.455 0 18.102v7.096C0 27.846 2.143 30 4.777 30c.215 0 .428-.015.635-.042h20.924c3.123 0 5.664-2.555 5.664-5.694V1.274C32 .572 31.432 0 30.732 0ZM7.017 25.198a2.253 2.253 0 0 1-1.807 2.21h-.433v.042a2.249 2.249 0 0 1-2.24-2.252v-7.096a2.25 2.25 0 0 1 2.24-2.252h2.24v9.348Zm22.447-.935c0 1.705-1.432 3.145-3.128 3.145H9.017a4.79 4.79 0 0 0 .537-2.21V2.55h19.91v21.713Z"
+      fill="#3E64FF"
+    />
+    <path
+      d="M21.94 19.93h-7.948c-.7 0-1.268.57-1.268 1.274 0 .704.567 1.275 1.268 1.275h7.947c.701 0 1.268-.57 1.268-1.275 0-.704-.567-1.275-1.268-1.275Z"
+      fill="#3E64FF"
+    />
+  </svg>
+);
+
+export default PlanIcon;

assets/sun.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+const Sun = (props) => (
+  <svg
+    width={24}
+    height={24}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M3.6 12a1.2 1.2 0 0 0-1.2-1.2H1.2a1.2 1.2 0 1 0 0 2.4h1.2A1.2 1.2 0 0 0 3.6 12Zm.768 6-.852.852a1.2 1.2 0 0 0 0 1.692 1.2 1.2 0 0 0 1.692 0l.852-.852A1.2 1.2 0 0 0 4.368 18ZM12 3.6a1.2 1.2 0 0 0 1.2-1.2V1.2a1.2 1.2 0 1 0-2.4 0v1.2A1.2 1.2 0 0 0 12 3.6Zm6.792 2.808a1.2 1.2 0 0 0 .84-.348l.852-.852a1.201 1.201 0 0 0-.827-2.11 1.2 1.2 0 0 0-.865.418L18 4.368a1.2 1.2 0 0 0 0 1.692 1.2 1.2 0 0 0 .792.348Zm-14.4-.348a1.2 1.2 0 0 0 1.692 0 1.2 1.2 0 0 0 0-1.692l-.852-.852a1.205 1.205 0 0 0-1.716 1.692l.876.852ZM22.8 10.8h-1.2a1.2 1.2 0 1 0 0 2.4h1.2a1.2 1.2 0 1 0 0-2.4ZM19.632 18A1.2 1.2 0 0 0 18 19.632l.852.852a1.2 1.2 0 0 0 1.692 0 1.2 1.2 0 0 0 0-1.692L19.632 18ZM12 5.4a6.6 6.6 0 1 0 6.6 6.6A6.612 6.612 0 0 0 12 5.4Zm0 10.8a4.2 4.2 0 1 1 0-8.4 4.2 4.2 0 0 1 0 8.4Zm0 4.2a1.2 1.2 0 0 0-1.2 1.2v1.2a1.2 1.2 0 1 0 2.4 0v-1.2a1.2 1.2 0 0 0-1.2-1.2Z"
+      fill="#fff"
+    />
+  </svg>
+);
+
+export default Sun;

components/AboutSection/index.js

@@ -0,0 +1,40 @@
+import { Title, Paragraph } from "../../styles/global";
+import { Template } from "./styles";
+
+const AboutSection = () => {
+  return (
+    <Template>
+      <Title>About</Title>
+      <Paragraph>
+        It is a long established fact that a reader will be distracted by the
+        readable content of a page when looking at its layout. The point of
+        using Lorem Ipsum is that it has a more-or-less normal distribution of
+        letters, as opposed to using 'Content here, content here', making it
+        look like readable English.
+      </Paragraph>
+      <Paragraph>
+        It is a long established fact that a reader will be distracted by the
+        readable content of a page when looking at its layout. The point of
+        using Lorem Ipsum is that it has a more-or-less normal distribution of
+        letters, as opposed to using 'Content here, content here', making it
+        look like readable English of a page when looking at its layout. The
+        point of using Lorem Ipsum is that it has a more-or-less normal
+        distribution of letters of a page when looking at its layout. The point
+        of using Lorem Ipsum is that it has a more-or-less normal distribution
+        of letters.
+      </Paragraph>
+      <Paragraph>
+        It is a long established fact that a reader will be distracted by the
+        readable content.
+      </Paragraph>
+      <Paragraph>
+        It is a long established fact that a reader will be distracted by the
+        readable content of a page when looking at its layout. The point of
+        using Lorem Ipsum is that it has a more-or-less normal distribution of
+        letters..
+      </Paragraph>
+    </Template>
+  );
+};
+
+export default AboutSection;

components/AboutSection/styles.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const Template = styled.section`
+  padding: 0 2rem;
+  border-left: 5px solid var(--blue);
+`;

components/Feed/index.js

@@ -0,0 +1,65 @@
+import { useEffect } from "react";
+
+import Loading from "../../helpers/Loading";
+import Image from "../../helpers/Image/index";
+import useFetch from "../../hooks/useFetch";
+import { GET_NEWS_BY_SECTION } from "../../api";
+
+import {
+  Template,
+  NewsContainer,
+  Title,
+  Paragraph,
+  FlexDiv,
+  Link,
+} from "./styles";
+import Arrow from "../../assets/arrow";
+
+const Feed = ({ section }) => {
+  const { data, request, error, loading } = useFetch();
+
+  function convertToDateTemplate(dateString) {
+    const date = dateString.slice(0, 10).split("-").join("/");
+    const time = dateString.slice(11, 16).split(":").join("h");
+    return `${date} • ${time}`;
+  }
+
+  useEffect(() => {
+    async function fetchNews() {
+      const { url, options } = GET_NEWS_BY_SECTION({ section });
+      await request(url, options);
+    }
+    fetchNews();
+  }, [request, section]);
+
+  if (error) return <Paragraph>Sem resultados</Paragraph>;
+  if (loading) return <Loading />;
+  if (data && data.results.length)
+    return (
+      <Template>
+        {data.results.map(
+          ({ multimedia, title, abstract, published_date, url }, index) =>
+            multimedia && title && abstract && published_date && url ? (
+              <NewsContainer key={index}>
+                <Image src={multimedia[0].url} alt={multimedia[0].caption} />
+                <div>
+                  <Title>{title}</Title>
+                  <Paragraph>{abstract}</Paragraph>
+                  <FlexDiv>
+                    <span>{convertToDateTemplate(published_date)}</span>
+                    <Link href={url} target="_blank">
+                      Full Story
+                      <Arrow />
+                    </Link>
+                  </FlexDiv>
+                </div>
+              </NewsContainer>
+            ) : (
+              ""
+            )
+        )}
+      </Template>
+    );
+};
+
+export default Feed;