working on C & D for conversations

Author: internetroger

src/components/newConversationForm.js

@@ -1,19 +1,75 @@
 import React, {Component} from 'react';
+import {Link} from 'react-router-dom';
 
 class newConversationForm extends Component {
+    constructor(props){
+        super(props)
+        this.state = {
+        title: "",
+        topic: "",
+        // conversationIsPrivate: false
+        }
+    }   
+
+    // ADD PARTICIPANTS AS WELL
+
+    handleCreateConversation = () => {
+        console.log(this.state)
+        const conversation = this.state
+        console.log(JSON.stringify({conversation:conversation}))
+       fetch('http://localhost:3000/conversations', {
+           method: 'POST',
+           headers: {
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
+            "Content-type": "application/json"
+         },
+           body: JSON.stringify(conversation)
+         }).then(res => res.json())
+         .then(json => console.log(json))
+       //   grab json and set active conversation
+       // push history to messageContainer view
+         this.props.history.push('/home')
+       }
+
+       onAddConversation = (conversation) => {
+        console.log("ONADDCONVERSATION BEING CALLED")
+        console.log(conversation)
+      this.conversationChannel.send({
+        title: conversation.title,
+        topic: conversation.topic,
+        user_id: localStorage.getItem("token")
+      })
+    }
+
+    handleTitle = e => {
+        this.setState({title: e.target.value})
+    }
+
+    handleTopic = e => {
+        this.setState({topic: e.target.value})
+    }
+
+    // handleIsPrivate = e => {
+    //     this.setState(prevState => ({conversationIsPrivate: !prevState.conversationIsPrivate}))
+    // }
+
+    handleSubmit = e => {
+        e.preventDefault()
+        this.handleCreateConversation(this.state)
+    }
 
-        
     render() {
         return (
             <div>
                 <h3>Create a conversation</h3>
-                <form onSubmit={this.props.handleNewConversation}>
+                <Link to='/home'>Back</Link>
+                <form onSubmit={this.handleSubmit}>
                     <label>Title</label>
-                    <input></input><br></br>
+                    <input value={this.state.title} onChange={this.handleTitle}></input><br></br>
                     <label>Topic</label>
-                    <input></input><br></br>
-                    <label>Private?</label>
-                    <input type="radio"></input><br></br>
+                    <input value={this.state.topic} onChange={this.handleTopic}></input><br></br>
+                    {/* <label>Private?</label>
+                    <input type="radio" value={this.state.conversationIsPrivate} onChange={this.handleIsPrivate}></input><br></br> */}
                     <button type="submit">Submit</button>
                 </form>
             </div>

src/containers/Home.js

@@ -33,6 +33,7 @@ class Home extends Component {
             })
 
             this.cable = actioncable.createConsumer('ws://localhost:3000/cable')
+            this.cable.subscriptions.create({channel: "ConversationsChannel"})
             this.conversationChannels = []
             json.forEach(conversation => {
             this.conversationChannels[`${conversation.id}`] = this.cable.subscriptions.create({
@@ -55,8 +56,8 @@ class Home extends Component {
         this.setState({activeConversation: activeConversation})
       }
 
-      handleCreateConversation = conversation => {
-          console.log(conversation)
+      handleCreateConversation = (title, topic, isPrivate) => {
+         const conversation = {title: title, topic: topic, private: isPrivate}
         fetch('http://localhost:3000/conversations', {
             method: 'POST',
             headers: {
@@ -67,6 +68,7 @@ class Home extends Component {
           .then(json => console.log(json))
         //   grab json and set active conversation
         // push history to messageContainer view
+          this.props.history.push('/home')
         }
 
       handleDelete = conversation => {
@@ -120,7 +122,7 @@ class Home extends Component {
                 />
               {error ? this.props.history.push('/login') : null}
                     {activeConversation ?
-                    <MessageContainer activeConversation={activeConversation} onAddMessage={this.onAddMessage} />
+                    <MessageContainer activeConversation={activeConversation} onAddMessage={this.onAddMessage} handleDelete={this.handleDelete} />
                 : <Greeting />}
 
             </Fragment>

src/containers/conversationContainer.js

@@ -1,24 +1,24 @@
 import React from 'react';
 import Conversation from '../components/Conversation.js'
 
-const populateConversations = (conversations, handleClick) => {
+const populateConversations = (conversations, handleClick, handleDelete) => {
     return conversations.map( conversation => {
-        return <Conversation key={conversation.id} handleClick={handleClick} conversation={conversation} />
+        return <Conversation key={conversation.id} handleClick={handleClick} conversation={conversation} handleDelete={handleDelete} />
     })
 }
 
 const ConversationContainer = (props) => {
 
     const conversations = props.conversations
     const handleClick = props.handleClick
-
+    const handleDelete = props.handleDelete
     return (
         <div>
             {conversations ? 
                 <div>
                     <h4 className="conversation_header">All Conversations</h4>
                     <ul>
-                        {populateConversations(conversations, handleClick)}
+                        {populateConversations(conversations, handleClick, handleDelete)}
                     </ul>
                 </div>
             :

src/containers/navBar.js

@@ -23,7 +23,7 @@ class NavBar extends Component {
 
         <ul>
         <li onClick={(() => {localStorage.setItem("token", "")})}><Link to="login">Log Out</Link></li>
-          <li><Link to='/new' handleCreateConversation={handleCreateConversation}>Add Conversation</Link></li>
+          <li><Link to='/new' state={handleCreateConversation}>Add Conversation</Link></li>
           <ConversationContainer conversations={conversations} handleClick={handleActiveConversation}/>
         </ul>
       </div>

src/index.js

@@ -3,13 +3,10 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
-// import { ActionCableProvider } from 'react-actioncable-provider';
 
 ReactDOM.render(
   <React.StrictMode>
-    {/* <ActionCableProvider url="ws://localhost:3000/cable"> */}
       <App />
-    {/* </ ActionCableProvider> */}
   </React.StrictMode>,
   document.getElementById('root')
 );