Fixes to content of the react dashboard guide

Author: keydunov

Diff for: guides/react-dashboard/content/4_explore_page.md

@@ -5,9 +5,9 @@ order: 4
 
 On the Explore page, the user either creates a new chart or updates the existing one. To do so, the user should be able to select measures, dimensions, apply filters if needed, and select a chart type. We also need to provide a way to save a new chart to the dashboard or to update the existing one when editing.
 
-The GIF below shows how the page will look after the styling is applied.
+The image below shows how the page will look after the styling is applied.
 
-<GIF>
+![](/images/4-screenshot-1.png)
 
 Let’s break down the page into components. We need a modal window to let the user set or update the chart’s title—`<TitleModal />`. Next, we have a page’s header—`<PageHeader />`. Inside the page’s header to the right, we have a button that is used to either add a chart to the dashboard or update it. It is a regular `<Button />` component from antd’s UI kit. To the left—a page’s title, which either displays a chart’s title when editing or just says ‘Explore’ when we are building a new one. Let’s call it an `<ExploreTitle />` component.
 

Diff for: guides/react-dashboard/content/5_query_builder.md

@@ -8,7 +8,7 @@ component. Feel free to skip this part if you don't need to style it. Below, you
 can see the final design of the query builder, which we'll have by the end of this
 part.
 
-<QUERY BUILDER GIF>
+`video: /videos/5-video.mp4`
 
 The query builder component in the template, `<ExploreQueryBuilder />`, is built based on the
 `<QueryBuilder />` component from the `@cubejs-client/react` package. The `<QueryBuilder />` abstracts state management and API calls to Cube.js Backend. It uses render prop and doesn’t render anything itself, but calls the render function instead. This way it gives maximum flexibility to building a custom-tailored UI with a minimal API.
@@ -28,7 +28,6 @@ with the following.
 
 ```jsx
 import React from "react";
-import * as PropTypes from "prop-types";
 import { Row, Col, Card, Divider } from "antd";
 import styled from 'styled-components';
 import { QueryBuilder } from "@cubejs-client/react";
@@ -191,7 +190,6 @@ with the following.
 
 ```jsx
 import React from 'react';
-import * as PropTypes from 'prop-types';
 import MemberDropdown from './MemberDropdown';
 import RemoveButtonGroup from './RemoveButtonGroup';
 import MemberGroupTitle from './MemberGroupTitle';
@@ -237,7 +235,6 @@ following.
 
 ```jsx
 import React from 'react';
-import * as PropTypes from 'prop-types';
 import { Button, Dropdown } from 'antd';
 
 import PlusIcon from './PlusIcon';
@@ -326,11 +323,6 @@ const ButtonDropdown = ({ overlay, type, ...buttonProps }) => {
  )
 }
 
-ButtonDropdown.propTypes = {
-  overlay: PropTypes.object.isRequired,
-  type: PropTypes.oneOf(['new', 'icon', 'selected'])
-};
-
 export default ButtonDropdown;
 ```
 
@@ -345,7 +337,6 @@ with the following.
 
 ```jsx
 import React from 'react';
-import * as PropTypes from 'prop-types';
 import { Button } from 'antd';
 import removeButtonSvg from './remove-button.svg';
 
@@ -482,7 +473,6 @@ following.
 
 ```jsx
 import React from 'react';
-import * as PropTypes from 'prop-types';
 import {
   Menu
 } from 'antd';
@@ -593,7 +583,6 @@ Finally, update the `<FilterGroup />` component in `src/components/QueryBuilder/
 
 ```jsx
 import React from 'react';
-import * as PropTypes from 'prop-types';
 import { Select } from 'antd';
 import MemberDropdown from './MemberDropdown';
 import RemoveButtonGroup from './RemoveButtonGroup';
@@ -657,7 +646,6 @@ following.
 
 ```jsx
 import React from 'react';
-import * as PropTypes from 'prop-types';
 import {
   Menu, Icon, Dropdown
 } from 'antd';
@@ -689,7 +677,7 @@ const SelectChartType = ({ chartType, updateChartType }) => {
       {ChartTypes.map(m => (
         <Menu.Item key={m.title} onClick={() => updateChartType(m.name)}>
           <Icon type={m.icon} />
-          {m.title}
+          &nbsp;{m.title}
         </Menu.Item>
       ))}
     </Menu>
@@ -707,11 +695,6 @@ const SelectChartType = ({ chartType, updateChartType }) => {
   );
 };
 
-SelectChartType.propTypes = {
-  chartType: PropTypes.string.isRequired,
-  updateChartType: PropTypes.func.isRequired
-};
-
 export default SelectChartType;
 ```
 

Diff for: guides/react-dashboard/demo/schema/Orders.js

@@ -17,13 +17,6 @@ cube(`Orders`, {
       type: `count`,
     },
 
-    countCompleted: {
-      type: `count`,
-      filters: [{
-        sql: `${completed}`
-      }]
-    },
-
     totalAmount: {
       sql: `${amount}`,
       type: `sum`,