Sharing Comments

import {
  AdaptableContextMenuItemName,
  AdaptableOptions,
  AdaptableSystemContextMenuItem,
  CommentLoadContext,
  CommentThread,
  CustomContextMenuContext,
  InitialState,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

const COMMENTS_PERSISTENCE_KEY = 'docs-demo-comments';

export class CommentsService {
  channel = new BroadcastChannel('comments');

  constructor() {}

  subscribeToComments(callback: (comments: CommentThread[]) => void) {
    console.log('subscribing to comments');
    this.channel.onmessage = event => {
      callback(event.data);
    };
  }

  setComments(comments: CommentThread[]) {
    console.log('sending comments', comments);
    localStorage.setItem(COMMENTS_PERSISTENCE_KEY, JSON.stringify(comments));
    this.channel.postMessage(comments);
  }

  getComments(): CommentThread[] {
    console.log('getting comments');
    const commentsString = localStorage.getItem(COMMENTS_PERSISTENCE_KEY);
    return commentsString ? JSON.parse(commentsString) : [];
  }

  clearComments() {
    console.log('clearing comments');
    localStorage.setItem(COMMENTS_PERSISTENCE_KEY, JSON.stringify([]));
    this.channel.postMessage([]);
  }
}

const commentsService = new CommentsService();

export const getAdaptableOptionsForUser = (
  userName: 'Alice' | 'Bob',
  updateCurrentUser: (userName: 'Alice' | 'Bob') => void
): AdaptableOptions<WebFramework> => {
  const commonInitialState: InitialState = {
    Dashboard: {
      ModuleButtons: ['Comment'],
      PinnedToolbars: ['CurrentUser'],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  };
  const userSpecificInitialState =
    userName === 'Alice'
      ? {
          Theme: {
            CurrentTheme: 'light',
          },
        }
      : // Bob
        {
          Theme: {
            CurrentTheme: 'dark',
          },
        };

  const adaptableOptions: AdaptableOptions<WebFramework> = {
    primaryKey: 'id',
    adaptableId: 'Comments',
    adaptableStateKey: `DocsCommentsDemo_${userName}`,
    userName: userName,
    contextMenuOptions: {
      customContextMenu: (customMenuContext: CustomContextMenuContext) => {
        return customMenuContext.defaultAdaptableMenuStructure
          .filter(
            (
              item
            ): item is AdaptableSystemContextMenuItem<AdaptableContextMenuItemName> =>
              item !== '-'
          )
          .filter(item => item.category === 'Comment');
      },
    },
    commentOptions: {
      loadCommentThreads: async (commentLoadContext: CommentLoadContext) => {
        commentsService.subscribeToComments(comments => {
          commentLoadContext.adaptableApi.commentApi.setComments(comments);
        });
        return commentsService.getComments();
      },
      persistCommentThreads: async (commentThreads: CommentThread[]) => {
        commentsService.setComments(commentThreads);
      },
    },
    dashboardOptions: {
      customToolbars: [
        {
          name: 'CurrentUser',
          title: 'Current User',
          toolbarButtons: [
            {
              label: 'Alice',
              buttonStyle: () => {
                return {
                  tone: userName === 'Alice' ? 'success' : 'neutral',
                  variant: userName === 'Alice' ? 'raised' : 'outlined',
                };
              },
              onClick: () => {
                updateCurrentUser('Alice');
              },
            },
            {
              label: 'Bob',
              buttonStyle: () => {
                return {
                  tone: userName === 'Bob' ? 'success' : 'neutral',
                  variant: userName === 'Bob' ? 'raised' : 'outlined',
                };
              },
              onClick: () => {
                updateCurrentUser('Bob');
              },
            },
          ],
        },
      ],
      customDashboardButtons: [
        {
          tooltip: 'Reset state',
          icon: {
            name: 'refresh',
          },
          buttonStyle: {
            tone: 'error',
          },
          onClick: (_, context) => {
            localStorage.removeItem(COMMENTS_PERSISTENCE_KEY);
            ['Alice', 'Bob'].forEach(user => {
              localStorage.removeItem(`DocsCommentsDemo_${user}`);
            });
            context.adaptableApi.stateApi.reloadInitialState();
          },
        },
      ],
    },
    initialState: {
      ...commonInitialState,
      ...userSpecificInitialState,
    },
  };

  return adaptableOptions;
};