added popup

src/components/captions/CaptionList.js

@@ -1,16 +1,18 @@
 import React from 'react'
 
 const CaptionList = props => {
-  const { captions } = props
+  const {togglePopup, captions} = props
   return (
     <tbody>
       {Object.keys(captions).map(key => {
         return captions[key].map(caption => {
           return (
             <tr key = {key+caption.text}
-              onClick={() =>
+              onClick={() => {
+                togglePopup({ nick: caption.nick, text: caption.text })
                 console.log({ nick: caption.nick, text: caption.text })
               }
+              }
             >
               <td>{caption.nick}</td>
               <td>{caption.text}</td>

src/components/captions/Captions.js

@@ -2,24 +2,94 @@ import React from 'react'
 import CaptionList from './CaptionList'
 import Table from 'react-bootstrap/Table'
 import {connect} from 'react-redux'
-const Captions = props => {
+import {Card, Form, Row, Col, Button} from 'react-bootstrap'
 
-  const captions = props.captions.all.find(captionSet=>captionSet.slug===props.match.params.slug)
-
-  if(!captions) return <div>No show with that id.</div>
+// const Popup = props => {
+//   return (
+//     <Card className="popup text-center" style={{ width: '18rem' }}>
+//       <Card.Img variant="top" src="/img/anarchybang.jpg" />
+//       <Card.Body>
+//         <Card.Title>Edit Comment</Card.Title>
+//         <Card.Text>{props.text ? props.text : 'no comment.'}
+//         </Card.Text>
+//         <Button variant="dark">Close</Button>
+//       </Card.Body>
+//     </Card>
+//   )
+// }
 
+const Popup = props => {
   return (
-    <Table striped bordered hover>
-      <thead>
-        <tr>
-          <th>Nick</th>
-          <th>Comment</th>
-        </tr>
-      </thead>
-      <CaptionList captions={captions.captions} />
-    </Table>
+    <div className='popup text-center'>
+      <div className='popup_inner'>
+        <Card>
+          <Card.Body>
+            <Card.Title>{props.slug}</Card.Title>
+            <Form>
+              <Form.Group as={Row} controlId="nick">
+                <Form.Label column sm="4">
+                  Nick
+                </Form.Label>
+                <Col sm="6">
+                  <Form.Control plaintext readOnly defaultValue={props.nick} />
+                </Col>
+              </Form.Group>
+              <Form.Group controlId="comment">
+                <Form.Control as="textarea" rows="3" defaultValue={props.text}/>
+              </Form.Group>
+
+            </Form>
+          </Card.Body>
+          <Button variant="dark" onClick={props.closePopup}>Close</Button>
+        </Card>
+      </div>
+    </div>
   )
 }
+class Captions extends React.Component {
+  constructor() {
+    super()
+    this.state = {showPopup: false}
+    this.togglePopup = this.togglePopup.bind(this)
+  }
+
+  togglePopup(comment) {
+    console.log('toggling popup!')
+    this.setState({
+      showPopup: !this.state.showPopup,
+      nick: comment.nick,
+      text: comment.text
+
+    })
+  }
+
+
+  render() {
+    const captions = this.props.captions.all.find(captionSet=>captionSet.slug===this.props.match.params.slug)
+    if(!captions) return <div>No show with that id.</div>
+    return (
+      <div className="app">
+        {this.state.showPopup ?
+          <Popup
+            closePopup={this.togglePopup}
+            nick = {this.state.nick}
+            text = {this.state.text}
+          />
+          : null
+        }
+        <Table striped bordered hover>
+          <thead>
+            <tr>
+              <th>Nick</th>
+              <th>Comment</th>
+            </tr>
+          </thead>
+          <CaptionList togglePopup={this.togglePopup} captions={captions.captions} />
+        </Table>
+
+      </div>
+    )
+  }}
 
 const mapState = state => {
   return {
@@ -28,4 +98,6 @@ const mapState = state => {
   }
 }
 
+
+
 export default connect(mapState)(Captions)