Basic dashboard components (#562)

* Case sensitive renaming

* Update `cvat-js` lib.

* Add `.env` file

* Add basic redux capabilities

* Remove `setTimeout` as it was fixes in `cvat-js`

* Remove redundant state field

cvat-ui/.env

@@ -0,0 +1,8 @@
+REACT_APP_VERSION=${npm_package_version}
+REACT_APP_API_PROTOCOL=http
+REACT_APP_API_HOST=localhost
+REACT_APP_API_PORT=7000
+REACT_APP_API_HOST_URL=${REACT_APP_API_PROTOCOL}://${REACT_APP_API_HOST}:${REACT_APP_API_PORT}
+REACT_APP_API_FULL_URL=${REACT_APP_API_PROTOCOL}://${REACT_APP_API_HOST}:${REACT_APP_API_PORT}/api/v1
+REACT_APP_LOGIN=admin
+REACT_APP_PASSWORD=admin

cvat-ui/package.json

@@ -8,6 +8,7 @@
     "@types/node": "^12.0.3",
     "@types/react": "16.8.19",
     "@types/react-dom": "16.8.4",
+    "@types/react-redux": "^7.1.1",
     "@types/react-router-dom": "^4.3.4",
     "antd": "^3.19.1",
     "babel-plugin-import": "^1.11.2",
@@ -18,8 +19,11 @@
     "react": "^16.8.6",
     "react-app-rewired": "^2.1.3",
     "react-dom": "^16.8.6",
+    "react-redux": "^7.1.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
+    "redux": "^4.0.3",
+    "redux-thunk": "^2.3.0",
     "source-map-explorer": "^1.8.0",
     "typescript": "3.4.5"
   },

cvat-ui/src/actions/authentication-action.ts

@@ -0,0 +1,13 @@
+export const loginAction = () => (dispatch: any) => {
+  dispatch({
+    type: 'LOGIN',
+    payload: true,
+  })
+}
+
+export const logoutAction = () => (dispatch: any) => {
+  dispatch({
+    type: 'LOGOUT',
+    payload: false,
+  })
+}

cvat-ui/src/components/app/App.tsx

@@ -1,46 +0,0 @@
-import React, { Component } from 'react';
-import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
-
-import Dashboard from '../dashboard/dashboard';
-
-import './app.scss';
-
-declare const window: any;
-
-interface AppState {
-  isLoggedIn: boolean;
-}
-
-class App extends Component<any, AppState> {
-  constructor(props: any) {
-    super(props);
-
-    this.state = {
-      isLoggedIn: false
-    };
-  }
-
-  componentDidMount() {
-    window.cvat.server.login('admin', 'admin').then(
-      (_response: any) => {
-        this.setState({ isLoggedIn: true });
-      },
-      (_error: any) => {
-        this.setState({ isLoggedIn: false });
-      }
-    );
-  }
-
-  render() {
-    return(
-      <Router>
-        <div>
-          <Redirect from="/" to="dashboard" />
-          <Route path="/dashboard" component={ Dashboard } />
-        </div>
-      </Router>
-    );
-  }
-}
-
-export default App;

cvat-ui/src/components/app/app.tsx

