Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

todo_widget: Convert module to TypeScript.

This commit is contained in:
Varun Singh 2024-08-11 19:51:08 +05:30 committed by Tim Abbott
parent 9cd41e1c5b
commit 2cf09602df
3 changed files with 225 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tools/test-js-with-node
View File

@ -255,7 +255,7 @@ EXEMPT_FILES = make_set(
"web/src/thumbnail.ts",
"web/src/timerender.ts",
"web/src/tippyjs.ts",
"web/src/todo_widget.js",
"web/src/todo_widget.ts",
"web/src/topic_list.ts",
"web/src/topic_popover.js",
"web/src/tutorial.js",

8
web/src/submessage.ts
View File

@ -5,6 +5,7 @@ import * as channel from "./channel";
import type {MessageList} from "./message_lists";
import * as message_store from "./message_store";
import type {Message} from "./message_store";
import {todo_widget_extra_data_schema} from "./todo_widget";
import * as widgetize from "./widgetize";
export type Submessage = {
@ -37,13 +38,6 @@ const poll_widget_extra_data_schema = z
})
.nullable();
export const todo_widget_extra_data_schema = z
.object({
task_list_title: z.string().optional(),
tasks: z.array(z.object({task: z.string(), desc: z.string()})).optional(),
})
.nullable();
const widget_data_event_schema = z.object({
sender_id: z.number(),
data: z.discriminatedUnion("widget_type", [

348
web/src/todo_widget.js → web/src/todo_widget.ts
View File

@ -1,98 +1,88 @@
import $ from "jquery";
import assert from "minimalistic-assert";
import {z} from "zod";
import render_widgets_todo_widget from "../templates/widgets/todo_widget.hbs";
import render_widgets_todo_widget_tasks from "../templates/widgets/todo_widget_tasks.hbs";
import * as blueslip from "./blueslip";
import {$t} from "./i18n";
import type {Message} from "./message_store";
import {page_params} from "./page_params";
import * as people from "./people";
import {todo_widget_extra_data_schema} from "./submessage";
import type {Event} from "./poll_widget";
// Any single user should send add a finite number of tasks
// to a todo list. We arbitrarily pick this value.
const MAX_IDX = 1000;
export const todo_widget_extra_data_schema = z
.object({
task_list_title: z.string().optional(),
tasks: z.array(z.object({task: z.string(), desc: z.string()})).optional(),
})
.nullable();
const todo_widget_inbound_data = z.intersection(
z.object({
type: z.enum(["new_task", "new_task_list_title", "strike"]),
}),
z.record(z.string(), z.unknown()),
);
const new_task_inbound_data_schema = z.object({
type: z.literal("new_task"),
key: z.number().int().nonnegative().max(MAX_IDX),
task: z.string(),
desc: z.string(),
completed: z.boolean(),
});
type NewTaskOutboundData = z.output<typeof new_task_inbound_data_schema>;
type NewTaskTitleOutboundData = {
type: "new_task_list_title";
title: string;
};
type TaskStrikeOutboundData = {
type: "strike";
key: string;
};
type TodoTask = {
task: string;
desc: string;
};
type Task = {
task: string;
desc: string;
idx: number;
key: string;
completed: boolean;
};
export type TodoWidgetOutboundData =
| NewTaskTitleOutboundData
| NewTaskOutboundData
| TaskStrikeOutboundData;
export class TaskData {
task_map = new Map();
message_sender_id: number;
me: number;
is_my_task_list: boolean;
input_mode: boolean;
report_error_function: (msg: string, more_info?: unknown) => void;
task_list_title: string;
task_map = new Map<string, Task>();
my_idx = 1;
constructor({
message_sender_id,
current_user_id,
is_my_task_list,
task_list_title,
tasks,
report_error_function,
}) {
this.message_sender_id = message_sender_id;
this.me = current_user_id;
this.is_my_task_list = is_my_task_list;
// input_mode indicates if the task list title is being input currently
this.input_mode = is_my_task_list; // for now
this.report_error_function = report_error_function;
if (task_list_title) {
this.set_task_list_title(task_list_title);
} else {
this.set_task_list_title($t({defaultMessage: "Task list"}));
}
for (const [i, data] of tasks.entries()) {
this.handle.new_task.inbound("canned", {
key: i,
task: data.task,
desc: data.desc,
});
}
}
set_task_list_title(new_title) {
this.input_mode = false;
this.task_list_title = new_title;
}
get_task_list_title() {
return this.task_list_title;
}
set_input_mode() {
this.input_mode = true;
}
clear_input_mode() {
this.input_mode = false;
}
get_input_mode() {
return this.input_mode;
}
get_widget_data() {
const all_tasks = [...this.task_map.values()];
const widget_data = {
all_tasks,
};
return widget_data;
}
name_in_use(name) {
for (const item of this.task_map.values()) {
if (item.task === name) {
return true;
}
}
return false;
}
handle = {
new_task_list_title: {
outbound: (title) => {
outbound: (title: string): NewTaskTitleOutboundData | undefined => {
const event = {
type: "new_task_list_title",
type: "new_task_list_title" as const,
title,
};
if (this.is_my_task_list) {
@ -101,8 +91,22 @@ export class TaskData {
return undefined;
},
inbound: (sender_id, data) => {
inbound: (sender_id: number, raw_data: unknown): void => {
// Only the message author can edit questions.
const new_task_title_inbound_data = z.object({
type: z.literal("new_task_list_title"),
title: z.string(),
});
const parsed = new_task_title_inbound_data.safeParse(raw_data);
if (!parsed.success) {
this.report_error_function(
"todo widget: bad type for inbound task list title",
parsed.error,
);
return;
}
const data = parsed.data;
if (sender_id !== this.message_sender_id) {
this.report_error_function(
`user ${sender_id} is not allowed to edit the task list title`,
@ -110,20 +114,15 @@ export class TaskData {
return;
}
if (typeof data.title !== "string") {
this.report_error_function("todo widget: bad type for inbound task list title");
return;
}
this.set_task_list_title(data.title);
},
},
new_task: {
outbound: (task, desc) => {
outbound: (task: string, desc: string): NewTaskOutboundData | undefined => {
this.my_idx += 1;
const event = {
type: "new_task",
type: "new_task" as const,
key: this.my_idx,
task,
desc,
@ -136,28 +135,21 @@ export class TaskData {
return undefined;
},
inbound: (sender_id, data) => {
inbound: (sender_id: number | string, raw_data: unknown): void => {
// All readers may add tasks. For legacy reasons, the
// inbound idx is called key in the event.
const parsed = new_task_inbound_data_schema.safeParse(raw_data);
if (!parsed.success) {
blueslip.warn("todo widget: bad type for inbound task data", parsed.error);
return;
}
const data = parsed.data;
const idx = data.key;
const task = data.task;
const desc = data.desc;
if (!Number.isInteger(idx) || idx < 0 || idx > MAX_IDX) {
blueslip.warn("todo widget: bad type for inbound task idx");
return;
}
if (typeof task !== "string") {
blueslip.warn("todo widget: bad type for inbound task title");
return;
}
if (typeof desc !== "string") {
blueslip.warn("todo widget: bad type for inbound task desc");
return;
}
const key = idx + "," + sender_id;
const completed = data.completed;
@ -181,23 +173,28 @@ export class TaskData {
},
strike: {
outbound(key) {
outbound(key: string): TaskStrikeOutboundData {
const event = {
type: "strike",
type: "strike" as const,
key,
};
return event;
},
inbound: (_sender_id, data) => {
// All message readers may strike/unstrike todo tasks.
const key = data.key;
if (typeof key !== "string") {
blueslip.warn("todo widget: bad type for inbound strike key");
inbound: (_sender_id: number, raw_data: unknown): void => {
const task_strike_inbound_data_schema = z.object({
type: z.literal("strike"),
key: z.string(),
});
const parsed = task_strike_inbound_data_schema.safeParse(raw_data);
if (!parsed.success) {
blueslip.warn("todo widget: bad type for inbound strike key", parsed.error);
return;
}
// All message readers may strike/unstrike todo tasks.
const data = parsed.data;
const key = data.key;
const item = this.task_map.get(key);
if (item === undefined) {
@ -210,9 +207,96 @@ export class TaskData {
},
};
handle_event(sender_id, data) {
constructor({
message_sender_id,
current_user_id,
is_my_task_list,
task_list_title,
tasks,
report_error_function,
}: {
message_sender_id: number;
current_user_id: number;
is_my_task_list: boolean;
task_list_title: string;
tasks: TodoTask[];
report_error_function: (msg: string, more_info?: unknown) => void;
}) {
this.message_sender_id = message_sender_id;
this.me = current_user_id;
this.is_my_task_list = is_my_task_list;
// input_mode indicates if the task list title is being input currently
this.input_mode = is_my_task_list; // for now
this.report_error_function = report_error_function;
this.task_list_title = "";
if (task_list_title) {
this.set_task_list_title(task_list_title);
} else {
this.set_task_list_title($t({defaultMessage: "Task list"}));
}
for (const [i, data] of tasks.entries()) {
this.handle.new_task.inbound("canned", {
key: i,
task: data.task,
desc: data.desc,
completed: false,
});
}
}
set_task_list_title(new_title: string): void {
this.input_mode = false;
this.task_list_title = new_title;
}
get_task_list_title(): string {
return this.task_list_title;
}
set_input_mode(): void {
this.input_mode = true;
}
clear_input_mode(): void {
this.input_mode = false;
}
get_input_mode(): boolean {
return this.input_mode;
}
get_widget_data(): {
all_tasks: Task[];
} {
const all_tasks = [...this.task_map.values()];
const widget_data = {
all_tasks,
};
return widget_data;
}
name_in_use(name: string): boolean {
for (const item of this.task_map.values()) {
if (item.task === name) {
return true;
}
}
return false;
}
handle_event(sender_id: number, raw_data: unknown): void {
const parsed = todo_widget_inbound_data.safeParse(raw_data);
if (!parsed.success) {
return;
}
const {data} = parsed;
const type = data.type;
if (this.handle[type] && this.handle[type].inbound) {
if (this.handle[type]) {
this.handle[type].inbound(sender_id, data);
} else {
blueslip.warn(`todo widget: unknown inbound type: ${type}`);
@ -220,14 +304,26 @@ export class TaskData {
}
}
export function activate({$elem, callback, extra_data, message}) {
export function activate({
$elem,
callback,
extra_data,
message,
}: {
$elem: JQuery;
callback: (data: TodoWidgetOutboundData | undefined) => void;
extra_data: unknown;
message: Message;
}): (events: Event[]) => void {
const parse_result = todo_widget_extra_data_schema.safeParse(extra_data);
if (!parse_result.success) {
blueslip.warn("invalid todo extra data", parse_result.error.issues);
return () => {};
return () => {
/* we send a dummy function when extra data is invalid */
};
}
const {data} = parse_result;
const {task_list_title = "", tasks = []} = data || {};
const {task_list_title = "", tasks = []} = data ?? {};
const is_my_task_list = people.is_my_user_id(message.sender_id);
const task_data = new TaskData({
message_sender_id: message.sender_id,
@ -238,12 +334,13 @@ export function activate({$elem, callback, extra_data, message}) {
report_error_function: blueslip.warn,
});
function update_edit_controls() {
const has_title = $elem.find("input.todo-task-list-title").val().trim() !== "";
function update_edit_controls(): void {
const has_title =
$elem.find<HTMLInputElement>("input.todo-task-list-title").val()?.trim() !== "";
$elem.find("button.todo-task-list-title-check").toggle(has_title);
}
function render_task_list_title() {
function render_task_list_title(): void {
const task_list_title = task_data.get_task_list_title();
const input_mode = task_data.get_input_mode();
const can_edit = is_my_task_list && !input_mode;
@ -256,7 +353,7 @@ export function activate({$elem, callback, extra_data, message}) {
$elem.find(".todo-task-list-title-bar").toggle(input_mode);
}
function start_editing() {
function start_editing(): void {
task_data.set_input_mode();
const task_list_title = task_data.get_task_list_title();
@ -265,14 +362,14 @@ export function activate({$elem, callback, extra_data, message}) {
$elem.find("input.todo-task-list-title").trigger("focus");
}
function abort_edit() {
function abort_edit(): void {
task_data.clear_input_mode();
render_task_list_title();
}
function submit_task_list_title() {
const $task_list_title_input = $elem.find("input.todo-task-list-title");
let new_task_list_title = $task_list_title_input.val().trim();
function submit_task_list_title(): void {
const $task_list_title_input = $elem.find<HTMLInputElement>("input.todo-task-list-title");
let new_task_list_title = $task_list_title_input.val()?.trim() ?? "";
const old_task_list_title = task_data.get_task_list_title();
// We should disable the button for blank task list title,
@ -295,7 +392,7 @@ export function activate({$elem, callback, extra_data, message}) {
callback(data);
}
function build_widget() {
function build_widget(): void {
const html = render_widgets_todo_widget();
$elem.html(html);
@ -336,8 +433,8 @@ export function activate({$elem, callback, extra_data, message}) {
$elem.find("button.add-task").on("click", (e) => {
e.stopPropagation();
$elem.find(".widget-error").text("");
const task = $elem.find("input.add-task").val().trim();
const desc = $elem.find("input.add-desc").val().trim();
const task = $elem.find<HTMLInputElement>("input.add-task").val()?.trim() ?? "";
const desc = $elem.find<HTMLInputElement>("input.add-desc").val()?.trim() ?? "";
if (task === "") {
return;
@ -357,7 +454,7 @@ export function activate({$elem, callback, extra_data, message}) {
});
}
function render_results() {
function render_results(): void {
const widget_data = task_data.get_widget_data();
const html = render_widgets_todo_widget_tasks(widget_data);
$elem.find("ul.todo-widget").html(html);
@ -377,13 +474,14 @@ export function activate({$elem, callback, extra_data, message}) {
return;
}
const key = $(e.target).attr("data-key");
assert(key !== undefined);
const data = task_data.handle.strike.outbound(key);
callback(data);
});
}
const handle_events = function (events) {
const handle_events = function (events: Event[]): void {
for (const event of events) {
task_data.handle_event(event.sender_id, event.data);
}