feat: listar perguntas com loading

index.js

@@ -1,14 +1,19 @@
-import { apiUrl } from './scripts/constants/apiUrl.js';
+import { listarPerguntas } from './scripts/perguntas/listarPerguntas.js';
+import { toast } from './scripts/utils/toast.js';
 
-const listarUrl = `${apiUrl}/pergunta`;
+const spinnerContainer = document.querySelector('.spinnerContainer');
+const questionsContainer = document.querySelector('.container');
 
-const listarPerguntas = async () => {
- const perguntas = await fetch(listarUrl);
+let perguntas = [];
 
- return perguntas.json();
-};
-const perguntas = await listarPerguntas();
-const questionsContainer = document.querySelector('.container');
+try {
+ perguntas = await listarPerguntas();
+} catch (error) {
+ toast('Houve um erro ao carregar as perguntas', true);
+ console.log(error);
+} finally {
+ spinnerContainer.classList.remove('mostrar');
+}
 
 const addLinksToContent = (content) => {
  const linkRegex = /((http|https):\/\/[^\s.]+[^\s]*[^\s.])/g;

index.php

@@ -14,6 +14,8 @@
  <link rel="manifest" href="./img/favicon/site.webmanifest" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <script src="https://kit.fontawesome.com/1aacb3a88a.js" crossorigin="anonymous"></script>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
+ <script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
  <script src="index.js" type="module" defer></script>
  <script src="./scripts/global.js" defer></script>
 </head>
@@ -39,6 +41,9 @@
  </div>
  </section>
  <main>
+ <div class="spinnerContainer mostrar">
+ <div class="spinner loader"></div>
+ </div>
  <div class="wrapper">
  <div class="container"></div>
  </div>

scripts/perguntas/listarPerguntas.js

@@ -0,0 +1,13 @@
+import { apiUrl } from '../constants/apiUrl.js';
+
+export const listarPerguntas = async () => {
+ try {
+ const perguntas = await fetch(`${apiUrl}/pergunta`, {
+ method: 'GET',
+ });
+
+ return perguntas.json();
+ } catch (error) {
+ throw new Error(error.message);
+ }
+};

style.css

@@ -110,6 +110,16 @@ main {
  overflow: hidden;
 }
 
+.spinnerContainer {
+ display: none;
+}
+
+.spinnerContainer.mostrar {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+}
+
 .wrapper {
  display: flex;
  justify-content: center;