Add new comments views to main and community pages. Fixes #480

1 files changed, 65 insertions, 0 deletions

diff --git a/ui/src/components/data-type-select.tsx b/ui/src/components/data-type-select.tsx
new file mode 100644
index 00000000..f2539c81
--- /dev/null
+++ b/ui/src/components/data-type-select.tsx
@@ -0,0 +1,65 @@
+import { Component, linkEvent } from 'inferno';
+import { DataType } from '../interfaces';
+
+import { i18n } from '../i18next';
+
+interface DataTypeSelectProps {
+  type_: DataType;
+  onChange?(val: DataType): any;
+}
+
+interface DataTypeSelectState {
+  type_: DataType;
+}
+
+export class DataTypeSelect extends Component<
+  DataTypeSelectProps,
+  DataTypeSelectState
+> {
+  private emptyState: DataTypeSelectState = {
+    type_: this.props.type_,
+  };
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = this.emptyState;
+  }
+
+  render() {
+    return (
+      <div class="btn-group btn-group-toggle">
+        <label
+          className={`pointer btn btn-sm btn-secondary 
+            ${this.state.type_ == DataType.Post && 'active'}
+          `}
+        >
+          <input
+            type="radio"
+            value={DataType.Post}
+            checked={this.state.type_ == DataType.Post}
+            onChange={linkEvent(this, this.handleTypeChange)}
+          />
+          {i18n.t('posts')}
+        </label>
+        <label
+          className={`pointer btn btn-sm btn-secondary ${this.state.type_ ==
+            DataType.Comment && 'active'}`}
+        >
+          <input
+            type="radio"
+            value={DataType.Comment}
+            checked={this.state.type_ == DataType.Comment}
+            onChange={linkEvent(this, this.handleTypeChange)}
+          />
+          {i18n.t('comments')}
+        </label>
+      </div>
+    );
+  }
+
+  handleTypeChange(i: DataTypeSelect, event: any) {
+    i.state.type_ = Number(event.target.value);
+    i.setState(i.state);
+    i.props.onChange(i.state.type_);
+  }
+}