Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"liveServer.settings.root": "front-end/",
"python.defaultInterpreterPath": "backend/.venv/bin/python"
"python.defaultInterpreterPath": "backend/.venv/bin/python",
"liveServer.settings.port": 5501
}
24 changes: 24 additions & 0 deletions front-end/tests/hashtag.spec.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { test, expect } from "@playwright/test"


test("should not make infinite hashtag endpoint requests", async ({ page }) => {
// ===== ARRANGE
const requests = [];
page.on("request", (request) => {
if (
request.url().includes(":3000/hashtag/do") &&
request.resourceType() === "fetch"
) {
requests.push(request);
}
});
// ====== ACT
// When I navigate to the hashtag
await page.goto("/#/hashtag/do");
//Wait for the UI to show the blooms have loaded
await page.locator("[data-bloom]").first().waitFor();

// ====== ASSERT
// Then the number of requests should be 1
expect(requests.length).toEqual(1);
});
16 changes: 11 additions & 5 deletions front-end/views/hashtag.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,16 @@ import {createHeading} from "../components/heading.mjs";

// Hashtag view: show all tweets containing this tag

function hashtagView(hashtag) {
destroy();

apiService.getBloomsByHashtag(hashtag);
function hashtagView(hashtag) {
destroy();// Tear down any previously rendered view before drawing this one.
const formattedHashtag = hashtag.startsWith('#') ? hashtag : `#${hashtag}`;// Ensure the hashtag always has a leading '#' so comparisons are reliable.

if (state.currentHashtag !== formattedHashtag) {
state.currentHashtag = formattedHashtag;
apiService.getBloomsByHashtag(formattedHashtag);
}
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@illicitonion I have changged the function here in this commit.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm... I still see state.currentHashtag = formattedHashtag; on line 22 - was the point not to remove that line?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From what I understood from your first comment is that I updated state.currentHashtag immediately but state.hashtagBlooms still contained the old blooms so there was a possibility of UI showing mismatched data.
I replace it with updating state.currentHashtag when the hashtag actually changes.
The fix was just to store the formatted hashtag so the comparison works properly and the UI only updates when the data actually changes.

if I removed this line state.currentHashtag = formattedHashtag state.currentHashtag would never get updated

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getBloomsByHashtag already updates state.currentHashtag when it gets results. And currentHashtag is currently read in views/hashtag.mjs for deciding what hashtag heading to show.

If we just let getBloomsByHashtag do the update, we make sure currentHashtag and hashtagBlooms are always in sync. If you manually update currentHashtag, then someone triggers a re-render, we'll show the new hashtag but the old blooms.




renderOne(
state.isLoggedIn,
Expand Down Expand Up @@ -50,6 +56,6 @@ function hashtagView(hashtag) {
"bloom-template",
createBloom
);
}

}
export {hashtagView};