Merge pull request #132 from codestates-seb/client/fix/jwo0o0/answers

[FE] fix: Redux 적용해서 상태관리 추가

Author: JinhuiKim

client/.gitignore

@@ -1,5 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+../.idea/
 # dependencies
 /node_modules
 /.pnp

client/package.json

@@ -22,7 +22,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "GENERATE_SOURCEMAP=false react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

client/src/App.js

@@ -33,7 +33,10 @@ const App = () => {
         <Route path="/signup" element={<Signup />} />
         <Route path="/questions" element={<QuestionsPage />} />
         <Route path="/questions/ask" element={<AskQuestionPage />} />
-        <Route path="/questions/0" element={<QuestionDetailPage />} />
+        <Route
+          path="/questions/:question_id"
+          element={<QuestionDetailPage />}
+        />
         <Route path="/tags" element={<TagsPage />} />
         <Route path="/users" element={<UsersPage />} />
         <Route path="*" element={<NoMatch />} />

client/src/_actions/answer_action.js

@@ -0,0 +1,15 @@
+import axios from 'axios';
+import { QUESTIONS_URL } from '../api/requests';
+
+export const GET_ANSWERS = 'GET_ANSWERS';
+
+export const getAnswers = async (question_id) => {
+  const payload = await axios
+    .get(`${QUESTIONS_URL}/${question_id}/answers?page=1&size=30`)
+    .catch((error) => console.error(error));
+
+  return {
+    type: GET_ANSWERS,
+    payload: payload.data,
+  };
+};

client/src/_actions/question_action.js

@@ -0,0 +1,23 @@
+import axios from 'axios';
+import { QUESTIONS_URL } from '../api/requests';
+
+export const SET_QUESTION_ID = 'SET_QUESTION_ID';
+export const GET_QUESTION = 'GET_QUESTION';
+
+export const setQuestionId = (question_id) => {
+  return {
+    type: SET_QUESTION_ID,
+    payload: question_id,
+  };
+};
+
+export const getQuestion = async (question_id) => {
+  const payload = await axios
+    .get(`${QUESTIONS_URL}/${question_id}`)
+    .catch((error) => console.error(error));
+
+  return {
+    type: GET_QUESTION,
+    payload: payload.data,
+  };
+};

client/src/_reducers/answer_reducer.js

@@ -0,0 +1,13 @@
+import { GET_ANSWERS } from '../_actions/answer_action';
+
+const initialState = {
+  data: {},
+};
+export const answerReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case GET_ANSWERS:
+      return { ...state, data: action.payload };
+    default:
+      return state;
+  }
+};

client/src/_reducers/index.js

@@ -1,17 +1,19 @@
 import { combineReducers } from 'redux';
 
 import users from './users_reducer';
-import answer from './answer_reducer';
 import questions from './questions_reducer';
 import search from './search_reducer';
 import tags from './tags_reducer';
+import { questionReducer } from './question_reducer';
+import { answerReducer } from './answer_reducer';
 
 const rootReducer = combineReducers({
   users,
-  answer,
   questions,
   search,
   tags,
+  questionReducer,
+  answerReducer,
 });
 
 export default rootReducer;

client/src/_reducers/question_reducer.js

@@ -0,0 +1,17 @@
+import { GET_QUESTION, SET_QUESTION_ID } from '../_actions/question_action';
+
+const initialState = {
+  question_id: 1,
+  data: {},
+};
+
+export const questionReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case SET_QUESTION_ID:
+      return { ...state, question_id: action.payload };
+    case GET_QUESTION:
+      return { ...state, data: action.payload };
+    default:
+      return state;
+  }
+};

client/src/pages/HomePage/HomePage/QuestionList/SummaryContent.js

