Merge pull request #2613 from ilandikov/refactor-taskLayout-queryLayout-renames

refactor: `TaskLayout`& `QueryLayout` renames

Author: claremacrae

src/Layout/LayoutHelpers.ts

@@ -1,6 +1,6 @@
-export function generateHiddenClassForTaskList(taskListHiddenClasses: string[], hide: boolean, component: string) {
+export function generateHiddenClassForTaskList(hiddenClasses: string[], hide: boolean, component: string) {
     if (hide) {
-        taskListHiddenClasses.push(hiddenComponentClassName(component));
+        hiddenClasses.push(hiddenComponentClassName(component));
     }
 }
 

src/Layout/QueryLayout.ts

@@ -1,6 +1,10 @@
 import { generateHiddenClassForTaskList } from './LayoutHelpers';
 import { QueryLayoutOptions } from './QueryLayoutOptions';
 
+/**
+ * This class generates a list of hidden query components' classes.
+ * The output depends on {@link QueryLayoutOptions} objects.
+ */
 export class QueryLayout {
     protected queryLayoutOptions: QueryLayoutOptions;
 
@@ -12,8 +16,8 @@ export class QueryLayout {
         }
     }
 
-    public applyQueryLayoutOptions() {
-        const taskListHiddenClasses: string[] = [];
+    public getHiddenClasses() {
+        const hiddenClasses: string[] = [];
         const componentsToGenerateClassesOnly: [boolean, string][] = [
             // The following components are handled in QueryRenderer.ts and thus are not part of the same flow that
             // hides TaskLayoutComponent items. However, we still want to have 'tasks-layout-hide' items for them
@@ -26,11 +30,11 @@ export class QueryLayout {
             [this.queryLayoutOptions.hidePostponeButton, 'postpone-button'],
         ];
         for (const [hide, component] of componentsToGenerateClassesOnly) {
-            generateHiddenClassForTaskList(taskListHiddenClasses, hide, component);
+            generateHiddenClassForTaskList(hiddenClasses, hide, component);
         }
 
-        if (this.queryLayoutOptions.shortMode) taskListHiddenClasses.push('tasks-layout-short-mode');
+        if (this.queryLayoutOptions.shortMode) hiddenClasses.push('tasks-layout-short-mode');
 
-        return taskListHiddenClasses;
+        return hiddenClasses;
     }
 }

src/Layout/TaskLayout.ts

@@ -2,9 +2,8 @@ import { generateHiddenClassForTaskList } from './LayoutHelpers';
 import { TaskLayoutOptions } from './TaskLayoutOptions';
 
 /**
- * This represents the desired layout of tasks when they are rendered in a given configuration.
- * The layout is used when flattening the task to a string and when rendering queries, and can be
- * modified by applying {@link TaskLayoutOptions} objects.
+ * This class generates a list of hidden task components' classes.
+ * The output depends on {@link TaskLayoutOptions} objects.
  */
 export class TaskLayout {
     private taskLayoutOptions: TaskLayoutOptions;
@@ -16,19 +15,15 @@ export class TaskLayout {
             this.taskLayoutOptions = new TaskLayoutOptions();
         }
     }
-    public applyTaskLayoutOptions() {
-        const taskListHiddenClasses: string[] = [];
+    public generateHiddenClasses() {
+        const hiddenClasses: string[] = [];
         this.taskLayoutOptions.toggleableComponents.forEach((component) => {
-            generateHiddenClassForTaskList(
-                taskListHiddenClasses,
-                !this.taskLayoutOptions.isShown(component),
-                component,
-            );
+            generateHiddenClassForTaskList(hiddenClasses, !this.taskLayoutOptions.isShown(component), component);
         });
 
         // Tags are hidden, rather than removed. See tasks-layout-hide-tags in styles.css.
-        generateHiddenClassForTaskList(taskListHiddenClasses, !this.taskLayoutOptions.areTagsShown(), 'tags');
+        generateHiddenClassForTaskList(hiddenClasses, !this.taskLayoutOptions.areTagsShown(), 'tags');
 
-        return taskListHiddenClasses;
+        return hiddenClasses;
     }
 }

src/Renderer/QueryRenderer.ts

@@ -222,11 +222,14 @@ class QueryRenderChild extends MarkdownRenderChild {
     }
 
     private async createTaskList(tasks: Task[], content: HTMLDivElement): Promise<void> {
-        const layout = new TaskLayout(this.query.taskLayoutOptions);
-        const queryLayout = new QueryLayout(this.query.queryLayoutOptions);
         const taskList = content.createEl('ul');
+
         taskList.addClasses(['contains-task-list', 'plugin-tasks-query-result']);
-        taskList.addClasses([...layout.applyTaskLayoutOptions(), ...queryLayout.applyQueryLayoutOptions()]);
+        const taskLayout = new TaskLayout(this.query.taskLayoutOptions);
+        taskList.addClasses(taskLayout.generateHiddenClasses());
+        const queryLayout = new QueryLayout(this.query.queryLayoutOptions);
+        taskList.addClasses(queryLayout.getHiddenClasses());
+
         const groupingAttribute = this.getGroupingAttribute();
         if (groupingAttribute && groupingAttribute.length > 0) taskList.dataset.taskGroupBy = groupingAttribute;
 

tests/Layout/TaskLayout.test.ts

@@ -12,7 +12,7 @@ describe('TaskLayout tests', () => {
         const taskLayout = new TaskLayout();
         const queryLayout = new QueryLayout();
 
-        const hiddenClasses = [...taskLayout.applyTaskLayoutOptions(), ...queryLayout.applyQueryLayoutOptions()];
+        const hiddenClasses = [...taskLayout.generateHiddenClasses(), ...queryLayout.getHiddenClasses()];
         expect(hiddenClasses.join('\n')).toMatchInlineSnapshot('"tasks-layout-hide-urgency"');
     });
 
@@ -30,7 +30,7 @@ describe('TaskLayout tests', () => {
         const taskLayout = new TaskLayout(taskLayoutOptions);
         const queryLayout = new QueryLayout(queryLayoutOptions);
 
-        const hiddenClasses = [...taskLayout.applyTaskLayoutOptions(), ...queryLayout.applyQueryLayoutOptions()];
+        const hiddenClasses = [...taskLayout.generateHiddenClasses(), ...queryLayout.getHiddenClasses()];
         expect(hiddenClasses.join('\n')).toMatchInlineSnapshot(`
             "tasks-layout-hide-id
             tasks-layout-hide-blockedBy