Create meme items

昨天把 API 裡的 meme names 都 render 出來之後，我們今天要把圖片呈現出來。
先在 component 底下，建立一個 MemeItem.js

import React, { Component } from 'react';


class MemeItem extends Component{
    render(){
      return (
        <div>
          <img
          src={this.props.meme.url}
          alt={this.props.meme.name}
          />
          <p>
            {this.props.meme.name}
          </p>
        </div>
      )
    }
}

export default MemeItem;

定義完 component 之後，記得要定義 props。回到 App.js，把剛剛製作的 component import 進來

import MemeItem from './MemeItem';

並在原本渲染呈現 meme names 的地方

<h4 key={index}>{meme.name}</h4>

轉換成 MemeItem component tag

<MemeItem key={index} meme={meme} />

現在可以看到所有大大小小的圖片都進到我的應用程式了。
先來改一下它的樣式
將將！！！好像有點樣子了！

Animating Memes Items 讓它動ㄘ動

要實作滑鼠移到圖片之上有動畫，可以透過 css 的 hover，不過，如果要從 React 實作的話，我們可以透過 setState 不斷地更新 hover 的狀態。在 MemeItem component 中設置 constructor

constructor(){
  super();

  this.state = {
    hovered: false
  }
}

將預設 hover 設為 false

<div 
  className="meme-item"
  onMouseEnter={() => this.setState({ hovered: true })}
  onMouseLeave={() => this.setState({ hovered: false })}
>

當滑鼠移入時 hovered 的狀態會改成 true
接著，我們要加入一些條件性的 css 類別，它會基於 state 去切換要套用的樣式。例如，當滑鼠移到圖片上的話就顯示文字，滑鼠移出便不要顯示文字。我們可以使用 ternary expression 來實作

將 {className={meme}}

<p className={ this.state.hovered ? "meme-txt" : "no-txt"}>

同樣地，圖片的類別名稱也可以改成

<img
      src={this.props.meme.url}
      alt={this.props.meme.name}
      className={ this.state.hovered ? "meme-img darken-img" : "meme-img"}     />
      

在 css 設定樣式⋯⋯

.meme-txt {
  width: 150px;
  text-align: center;
  position: absolute;
  border-radius: 5px;
  bottom: 0;
  animation-name: fade-in;
  animation-duration: 1s;
  font-size: 14px;
}

.no-txt {
  display: none;
}

.darken-img {
  background-color: gray;
  filter: brightness(10%);
  animation-name: darken;
  animation-duration: 1s;
}

@keyframes darken {
  from {filter: brightness(90%)};
  to {filter: brightness(10%)};
}

@keyframes fade-in {
  from { opacity: 0 }
  to { opacity: 40 }
}

做出了滑鼠移入，圖片變暗文字顯示的效果了！

客製化 meme form

在 App.js import 我們要用到的 Form 相關 component

import { From, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';

渲染我們的 form

<Form inline>
  <FormGroup>
    <ControlLabel>Top</ControlLabel>
    {' '}
    <FormControl type="text"></FormControl>
  </FormGroup>
  {' '}
  <FormGroup>
    <ControlLabel>Bottom</ControlLabel>
    {' '}
    <FormControl type="text"></FormControl>
  </FormGroup>
</Form>

做出輸入框了！

賦予輸入框生命

在 state 的地方，分別設定 text0 與 text1 作為上和下的輸入匡，再透過 onChange handler 綁定

<FormControl
    type="text"
    onChange = {event => this.setState({text0: event.target.value})}
>

綁定 input 值之後，我們要把取得的值顯示在圖片上

<MemeItem
    key={index}
    meme={meme}
    text0={this.state.text0}
    text1={this.state.text1} 
  />
  

進到 MemeItem.js 撰寫 postMeme function

  postMeme(){
console.log('this', this.props);

}

透過 onClick={() => this.postMeme() 綁定

接下來要製作 action creator，先進到 /action/index.js

 export const NEW_MEME = 'NEW_MEME';
 
 export function newMeme(meme){
  return{
    type: NEW_MEME,
    meme
  }
}