function App(props) {

  //... do stuff
    
    return (
        // return a container with HeaderBar, ChannelList and ChatPane)
    )}

function ChannelNav(props) {  
  
  //Map (transform) an array of channel names into an array of <li> items
  
  return (
    // then return the li items inside of a <ul> wrapped in a <nav> element
  )}

function HeaderBar(props) {
 
  return (
    //a <header> element with the elements for the top header 
  )}

function ChatPane(props) {

  return(
    // take in an array of chat objects as a prop. filter that to reduce to the objects we want displayed, then 
    // sort the array to deceending order by datethen map the filtered array transforming into an array of <messages>
  )
}

function MessageItem(props) {
	// take in a messageObj as a prop, and decompose the needed fields (userName, userImage, text) into variables
	// to be used when creating the <message> element
    return (  
      // return a div that contains the image <img> and two paragraphs <p> along with a button <btn> with onClick()
	)
}

import React from 'react';
import ReactDOM from 'react-dom/client';

//css!
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';

import App from './components/App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

import React from 'react';

import { HeaderBar } from './HeaderBar.js';
import { ChannelList } from './ChannelNav.js';
import { ChatPane } from './ChatPane.js';
import { ComposeForm } from './ComposeForm';

//A component!
export default function App(props) {

  const channelList = [
    'general', 'random', 'dank-memes', 'channel-4', 'pet-pictures' ]
  const currentChannel = "general";

  return (
    <div className="container-fluid d-flex flex-column">
      <HeaderBar />
      <div className="row flex-grow-1">
        <div className="col-3">
          <ChannelList channels={channelList} currentChannel={currentChannel} />
        </div>
        <div className="col d-flex flex-column">
          <ChatPane currentChannel={currentChannel} />
          <ComposeForm />
        </div>
      </div>
    </div>
  );
}

function MyButton() {
  //A function that will be called when clicked 
  //The name is conventional, but arbitrary.
  //The callback will be passed the DOM event as usual
  const handleClick = function(event) {
    console.log("clicky clicky");
  }

  //make a button with an `onClick` attribute!
  //this "registers" the listener and sets the callback
  return <button onClick={handleClick}>Click me!</button>;
}

function MyButton(props) {
  //A function that will be called when clicked 
  //The name is conventional, but arbitrary.
  //The callback will be passed the DOM event as usual
  const handleClick = (event) => {
    console.log("clicky clicky");
  }

  //make a button with an `onClick` attribute!
  //this "registers" the listener and sets the callback
  return <button onClick={handleClick}>Click me!</button>;
}

//The current "state"
const state = {
  data: [ {}, {}, {} ],
  ...
}

  
//define presentation - lots of these kinds of functions
function renderData() {
  //render all the data based on the state variable
  //...
}

//define user interaction
button.addEventListener('click', function() {
  //MODIFY THE STATE
  state.data[i] = ...; 

  //CLEAR OLD VIEW AND RE-RENDER CONTENT
  document.querySelector('#main').innerHTML = '';
  renderData(); //RE-RENDER CONTENT    
})

//import the state hook function `useState()` to define state
import React, { useState } from 'react';

function CountingButton(props) {
  const [count, setCount] = useState(0);

  
  
 
  const handleClick = (event) => {
    setCount(count+1); //update the state to be a new value
                       //and RE-RENDER the Component!
  }

  return (
      <button onClick={handleClick}>Clicked {count} times</button>
  );
}

function CountingButton(props) {
  const [count, setCount] = useState(3) //initial value of 3

  console.log(count); //will have "current" value of state
                    //3 first render, 4 after clicking
  
  const handleClick = (event) => {
    setCount(4); //request to change `count` to 4 AND re-render!
    console.log(count); //will output "3"; 
                        //state has not changed yet!
  }  
 
  return (
    <button onClick={handleClick}>Clicked {count} times</button>
  );    
}

function CountingButton(props) {
  const [count, setCount] = useState(3) //initial value of 3

  console.log("DEBUG: count", count); //debug! variable here, 
                                      //after re-render
  
  
  const handleClick = (event) => {
    setCount(count + 1); //increment count AND re-render!
    //do not debug variable here!
  }  
  
  return (
    <button onClick={handleClick}>Clicked {count} times</button>
  );    
}

//Example from React documentation
function ExampleWithManyStates(props) {
  //Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  
  //...  
}

function TodoListWithError(props) {
  //a state value that is an array of objects
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

  const handleClick = (event) => {
    todos[0].text = "Fix bugs"; //modify the object 
                                //but don't make a new one
    setTodos(todos) //This won't work! Not "changing"
  }
  
  //...
}

function MyInput(props) {
  const [inputValue, setInputValue] = useState('')
  
  const handleChange = (event) => {
    let newValue = event.target.value
    setInputValue(newValue);
  }

  return (
    <div>
      <input type="text" onChange={handleChange} value={inputValue} />
      You typed: {value}
    </div>);
  )
}

function App(props) {
  const [data, setData] = useState([]);
  
  const addItemToData = (newItem) => {
    const newData = [...data, newItem]; //copy via spread
    setData(newData); //update state
  }

  return (
    <FruitButton callback={addItemToData} text={"Apple"} />
    <FruitButton callback={addItemToData} text={"Banana"} />
  )
}

function FruitButton(props) {
  //what to do when clicked
  const handleClick = (event) => {
    //call given callback, passing in given text
    props.callback(props.text);   
  }

  return (
    <button onClick={handleClick}>{props.text}</button>
  )
}

//Slide 35 - Elevate the Messages up to the App so both the ChatPane and the ComposeForm have access
import CHAT_HISTORY from '../data/chat_log.json';
export default function App(props) {

  const [chatMessages, setChatMessages] = useState(CHAT_HISTORY);

  const addMessage = (text) => {
    const newMessage = { "userId": "penguin", "userName": "Penguin", "userImg": "/img/Penguin.png", 
                        "text": text, "timestamp": Date.now(), "channel": "general"
    }
    const updateChatMessages = [...chatMessages, newMessage];
    setChatMessages(updateChatMessages);
  }

...
return (
    <div className="container-fluid d-flex flex-column">
      <HeaderBar />
      <div className="row flex-grow-1">
        <div className="col-3">
          <ChannelList channels={channelList} currentChannel={currentChannel} />
        </div>
        <div className="col d-flex flex-column">
          <ChatPane 
            currentChannel={currentChannel}
            chatMessages={chatMessages} />
          <ComposeForm 
          addMessageCallback={addMessage}/>
        </div>
      </div>
    </div>
  );
}

//Slide 35 - Elevate the Messages up to the App so both the ChatPand and the ComposeForm have access
export function ChatPane(props) {

// const [chatMessages, setChatMessages] = useState(CHAT_HISTORY);
  const currentChannel = props.currentChannel;

  const channelMessages = props.chatMessages.filter((msgObj) => {
    return msgObj.channel === currentChannel;
  })

  const messageItemArray = channelMessages.map((messageObj) => {
    const element = (
      <MessageItem messageData={messageObj} key={messageObj.timestamp} />
    )
    return element;
  })

...

return (
  <div className="scrollable-pane">
    <div className="pt-2 my-2">
      <button className="btn btn-outline-primary mb-3" onClick={handleClick}>
        Click me: {count}
      </button>
      <hr />

      {messageItemArray}
    </div>
  </div>
)
}