Apiki · andersondanieln · Nov 8, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "apiki-blog",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.2.2",
+    "html-react-parser": "^3.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <meta name="description" content="Empresa especialista em WordPress, há mais de 13 anos fazendo tudo em WordPress, com os melhores profissionais do mercado." />
+    <link rel="canonical" href="https://apiki.com/" />
+    <meta property="og:locale" content="pt_BR" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Especialista em WordPress: Desenvolvimento, Suporte e Hospedagem" />
+    <meta property="og:description" content="Empresa especialista em WordPress, há mais de 13 anos fazendo tudo em WordPress, com os melhores profissionais do mercado." />
+    <meta property="og:url" content="https://apiki.com/" />
+    <meta property="og:site_name" content="Apiki" />
+    <meta property="article:publisher" content="https://www.facebook.com/ApikiWordPress" />
+    <meta property="article:modified_time" content="2022-06-20T19:57:44+00:00" />
+    <meta property="og:image" content="https://apiki.com/wp-content/uploads/2021/05/apiki-wordpress.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image:type" content="image/png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Especialista em WordPress: Desenvolvimento, Suporte e Hospedagem" />
+    <meta name="twitter:description" content="Empresa especialista em WordPress, há mais de 13 anos fazendo tudo em WordPress, com os melhores profissionais do mercado." />
+    <meta name="twitter:image" content="https://apiki.com/wp-content/uploads/2021/05/apiki-wordpress.png" />
+    <meta name="twitter:site" content="@apikiWordPress" />
+
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Apiki - Blog!</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/Home.js b/src/Home.js
@@ -0,0 +1,113 @@
+
+/*
+ * @name Home / Página Inicial do Blog
+ * @author Anderson Daniel Lima do Nascimento <andersondanieln@gmail.com>
+ */
+import './layout/style.css';
+import {useState, useEffect} from 'react';
+
+// Seguindo o princípio de separação das responsabilidades
+// e mantendo tudo mais organizado, reutilizável e estruturado.
+
+import Header from './layout/Header';
+import Articles from './layout/Articles';
+import ArticlesList from './layout/ArticlesList';
+import {DisplayLoading, DisplayNoPages} from './layout/Display';
+import GoToTop from './layout/GoToTop';
+import loadArticles from './layout/loadArticles';
+import MoreArticles from './layout/MoreArticles';
+import FilterContent from './layout/FilterContent';
+
+
+function Home() {
+
+  let [articlesData, setArticlesData]   = useState([]);
+  let [isLoading, setIsLoading]         = useState(false);
+  let [lastPage, setLastPage]           = useState(1);
+  let [maxPage, setMaxPage]             = useState(1);
+  let [noMorePages, setNoMorePages]     = useState(false);
+  let [hasDateFilter, setHasDateFilter] = useState(false);
+  let [dateFilter, setDateFilter]       = useState('');
+
+  useEffect(()=>{
+      loadContent();
+
+  }, []);
+
+  // Adiciona filtragem por data
+  function addDateFilter(){
+
+           let datePicker = document.getElementById('date-filter').value;
+           let date       = new Date(datePicker).toLocaleDateString('pt-br');
+           if(date == 'Invalid Date')
+           return; 
+
+           setHasDateFilter(true);
+           setDateFilter(date);
+  }
+  // Remove filtragem por data
+  function removeDateFilter(){
+           setHasDateFilter(false);
+           setDateFilter('');
+  }
+  function loadContent(){
+    (async ()=>{
+
+     // Incrementa e define a última página
+     setLastPage(lastPage+1);
+     // Diz que há um carregamento para que a animação de loading fique visível
+     setIsLoading(true);
+     // Compara se não há paginação, ou se é a primeira página
+     if(maxPage === 1 && lastPage === 1){
+     // Se for, carrega as postagens da primeira página
+      let articles = await loadArticles(1);
+     // Como o num. máx. de páginas vem no Headers da requisição,
+     // já aproveito para buscar essa informação e salvar em um estado.
+      setMaxPage(articles[0].max_page);
+     // Guardo os dados das postagens
+      setArticlesData(articles);
+     }else if(lastPage <= maxPage){
+      // Se for uma paginação, carregue com base na incrementação da última página
+      let articles = await loadArticles(lastPage);
+      // Como a paginação é dinâmica e o conteúdo da página anterior continua
+      // visível, então só adicionamos o novo conteúdo ao array
+          articles.map(article=>articlesData.push(article));
+     }else{
+      // Se passar do número máx. de páginas...
+      setNoMorePages(true);
+     }
+     // Remove a animação de loading após carregar e mostrar as informações.
+     setIsLoading(false);
+     })();
+  }
+  return (
+        <div>
+          <Header/>
+          <Articles>
+           <FilterContent addClick={addDateFilter} removeClick={removeDateFilter}/>
+           <ArticlesList list={
+              hasDateFilter ? 
+              articlesData.filter(article =>{
+                  // Não é um artigo
+                  if(article.max_page) return; 
+                  // Pegamos a data do artigo, limpamos e convertemos
+                  let articleDate = new Date(article.date.split(' ')[0]);
+                  // Data proviniente do filtro
+                  let date        = new Date(dateFilter);
+                  // Comparamos se o post é mais antigo ou até a data do filtro
+                  if(articleDate.getTime() <= date.getTime())
+                  return true;
+
+              }) :
+              articlesData
+           }/>
+           {isLoading   ? <DisplayLoading/> : ''}
+           {noMorePages ? <DisplayNoPages/> : ''}
+           <MoreArticles onClick={loadContent}/>
+          </Articles>
+          <GoToTop/>
+        </div>
+  );
+}
+
+export default Home;
diff --git a/src/Page.js b/src/Page.js
@@ -0,0 +1,111 @@
+
+/*
+ * @name Page / Página de conteúdo
+ * @author Anderson Daniel Lima do Nascimento <andersondanieln@gmail.com>
+ */
+
+import './layout/style.css';
+import Header from './layout/Header';
+import Articles from './layout/Articles';
+import GoToTop  from './layout/GoToTop';
+import { useParams } from "react-router";
+import parse from 'html-react-parser';
+import {useEffect, useState} from 'react';
+
+
+
+
+function ArticlePage(props){
+       return (
+
+        <article className="article-page">
+            <h1 className="article-title">{props.title}</h1>
+            <div className="article-page-info">
+               <ul>
+                <li>
+                    <p>Publicado em: </p>
+                    <p><b>{props.date}</b></p>
+                </li>
+                <li>
+                    <p>Última Review: </p>
+                    <p><b>{props.lastMod}</b></p>
+                </li>
+                <li>
+                    <p>Autor:</p>
+                    <p><b>{props.author}</b></p>
+                </li>
+               </ul>
+            </div>
+            <div className="article-thumb">
+                <img src={props.image_url}/>
+            </div>
+            <div className="article-page-content">
+                {parse(props.content)}
+            </div>
+        </article>
+
+       )
+}
+function Page(props){
+
+    let { slug } = useParams(); 
+
+    let [pageDataInfo, setPageDataInfo] = useState([]);
+
+
+    useEffect(()=>{
+
+        if(slug === undefined || slug === "")
+        window.location.href = "/";
+
+        async function pageDataUpdate(){
+
+            const baseUrl           = "https://blog.apiki.com/wp-json/wp/v2/posts?_embed&slug="+slug;
+            const fetch_url         = await fetch(baseUrl);
+            const pageData          = await fetch_url.json(); 
+
+            if(pageData.length <= 0)
+            window.location.href = "/";
+
+            setPageDataInfo(pageData);
+
+            console.log(pageData);
+        }
+        pageDataUpdate();
+
+    }, []);
+
+
+
+
+    return (
+    <div>
+        <Header/>
+        <Articles>
+
+           {
+
+            pageDataInfo.map((pageData, index)=>{
+                document.title = pageData.title.rendered + ' - Apiki!';
+                return (
+                    <ArticlePage 
+                    key       = {index}
+                    title     = {pageData.title.rendered}
+                    image_url = {pageData._embedded['wp:featuredmedia'][0]['source_url']}
+                    content   = {pageData.content.rendered.toString()}
+                    date      = {new Date(pageData.date).toLocaleDateString('pt-br')}
+                    lastMod   = {new Date(pageData.modified).toLocaleDateString('pt-br')}
+                    author    = {pageData._embedded.author[0].name}
+                    />
+                )
+            })
+           }
+        </Articles>
+        <GoToTop/>
+    </div>
+
+   )
+
+}
+
+export default Page;
diff --git a/src/Routes.js b/src/Routes.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+import Home from './Home';
+import Page from './Page';
+
+function AppRoutes(){
+    return(
+        <BrowserRouter>
+              <Routes>
+              <Route path="/" element={<Home />}/>
+              <Route path="/page/:slug" element={<Page/>}/>
+              <Route path="/page/" element={<Page/>}/>
+              </Routes>
+        </BrowserRouter>
+    )
+ }
+
+export default AppRoutes;
diff --git a/src/assets/image/apiki-logo.png b/src/assets/image/apiki-logo.png
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import AppRoutes from './Routes';
+
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+
+    <AppRoutes />
+
+);
+
+