itizawa

目的

2020 年 1 月 30 日の村議にて React 化や BS4 化と同時平行するタスクを見繕うこととなった。
ユーザー視点で有ったら良い機能、必要な機能を考える

wiki 利用者として

• wiki 内に存在するページパスに該当する言葉が自動的にリンクとなる機能
  • tips wiki を書いていて欲しくなった
  • イメージとしてはニコニコ大百科？
    • 「こんな言葉もあるんだ？ページにアクセスしてみよう」的な
• twitter関係
  • まずは ODP 対応。Qiita のように背景画像が生成されると良さそう
  • twitter 連携？イメージとしては user notification?
• 自分で作るカスタマイズテーマ
  • themecolor, subthemecolor, bodycolor など選ぶだけでオリジナルテーマを作れる
  • 発展系として背景画像を好みの画像にできる
• 記事タイトルの左にあるアイコンに、コメント投稿者のアイコンが表示される
  • https://github.com/weseek/growi/issues/1520 external_link
  • コメント投稿者が記事更新者となてしまうのを好ましい動作とは言えない Option で良いのかもしれない。
• 画面ヘッダー左上のアイコンを社内独自のアイコンに変更できる
  • ビジネスプラン対象のユーザーに対して訴求力があるから
• 関連記事の追加
  • 現在のリスト表示、タイムライン、のタブに追加して「関連記事」を追加したい
    • 想定：同じ tag のついた記事が一覧で表示される。

整備欲

• SCSS の整備

  • 変数化を上手くやればダークテーマを作成しやすくなりそう

• api の排除

  • https://github.com/weseek/growi/issues/1594 external_link
  • REST ful な api にしたい

• Config 周りにおける Suspense を使用した UI 向上

Supense メモ

import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import loggerFactory from '@alias/logger';
import { toastError } from '../../../util/apiNotification';

import { createSubscribedElement } from '../../UnstatedUtils';

import AppContainer from '../../../services/AppContainer';
import LineBreakForm from './LineBreakForm';
import PresentationForm from './PresentationForm';
import XssForm from './XssForm';
import AdminMarkDownContainer from '../../../services/AdminMarkDownContainer';

const logger = loggerFactory('growi:MarkDown');
let setting;

const MarkdownSetting = (props) => {
  const { t, adminMarkDownContainer } = props;

  if (setting == null) {

    throw new Promise(async(resolve) => {
      try {
        await adminMarkDownContainer.retrieveMarkdownData();
      }
      catch (err) {
        toastError(err);
        adminMarkDownContainer.setState({ retrieveError: err });
        logger.error(err);
      }
      setting = 'Done';
      resolve();

    });
  }

  // 初回renderには以下はreturnされない。
  return (
    <React.Fragment>
      {/* Line Break Setting */}
      <div className="row mb-5">
        <h2 className="border-bottom">{t('admin:markdown_setting.lineBreak_header')}</h2>
        <p className="well">{t('admin:markdown_setting.lineBreak_desc')}</p>
        <LineBreakForm />
      </div>

      {/* Presentation Setting */}
      <div className="row mb-5">
        <h2 className="border-bottom">{t('admin:markdown_setting.presentation_header')}</h2>
        <p className="well">{t('admin:markdown_setting.presentation_desc')}</p>
        <PresentationForm />
      </div>

      {/* XSS Setting */}
      <div className="row mb-5">
        <h2 className="border-bottom">{t('admin:markdown_setting.xss_header')}</h2>
        <p className="well">{t('admin:markdown_setting.xss_desc')}</p>
        <XssForm />
      </div>
    </React.Fragment>
  );
};

const MarkdownSettingSuspense = (props) => {
  return (
    <React.Suspense fallback={(<span>Loading...</span>)}>
      <MarkdownSettingWrapper {...props} />
    </React.Suspense>
  );
};

const MarkdownSettingWrapper = (props) => {
  return createSubscribedElement(MarkdownSetting, props, [AppContainer, AdminMarkDownContainer]);
};

MarkdownSetting.propTypes = {
  t: PropTypes.func.isRequired, // i18next
  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
  adminMarkDownContainer: PropTypes.instanceOf(AdminMarkDownContainer).isRequired,

};

export default withTranslation()(MarkdownSettingSuspense);