Blog App3 StreamList

0.앱 구조

blog-app

• api

  • db.json

• client

  • public

    • index.html

    • modal.html

  • src

    • actions

      • index.js

      • types.js

    • apis

      • streams.js

    • components

      • StreamCreate.js

      • StreamDelete.js

      • StreamEdit.js

      • StreamForm.js

      • StreamList.js

    • App.js

    • GoogleAuth.js

    • Header.js

    • Modal.js

  • reducers

    • authReducer.js

    • index.js

    • streamReducer.js

  • history.js

  • index.js

 

1.api/streams.js

npm i axios

import axios from "axios"

export default axios.create({
    baseURL: "http://localhost:3001"
})

axios의 baseURL을 설정하여 axios가 필요한 곳에 가져다 쓴다.

 

2.actions/index.js

import {
  SIGN_IN,
  SIGN_OUT,
  CREATE_STREAM,
  FETCH_STREAMS,
  FETCH_STREAM,
  DELETE_STREAM,
  EDIT_STREAM,
} from "./types";

import history from "../history";
import streams from "../apis/streams";

export const signIn = (userId) => {
  return {
    type: SIGN_IN,
    payload: userId,
  };
};

export const signOut = () => {
  return {
    type: SIGN_OUT,
  };
};

export const createStream = formValues => async (dispatch, getState) => {
    const { userId } = getState().auth;
    const response = await streams.post('/streams', { ...formValues, userId });
  
    dispatch({ type: CREATE_STREAM, payload: response.data });
    history.push('/');
  };
  
 export const fetchStreams = () => async dispatch => {
    const response = await streams.get('/streams');
  
    dispatch({ type: FETCH_STREAMS, payload: response.data });
  };

 export const fetchStream = id => async dispatch => {
    const response = await streams.get(`/streams/${id}`);
  
    dispatch({ type: FETCH_STREAM, payload: response.data });
  };
  

export const editStream = (id, formValues) => async (dispatch) => {
  const response = await streams.patch(`streams/${id}`, formValues);

  dispatch({ type: EDIT_STREAM, payload: response.data });
  history.push("/")
};

export const deleteStream = (id) => async (dispatch) => {
  await streams.delete(`/streams/${id}`);

  dispatch({ type: DELETE_STREAM, payload: id });
  history.push('/');
};

 

3.components/streams/streamList.js

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { fetchStreams } from '../../actions';

class StreamList extends React.Component {
  componentDidMount() {
    this.props.fetchStreams();
  }

  renderAdmin(stream) {
    if (stream.userId === this.props.currentUserId) {
      return (
        <div className="right floated content">
          <Link to={`/streams/edit/${stream.id}`} className="ui button primary">
            Edit
          </Link>
          <Link
            to={`/streams/delete/${stream.id}`}
            className="ui button negative"
          >
            Delete
          </Link>
        </div>
      );
    }
  }

  renderList() {
    return this.props.streams.map(stream => {
      return (
        <div className="item" key={stream.id}>
          {this.renderAdmin(stream)}
          <i className="large middle aligned icon camera" />
          <div className="content">
            <Link to={`/streams/${stream.id}`} className="header">
              {stream.title}
            </Link>
            <div className="description">{stream.description}</div>
          </div>
        </div>
      );
    });
  }

  renderCreate() {
    if (this.props.isSignedIn) {
      return (
        <div style={{ textAlign: 'right' }}>
          <Link to="/streams/new" className="ui button primary">
            Create Stream
          </Link>
        </div>
      );
    }
  }

  render() {
    return (
      <div>
        <h2>Streams</h2>
        <div className="ui celled list">{this.renderList()}</div>
        {this.renderCreate()}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    streams: Object.values(state.streams),
    currentUserId: state.auth.userId,
    isSignedIn: state.auth.isSignedIn
  };
};

export default connect(
  mapStateToProps,
  { fetchStreams }
)(StreamList);

                                                                 

                                                                                                      conditional

  renderAdmin(stream) {
    if (stream.userId === this.props.currentUserId) {
      return (
        <div className="right floated content">
          <Link to={`/streams/edit/${stream.id}`} className="ui button primary">
            Edit
          </Link>
          <Link
            to={`/streams/delete/${stream.id}`}
            className="ui button negative"
          >
            Delete
          </Link>
        </div>
      );
    }
  }

Store에 저장된 streams의 userId와 auth의 id가 같은지 비교하여

 

정보가 일치할 경우에만 edit과 delete를 보여준다.

 

streams의 userId는 createStreams에 의해 생성된다.

export const createStream = (formValues) => async (dispatch, getState) => {
  const { userId } = getState().auth;
  const response = await streams.post("/streams", { ...formValues, userId });

  dispatch({ type: CREATE_STREAM, payload: response.data });
  history.push("/");
};

 

list showing

  renderList() {
    return this.props.streams.map(stream => {
      return (
        <div className="item" key={stream.id}>
          {this.renderAdmin(stream)}
          <i className="large middle aligned icon camera" />
          <div className="content">
            <Link to={`/streams/${stream.id}`} className="header">
              {stream.title}
            </Link>
            <div className="description">{stream.description}</div>
          </div>
        </div>
      );
    });
  }

Store의 streams의 데이터를 토대로 사용자에게 보여줄 list를 만든다.