mirror of
				https://github.com/zulip/zulip.git
				synced 2025-10-31 20:13:46 +00:00 
			
		
		
		
	Previously, we used to do a kind of "local echo" whenever the user muted/unmuted a topic. Meaning, we used to do most of the UI update work before making the API call to mute the topic, instead of after receiving the `muted_topics` event. This behavior has been so since the beginning of time (b4b6fa14d3) and isn't ideal because: 1. If the request fails on the backend, the UI could end up in an incorrect state. 2. Adds code complexity. 3. Makes it difficult to catch bugs related to live-update (like the one fixed byf725711ff2). 4. Isn't consistent with other parts of the codebase, which do the UI update while handling events. This commit makes it so that all the UI update work is done only after recieving the `muted_topics` event. The only possible issue with this strategy could be users sending another duplicate request in the small time span before receiving the event. But that isn't a big problem, because all requests involved here are idempotent, and the worst that can happen is a HTTP 400.
		
			
				
	
	
		
			54 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			54 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| import $ from "jquery";
 | |
| 
 | |
| import render_muted_topic_ui_row from "../templates/muted_topic_ui_row.hbs";
 | |
| 
 | |
| import * as ListWidget from "./list_widget";
 | |
| import * as muting from "./muting";
 | |
| import * as muting_ui from "./muting_ui";
 | |
| import * as ui from "./ui";
 | |
| 
 | |
| export let loaded = false;
 | |
| 
 | |
| export function populate_list() {
 | |
|     const muted_topics = muting.get_muted_topics();
 | |
|     const muted_topics_table = $("#muted_topics_table");
 | |
|     const $search_input = $("#muted_topics_search");
 | |
| 
 | |
|     ListWidget.create(muted_topics_table, muted_topics, {
 | |
|         name: "muted-topics-list",
 | |
|         modifier(muted_topics) {
 | |
|             return render_muted_topic_ui_row({muted_topics});
 | |
|         },
 | |
|         filter: {
 | |
|             element: $search_input,
 | |
|             predicate(item, value) {
 | |
|                 return item.topic.toLocaleLowerCase().includes(value);
 | |
|             },
 | |
|             onupdate() {
 | |
|                 ui.reset_scrollbar(muted_topics_table.closest(".progressive-table-wrapper"));
 | |
|             },
 | |
|         },
 | |
|         parent_container: $("#muted-topic-settings"),
 | |
|         simplebar_container: $("#muted-topic-settings .progressive-table-wrapper"),
 | |
|     });
 | |
| }
 | |
| 
 | |
| export function set_up() {
 | |
|     loaded = true;
 | |
|     $("body").on("click", ".settings-unmute-topic", function (e) {
 | |
|         const $row = $(this).closest("tr");
 | |
|         const stream_id = Number.parseInt($row.attr("data-stream-id"), 10);
 | |
|         const topic = $row.attr("data-topic");
 | |
| 
 | |
|         e.stopPropagation();
 | |
| 
 | |
|         muting_ui.unmute_topic(stream_id, topic);
 | |
|     });
 | |
| 
 | |
|     populate_list();
 | |
| }
 | |
| 
 | |
| export function reset() {
 | |
|     loaded = false;
 | |
| }
 |