web: disable Twitter sharing feature

web/frontend/js/ui/AddRecordDialog.less

@@ -53,6 +53,14 @@
 :local(.shareOptions) {
     float: left;
     padding-top: 10px;
-    color: @color-text-dark;
+    color: @color-text-light;
     font-size: 13px;
+
+    label {
+        cursor: help;
+    }
+
+    svg {
+        margin-left: 4px;
+    }
 }

web/frontend/js/ui/AddRecordDialog.tsx

@@ -11,7 +11,7 @@ import Styles from './AddRecordDialog.less';
 import { getLastPublishTwitter, setLastPublishTwitter } from '../Prefs';
 import { CategoryDTO, RecordDTO, UserDTO, StatusType } from '../../../shared/types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
+import { faTimesCircle, faWarning } from '@fortawesome/free-solid-svg-icons';
 import { Rating } from './Rating';
 
 type CategorySelectProps = {
@@ -145,15 +145,16 @@ class AddRecord extends React.Component<AddRecordProps, AddRecordState> {
             </div>
           </form>
           <div className={Styles.shareOptions}>
-            <label>
+            <label
+              title="트위터 API 유료화로 공유 기능 제공을 중단합니다."
+              onClick={e => alert((e.target as any).title)}
+            >
               <input
                 type="checkbox"
-                checked={
-                  currentUser.is_twitter_connected === true && this.state.publishTwitter
-                }
-                onChange={this._onPublishTwitterChange}
+                disabled
               />
               {' 트위터에 공유'}
+              <FontAwesomeIcon icon={faWarning} />
             </label>
           </div>
           <button
@@ -171,7 +172,6 @@ class AddRecord extends React.Component<AddRecordProps, AddRecordState> {
 
   componentDidMount() {
     this._load();
-    this.setState({ publishTwitter: getLastPublishTwitter() });
   }
 
   _onRatingChange = (event: any, rating: number | null) => {

web/frontend/js/ui/PostComposer.less

@@ -1,3 +1,5 @@
+@import "../../less/variables.less";
+
 .mixin-btn-submit {
     background: #4bb000;
     color: #fff;
@@ -47,7 +49,16 @@
     padding-top: 0.5em;
 
     label {
-        margin-right: 0.5em;
+        margin-right: 1em;
         font-size: 14px;
     }
 }
+
+:local(.disabledLabel) {
+    color: @color-text-light;
+    cursor: help;
+
+    svg {
+        margin-left: 4px;
+    }
+}

web/frontend/js/ui/PostComposer.tsx

@@ -2,9 +2,10 @@ import * as React from 'react';
 import * as util from '../util';
 import { StatusInput } from './StatusInput';
 import Styles from './PostComposer.less';
-import { getLastPublishTwitter } from '../Prefs';
 import { RecordDTO, UserDTO } from '../../../shared/types_generated';
 import { LegacyStatusType } from '../../../shared/types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faWarning } from '@fortawesome/free-solid-svg-icons';
 
 export type PostComposerProps = {
   record: RecordDTO;
@@ -32,12 +33,8 @@ export class PostComposer extends React.Component<PostComposerProps> {
     containsSpoiler: false,
   };
 
-  componentDidMount() {
-    this.setState({ publishTwitter: getLastPublishTwitter() });
-  }
-
   render() {
-    const { record, currentUser } = this.props;
+    const { record } = this.props;
     var currentStatus;
     if (record.status) {
       currentStatus = (
@@ -82,15 +79,17 @@ export class PostComposer extends React.Component<PostComposerProps> {
             />
             {' 내용 누설 포함'}
           </label>
-          <label>
+          <label
+            className={Styles.disabledLabel}
+            title="트위터 API 유료화로 공유 기능 제공을 중단합니다."
+            onClick={e => alert((e.target as any).title)}
+          >
             <input
               type="checkbox"
-              checked={
-                currentUser.is_twitter_connected ? this.state.publishTwitter : false
-              }
-              onChange={this._onPublishTwitterChange}
+              disabled
             />
             {' 트위터에 공유'}
+            <FontAwesomeIcon icon={faWarning} />
           </label>
           <button type="button" onClick={this._onSubmit}>
             기록 추가
@@ -112,16 +111,6 @@ export class PostComposer extends React.Component<PostComposerProps> {
     this.setState({ containsSpoiler: event.target.checked });
   };
 
-  _onPublishTwitterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (!this.props.currentUser.is_twitter_connected) {
-      this.props.onTwitterConnect().then(() => {
-        this.setState({ publishTwitter: true });
-      });
-    } else {
-      this.setState({ publishTwitter: event.target.checked });
-    }
-  };
-
   _onSubmit = (event: React.MouseEvent) => {
     event.preventDefault();
     if (this._submitting) return;