Adding a dashboard feature (#7)

package.json

@@ -8,6 +8,8 @@
     "@material-ui/core": "^3.9.1",
     "@material-ui/icons": "^3.0.2",
     "@svgr/webpack": "2.4.1",
+    "@types/react-copy-to-clipboard": "^4.2.6",
+    "@types/react-select": "^2.0.13",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
     "babel-jest": "23.6.0",
@@ -47,13 +49,15 @@
     "postcss-preset-env": "6.0.6",
     "postcss-safe-parser": "4.0.1",
     "query-string": "^6.2.0",
-    "react": "^16.6.3",
+    "react": "^16.8.3",
     "react-app-polyfill": "^0.1.1",
     "react-autobind": "^1.0.6",
     "react-chartjs-2": "^2.7.4",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-dev-utils": "^6.0.1",
     "react-dom": "^16.6.3",
     "react-router-dom": "^4.3.1",
+    "react-select": "^2.4.1",
     "request": "^2.88.0",
     "request-promise": "^4.2.2",
     "resolve": "1.8.1",
@@ -87,7 +91,7 @@
     "@types/lodash": "^4.14.118",
     "@types/node": "^10.12.10",
     "@types/query-string": "^6.1.1",
-    "@types/react": "^16.7.7",
+    "@types/react": "^16.8.4",
     "@types/react-chartjs-2": "^2.5.7",
     "@types/react-dom": "^16.0.11",
     "@types/react-router-dom": "^4.3.1",

src/api.tsx

@@ -1,4 +1,4 @@
-import { ItemData, ServerData, DataPoint, RangeData } from './item-data';
+import { ItemData, ServerData, DataPoint, RangeData, NameData } from './item-data';
 
 const request = require('request-promise');
 
@@ -99,6 +99,24 @@ export class API {
     });
   }
 
+  static getNames(completion: (names: NameData[]) => void) {
+    const promise = window.location.hostname === 'www.romexchange.com' ?
+      request({
+        uri: 'https://www.romexchange.com/items.json',
+        json: true
+      }) :
+      new Promise((resolve) => {
+        setTimeout(() => {
+          const mocknames = require('./mocknames.json');
+          resolve(mocknames);
+        }, 500);
+      });
+    promise.then((response: any) => {
+      const names = this.parseNamesJSON(response);
+      completion(names);
+    });
+  }
+
   private static parseItemsJSON(itemsJSON: []): ItemData[] {
     return itemsJSON.map((item: {}) => this.parseItemJSON(item));
   }
@@ -140,4 +158,15 @@ export class API {
       snap: dataPointJSON['snap']
     };
   }
+
+  private static parseNamesJSON(namesJSON: []): NameData[] {
+    return namesJSON.map((name: {}) => this.parseNameJSON(name));
+  }
+
+  private static parseNameJSON(nameJSON: {}): NameData {
+    return {
+      name: nameJSON['name'],
+      type: nameJSON['type']
+    };
+  }
 }

src/app.module.scss

@@ -1,4 +1,5 @@
 @import "index";
+@import "dashboard-modal";
 
 .app {
     margin-top: 72px;

src/app.tsx

@@ -9,13 +9,17 @@ import {
   Button,
   CircularProgress,
   FormControl,
+  IconButton,
   InputBase,
   InputLabel,
   Select,
   Toolbar,
-  MenuItem
+  MenuItem,
+  Tooltip,
+  Modal
 } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
+import DashboardIcon from '@material-ui/icons/Dashboard';
 import BookIcon from '@material-ui/icons/LocalLibraryOutlined';
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 
@@ -24,6 +28,7 @@ import { ItemChart } from './item-chart';
 import { ItemData } from './item-data';
 
 import styles from './app.module.scss';
+import DashboardModal from './dashboard-modal';
 
 const theme = createMuiTheme({
   palette: {
@@ -45,6 +50,7 @@ interface AppState {
   itemType: ItemType;
   sortOptions: SortOptions;
   loading: boolean;
+  openDashboardModal: boolean;
 }
 
 @observer
@@ -94,7 +100,8 @@ class App extends React.Component<any, AppState> {
         sort: Sort.Change,
         direction: Direction.Desc
       },
-      loading: false
+      loading: false,
+      openDashboardModal: false
     };
   }
 
@@ -205,6 +212,11 @@ class App extends React.Component<any, AppState> {
                 <MenuItem value={Sort.Diff+Direction.Desc}>SEA > Global</MenuItem>
               </Select>
             </FormControl>
+            <Tooltip title="Create Dashboard">
+              <IconButton aria-label="Create Dashboard" onClick={this.openDashboardModal}>
+                <DashboardIcon />
+              </IconButton>
+            </Tooltip>
           </Toolbar>
         </AppBar>
         <div className={styles["progress"]} hidden={!this.state.loading}>
@@ -240,6 +252,9 @@ class App extends React.Component<any, AppState> {
               API Docs
             </Button>
           </div>
+          <Modal open={this.state.openDashboardModal} onClose={this.closeDashboardModal}>
+            <DashboardModal />   
+          </Modal>
           {this.renderItemCharts()}
         </div>
       </MuiThemeProvider>
@@ -375,6 +390,14 @@ class App extends React.Component<any, AppState> {
     }
   }
 
+  private openDashboardModal() {
+    this.setState({ openDashboardModal: true });
+  }
+
+  private closeDashboardModal() {
+    this.setState({ openDashboardModal: false });
+  }
+
 }
 
 export default App;

src/dashboard-modal.scss

@@ -0,0 +1,48 @@
+@import "color";
+
+$input-width: 75%;
+
+.dashboard-modal {
+    background-color: whitesmoke;
+    position: fixed;
+    width: 50%;
+    min-width: 300px;
+    height: 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.name-select {
+    width: $input-width;
+    z-index: 2;
+}
+
+.create-dashboard-button {
+    margin-top: 15px;
+}
+
+.dashboard-url-input{
+    width: $input-width;
+}
+
+.dashboard-url {
+    color: #263238 !important;
+    border-color: #263238 !important;
+    border-width: 2px !important;
+}
+
+.dashboard-limit-warning {
+    color: $red;
+    width: 90%;
+    text-align: center;
+    font-size: small;
+}
+
+.copy-icon {
+    fill: #00838f;
+}