Refactor view code to use slack-block-builder

app-nest/package.json

@@ -40,6 +40,7 @@
     "pg": "^8.11.1",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.8.1",
+    "slack-block-builder": "^2.7.2",
     "typeorm": "^0.3.17"
   },
   "devDependencies": {

app-nest/src/gui/dev/dev-tools.builder.ts

@@ -0,0 +1,22 @@
+import { Injectable } from "@nestjs/common";
+import { Actions, Button, Context, Divider, Header } from "slack-block-builder";
+import BoltActions from "../../bolt/enums/bolt-actions.enum";
+
+@Injectable()
+export class DevToolsBuilder {
+  build() {
+    return [
+      Header({ text: ":wrench:  Developer Tools" }),
+      Actions().elements(
+        Button({
+          text: ":recycle:  Sync Users",
+          actionId: BoltActions.SYNC_USERS,
+        }),
+      ),
+      Context().elements(
+        "In development environment, users are not synchronized between local database and Slack on app start to avoid running into API rate limits due to hot-reloads. Sync users manually when necessary.",
+      ),
+      Divider(),
+    ];
+  }
+}

app-nest/src/gui/dev/dev-tools.module.ts

@@ -0,0 +1,5 @@
+import { Module } from "@nestjs/common";
+import { DevToolsBuilder } from "./dev-tools.builder";
+
+@Module({ providers: [DevToolsBuilder], exports: [DevToolsBuilder] })
+export class DevToolsModule {}

app-nest/src/gui/gui.module.ts

@@ -1,11 +1,7 @@
 import { Module } from "@nestjs/common";
-import { UserModule } from "../entities/user/user.module";
-import { UserService } from "../entities/user/user.service";
-import { HomeTabController } from "./tabs/home/home-tab.controller";
+import { HomeTabModule } from "./tabs/home/home-tab.module";
 
 @Module({
-  imports: [UserModule],
-  providers: [UserService],
-  controllers: [HomeTabController],
+  imports: [HomeTabModule],
 })
 export class GuiModule {}

app-nest/src/gui/tabs/home/day-list-item.builder.ts

@@ -0,0 +1,67 @@
+import { Injectable } from "@nestjs/common";
+import { Dayjs } from "dayjs";
+import {
+  Actions,
+  Button,
+  Header,
+  Option,
+  OverflowMenu,
+  StaticSelect,
+} from "slack-block-builder";
+import BoltActions from "../../../bolt/enums/bolt-actions.enum";
+
+type DayListItemProps = {
+  date: Dayjs;
+};
+
+@Injectable()
+export class DayListItemBuilder {
+  build({ date }: DayListItemProps) {
+    const dateString = date.toISOString();
+
+    return [
+      Header({ text: date.format("dd D.M.") }),
+      Actions().elements(
+        Button({
+          text: "Toimistolla",
+          actionId: BoltActions.SET_OFFICE_PRESENCE,
+          value: dateString,
+        }),
+        Button({
+          text: "Etänä",
+          actionId: BoltActions.SET_REMOTE_PRESENCE,
+          value: dateString,
+        }),
+        StaticSelect({
+          placeholder: "Valitse toimipiste",
+          actionId: BoltActions.SELECT_OFFICE_FOR_DATE,
+        })
+          .initialOption(
+            Option({
+              text: "Helsinki",
+              value: JSON.stringify({ value: "hki", date }),
+            }),
+          )
+          .options(
+            Option({
+              text: "Helsinki",
+              value: JSON.stringify({ value: "hki", date }),
+            }),
+            Option({
+              text: "Tampere",
+              value: JSON.stringify({ value: "tre", date }),
+            }),
+          ),
+        OverflowMenu({ actionId: BoltActions.DAY_LIST_ITEM_OVERFLOW }).options(
+          Option({
+            text: "Poista ilmoittautuminen",
+            value: JSON.stringify({
+              type: "remove_presence",
+              date,
+            }),
+          }),
+        ),
+      ),
+    ];
+  }
+}

app-nest/src/gui/tabs/home/day-list.blocks.ts → app-nest/src/gui/tabs/home/day-list.builder.ts

@@ -1,6 +1,7 @@
+import { Injectable } from "@nestjs/common";
 import dayjs, { Dayjs } from "dayjs";
 import { flatten } from "lodash";
-import getDayListItemBlocks from "./day-list-item.blocks";
+import { DayListItemBuilder } from "./day-list-item.builder";
 
 /**
  * Get range of days from today (inclusive) for the next `len` working days (defined as Mon-Fri).
@@ -24,10 +25,15 @@ const dayRange = (len: number, days: Dayjs[] = [], i = 0): Dayjs[] => {
   return dayRange(len, days, i + 1);
 };
 
-const getDayListBlocks = () => {
-  const dates = dayRange(14);
-  const blockLists = dates.map((date) => getDayListItemBlocks({ date }));
-  return flatten(blockLists);
-};
+@Injectable()
+export class DayListBuilder {
+  constructor(private dayListItemBuilder: DayListItemBuilder) {}
 
-export default getDayListBlocks;
+  async build() {
+    const dates = dayRange(14);
+    const blockLists = dates.map((date) =>
+      this.dayListItemBuilder.build({ date }),
+    );
+    return flatten(blockLists);
+  }
+}

app-nest/src/gui/tabs/home/home-tab.builder.ts

@@ -0,0 +1,19 @@
+import { Injectable } from "@nestjs/common";
+import { Header } from "slack-block-builder";
+import { DevToolsBuilder } from "../../dev/dev-tools.builder";
+import { DayListBuilder } from "./day-list.builder";
+
+// TODO: Create interface for these kind of builder classes.
+@Injectable()
+export class HomeTabBuilder {
+  constructor(
+    private dayListBlocks: DayListBuilder,
+    private devToolsBuilder: DevToolsBuilder,
+  ) {}
+
+  async build() {
+    const devTools = this.devToolsBuilder.build();
+    const dayList = await this.dayListBlocks.build();
+    return [...devTools, Header({ text: "Ilmoittautumiset" }), ...dayList];
+  }
+}

app-nest/src/gui/tabs/home/home-tab.controller.ts

@@ -1,28 +1,25 @@
 import { Controller } from "@nestjs/common";
+import { HomeTab } from "slack-block-builder";
 import BoltEvent from "../../../bolt/decorators/bolt-event.decorator";
 import BoltEvents from "../../../bolt/enums/bolt-events.enum";
 import { AppHomeOpenedArgs } from "../../../bolt/types/bolt-event-types";
-import { UserService } from "../../../entities/user/user.service";
-import getDayListBlocks from "./day-list.blocks";
-import getHomeTabBlocks from "./home-tab.view";
+import { HomeTabBuilder } from "./home-tab.builder";
 
 @Controller()
 export class HomeTabController {
-  constructor(private userService: UserService) {}
+  constructor(private homeTabBlocks: HomeTabBuilder) {}
 
   @BoltEvent(BoltEvents.APP_HOME_OPENED)
   async getView({ event, client, logger }: AppHomeOpenedArgs) {
-    const users = await this.userService.findAll();
-    const { slackId } = users[0];
-    getDayListBlocks();
+    const blocks = await this.homeTabBlocks.build();
+    const view = HomeTab()
+      .blocks(...blocks)
+      .buildToObject();
 
     try {
       const result = await client.views.publish({
         user_id: event.user,
-        view: {
-          type: "home",
-          blocks: getHomeTabBlocks(),
-        },
+        view,
       });
 
       logger.debug(result);

app-nest/src/gui/tabs/home/home-tab.module.ts

@@ -0,0 +1,13 @@
+import { Module } from "@nestjs/common";
+import { DevToolsModule } from "../../dev/dev-tools.module";
+import { DayListItemBuilder } from "./day-list-item.builder";
+import { DayListBuilder } from "./day-list.builder";
+import { HomeTabBuilder } from "./home-tab.builder";
+import { HomeTabController } from "./home-tab.controller";
+
+@Module({
+  imports: [DevToolsModule],
+  providers: [HomeTabBuilder, DayListBuilder, DayListItemBuilder],
+  controllers: [HomeTabController],
+})
+export class HomeTabModule {}