Publish #5

scaique · Sep 8, 2024 · 23340e4 · 23340e4
1 parent d4ced5a
commit 23340e4
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -13,25 +13,26 @@ <h1>Unfollowers for Bluesky</h1>
         <p>© 2024 Feito por Caique Silva</p>
         <p>
             <a href="https://www.linkedin.com/in/sergio-caique-da-silva/" style="text-decoration: none;">
-              <img src="https://skillicons.dev/icons?i=linkedin" style="width:22px;">
+              <img src="https://skillicons.dev/icons?i=linkedin" style="width:22px;" alt="Linkedin">
             </a>
             <a href="https://github.com/scaique" style="text-decoration: none;">
-              <img src="https://skillicons.dev/icons?i=github" style="width:22px;">
+              <img src="https://skillicons.dev/icons?i=github" style="width:22px;" alt="Github">
             </a>
             <a href="https://indiebluegames.blogspot.com/" style="text-decoration: none;">
-              <img src="https://cdn-icons-png.flaticon.com/512/4494/4494538.png" style="width:22px;">
+              <img src="https://cdn-icons-png.flaticon.com/512/4494/4494538.png" style="width:22px;" alt="Blog">
             </a>
             <a href="https://scaique.github.io/" style="text-decoration: none;">
-              <img src="https://cdn-icons-png.flaticon.com/512/8633/8633238.png" style="width:22px;">
+              <img src="https://cdn-icons-png.flaticon.com/512/8633/8633238.png" style="width:22px;" alt="Portfolio">
             </a>
           </p>
     </header>
     <div class="container">
         <div>
             <input type="text" id="user" placeholder="Insira seu nome de usuário." required>
             <select id="user-select">
-              <option value="" disabled selected>Selecione seu usuário</option>
+              <option selected disabled>Selecione seu usuário</option>
             </select>
+            <span style="font-size: 80%; color: rgb(152, 152, 152);">Seu usuário será salvo na lista acima, não será necessário digitá-lo novamente na próxima vez.</span>
           </div>
           <div>
             <button type="submit" onclick="buscarUsers()">Buscar seu usuário</button>

diff --git a/main.js b/main.js
@@ -1,5 +1,64 @@
 let cursorFollowers = null;
 let cursorFollows = null;
+let cursor = null;
+
+function salvarLocalStorage(chave, informacao) {
+    localStorage.setItem(chave, JSON.stringify(informacao));
+}
+
+function recuperarLocalStorage(chave) {
+    const dados = localStorage.getItem(chave);
+    return dados ? JSON.parse(dados) : null;
+}
+
+function salvarUser(handle) {
+    let users = recuperarLocalStorage("users") ?? [];
+    if (!users.includes(handle)) {
+        users.push(handle);
+    }
+
+    salvarLocalStorage("users", users);
+}
+
+const select = document.getElementById("user-select");
+const salvo = recuperarLocalStorage("users");
+
+salvo.forEach(handle => {
+    const option = document.createElement('option');
+    option.value = handle;
+    option.textContent = handle;
+    select.appendChild(option);
+});
+
+function mostrarUnfollowers(dados) {
+    let html = "";
+    if (dados && dados.length > 0) {
+        document.getElementById("total").innerHTML = dados.length;
+        dados.forEach(user => {
+            html += `
+            <a target="_blank" href="https://bsky.app/profile/${user.handle}" style="text-decoration: none">
+                <div class="user-info">
+                    <div>
+                        <img src="${user.avatar}" width="50" height="50">
+                    </div>
+                    <div>
+                        ${user.displayName || "Sem nome de perfil"} <br>
+                        @${user.handle || "Sem nome de usuário"}
+                    </div>
+                </div>
+            </a>`;
+        });
+    } else {
+        html = "<p>Sem Dados.</p>";
+    }
+    document.getElementById("users").innerHTML = html;
+}
+
+function carregando(valor) {
+    const msg = document.getElementById("mensagem");
+    msg.style.display = valor ? "flex" : "none";
+    return valor === "";
+}
 
 async function getFollowers(user) {
     try {
@@ -89,50 +148,20 @@ async function findUnfollowers(handle) {
     return { unfollowers: [] };
 }
 
-function mostrarUnfollowers(dados) {
-    let html = "";
-    if (dados && dados.length > 0) {
-        document.getElementById("total").innerHTML = dados.length;
-        dados.forEach(user => {
-            html += `
-            <a href="https://bsky.app/profile/${user.handle}" style="text-decoration: none">
-                <div class="user-info">
-                    <div>
-                        <img src="${user.avatar}" width="50" height="50">
-                    </div>
-                    <div>
-                        ${user.displayName || "Sem nome de perfil"} <br>
-                        @${user.handle || "Sem nome de usuário"}
-                    </div>
-                </div>
-            </a>`;
-        });
-    } else {
-        html = "<p>Sem Dados.</p>";
-    }
-    document.getElementById("users").innerHTML = html;
-}
-
-function caregando(valor) {
-    const msg = document.getElementById("mensagem");
-    msg.style.display = valor ? "flex" : "none";
-    return valor === "";
-}
-
 async function notFollowingBack(handle) {
-    if (caregando(handle)) return;
+    if (carregando(handle)) return;
 
     const data = await findUnfollowers(handle);
     mostrarUnfollowers(data.unfollowers);
     document.getElementById("mensagem").style.display = "none";
+
+    salvarUser(document.getElementById("user-select").value)
 }
 
 async function buscarUsers() {
     const query = document.getElementById("user").value;
     const select = document.getElementById("user-select");
 
-    select.innerHTML = '<option value="" disabled selected>Selecione seu usuário</option>';
-
     if (!query) {
         alert("Por favor, insira um nome de usuário.");
         return;