Flashcard-2.js

import React from 'react';

describe("MainPage", () => {
   
  const chapter = () => {
    title: "chapter 1", 
    text: ""
  }
  
  it("button clicks show correct panes", () => {
    const wrapper = Shallow<MainPage />
    const buttons = wrapper.find("Button")
    buttons.at(1).props().onClick()
    expect(wrapper.find("CardMaker").length).toBe(1)
    buttons.at(0).props().onClick()
    expect(wrapper.find("Edit").length).toBe(1))
                        
  })
  it("highlights row if line is clicked ", () => {
      // pass in chapter w/ given certain # of lines  
      const wrapper = Shallow<MainPage />
      wrapper.setState({pane: "Make Card"})
      const divs = wrappter.find("CardMaker").find("div") 
      const div = divs.at(1)
      div.props.onClick()
      expect(div.props().style.backgroundColor).toBe("lightGreen") // div background color to be highlighted 
      div.props.onClick() 
      expect(div.props().style.backgroundColor).toBe("white")
  })
  
  it("updates selected rows if line is clicked", () => {
    const wrapper = Shallow<MainPage />
    wrapper.setState({pane: "Make Card"})
    const divs = wrappter.find("CardMaker").find("div") 
    const div = divs.at(1)
    div.props.onClick()
    expect(wrapper.getState().newCard.selectedLines.has(1)).toBe(true)
    div.props.onClick()
    expect(wrapper.getState().newCard.selectedLines.has(1)).toBe(false)
  })
  it("", () => {
    
  })
})



// makes correct card 
// updates question after input 
// clears question and selectedLines after new card is made 
// calls saveCard when new card i made 

class MainPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      pane: "Edit",
      newCard: { question: '', selectedLines: new Set() }
    }
  }
  
  render() {
    const { pane, newCard } = this.state 
    const { chapter, saveCard } = this.props 
    const updateQuestion = (e) => { 
      newCard.question = e.target.value 
      this.setState({newCard})
    }
    const handleRowClick = (i) => { 
      if (newCard.selectedLines.has(i) {
         newCard.selectedLine.delete(i)
       } else {
         newCard.selectedLines.add(i)
       }
    }
    
    const makeNewCard = () => {
      // get the  highest number 
      const firstLine = Math.max(...newCard.selectedLines)
      const lastLine = Math.min(...newCard.selectedLines)
      const lines = chapter.lines.slice(firstLine, lastLine)
      const card = { question: newCard.question, lines, selectedLines: newCard.selectedLines }
      saveCard(card)
      const emptyCard = { question: '', selectedLines: new Set() } 
      this.setState({emptyCard})
    }
    
    const switchPane = (pane) => this.setState({pane: pane})
    
    function viewPane() {
      switch (pane) {
        case "Edit": return <Editor value={chapter.text} onSubmit={}/>
        case "Make Card": return <CardMaker onSubmit={makeNewCard} question={newCard.question} updateQuestion={updateQuestion} onClick={handleRowClick}/>
      }
    }
 
    <Button title="Edit" onClick={switchPane("Edit")}/>
    <Button title="Make Card" onClick={switchPane("Make Card")}/>
    {viewPane()}
    
  }
}

const Button = props => <button onClick={props.onClick}>{props.title}</button>

const Editor = props => (
  <form onSubmit={props.onSumbit}> 
  <button>Save</button>
  <textarea value={props.value}/>
  </form>
)

const CardMaker = props => (
  <React.Fragment>
  <form onSubmit={props.onSubmit}>
  <label>Question: </label>
  <input value={props.question} onChange={props.updateQuestion}/>
  <button>Save</button>
  </form>
  { props.lines.map((line, i) => <div><button style={{ backgroundColor: props.selectedLines.had(i) ? "lightGreen" : "white" : }}onClick={() => props.onClick(i)}>{line}</button>{line}</div> }
  </React.Fragment>
)