styling and stuff

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

Hide file tree

Showing 3 changed files with 26 additions and 30 deletions.
diff --git a/src/Home/components/Modal.jsx b/src/Home/components/Modal.jsx
@@ -32,6 +32,9 @@ const styles = theme => ({
     border: 0,
     color: 'white',
   },
+  title: {
+    paddingBottom: 19
+  }
 });
 
 class SimpleModal extends React.Component {
@@ -55,8 +58,7 @@ class SimpleModal extends React.Component {
   }
 
   render() {
-    const { classes } = this.props;
-    console.log(this.state.open,'this.state.open in modal STATE')
+    const { classes, questionList } = this.props;
     return (
       <div>
         <Modal
@@ -66,11 +68,11 @@ class SimpleModal extends React.Component {
           onClose={this.handleClose}
         >
           <div style={getModalStyle()} className={classes.paper}>
-            <Typography variant="h6" id="modal-title">
+            <Typography variant="h6" id="modal-title" className={classes.title}>
               Text in a modal
             </Typography>
             <Typography variant="subtitle1" id="simple-modal-description">
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+              {questionList[5]}
             </Typography>
             <div className="button-holder">
               <Button onClick={this.handleClose}>Pass</Button>

diff --git a/src/Home/components/SectionArea.jsx b/src/Home/components/SectionArea.jsx
@@ -17,40 +17,20 @@ const styles = theme => ({
 
 class SectionArea extends React.Component {
 
-  state = {
-    questions: [],
-  }
-
   openModal = () => {
     this.props.handleOpen(true);
   }
 
-  closeModal = () => {
-    this.props.handleOpen(false);
-  }
-
-  componentDidMount() {
-    this.getQuestions();
-  }
-
-  getQuestions = () => {
-    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;
-
+    const { classes, questionList } = this.props;
+    console.log(questionList,"quetions")
   	return (
       <div>
-        {questions.map((t,index) => (
+        {questionList.map((t,index) => (
           <div id={`section${index}`} key={t} className="sec" onClick={this.openModal}>
             <span className={classes.sectionText}>
               <Typography variant="h5" gutterBottom >
-                {t.substring(1,5)}
+                {t.substring(0,3)}
               </Typography>
             </span>
           </div>

diff --git a/src/Home/components/WholeSpinner.jsx b/src/Home/components/WholeSpinner.jsx
@@ -16,6 +16,7 @@ class WholeSpinner extends React.Component {
     this.state = { 
       degrees: 1800, // parent starts degrees at 1800
       modalStatus: false, // keep modal closed for now
+      questionList: [],
     }
     this.startSpinner = null;
   }
@@ -51,13 +52,24 @@ class WholeSpinner extends React.Component {
       degrees: newDegree,
     });
   }
-
+
+  getQuestions = () => {
+    fetch('http://ron-swanson-quotes.herokuapp.com/v2/quotes/6')
+      .then(response => response.json())
+      .then(results => this.setState({ questionList: results}))
+      // here filter using the this.props.truthOrDare results
+  }
+
+  componentDidMount() {
+    this.getQuestions();
+  }
+
+
   render() {
     const styles = {
       transform: `rotate(${this.state.degrees}deg)` ,
       transition: `all 6s cubic-bezier(0, .99, .44, .99)`,
     };
-    console.log(this.state.modalStatus,"this.state.modalStatus in whole spinner")
   	return (
       <Fragment>
         <div id="wrapper">
@@ -73,13 +85,15 @@ class WholeSpinner extends React.Component {
           handleOpen={this.openModal}
           open={this.state.modalStatus}
           truthOrDare={this.state.truthOrDare}
+          questionList={this.state.questionList}
         />
         <SidePanel />
         <div id="wheel">
           <div id="innerWheel" style={styles}>
               <SectionArea
                 handleOpen={this.openModal}
                 truthOrDare={this.state.truthOrDare}
+                questionList={this.state.questionList}
               />
           </div>
           <SpinMe