@@ -0,0 +1,46 @@
+import React, { PureComponent } from 'react';
+import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+import Dashboard from '../dashboard/dashboard';
+
+import { loginAction, logoutAction } from '../../actions/authentication-action';
+
+import './app.scss';
+
+declare const window: any;
+
+const mapDispatchToProps = (dispatch: any) => ({
+  login: () => { dispatch(loginAction()) },
+  logout: () => { dispatch(logoutAction()) },
+})
+
+const mapStateToProps = (state: any) => ({
+  ...state.authenticateReducer,
+})
+
+class App extends PureComponent<any, any> {
+  componentDidMount() {
+    window.cvat.server.login(process.env.REACT_APP_LOGIN, process.env.REACT_APP_PASSWORD).then(
+      (_response: any) => {
+        this.props.login();
+      },
+      (_error: any) => {
+        this.props.logout();
+      }
+    );
+  }
+
+  render() {
+    return(
+      <Router>
+        <div>
+          <Redirect from="/" to="dashboard" />
+          <Route path="/dashboard" component={ Dashboard } />
+        </div>
+      </Router>
+    );
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);

cvat-ui/src/components/dashboard/content/dashboard-content.tsx

@@ -13,16 +13,16 @@ interface DashboardContentAction {
 }
 
 class DashboardContent extends Component<any, any> {
-  hostUrl: string;
+  hostUrl: string | undefined;
-  apiUrl: string;
+  apiUrl: string | undefined;
   actions: DashboardContentAction[];
 
   constructor(props: any) {
     super(props);
 
     this.state = {};
-    this.hostUrl = 'http://localhost:7000';
+    this.hostUrl = process.env.REACT_APP_API_HOST_URL;
-    this.apiUrl = 'http://localhost:7000/api/v1';
+    this.apiUrl = process.env.REACT_APP_API_FULL_URL;
 
     this.actions = [
       // {

cvat-ui/src/components/dashboard/dashboard.tsx

@@ -10,14 +10,13 @@ import './dashboard.scss';
 
 interface DashboardState {
   tasks: [];
-  tasksCount: number;
 }
 
 class Dashboard extends Component<any, DashboardState> {
   constructor(props: any) {
     super(props);
 
-    this.state = { tasks: [], tasksCount: 0 };
+    this.state = { tasks: [] };
   }
 
   componentDidMount() {
@@ -29,7 +28,7 @@ class Dashboard extends Component<any, DashboardState> {
       <Layout>
         <DashboardHeader onSearch={ this.getTasks } />
         <DashboardContent tasks={ this.state.tasks } deleteTask={ this.deleteTask } />
-        <DashboardFooter tasksCount={ this.state.tasksCount } onPageChange={ this.onPageChange } />
+        <DashboardFooter tasksCount={ (this.state.tasks as any)['count'] } onPageChange={ this.onPageChange } />
       </Layout>
     );
   }
@@ -41,7 +40,7 @@ class Dashboard extends Component<any, DashboardState> {
 
     (window as any).cvat.tasks.get(query ? queryObject : {}).then(
       (tasks: any) => {
-        this.setState({ tasks, tasksCount: tasks.count });
+        this.setState({ tasks });
       },
       (error: any) => {
         console.log(error);
@@ -63,13 +62,7 @@ class Dashboard extends Component<any, DashboardState> {
   private deleteTask = (task: any) => {
     task.delete().then(
       (_deleted: any) => {
-        setTimeout(() => {
+        this.getTasks();
-
-          this.getTasks();
-        }, 1000);
-        // const tasks = this.state.tasks.filter((taskToDelete: any) => taskToDelete.id !== task.id) as any;
-
-        // this.setState({ tasks, tasksCount: this.state.tasksCount - 1 });
       },
       (error: any) => {
         console.log(error);

cvat-ui/src/components/dashboard/header/dashboard-header.tsx

@@ -15,14 +15,14 @@ interface DashboardHeaderAction {
 
 class DashboardHeader extends Component<any, any> {
   actions: DashboardHeaderAction[];
-  hostUrl: string;
+  hostUrl: string | undefined;
 
   constructor(props: any) {
     super(props);
 
     this.state = {};
 
-    this.hostUrl = 'http://localhost:7000';
+    this.hostUrl = process.env.REACT_APP_API_HOST_URL;
 
     this.actions = [
       // {

cvat-ui/src/index.tsx

@@ -1,12 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux'
+
+import configureStore from './store';
 
 import * as serviceWorker from './serviceWorker';
 
 import './index.scss';
 import App from './components/app/app';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <Provider store={ configureStore() }>
+    <App />
+  </Provider>,
+  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.

cvat-ui/src/reducers/authenticate-reducer.ts

@@ -0,0 +1,10 @@
+export default (state = {}, action: any) => {
+  switch (action.type) {
+    case 'LOGIN':
+      return { ...state, isLoggedIn: action.payload };
+    case 'LOGOUT':
+      return { ...state, isLoggedIn: action.payload };
+    default:
+      return state;
+  }
+}

cvat-ui/src/reducers/root-reducer.ts

@@ -0,0 +1,7 @@
+import { combineReducers } from 'redux';
+
+import authenticationReducer from './authenticate-reducer';
+
+export default combineReducers({
+  authenticationReducer,
+});

cvat-ui/src/store.ts

@@ -0,0 +1,19 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunk from 'redux-thunk';
+
+import rootReducer from './reducers/root-reducer';
+
+export default function configureStore(initialState = {}) {
+  return createStore(
+    rootReducer,
+    initialState,
+    compose(
+      applyMiddleware(thunk),
+      (window as any).__REDUX_DEVTOOLS_EXTENSION__
+        ?
+      (window as any).__REDUX_DEVTOOLS_EXTENSION__({ trace: true })
+        :
+      (f: any) => f
+    )
+  );
+}