Add dashboard component (#521)

Allow CORS from `http://localhost:3000`

Add dashboard component (#521)
Allow CORS from `http://localhost:3000`
9eabd173 · Artyom Zankevich · Nikita Manovich · 23d7c336 · 9eabd173 · 9eabd173
15 changed file
--- a/cvat-ui/package.json
+++ b/cvat-ui/package.json
 {
  "name": "cvat-ui",
  "version": "0.1.0",
+  "license": "MIT",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.13",
-    "@types/node": "12.0.3",
+    "@types/node": "^12.0.3",
    "@types/react": "16.8.19",
    "@types/react-dom": "16.8.4",
+    "@types/react-router-dom": "^4.3.4",
    "antd": "^3.19.1",
    "babel-plugin-import": "^1.11.2",
    "customize-cra": "^0.2.12",
@@ -15,6 +17,7 @@
    "react": "^16.8.6",
    "react-app-rewired": "^2.1.3",
    "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "source-map-explorer": "^1.8.0",
    "typescript": "3.4.5"

--- a/cvat-ui/public/cvat.min.js
+++ b/cvat-ui/public/cvat.min.js
--- a/cvat-ui/public/index.html
+++ b/cvat-ui/public/index.html
@@ -20,6 +20,8 @@
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
+
+    <script src="./cvat.min.js"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>

--- a/cvat-ui/src/App.css
+++ b/cvat-ui/src/App.css
-.App {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: stretch;
-}
--- a/cvat-ui/src/components/app/App.css
+++ b/cvat-ui/src/components/app/App.css
+.App {
+
+}
--- a/cvat-ui/src/App.test.tsx
+++ b/cvat-ui/src/App.test.tsx
--- a/cvat-ui/src/App.tsx
+++ b/cvat-ui/src/App.tsx
 import React, { Component } from 'react';
-import { Button } from 'antd';
+import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
+
+import Dashboard from '../dashboard/Dashboard';
+
 import './App.css';

 class App extends Component {
  render() {
-    return (
-      <div className="App">
-        <Button type="primary">Button</Button>
-      </div>
+    return(
+      <Router>
+        <div>
+          <Redirect from="/" to="dashboard" />
+          <Route path="/dashboard" component={Dashboard} />
+        </div>
+      </Router>
    );
  }
 }

--- a/cvat-ui/src/components/dashboard/Dashboard.css
+++ b/cvat-ui/src/components/dashboard/Dashboard.css
+.Dashboard {
+
+}
--- a/cvat-ui/src/components/dashboard/Dashboard.test.tsx
+++ b/cvat-ui/src/components/dashboard/Dashboard.test.tsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Dashboard from './Dashboard';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Dashboard />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
--- a/cvat-ui/src/components/dashboard/Dashboard.tsx
+++ b/cvat-ui/src/components/dashboard/Dashboard.tsx
+import React, { Component } from 'react';
+
+import './Dashboard.css';
+
+declare const window: any;
+
+class Dashboard extends Component {
+  constructor(props: any) {
+    super(props);
+  }
+  componentWillMount() {
+    window.cvat.server.login('admin', 'admin').then(
+      (response: any) => {
+        console.log(response);
+      },
+      (error: any) => {
+        console.log(error);
+      }
+    );
+
+    window.cvat.tasks.get().then(
+      (response: any) => {
+        console.log(response);
+      },
+      (error: any) => {
+        console.log(error);
+      }
+    );
+  }
+
+  render() {
+    return(
+      <div className="Dashboard">
+
+      </div>
+    );
+  }
+}
+
+export default Dashboard;
--- a/cvat-ui/src/index.tsx
+++ b/cvat-ui/src/index.tsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+
 import * as serviceWorker from './serviceWorker';

-ReactDOM.render(<App />, document.getElementById('root'));
+import './index.css';
+import App from './components/app/App';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);

 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

--- a/cvat-ui/src/utils/.gitkeep
+++ b/cvat-ui/src/utils/.gitkeep
--- a/cvat-ui/yarn.lock
+++ b/cvat-ui/yarn.lock
--- a/cvat/requirements/development.txt
+++ b/cvat/requirements/development.txt
@@ -12,3 +12,4 @@ wrapt==1.10.11
 django-extensions==2.0.6
 Werkzeug==0.14.1
 snakeviz==0.4.2
+django-cors-headers==3.0.2
--- a/cvat/settings/development.py
+++ b/cvat/settings/development.py
@@ -9,6 +9,15 @@ DEBUG = True

 INSTALLED_APPS += [
    'django_extensions',
+    'corsheaders',
+]
+
+MIDDLEWARE += [
+    'corsheaders.middleware.CorsMiddleware',
+]
+
+CORS_ORIGIN_WHITELIST = [
+    "http://localhost:3000",
 ]

 ALLOWED_HOSTS.append('testserver')