implement auto reconnect

src/View/ChatPages/boardStatusGridPage.tsx

@@ -1,14 +1,14 @@
 import * as React from "bloatless-react";
 
 import {
-  PropertyValueList,
-  collectPropertyValuesToState,
-  createPropertyValueIndexState,
-  createSortedPropertyValueState,
+    PropertyValueList,
+    collectPropertyValuesToState,
+    createPropertyValueIndexState,
+    createSortedPropertyValueState,
 } from "../Components/propertyValueList";
 import {
-  TaskCategoryBulkChangeViewModel,
-  TaskStatusBulkChangeViewModel,
+    TaskCategoryBulkChangeViewModel,
+    TaskStatusBulkChangeViewModel,
 } from "../../ViewModel/Utility/taskPropertyBulkChangeViewModel";
 
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
@@ -19,221 +19,236 @@ import { allowDrop } from "../utility";
 import { translations } from "../translations";
 
 export function BoardStatusGridPage(boardViewModel: BoardViewModel) {
-  const statuses: React.ListState<string> = new React.ListState();
-  const sortedStatuses: React.State<string[]> =
-    createSortedPropertyValueState(statuses);
+    const statuses: React.ListState<string> = new React.ListState();
+    const sortedStatuses: React.State<string[]> =
+        createSortedPropertyValueState(statuses);
 
-  boardViewModel.taskViewModels.subscribe(() => {
-    collectPropertyValuesToState(
-      "status",
-      (taskViewModel: TaskViewModel) => taskViewModel.task,
-      boardViewModel.taskViewModels,
-      statuses
-    );
-  });
+    boardViewModel.taskViewModels.subscribe(() => {
+        collectPropertyValuesToState(
+            "status",
+            (taskViewModel: TaskViewModel) => taskViewModel.task,
+            boardViewModel.taskViewModels,
+            statuses,
+        );
+    });
 
-  const statusNameCellConverter: React.StateItemConverter<string> = (
-    statusName: string
-  ) => {
-    const index = createPropertyValueIndexState(sortedStatuses, statusName);
-    return StatusNameCell(statusName, index, boardViewModel);
-  };
+    const statusNameCellConverter: React.StateItemConverter<string> = (
+        statusName: string,
+    ) => {
+        const index = createPropertyValueIndexState(sortedStatuses, statusName);
+        return StatusNameCell(statusName, index, boardViewModel);
+    };
 
-  return (
-    <div class="status-page-content">
-      <div
-        class="status-name-row"
-        children:append={[statuses, statusNameCellConverter]}
-      ></div>
-      {PropertyValueList(
-        "category",
-        (taskViewModel: TaskViewModel) => taskViewModel.task,
-        boardViewModel.filteredTaskViewModels,
-        (
-          categories: React.ListState<string>,
-          sortedCategories: React.State<string[]>
-        ) => {
-          const categoryRowConverter: React.StateItemConverter<string> = (
-            categoryName: string
-          ) => {
-            const index: React.State<number> = createPropertyValueIndexState(
-              sortedCategories,
-              categoryName
-            );
-
-            return CategoryRow(
-              categoryName,
-              index,
-              statuses,
-              sortedStatuses,
-              boardViewModel
-            );
-          };
-
-          return (
+    return (
+        <div class="status-page-content">
             <div
-              class="status-grid-wrapper"
-              children:append={[categories, categoryRowConverter]}
+                class="status-name-row"
+                children:append={[statuses, statusNameCellConverter]}
             ></div>
-          );
-        }
-      )}
-    </div>
-  );
+            {PropertyValueList(
+                "category",
+                (taskViewModel: TaskViewModel) => taskViewModel.task,
+                boardViewModel.filteredTaskViewModels,
+                (
+                    categories: React.ListState<string>,
+                    sortedCategories: React.State<string[]>,
+                ) => {
+                    const categoryRowConverter: React.StateItemConverter<
+                        string
+                    > = (categoryName: string) => {
+                        const index: React.State<number> =
+                            createPropertyValueIndexState(
+                                sortedCategories,
+                                categoryName,
+                            );
+
+                        return CategoryRow(
+                            categoryName,
+                            index,
+                            statuses,
+                            sortedStatuses,
+                            boardViewModel,
+                        );
+                    };
+
+                    return (
+                        <div
+                            class="status-grid-wrapper"
+                            children:append={[categories, categoryRowConverter]}
+                        ></div>
+                    );
+                },
+            )}
+        </div>
+    );
 }
 
 function StatusNameCell(
-  statusName: string,
-  index: React.State<number>,
-  boardViewModel: BoardViewModel
+    statusName: string,
+    index: React.State<number>,
+    boardViewModel: BoardViewModel,
 ) {
-  const taskViewModelsWithMatchingStatus: React.ListState<TaskViewModel> =
-    new React.ListState();
+    const taskViewModelsWithMatchingStatus: React.ListState<TaskViewModel> =
+        new React.ListState();
 
-  boardViewModel.filteredTaskViewModels.handleAddition(
-    (taskViewModel: TaskViewModel) => {
-      const doesMatchStatus: boolean = taskViewModel.task.status == statusName;
-      if (doesMatchStatus == false) return;
+    boardViewModel.filteredTaskViewModels.handleAddition(
+        (taskViewModel: TaskViewModel) => {
+            const doesMatchStatus: boolean =
+                taskViewModel.task.status == statusName;
+            if (doesMatchStatus == false) return;
 
-      taskViewModelsWithMatchingStatus.add(taskViewModel);
-      boardViewModel.filteredTaskViewModels.handleRemoval(taskViewModel, () => {
-        taskViewModelsWithMatchingStatus.remove(taskViewModel);
-      });
-    }
-  );
-
-  const viewModel: TaskStatusBulkChangeViewModel =
-    new TaskStatusBulkChangeViewModel(
-      taskViewModelsWithMatchingStatus,
-      statusName
+            taskViewModelsWithMatchingStatus.add(taskViewModel);
+            boardViewModel.filteredTaskViewModels.handleRemoval(
+                taskViewModel,
+                () => {
+                    taskViewModelsWithMatchingStatus.remove(taskViewModel);
+                },
+            );
+        },
     );
 
-  const view = (
-    <div class="flex-row">
-      <div class="property-input-wrapper">
-        <input
-          placeholder={
-            translations.chatPage.task.renameCategoryInputPlaceholder
-          }
-          bind:value={viewModel.inputValue}
-          on:enter={viewModel.set}
-        ></input>
-        <button
-          class="primary"
-          on:click={viewModel.set}
-          toggle:disabled={viewModel.cannotSet}
-        >
-          <span class="icon">check</span>
-        </button>
-      </div>
-    </div>
-  );
+    const viewModel: TaskStatusBulkChangeViewModel =
+        new TaskStatusBulkChangeViewModel(
+            taskViewModelsWithMatchingStatus,
+            statusName,
+        );
 
-  index.subscribe((newIndex) => {
-    view.style.order = newIndex;
-  });
+    const view = (
+        <div class="flex-row">
+            <div class="property-input-wrapper">
+                <input
+                    placeholder={
+                        translations.chatPage.task
+                            .renameCategoryInputPlaceholder
+                    }
+                    bind:value={viewModel.inputValue}
+                    on:enter={viewModel.set}
+                ></input>
+                <button
+                    class="primary"
+                    on:click={viewModel.set}
+                    toggle:disabled={viewModel.cannotSet}
+                >
+                    <span class="icon">check</span>
+                </button>
+            </div>
+        </div>
+    );
 
-  return view;
+    index.subscribe((newIndex) => {
+        view.style.order = newIndex;
+    });
+
+    return view;
 }
 
 function CategoryRow(
-  categoryName: string,
-  index: React.State<number>,
-  allStatuses: React.ListState<string>,
-  sortedStatuses: React.State<string[]>,
-  boardViewModel: BoardViewModel
+    categoryName: string,
+    index: React.State<number>,
+    allStatuses: React.ListState<string>,
+    sortedStatuses: React.State<string[]>,
+    boardViewModel: BoardViewModel,
 ) {
-  return FilteredList(
-    { category: categoryName },
-    (taskViewModel: TaskViewModel) => taskViewModel.task,
-    boardViewModel.filteredTaskViewModels,
-    (taskViewModels: React.ListState<TaskViewModel>) => {
-      const statusNameConverter: React.StateItemConverter<string> = (
-        statusName: string
-      ) => {
-        const index = createPropertyValueIndexState(sortedStatuses, statusName);
-        return CategoryStatusColumn(
-          categoryName,
-          statusName,
-          index,
-          boardViewModel,
-          taskViewModels
-        );
-      };
+    return FilteredList(
+        { category: categoryName },
+        (taskViewModel: TaskViewModel) => taskViewModel.task,
+        boardViewModel.filteredTaskViewModels,
+        (taskViewModels: React.ListState<TaskViewModel>) => {
+            const statusNameConverter: React.StateItemConverter<string> = (
+                statusName: string,
+            ) => {
+                const index = createPropertyValueIndexState(
+                    sortedStatuses,
+                    statusName,
+                );
+                return CategoryStatusColumn(
+                    categoryName,
+                    statusName,
+                    index,
+                    boardViewModel,
+                    taskViewModels,
+                );
+            };
 
-      const viewModel: TaskCategoryBulkChangeViewModel =
-        new TaskCategoryBulkChangeViewModel(taskViewModels, categoryName);
+            const viewModel: TaskCategoryBulkChangeViewModel =
+                new TaskCategoryBulkChangeViewModel(
+                    taskViewModels,
+                    categoryName,
+                );
 
-      const view = (
-        <div class="flex-row flex-no large-gap">
-          <div class="property-input-wrapper">
-            <input
-              placeholder={
-                translations.chatPage.task.renameCategoryInputPlaceholder
-              }
-              bind:value={viewModel.inputValue}
-              on:enter={viewModel.set}
-            ></input>
-            <button
-              class="primary"
-              on:click={viewModel.set}
-              toggle:disabled={viewModel.cannotSet}
-            >
-              <span class="icon">check</span>
-            </button>
-          </div>
+            const view = (
+                <div class="flex-row flex-no large-gap">
+                    <div class="property-input-wrapper">
+                        <input
+                            placeholder={
+                                translations.chatPage.task
+                                    .renameCategoryInputPlaceholder
+                            }
+                            bind:value={viewModel.inputValue}
+                            on:enter={viewModel.set}
+                        ></input>
+                        <button
+                            class="primary"
+                            on:click={viewModel.set}
+                            toggle:disabled={viewModel.cannotSet}
+                        >
+                            <span class="icon">check</span>
+                        </button>
+                    </div>
 
-          <div
-            class="flex-row large-gap padding-right"
-            children:append={[allStatuses, statusNameConverter]}
-          ></div>
-        </div>
-      );
+                    <div
+                        class="flex-row large-gap padding-right"
+                        children:append={[allStatuses, statusNameConverter]}
+                    ></div>
+                </div>
+            );
 
-      index.subscribe((newIndex) => {
-        view.style.order = newIndex;
-      });
+            index.subscribe((newIndex) => {
+                view.style.order = newIndex;
+            });
 
-      return view;
-    }
-  );
+            return view;
+        },
+    );
 }
 
 function CategoryStatusColumn(
-  categoryName: string,
-  statusName: string,
-  index: React.State<number>,
-  boardViewModel: BoardViewModel,
-  taskViewModelsWithMatchingCategory: React.ListState<TaskViewModel>
+    categoryName: string,
+    statusName: string,
+    index: React.State<number>,
+    boardViewModel: BoardViewModel,
+    taskViewModelsWithMatchingCategory: React.ListState<TaskViewModel>,
 ) {
-  const taskViewModels: React.ListState<TaskViewModel> = new React.ListState();
+    const taskViewModels: React.ListState<TaskViewModel> =
+        new React.ListState();
 
-  taskViewModelsWithMatchingCategory.handleAddition((taskViewModel) => {
-    const doesMatchStatus: boolean = taskViewModel.status.value == statusName;
-    if (doesMatchStatus == false) return;
+    taskViewModelsWithMatchingCategory.handleAddition((taskViewModel) => {
+        const doesMatchStatus: boolean =
+            taskViewModel.status.value == statusName;
+        if (doesMatchStatus == false) return;
 
-    taskViewModels.add(taskViewModel);
-    taskViewModelsWithMatchingCategory.handleRemoval(taskViewModel, () => {
-      taskViewModels.remove(taskViewModel);
+        taskViewModels.add(taskViewModel);
+        taskViewModelsWithMatchingCategory.handleRemoval(taskViewModel, () => {
+            taskViewModels.remove(taskViewModel);
+        });
     });
-  });
 
-  function drop() {
-    boardViewModel.handleDropWithinBoard(categoryName, statusName);
-  }
+    function drop() {
+        boardViewModel.handleDropWithinBoard(categoryName, statusName);
+    }
 
-  const view = (
-    <div
-      class="status-column gap"
-      on:dragover={allowDrop}
-      on:drop={drop}
-      children:append={[taskViewModels, TaskViewModelToEntry]}
-    ></div>
-  );
+    const view = (
+        <div
+            class="status-column gap"
+            on:dragover={allowDrop}
+            on:drop={drop}
+            children:append={[taskViewModels, TaskViewModelToEntry]}
+        ></div>
+    );
 
-  index.subscribe((newIndex) => {
-    view.style.order = newIndex;
-  });
+    index.subscribe((newIndex) => {
+        view.style.order = newIndex;
+    });
 
-  return view;
+    return view;
 }