CommentLis.js
import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import palette from '../../styles/lib/palette'
import Button from '../common/Button';
/**
* 회원가입 또는 로그인 폼을 보여줍니다.
*/
const CommentListBlock = styled.div`
// display:flex;
// justify-content:space-evenly;
h3 {
margin: 0;
color: ${palette.gray[8]};
margin-bottom: 1rem;
}
`;
const CommentCard = styled.div`
width: 40%;
height:150px;
background:#fff;
box-shadow: 0px 14px 26px -11px #000;
text-align:left;
padding: 1rem;
p {
display:flex;
justify-content:space-between;
span {
color: ${palette.gray[5]};
}
}
`;
/**
* 스타일링된 input
*/
const StyledInput = styled.input`
font-size: 1rem;
border: none;
border-bottom: 1px solid ${palette.gray[5]};
padding-bottom: 0.5rem;
outline: none;
width: 100%;
&:focus {
color: $oc-teal-7;
border-bottom: 1px solid ${palette.gray[7]};
}
& + & {
margin-top: 1rem;
}
`;
const ButtonWithMarginTop = styled(Button)`
margin-top: 1rem;
`;
/**
* 에러를 보여줍니다
*/
const ErrorMessage = styled.div`
color: red;
text-align: center;
font-size: 0.875rem;
margin-top: 1rem;
`;
// const CommentItem = styled.div`
// `
const CommentItem = ({ comment }) => {
const { publishedDate, user, body, _id } = comment;
return (
<div>
<h2>
{/* <Link to={`/@${user.username}/${_id}`}>{title}</Link> */}
</h2>
{/* // username={user.username}
// publishedDate={new Date(publishedDate)} */}
{/* <Tags tags={tags} /> */}
<p>{body}</p>
</div>
)
}
const CommentList = ({ comments, error,loading, comment }) => {
// if (error) {
// return <CommentListBlock>에러가 발생했습니다.</CommentListBlock>;
// }
// const { body} = comment;
return (
<CommentListBlock>
{/* <h2>댓글</h2> */}
{!loading && comments && (
<div>
{comments.map(comment => (
<CommentItem comment={comment} key={comment.comments}/>
))}
</div>
)}
{/* map of null 은 위의 loading 조건식이 필요함. */}
</CommentListBlock>
);
};
export default CommentList;
CommentListContainer.js
import React, { useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import CommentList from '../../components/comments/CommentList';
import { listComments } from '../../modules/comments';
const CommentListContainer = ({ location, match }) => {
const dispatch = useDispatch();
const { comments, error, loading, user } = useSelector(
({ comments, loading, user }) => ({
comments: comments.comments,
error: comments.error,
loading: loading['comments/LIST_COMMNTS'],
user: user.user,
}),
);
useEffect(() => {
dispatch(listComments({ body, username }));
}, [dispatch ]);
return (
<CommentList
loading={loading}
error={error}
comments={comments}
showWriteButton={user}
/>
);
};
export default withRouter(CommentListContainer);
// const fetchData = async () => {
// try {
// const response = await Axios.get(
// `http://localhost:4000/api/comment/`,
// );
// setComments(response.data.comments);
// } catch (e) {
// console.log(e);
// };
// };
// fetchData()
// }, []);lib/api/comment.js
iimport client from './client';
export const write = ({ body }) =>
client.post('/api/comment/write', { body });
export const listComments = ({ body, id }) => {
// const queryString = qs.stringify({
client.post('/api/comment/listComments', { body, id , });
};
createRequestSage.js
import { call, put } from 'redux-saga/effects';
import { startLoading, finishLoading } from '../modules/loading';
export const createRequestActionTypes = type => {
const SUCCESS = `${type}_SUCCESS`;
const FAILURE = `${type}_FAILURE`;
return [type, SUCCESS, FAILURE];
};
export default function createRequestSaga(type, request) {
const SUCCESS = `${type}_SUCCESS`;
const FAILURE = `${type}_FAILURE`;
return function*(action) {
yield put(startLoading(type)); // 로딩 시작
try {
const response = yield call(request, action.payload);
yield put({
type: SUCCESS,
payload: response.data
});
} catch (e) {
yield put({
type: FAILURE,
payload: e,
error: true
});
}
yield put(finishLoading(type)); // 로딩 끝
};
}
현재 포스트맨으로 서버에 요청했을땐 JSON형식으로 잘가져와지는데
VIEW에서 댓글 리스트를 뿌리질 못하네요.. 제가 봤을때는 컨테이너에 문제가 있는거같은데
뭐가 문제인지 모르겠습니다 ..
