weseek__growi/src/client/js/services/AppContextContainer.js

import { Container } from 'unstated';

import axios from 'axios';
import io from 'socket.io-client';

import InterceptorManager from '@commons/service/interceptor-manager';

import emojiStrategy from '../util/emojione/emoji_strategy_shrinked.json';

import {
  DetachCodeBlockInterceptor,
  RestoreCodeBlockInterceptor,
} from '../util/interceptor/detach-code-blocks';

/**
 * Service container related to options for Application
 * @extends {Container} unstated Container
 */
export default class AppContextContainer extends Container {

  constructor() {
    super();

    const body = document.querySelector('body');

    this.me = body.dataset.currentUsername;
    this.isAdmin = body.dataset.isAdmin;
    this.csrfToken = body.dataset.csrftoken;

    this.config = JSON.parse(document.getElementById('crowi-context-hydrate').textContent || '{}');

    const userAgent = window.navigator.userAgent.toLowerCase();
    this.isMobile = /iphone|ipad|android/.test(userAgent);

    this.socketClientId = Math.floor(Math.random() * 100000);
    this.page = undefined;
    this.pageEditor = undefined;
    this.isDocSaved = true;

    this.fetchUsers = this.fetchUsers.bind(this);
    this.apiGet = this.apiGet.bind(this);
    this.apiPost = this.apiPost.bind(this);
    this.apiRequest = this.apiRequest.bind(this);

    this.interceptorManager = new InterceptorManager();
    this.interceptorManager.addInterceptor(new DetachCodeBlockInterceptor(this), 10); // process as soon as possible
    this.interceptorManager.addInterceptor(new RestoreCodeBlockInterceptor(this), 900); // process as late as possible

    this.users = [];
    this.userByName = {};
    this.userById = {};
    this.draft = {};
    this.editorOptions = {};

    this.recoverData();

    this.socket = io();
  }

  /**
   * @return {Object} window.Crowi (js/legacy/crowi.js)
   */
  getCrowiForJquery() {
    return window.Crowi;
  }

  getConfig() {
    return this.config;
  }

  setPage(page) {
    this.page = page;
  }

  setPageEditor(pageEditor) {
    this.pageEditor = pageEditor;
  }

  setIsDocSaved(isSaved) {
    this.isDocSaved = isSaved;
  }

  getIsDocSaved() {
    return this.isDocSaved;
  }

  getWebSocket() {
    return this.socket;
  }

  getSocketClientId() {
    return this.socketClientId;
  }

  getEmojiStrategy() {
    return emojiStrategy;
  }

  recoverData() {
    const keys = [
      'userByName',
      'userById',
      'users',
      'draft',
    ];

    keys.forEach((key) => {
      const keyContent = window.localStorage[key];
      if (keyContent) {
        try {
          this[key] = JSON.parse(keyContent);
        }
        catch (e) {
          window.localStorage.removeItem(key);
        }
      }
    });
  }

  fetchUsers() {
    const interval = 1000 * 60 * 15; // 15min
    const currentTime = new Date();
    if (window.localStorage.lastFetched && interval > currentTime - new Date(window.localStorage.lastFetched)) {
      return;
    }

    this.apiGet('/users.list', {})
      .then((data) => {
        this.users = data.users;
        window.localStorage.users = JSON.stringify(data.users);

        const userByName = {};
        const userById = {};
        for (let i = 0; i < data.users.length; i++) {
          const user = data.users[i];
          userByName[user.username] = user;
          userById[user._id] = user;
        }
        this.userByName = userByName;
        window.localStorage.userByName = JSON.stringify(userByName);

        this.userById = userById;
        window.localStorage.userById = JSON.stringify(userById);

        window.localStorage.lastFetched = new Date();
      })
      .catch((err) => {
        window.localStorage.removeItem('lastFetched');
      // ignore errors
      });
  }

  setCaretLine(line) {
    if (this.pageEditor != null) {
      this.pageEditor.setCaretLine(line);
    }
  }

  focusToEditor() {
    if (this.pageEditor != null) {
      this.pageEditor.focusToEditor();
    }
  }

  clearDraft(path) {
    delete this.draft[path];
    window.localStorage.setItem('draft', JSON.stringify(this.draft));
  }

  clearAllDrafts() {
    window.localStorage.removeItem('draft');
  }

  saveDraft(path, body) {
    this.draft[path] = body;
    window.localStorage.setItem('draft', JSON.stringify(this.draft));
  }

  findDraft(path) {
    if (this.draft && this.draft[path]) {
      return this.draft[path];
    }

    return null;
  }

  findUserById(userId) {
    if (this.userById && this.userById[userId]) {
      return this.userById[userId];
    }

    return null;
  }

  findUserByIds(userIds) {
    const users = [];
    for (const userId of userIds) {
      const user = this.findUserById(userId);
      if (user) {
        users.push(user);
      }
    }

    return users;
  }

  findUser(username) {
    if (this.userByName && this.userByName[username]) {
      return this.userByName[username];
    }

    return null;
  }

  createPage(pagePath, markdown, additionalParams = {}) {
    const params = Object.assign(additionalParams, {
      path: pagePath,
      body: markdown,
    });
    return this.apiPost('/pages.create', params)
      .then((res) => {
        if (!res.ok) {
          throw new Error(res.error);
        }
        return res.page;
      });
  }

  updatePage(pageId, revisionId, markdown, additionalParams = {}) {
    const params = Object.assign(additionalParams, {
      page_id: pageId,
      revision_id: revisionId,
      body: markdown,
    });
    return this.apiPost('/pages.update', params)
      .then((res) => {
        if (!res.ok) {
          throw new Error(res.error);
        }
        return res.page;
      });
  }

  launchHandsontableModal(componentKind, beginLineNumber, endLineNumber) {
    let targetComponent;
    switch (componentKind) {
      case 'page':
        targetComponent = this.page;
        break;
    }
    targetComponent.launchHandsontableModal(beginLineNumber, endLineNumber);
  }

  apiGet(path, params) {
    return this.apiRequest('get', path, { params });
  }

  apiPost(path, params) {
    if (!params._csrf) {
      params._csrf = this.csrfToken;
    }

    return this.apiRequest('post', path, params);
  }

  apiRequest(method, path, params) {
    return new Promise((resolve, reject) => {
      axios[method](`/_api${path}`, params)
        .then((res) => {
          if (res.data.ok) {
            resolve(res.data);
          }
          else {
            reject(new Error(res.data.error));
          }
        })
        .catch((res) => {
          reject(res);
        });
    });
  }

}