UI done for video archiving

client/app/pages/video-archive/video-archive.scss

@@ -0,0 +1,14 @@
+.video-archive {
+  // custom card
+  &__card {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    padding: 0 0 10px;
+    max-width: initial;
+  }
+
+  &__text-input {
+    width: 100%;
+    max-width: 500px;
+  }
+}

client/app/pages/video-archive/video-archive.tsx

@@ -0,0 +1,106 @@
+import { DateTime } from 'luxon';
+import { inject, observer } from 'mobx-react';
+import React from 'react';
+import { EmbeddedYoutube } from '../../components';
+import { IVideoArchive, Permissions } from '../../model';
+import { ArchiveService } from '../../services/archive.service';
+import { AppStore } from '../../stores';
+import './video-archive.scss';
+
+interface IProps {
+  appStore: AppStore;
+}
+
+interface IState {
+  archives: IVideoArchive[];
+  url: string;
+  error?: string;
+}
+
+@inject('appStore')
+@observer
+export class VideoArchive extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
+    this.state = {
+      archives: [],
+      url: '',
+    };
+  }
+
+  componentDidMount() {
+    this.loadArchives();
+  }
+
+  async loadArchives() {
+    const archives = await ArchiveService.getVideoArchive();
+    if (archives) {
+      this.setState({
+        archives,
+      });
+    }
+  }
+
+  onSubmit = async (e: any) => {
+    e.preventDefault();
+    const { url } = this.state;
+    this.setState({ error: undefined });
+
+    try {
+      await ArchiveService.postVideoArchive({ url });
+    } catch (e) {
+      this.setState({ error: 'Invalid URL' });
+      return;
+    }
+
+    this.setState({ url: '' });
+    this.loadArchives();
+  };
+
+  renderForm() {
+    const { error, url } = this.state;
+    return (
+      <form className="flex flex--v-center" onSubmit={this.onSubmit}>
+        <input
+          className="input video-archive__text-input"
+          placeholder="Enter Youtube URL or ID..."
+          value={url}
+          onChange={e => this.setState({ url: e.target.value })}
+        />
+        <input type="submit" className="button button--primary" style={{ marginLeft: '10px' }} />
+        {error && (
+          <span className="color__red" style={{ marginLeft: '5px' }}>
+            {error}
+          </span>
+        )}
+      </form>
+    );
+  }
+
+  renderArchives() {
+    return this.state.archives.map((v, k) => (
+      <div key={k} className="card video-archive__card test">
+        <EmbeddedYoutube id={v.youtube_id} />
+        <div style={{ padding: '10px 10px 0' }}>
+          <h3 style={{ margin: '0 0 5px' }} className="ellipsis" title={v.title}>
+            {v.title}
+          </h3>
+          <div>
+            <span className="color__red">{v.uploaded_by}</span> -{' '}
+            <small>{DateTime.fromISO(v.created_at).toLocaleString()}</small>
+          </div>
+        </div>
+      </div>
+    ));
+  }
+
+  render() {
+    const { claims } = this.props.appStore;
+    return (
+      <div className="content">
+        {claims && claims.permissions > Permissions.User && this.renderForm()}
+        <div className="archive-grid">{this.renderArchives()}</div>
+      </div>
+    );
+  }
+}