added tabs and select option for move type when adding a move

Helen300 · Jun 3, 2020 · 83c1516 · 83c1516
1 parent 5ee6503
commit 83c1516
Show file tree

Hide file tree

Showing 11 changed files with 165 additions and 38 deletions.
diff --git a/bboyapp/__pycache__/models.cpython-38.pyc b/bboyapp/__pycache__/models.cpython-38.pyc
diff --git a/bboyapp/api/__pycache__/views.cpython-38.pyc b/bboyapp/api/__pycache__/views.cpython-38.pyc
diff --git a/bboyapp/migrations/__pycache__/0004_auto_20200530_1409.cpython-38.pyc b/bboyapp/migrations/__pycache__/0004_auto_20200530_1409.cpython-38.pyc
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -25,6 +26,13 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Bboy Gen</title>
+    <style>
+      div {
+        font-family: 'Montserrat', sans-serif;
+      }
+
+
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/Move.js b/src/components/Move.js
@@ -1,16 +1,18 @@
 import React from 'react';
 import { Card } from 'antd';
-import { CloseOutlined } from '@ant-design/icons'
+import { DeleteOutlined } from '@ant-design/icons'
 
+// what does the Meta do? 
 const { Meta } = Card;
 
 class Move extends React.Component {
 
-  render() {
-    return(
-		<Card hoverable style={{ width: 240 }} onClick={() => this.props.select_move(this.props.move_idx)}>
-	    <Meta title={<div>{this.props.move.name} <CloseOutlined onClick={() => this.props.handle_delete(this.props.move_idx)}/></div>} />
-	  	</Card> 
+
+	render() {
+		return(
+			<Card hoverable style={{ width: 300 }} onClick={() => this.props.select_move(this.props.move_idx)}>
+			<Meta title={<div>{this.props.move.name} <DeleteOutlined style={{ float: 'right' }} onClick={() => this.props.handle_delete(this.props.move_idx)}/></div>} />
+	  		</Card> 
  	)}
 }
 

diff --git a/src/components/MoveDetail.js b/src/components/MoveDetail.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import axios from 'axios';
 import { connect } from 'react-redux';
-import { Card, Button } from 'antd';
 import { Input } from 'antd';
 
 const { TextArea } = Input;
 
-// Should get rid of this 
+
+// for all moves, there exists one moveDetail div that gets updated 
 class MoveDetail extends React.Component {
 
 	render() {
@@ -23,6 +22,7 @@ class MoveDetail extends React.Component {
 			return (
 				// since we need to return one div
 				<div>
+				<div style={{ backgroundColor: "#df7366", color: "white",  width:100, padding: 7}}>{this.props.move.name}</div>
 				<TextArea id="move-description" 
 						  rows={4} 
 						  value={this.props.move.description} 

diff --git a/src/components/MoveList.js b/src/components/MoveList.js
@@ -1,24 +1,78 @@
 import React from 'react';
-import axios from 'axios';
 import { connect } from 'react-redux';
-import { Row, Col } from 'antd';
 import Moves from './Moves';
 
+
 import 'antd/dist/antd.css';
 import { Input } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
+import { Select } from 'antd';
 
 const { Search } = Input;
+const { Option } = Select;
+
 
 // contains List of Moves and Form to add moves 
 
 class MoveList extends React.Component {
+	state = {
+		type: null,
+	}
+
+	onChange = (value) => {
+		this.setState({ type: value });
+		console.log(`selected ${value}`);
+		console.log(this);
+		console.log(this.state);
+		console.log(this.state.type);
+	}
+
+	onBlur = () => {
+	  console.log('blur');
+
+	}
+
+	onFocus = () => {
+	  console.log('focus');
+
+	}
+
+	onSearch = (val) => {
+	  console.log('search:', val);
+
+	}
+
+	addMove = (value) => {
+		this.props.addMove(value, this.state.type);
+	}
+
 
 	render() {
 		return (
 			<div>
 				<Moves data={this.props.moves_list} handle_delete={this.props.deleteMove} select_move={this.props.select_move}/>
-				<Search placeholder="Add Move" onSearch={value => this.props.addMove(value)} enterButton={<PlusOutlined />} />
+
+				  <Select
+				    showSearch
+				    style={{ width: 180, display:'inline-block' }}
+				    placeholder="Select Move Type"
+				    optionFilterProp="children"
+				    onChange={this.onChange}
+				    onFocus={this.onFocus}
+				    onBlur={this.onBlur}
+				    onSearch={this.onSearch}
+				    filterOption={(input, option) =>
+				      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+				    }
+				  >
+
+				    <Option value="toprock">Toprock</Option>
+				    <Option value="footwork">Footwork</Option>
+				    <Option value="power">Power</Option>
+				  </Select>
+
+		  		<Search style={{ width: 300, display:'inline-block' }} placeholder="Add Move" onSearch={this.addMove} enterButton={<PlusOutlined />} />
+
 			</div>
 		);
 	}

diff --git a/src/components/Moves.js b/src/components/Moves.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { List, Card } from 'antd';
+import { List } from 'antd';
 import Move from '../components/Move';
 
 // be wary of ` verus '

diff --git a/src/containers/Layout.js b/src/containers/Layout.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Layout, Menu, Breadcrumb } from 'antd';
+import { Layout, Menu } from 'antd';
 import { connect } from 'react-redux';
 import { Link, withRouter } from 'react-router-dom';
 import * as actions from '../store/actions/auth';

diff --git a/src/containers/MoveListView.js b/src/containers/MoveListView.js
@@ -1,24 +1,28 @@
 import React from 'react';
 import axios from 'axios';
 import { connect } from 'react-redux';
-import { Row, Col } from 'antd';
 import MoveDetail from '../components/MoveDetail';
 import MoveList from '../components/MoveList';
 
 import $ from 'jquery';
 
 import 'antd/dist/antd.css';
-import { Input } from 'antd';
+import { Row, Col } from 'antd';
+import { Tabs } from 'antd';
+// import { Input } from 'antd';
 // contains List of Moves and Form to add moves 
 
+const { TabPane } = Tabs;
+
 class MoveListView extends React.Component {
 	state = {
 		moves_list: [],
 		selected_move: null,
 		selected_move_idx: -1
 	}
 
-	addMove(newMove) {
+	addMove(newMove, type) {
+		console.log(type);
 		if (this.props.token !== null) {
 			axios.defaults.headers = {
 				"Content-Type": "application/json",
@@ -136,24 +140,83 @@ class MoveListView extends React.Component {
 
 	render() {
 		return (
-			<table>
-			  <tr>
-			    <td>
-			    	<MoveList 
-				    	addMove={this.addMove.bind(this)} 
-				    	deleteMove={this.deleteMove.bind(this)} 
-				    	moves_list={this.state.moves_list} 
-				    	select_move={this.select_move.bind(this)}
-			    	/>
-			    </td>
-			    <td>
-			    	<MoveDetail 
-				    	move={this.state.selected_move} 
-				    	updateDescription={this.updateDescription.bind(this)}
-			    	/>
-			    </td>
-			  </tr>
-			</table>
+			<Tabs defaultActiveKey="1" onChange={console.log(this.key)}>
+				<TabPane tab="All" key="1">
+		  			<Row>
+		  			<Col span={8}>
+			  			<MoveList 
+					    	addMove={this.addMove.bind(this)} 
+					    	deleteMove={this.deleteMove.bind(this)} 
+					    	moves_list={this.state.moves_list} 
+					    	select_move={this.select_move.bind(this)}
+				    	/>
+				    </Col>
+				   	<Col span={16}>
+					   	<MoveDetail 
+					    	move={this.state.selected_move} 
+					    	updateDescription={this.updateDescription.bind(this)}
+				    	/>
+			    	</Col>
+			    	</Row>
+			 	</TabPane>
+		  		<TabPane tab="Toprock" key="2">
+		  			<Row>
+		  			<Col span={8}>
+			  			<MoveList 
+					    	addMove={this.addMove.bind(this)} 
+					    	deleteMove={this.deleteMove.bind(this)} 
+					    	moves_list={this.state.moves_list} 
+					    	select_move={this.select_move.bind(this)}
+				    	/>
+				    </Col>
+				   	<Col span={16}>
+					   	<MoveDetail 
+					    	move={this.state.selected_move} 
+					    	updateDescription={this.updateDescription.bind(this)}
+				    	/>
+			    	</Col>
+			    	</Row>
+			 	</TabPane>
+
+		  		<TabPane tab="Footwork" key="3">
+		  			<Row>
+		  			<Col span={8}>
+			  			<MoveList 
+					    	addMove={this.addMove.bind(this)} 
+					    	deleteMove={this.deleteMove.bind(this)} 
+					    	moves_list={this.state.moves_list} 
+					    	select_move={this.select_move.bind(this)}
+				    	/>
+				    </Col>
+				   	<Col span={16}>
+					   	<MoveDetail 
+					    	move={this.state.selected_move} 
+					    	updateDescription={this.updateDescription.bind(this)}
+				    	/>
+			    	</Col>
+			    	</Row>
+			 	</TabPane>
+
+		  		<TabPane tab="Power" key="4">
+		  			<Row>
+		  			<Col span={8}>
+			  			<MoveList 
+					    	addMove={this.addMove.bind(this)} 
+					    	deleteMove={this.deleteMove.bind(this)} 
+					    	moves_list={this.state.moves_list} 
+					    	select_move={this.select_move.bind(this)}
+				    	/>
+				    </Col>
+				   	<Col span={16}>
+					   	<MoveDetail 
+					    	move={this.state.selected_move} 
+					    	updateDescription={this.updateDescription.bind(this)}
+				    	/>
+			    	</Col>
+			    	</Row>
+			 	</TabPane>
+			</Tabs>
+
 		);
 	}
 

diff --git a/src/store/actions/auth.js b/src/store/actions/auth.js
@@ -68,7 +68,7 @@ export const authLogin = (username, password) => {
 		.then(res => {
 			// we get a key back 
 			const token = res.data.key;
-			const expirationDate = new Date(new Date().getTime() + 3600 * 1000);
+			const expirationDate = new Date(new Date().getTime() + 3600 * 24000);
 			// these are packages in the browser already 
 			// can't just store it in the application, must store it in something that persists
 			localStorage.setItem('token', token);
@@ -105,7 +105,7 @@ export const authSignup = (username, email, password1, password2) => {
 		.then(res => {
 			// we get a key back 
 			const token = res.data.key;
-			const expirationDate = new Date(new Date().getTime() + 3600 * 1000);
+			const expirationDate = new Date(new Date().getTime() + 3600 * 24000);
 			// these are packages in the browser already 
 			// can't just store it in the application, must store it in something that persists
 			localStorage.setItem('token', token);
@@ -146,7 +146,7 @@ export const authCheckState = () => {
 			}
 			else {
 				dispatch(authSuccess(token));
-				dispatch(checkAuthTimeout((expirationDate.getTime() - new Date().getTime()) / 1000));
+				dispatch(checkAuthTimeout((expirationDate.getTime() - new Date().getTime()) / 24000));
 			}
 		}
 	}