@@ -57,7 +57,7 @@ const SummaryContent = () => {
   return (
     <SummaryContentWrapper>
       <SummaryContentTitle>
-        <SummaryContentTitleLink to="/questions/0">
+        <SummaryContentTitleLink to="/questions/1">
           Function not working correctly, x != (y or z)
         </SummaryContentTitleLink>
       </SummaryContentTitle>

client/src/pages/QuestionDetail/Answers/QuestionAnswers.js

@@ -9,8 +9,6 @@ const AnswerConatiner = styled.div`
   border-bottom: 1px solid #e3e6e8;
 `;
 
-//GET 요청: '/questions/{question-id}/answers?page=1
-
 const answersData = [0, 0, 0, 0, 0, 0, 0];
 
 const QuestionAnswers = () => {

client/src/pages/QuestionDetail/MainQuestion/MainQuestion.js

@@ -7,11 +7,11 @@ const MainQuestionContainer = styled.div`
   flex-grow: 1;
 `;
 
-const MainQuestion = () => {
+const MainQuestion = ({ data }) => {
   return (
     <MainQuestionContainer>
-      <QuestionVote />
-      <QuestionContentBox />
+      <QuestionVote data={data} />
+      <QuestionContentBox data={data} />
     </MainQuestionContainer>
   );
 };

client/src/pages/QuestionDetail/MainQuestion/QuestionBody.js

@@ -16,14 +16,21 @@ const QuestionBodyBottom = styled.div`
   justify-content: space-between;
 `;
 
-const QuestionBody = () => {
+const QuestionBody = ({ data }) => {
+  const problem = data === undefined ? '' : data.problem;
+  const expect = data === undefined ? '' : data.expect;
+  const tagList = data === undefined ? [] : data.tagList;
+  const userName = data === undefined ? '' : data.userResponseDto.nickName;
+  const createdDate = data === undefined ? '' : data.createdAt;
+
   return (
     <QuestionBodyContainer>
-      <QuestionBodyTxt />
-      <QuestionTags />
+      <QuestionBodyTxt text={problem} />
+      <QuestionBodyTxt text={expect} />
+      <QuestionTags tagList={tagList} />
       <QuestionBodyBottom>
         <QuestionBodyBtns />
-        <QuestionUserinfo />
+        <QuestionUserinfo userName={userName} createdAt={createdDate} />
       </QuestionBodyBottom>
     </QuestionBodyContainer>
   );

client/src/pages/QuestionDetail/MainQuestion/QuestionBodyTxt.js

@@ -10,13 +10,8 @@ const QuestionBodyTxtContainer = styled.div`
   color: #232629;
 `;
 
-//여기서 axios 요청(아마?)
-const body = `I am trying to list out duplicate elements in the integer list say for eg,
-
-List<Integer> numbers = Arrays.asList(new Integer[]{1,2,1,3,4,4}); 
-using Streams of jdk 8. Has anybody tried out. To remove the duplicates we can use the distinct() api. But what about finding the duplicated elements ? Anybody can help me out ?`;
-const QuestionBodyTxt = () => {
-  return <QuestionBodyTxtContainer>{body}</QuestionBodyTxtContainer>;
+const QuestionBodyTxt = ({ text }) => {
+  return <QuestionBodyTxtContainer>{text}</QuestionBodyTxtContainer>;
 };
 
 export default QuestionBodyTxt;

client/src/pages/QuestionDetail/MainQuestion/QuestionComments.js

@@ -1,43 +1,43 @@
 import Comments from '../Comments/Comments';
 
-// '/comments?page={}'로 axios 요청 -> data에서 commentType = 'QUESTION'인 것만
-const CommentData = [
-  {
-    commentId: 1,
-    memberResponseDto: {
-      memberId: 1,
-      nickName: 'Tagir Valeev',
-      email: '[email protected]',
-    },
-    createdAt: '2022-10-28T18:37:47.0798803',
-    body: 'possible duplicate of Collect stream with grouping, counting and filtering operations',
-    commentType: 'QUESTION',
-  },
-  {
-    commentId: 2,
-    memberResponseDto: {
-      memberId: 2,
-      nickName: 'Ravn Andersen',
-      email: '[email protected]',
-    },
-    body: `If you don't want to collect the stream, this essentially boils down to "how can I look at more than one item at once in a stream"?`,
-    createdAt: '2022-10-31T09:47:42.482746',
-    commentType: 'QUESTION',
-  },
-  {
-    commentId: 3,
-    memberResponseDto: {
-      memberId: 3,
-      nickName: 'Saroj Kumar Sahoo',
-      email: '[email protected]',
-    },
-    body: `Set<Integer> items = new HashSet(); numbers.stream().filter(n -> i!tems.add(n)).collect(Collectors.toSet()); `,
-    createdAt: '2022-10-28T13:12:48.456698',
-    commentType: 'QUESTION',
-  },
-];
-const QuestionComments = () => {
-  return <Comments data={CommentData}></Comments>;
+// const stupData = [
+//   {
+//     commentId: 1,
+//     memberResponseDto: {
+//       memberId: 1,
+//       nickName: 'Tagir Valeev',
+//       email: '[email protected]',
+//     },
+//     createdAt: '2022-10-28T18:37:47.0798803',
+//     body: 'possible duplicate of Collect stream with grouping, counting and filtering operations',
+//     commentType: 'QUESTION',
+//   },
+//   {
+//     commentId: 2,
+//     memberResponseDto: {
+//       memberId: 2,
+//       nickName: 'Ravn Andersen',
+//       email: '[email protected]',
+//     },
+//     body: `If you don't want to collect the stream, this essentially boils down to "how can I look at more than one item at once in a stream"?`,
+//     createdAt: '2022-10-31T09:47:42.482746',
+//     commentType: 'QUESTION',
+//   },
+//   {
+//     commentId: 3,
+//     memberResponseDto: {
+//       memberId: 3,
+//       nickName: 'Saroj Kumar Sahoo',
+//       email: '[email protected]',
+//     },
+//     body: `Set<Integer> items = new HashSet(); numbers.stream().filter(n -> i!tems.add(n)).collect(Collectors.toSet()); `,
+//     createdAt: '2022-10-28T13:12:48.456698',
+//     commentType: 'QUESTION',
+//   },
+// ];
+const QuestionComments = ({ data }) => {
+  const commentsData = data === undefined ? [] : data.comments;
+  return <Comments data={commentsData}></Comments>;
 };
 
 export default QuestionComments;

client/src/pages/QuestionDetail/MainQuestion/QuestionTags.js

@@ -22,13 +22,12 @@ const Tag = styled.button`
   }
 `;
 
-const QuestionTags = () => {
+const QuestionTags = ({ tagList }) => {
   return (
     <QuestionTagsContainer>
-      <Tag>java</Tag>
-      <Tag>javascript</Tag>
-      <Tag>MySQL</Tag>
-      <Tag>React</Tag>
+      {tagList.map((tag, idx) => {
+        return <Tag key={idx}>{tag}</Tag>;
+      })}
     </QuestionTagsContainer>
   );
 };

client/src/pages/QuestionDetail/MainQuestion/QuestionUserinfo.js

@@ -42,14 +42,20 @@ const UserStats = styled.div`
   }
 `;
 
-//이것도 axios로 요청??? Question created_time 사용
-const AskedDate = ' Dec 28, 2014 at 14:19';
-const UserName = 'jwo0o0';
+const AskedDate = (str) => {
+  if (str === '') return '';
+  const date = new Date(str.slice(0, 19));
+  const arr = date.toDateString().split(' ');
 
-const QuestionUserinfo = () => {
+  return `${arr[1]} ${arr[2]}, ${
+    arr[3]
+  } at ${date.getHours()}:${date.getMinutes()}`;
+};
+
+const QuestionUserinfo = ({ userName, createdAt }) => {
   return (
     <QuestionUserinfoContainer>
-      <QuestionDate>asked {AskedDate}</QuestionDate>
+      <QuestionDate>asked {AskedDate(createdAt)}</QuestionDate>
       <UserInfoWrapper>
         <UserIcon>
           <img
@@ -58,7 +64,7 @@ const QuestionUserinfo = () => {
           ></img>
         </UserIcon>
         <UserStats>
-          <div className="username">{UserName}</div>
+          <div className="username">{userName}</div>
           <div className="stats">1,201 •2 •9 •6</div>
         </UserStats>
       </UserInfoWrapper>

client/src/pages/QuestionDetail/QuestionContentBox.js

@@ -9,11 +9,11 @@ const ContentBoxContainer = styled.div`
   padding-right: 10px;
 `;
 
-const QuestionContentBox = () => {
+const QuestionContentBox = ({ data }) => {
   return (
     <ContentBoxContainer>
-      <QuestionBody />
-      <QuestionComments />
+      <QuestionBody data={data} />
+      <QuestionComments data={data} />
     </ContentBoxContainer>
   );
 };

client/src/pages/QuestionDetail/QuestionDetailPage.js

@@ -1,11 +1,14 @@
-//import { Container } from '../pages/Home/HomePage/HomePage';
+import { useParams } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { setQuestionId, getQuestion } from '../../_actions/question_action';
 import styled from 'styled-components';
 import Nav from '../../components/Nav';
 import Footer from '../../components/Footer';
 import Sidebar from '../../components/Sidebar.js';
 import QuestionTitle from './QuestionTitle';
 import MainQuestion from './MainQuestion/MainQuestion';
 import QuestionAnswers from './Answers/QuestionAnswers';
+import { useEffect } from 'react';
 
 const MainContent = styled.div`
   display: flex;
@@ -31,6 +34,17 @@ const MainWrapper = styled.div`
 `;
 
 const QuestionDetailPage = () => {
+  const dispatch = useDispatch();
+  const { question_id } = useParams();
+
+  const state = useSelector((state) => state.questionReducer);
+  const { data } = state.data;
+
+  useEffect(() => {
+    dispatch(setQuestionId(question_id));
+    dispatch(getQuestion(question_id));
+  }, [dispatch]);
+
   return (
     <>
       <MainContent>
@@ -39,7 +53,7 @@ const QuestionDetailPage = () => {
           <QuestionTitle />
           <MainWrapper>
             <div>
-              <MainQuestion />
+              <MainQuestion data={data} />
               <QuestionAnswers />
             </div>
             <Sidebar />