prevent infinite render loop by checking if hashtag has changed

Author: Ameneh-Keshavarz

front-end/views/hashtag.mjs

@@ -1,4 +1,4 @@
-import {renderOne, renderEach, destroy} from "../lib/render.mjs";
+import { renderOne, renderEach, destroy } from "../lib/render.mjs";
 import {
   state,
   apiService,
@@ -14,36 +14,43 @@ import {createHeading} from "../components/heading.mjs";
 
 // Hashtag view: show all tweets containing this tag
 
-function hashtagView(hashtag) {
+async function hashtagView(hashtag) {
   destroy();
 
-  apiService.getBloomsByHashtag(hashtag);
+  const hashtagWithHash = hashtag.startsWith("#") ? hashtag : `#${hashtag}`;
+  if (hashtagWithHash !== state.currentHashtag) {
+    await apiService.getBloomsByHashtag(hashtagWithHash);
+  }
 
-  renderOne(
-    state.isLoggedIn,
-    getLogoutContainer(),
-    "logout-template",
-    createLogout
-  );
-  document
-    .querySelector("[data-action='logout']")
-    ?.addEventListener("click", handleLogout);
-  renderOne(
-    state.isLoggedIn,
-    getLoginContainer(),
-    "login-template",
-    createLogin
-  );
-  document
-    .querySelector("[data-action='login']")
-    ?.addEventListener("click", handleLogin);
+  if (state.isLoggedIn) {
+    renderOne(
+      true,
+      getLogoutContainer(),
+      "logout-template",
+      createLogout
+    );
+    document
+      .querySelector("[data-action='logout']")
+      ?.addEventListener("click", handleLogout);
+  } else {
+    renderOne(
+      false,
+      getLoginContainer(),
+      "login-template",
+      createLogin
+    );
+    document
+      .querySelector("[data-action='login']")
+      ?.addEventListener("click", handleLogin);
+  }
 
   renderOne(
     state.currentHashtag,
     getHeadingContainer(),
     "heading-template",
     createHeading
   );
+
   renderEach(
     state.hashtagBlooms || [],
     getTimelineContainer(),
@@ -52,4 +59,4 @@ function hashtagView(hashtag) {
   );
 }
 
-export {hashtagView};
+export {hashtagView};