open modal blah blah

Monkeychip · May 10, 2019 · a213615 · a213615
1 parent ee58c7c
commit a213615
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 15 deletions.
diff --git a/src/Home/components/Modal.jsx b/src/Home/components/Modal.jsx
@@ -44,22 +44,21 @@ class SimpleModal extends React.Component {
   };
 
   handleClose = () => {
+    this.props.handleOpen(false);
     this.setState({ open: false });
   };
 
+  componentWillReceiveProps(nextProps){
+    if(nextProps.open !== this.props.open){
+        this.setState({ open : nextProps.open });
+    }
+  }
+
   render() {
     const { classes } = this.props;
-
+    console.log(this.state.open,'this.state.open in modal STATE')
     return (
       <div>
-        <div className="cta-buttons">
-          <button onClick={this.handleOpen} className="truth btn outline place-order">
-            <span className="fa fa-shopping-cart">Truth</span>
-          </button>
-          <button onClick={this.handleOpen} className="dare btn outline">
-            <span className="fa fa-shopping-cart">Dare</span>
-          </button>
-        </div>
         <Modal
           aria-labelledby="simple-modal-title"
           aria-describedby="simple-modal-description"

diff --git a/src/Home/components/SectionArea.jsx b/src/Home/components/SectionArea.jsx
@@ -22,7 +22,11 @@ class SectionArea extends React.Component {
   }
 
   openModal = () => {
-    console.log('meep')
+    this.props.handleOpen(true);
+  }
+
+  closeModal = () => {
+    this.props.handleOpen(false);
   }
 
   componentDidMount() {
@@ -33,11 +37,13 @@ class SectionArea extends React.Component {
     fetch('http://ron-swanson-quotes.herokuapp.com/v2/quotes/6')
       .then(response => response.json())
       .then(results => this.setState({ questions: results}))
+      // here filter using the this.props.truthOrDare results
   }
 
   render() {
     const { classes } = this.props;
     const { questions } = this.state;
+
   	return (
       <div>
         {questions.map((t,index) => (

diff --git a/src/Home/components/WholeSpinner.jsx b/src/Home/components/WholeSpinner.jsx
@@ -15,10 +15,36 @@ class WholeSpinner extends React.Component {
 
     this.state = { 
       degrees: 1800, // parent starts degrees at 1800
+      modalStatus: false, // keep modal closed for now
     }
     this.startSpinner = null;
   }
 
+  openModal = (status) => {
+    this.setState({
+      modalStatus: status
+    });
+  }
+
+  closeModal = (status) => {
+    this.setState({
+      modalStatus: status
+    });
+  }
+
+  setPropsToDare = () => {
+    this.setState(state => ({
+      truthOrDare: 'dare'
+    }));
+  }
+
+
+  setPropsToTruth = () => {
+    this.setState(state => ({
+      truthOrDare: 'truth'
+    }));
+  }
+
   startWheelSpin = () => {
     let newDegree = Math.floor(Math.random() * 3300);
     this.setState({ // sending state to child component SpinMe
@@ -31,17 +57,30 @@ class WholeSpinner extends React.Component {
       transform: `rotate(${this.state.degrees}deg)` ,
       transition: `all 6s cubic-bezier(0, .99, .44, .99)`,
     };
-
-    // const spinnerAreasArray = ['test1','test2','test3','test4','test5','test6']; 
-
+    console.log(this.state.modalStatus,"this.state.modalStatus in whole spinner")
   	return (
       <Fragment>
         <div id="wrapper">
-        <SimpleModalWrapped />
+        <div className="cta-buttons">
+          <button onClick={this.setPropsToTruth} className="truth btn outline place-order">
+            <span className="fa fa-shopping-cart">Truth</span>
+          </button>
+          <button onClick={this.setPropsToDare} className="dare btn outline">
+            <span className="fa fa-shopping-cart">Dare</span>
+          </button>
+        </div>
+        <SimpleModalWrapped
+          handleOpen={this.openModal}
+          open={this.state.modalStatus}
+          truthOrDare={this.state.truthOrDare}
+        />
         <SidePanel />
         <div id="wheel">
           <div id="innerWheel" style={styles}>
-              <SectionArea />
+              <SectionArea
+                handleOpen={this.openModal}
+                truthOrDare={this.state.truthOrDare}
+              />
           </div>
           <SpinMe 
             startSpinner={this.startWheelSpin}