-
-
Notifications
You must be signed in to change notification settings - Fork 21
London | 25-SDC-July | Mikiyas Gebremichael | Sprint 1 | New Feature - Rebloom #62
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
0b9fa8d
8b7476b
4a298e3
c6db1b3
e5be166
d8c61f2
9f089d4
a81dfc3
85c98af
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,7 +10,9 @@ CREATE TABLE blooms ( | |
| id BIGSERIAL NOT NULL PRIMARY KEY, | ||
| sender_id INT NOT NULL REFERENCES users(id), | ||
| content TEXT NOT NULL, | ||
| send_timestamp TIMESTAMP NOT NULL | ||
| send_timestamp TIMESTAMP NOT NULL, | ||
| reblooms INT NOT NULL DEFAULT 0, | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ideally you wouldn't need to track rebloom counts in the database - there is a race condition here where values can get out of date (e.g. if you create a rebloom but haven't updated this count yet). Instead, use SQL relationships to compute this - in a query, you should be able to compute the count of blooms which have this ID as an original_bloom_id Your Python and JS code for querying a Bloom shouldn't have to change, but it removes the need for you to update the original bloom from the python side. |
||
| original_bloom_id BIGINT REFERENCES blooms(id) | ||
| ); | ||
|
|
||
| CREATE TABLE follows ( | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| import { apiService } from "../index.mjs"; | ||
|
|
||
| /** | ||
| * Create a bloom component | ||
| * @param {string} template - The ID of the template to clone | ||
|
|
@@ -7,7 +9,9 @@ | |
| * {"id": Number, | ||
| * "sender": username, | ||
| * "content": "string from textarea", | ||
| * "sent_timestamp": "datetime as ISO 8601 formatted string"} | ||
| * "sent_timestamp": "datetime as ISO 8601 formatted string"}, | ||
| * "reblooms": "reblooms count", | ||
| * "original_bloom_id": "id of the rebloomed post" | ||
|
|
||
| */ | ||
| const createBloom = (template, bloom) => { | ||
|
|
@@ -20,8 +24,12 @@ const createBloom = (template, bloom) => { | |
| const bloomTime = bloomFrag.querySelector("[data-time]"); | ||
| const bloomTimeLink = bloomFrag.querySelector("a:has(> [data-time])"); | ||
| const bloomContent = bloomFrag.querySelector("[data-content]"); | ||
| const rebloomButtonEl = bloomFrag.querySelector( | ||
| "[data-action='share-bloom']" | ||
| ); | ||
| const rebloomCountEl = bloomFrag.querySelector("[data-rebloom-count]"); | ||
| const rebloomInfoEl = bloomFrag.querySelector("[data-rebloom-info]"); | ||
|
|
||
| bloomArticle.setAttribute("data-bloom-id", bloom.id); | ||
| bloomUsername.setAttribute("href", `/profile/${bloom.sender}`); | ||
| bloomUsername.textContent = bloom.sender; | ||
| bloomTime.textContent = _formatTimestamp(bloom.sent_timestamp); | ||
|
|
@@ -30,6 +38,23 @@ const createBloom = (template, bloom) => { | |
| ...bloomParser.parseFromString(_formatHashtags(bloom.content), "text/html") | ||
| .body.childNodes | ||
| ); | ||
| // redo to "bloom.reblooms || 0" once reblooms implemented to object | ||
| rebloomCountEl.textContent = `Rebloomed ${bloom.reblooms} times`; | ||
| rebloomCountEl.hidden = bloom.reblooms == 0; | ||
| rebloomButtonEl.setAttribute("data-id", bloom.id || ""); | ||
| rebloomButtonEl.addEventListener("click", handleRebloom); | ||
| rebloomInfoEl.hidden = bloom.original_bloom_id === null; | ||
|
|
||
| if (bloom.original_bloom_id !== null) { | ||
| apiService | ||
| // I had to write another fetch, because getBloom update state, which is causing recursion if I use it here | ||
| .fetchBloomData(bloom.original_bloom_id) | ||
| .then((originalBloom) => { | ||
| const timeStamp = _formatTimestamp(originalBloom.sent_timestamp); | ||
| //I used inner html to render the arrow ↪ sign | ||
| rebloomInfoEl.innerHTML = `↪ Rebloom of the ${originalBloom.sender}'s post, posted ${timeStamp} ago`; | ||
|
Comment on lines
+54
to
+55
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is an XSS vulnerability - can you work out how to avoid that? |
||
| }); | ||
| } | ||
|
|
||
| return bloomFrag; | ||
| }; | ||
|
|
@@ -84,4 +109,11 @@ function _formatTimestamp(timestamp) { | |
| } | ||
| } | ||
|
|
||
| export {createBloom}; | ||
| async function handleRebloom(event) { | ||
| const button = event.target; | ||
| const id = button.getAttribute("data-id"); | ||
| if (!id) return; | ||
| await apiService.postRebloom(id); | ||
| } | ||
|
|
||
| export { createBloom, handleRebloom }; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does it make sense setting the content for a rebloom?