edit and delete links added to injuryInfo, cancel button to addInjury…

…, styling
b-bly · Feb 10, 2018 · e859e82 · e859e82
1 parent 7ba0723
commit e859e82
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 10 deletions.
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,7 @@
+a { 
+  cursor: pointer; 
+}
+
 body {
   margin: 0;
   padding: 0;

diff --git a/src/scenes/injury-list/add-injury-form.js b/src/scenes/injury-list/add-injury-form.js
@@ -49,6 +49,14 @@ class AddInjuryForm extends Component {
 			description: this.state.description
 		})
 	}
+
+	cancel() {
+		this.setState({
+			redirectTo: '/injury-list',
+			title: '',
+			description: ''
+		})
+	}
 	render() {
 		//const user = this.props.user;
 		console.log('signup rendered');
@@ -91,7 +99,11 @@ class AddInjuryForm extends Component {
 								</div>
 							</div>
 							<div className="form-group ">
-								<div className="col-7"></div>
+								<div className="col-6"></div>
+								<button className="btn col-1"
+								onClick={this.cancel}
+								>Cancel </button>
+								&nbsp;
 								<button
 									className="btn btn-primary col-1 col-mr-auto"
 									type="submit">Submit</button>

diff --git a/src/scenes/injury-list/index.js b/src/scenes/injury-list/index.js
@@ -6,6 +6,8 @@ import getInjuryList from '../../actions/getInjuryList';
 import { Link } from 'react-router-dom';
 //COMPONENTS
 //import AddInjuryForm from './add-injury-form';
+//STYLES
+import './styles.css';
 
 class InjuryList extends Component {
     constructor(props) {
@@ -19,21 +21,29 @@ class InjuryList extends Component {
         console.log('injury list props: ');
         console.log(this.props);
         const injuryList = this.props.injuryList.map((titleObj, i) =>
-            <li key={i.toString()}> {titleObj.title} </li>
+            <div key={i.toString()}>
+                <li> {titleObj.title} </li>
+                {/* to do: only show edit/delete if user = current user */}
+                <a className="list-links">edit</a> <a className="list-links">delete</a>
+            </div>
         );
-    //     const injuryListStatic = [{title: 'high hamstring tendonopathy'}, {title: 'lower back pain'}, {title: 'iliotibial band syndrome'}, {title: 'medial epicondolitis'}];
-    //     const injuryList = injuryListStatic.map((titleObj, i) =>
-    //     <li key={i.toString()}> {titleObj.title} </li>
-    // );
+        //     const injuryListStatic = [{title: 'high hamstring tendonopathy'}, {title: 'lower back pain'}, {title: 'iliotibial band syndrome'}, {title: 'medial epicondolitis'}];
+        //     const injuryList = injuryListStatic.map((titleObj, i) =>
+        //     <li key={i.toString()}> {titleObj.title} </li>
+        // );
         return (
             <div>
-                <p>Injury List</p>
+                <div className="center container">
+                    <div className="col-2 list-title"><h3>Injury List</h3></div>
+                    <Link to='/add-injury' className="btn col-1 list-title">Add injury</Link>
+                </div>
+                {/* search box, add injury  */}
                 <ol>
                     {injuryList}
-                </ol>              
+                </ol>
                 <Link to='/injury-info'>Injury Info</Link> <br></br>
-                <Link to='/add-injury'>Add injury</Link>
-                
+
+
             </div>
         );
     }

diff --git a/src/scenes/injury-list/styles.css b/src/scenes/injury-list/styles.css
@@ -0,0 +1,17 @@
+.list-links {
+    font-size: .8em;
+}
+
+.center {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+    margin-top: 10px;
+}
+
+.list-title {
+    align-items: center;
+    height: 35px;
+    margin-top: auto;
+}