From a306210054d82f5961d78e1586749aafeb170dcc Mon Sep 17 00:00:00 2001 From: kimchanho Date: Thu, 3 Dec 2020 16:48:45 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A7=88=EB=AC=B8=20=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=82=AD=EC=A0=9C=20=EC=8B=9C=20=EB=9E=9C=EB=8D=94?= =?UTF-8?q?=EB=A7=81=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0=20=EC=A4=91?= =?UTF-8?q?=20(#66)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/webpack.config.js | 1 + src/App.js | 8 +- src/components/AuthRoute/AuthRoute.js | 4 +- src/components/CamView/ButtonGroup.js | 2 +- .../ConferenceButton/ConferenceButton.js | 2 +- src/components/Modal/Modal.js | 1 - src/components/Modal/Modal.stories.js | 2 +- .../Modal/ModalWrapper/ModalWrapper.js | 2 +- .../QuestionListSaveModal.js | 12 +-- .../SelfTrainStartModal.js | 10 +-- .../ProfileInfoContainer.js | 2 +- .../ProfileMenuContainer.js | 4 +- .../Question/QuestionItem/QuestionItem.js | 39 ++++++--- .../Question/QuestionList/QuestionList.js | 2 +- .../QuestionCardView/QuestionCardView.js | 84 ++++++++++++++++--- .../Sidebar/SidebarButton/SidebarButton.js | 2 +- src/components/StudyCardView/StudyCardView.js | 2 +- src/pages/LoginPage/LoginPage.js | 2 +- .../IsQuestionList/IsQuestionList.js | 7 +- .../QuestionListPage/QuestionListPage.js | 35 +++++--- src/pages/QuestionPage/QuestionPage.js | 23 ++--- src/repository/loginRepository.js | 2 +- src/repository/questionListRepository.js | 22 +++-- src/repository/requestVideoRepository.js | 2 +- src/repository/sampleRepository.js | 2 +- src/store/Question/question.js | 20 ++++- webpack.config.js | 1 + 27 files changed, 207 insertions(+), 88 deletions(-) diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 12122d1..25c15da 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -35,6 +35,7 @@ module.exports = async ({ config }) => { "@repository": path.resolve(__dirname, "../src/repository"), "@store": path.resolve(__dirname, "../src/store"), "@utils": path.resolve(__dirname, "../src/utils"), + "@context": path.resolve(__dirname, "../src/context"), }; // don't forget to return. diff --git a/src/App.js b/src/App.js index 993f6be..16e1a2a 100644 --- a/src/App.js +++ b/src/App.js @@ -31,14 +31,14 @@ export default function App() { - - {!toggleTrain && } {!toggleTrain && } - - + + + + diff --git a/src/components/AuthRoute/AuthRoute.js b/src/components/AuthRoute/AuthRoute.js index 70176fe..55a9c9f 100644 --- a/src/components/AuthRoute/AuthRoute.js +++ b/src/components/AuthRoute/AuthRoute.js @@ -2,8 +2,8 @@ import React, { useEffect } from 'react'; import { Route, Redirect } from 'react-router-dom'; import { useSelector, useDispatch } from 'react-redux'; import PropTypes from 'prop-types'; -import { get } from '../../utils/snippet'; -import { setLogin } from '../../store/Auth/auth'; +import { get } from '@utils/snippet'; +import { setLogin } from '@store/Auth/auth'; export default function AuthRoute({ component: Component, render, ...rest }) { const dispatch = useDispatch(); diff --git a/src/components/CamView/ButtonGroup.js b/src/components/CamView/ButtonGroup.js index c469870..807c2f2 100644 --- a/src/components/CamView/ButtonGroup.js +++ b/src/components/CamView/ButtonGroup.js @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; -import Icon from '../Icon'; +import Icon from '@components/Icon'; const Wrapper = styled.div` width: 219px; diff --git a/src/components/ConferenceButton/ConferenceButton.js b/src/components/ConferenceButton/ConferenceButton.js index 6bf5e79..1181981 100644 --- a/src/components/ConferenceButton/ConferenceButton.js +++ b/src/components/ConferenceButton/ConferenceButton.js @@ -5,7 +5,7 @@ import { v1 as uuid } from 'uuid'; import { useDispatch } from 'react-redux'; import { showModal, hideModal } from '@store/Modal/modal'; import { MODALS } from '@utils/constant'; -import Modal from '../Modal/Modal'; +import Modal from '@components/Modal/Modal'; export default function ConferenceButton({ history }) { const dispatch = useDispatch(); diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js index 0d83136..4d74f23 100644 --- a/src/components/Modal/Modal.js +++ b/src/components/Modal/Modal.js @@ -3,7 +3,6 @@ import { useSelector } from 'react-redux'; import PropTypes from 'prop-types'; import { MODALS } from '@utils/constant'; import QuestionListSaveModal from './QuestionListSaveModal'; -import { MODALS } from '../../utils/constant'; import SelfTrainStartModal from './SelfTrainStartModal'; import ModalWrapper from './ModalWrapper'; diff --git a/src/components/Modal/Modal.stories.js b/src/components/Modal/Modal.stories.js index 70aa4a2..96580ce 100644 --- a/src/components/Modal/Modal.stories.js +++ b/src/components/Modal/Modal.stories.js @@ -3,7 +3,7 @@ import React from 'react'; import { Provider } from 'react-redux'; import { configureStore, combineReducers, createSlice } from '@reduxjs/toolkit'; import Modal from './Modal'; -import { MODALS } from '../../utils/constant'; +import { MODALS } from '@utils/constant'; const modalReducer = createSlice({ name: 'modal', diff --git a/src/components/Modal/ModalWrapper/ModalWrapper.js b/src/components/Modal/ModalWrapper/ModalWrapper.js index 14683a4..e88a7c7 100644 --- a/src/components/Modal/ModalWrapper/ModalWrapper.js +++ b/src/components/Modal/ModalWrapper/ModalWrapper.js @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; import { useDispatch } from 'react-redux'; -import { hideModal } from '../../../store/Modal/modal'; +import { hideModal } from '@store/Modal/modal'; const Background = styled.div` position: fixed; diff --git a/src/components/Modal/QuestionListSaveModal/QuestionListSaveModal.js b/src/components/Modal/QuestionListSaveModal/QuestionListSaveModal.js index 86fe301..4d8a8b0 100644 --- a/src/components/Modal/QuestionListSaveModal/QuestionListSaveModal.js +++ b/src/components/Modal/QuestionListSaveModal/QuestionListSaveModal.js @@ -1,12 +1,12 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { useDispatch, useSelector } from 'react-redux'; -import { hideModal, showModal } from '../../../store/Modal/modal'; -import InputBar from '../../InputBar'; -import Button from '../../Button'; -import { postQuestionListAPI, postQuestionItemAPI } from '../../../repository/questionListRepository'; -import { get } from '../../../utils/snippet'; -import { MODALS } from '../../../utils/constant'; +import { hideModal, showModal } from '@store/Modal/modal'; +import InputBar from '@components/InputBar'; +import Button from '@components/Button'; +import { postQuestionListAPI, postQuestionItemAPI } from '@repository/questionListRepository'; +import { get } from '@utils/snippet'; +import { MODALS } from '@utils/constant'; const Wrapper = styled.div` display: flex; diff --git a/src/components/Modal/SelfTrainStartModal/SelfTrainStartModal.js b/src/components/Modal/SelfTrainStartModal/SelfTrainStartModal.js index 8f7bd2c..9ed43ee 100644 --- a/src/components/Modal/SelfTrainStartModal/SelfTrainStartModal.js +++ b/src/components/Modal/SelfTrainStartModal/SelfTrainStartModal.js @@ -1,11 +1,11 @@ import React from 'react'; import styled from 'styled-components'; import { useDispatch } from 'react-redux'; -import Button from '../../Button'; -import Icon from '../../Icon'; -import { hideModal } from '../../../store/Modal/modal'; -import { MODALS } from '../../../utils/constant'; -import { ResetQuestions } from '../../../store/Question/question'; +import Button from '@components/Button'; +import Icon from '@components/Icon'; +import { hideModal } from '@store/Modal/modal'; +import { MODALS } from '@utils/constant'; +import { ResetQuestions } from '@store/Question/question'; const Wrapper = styled.div` display: flex; diff --git a/src/components/ProfileInfoContainer/ProfileInfoContainer.js b/src/components/ProfileInfoContainer/ProfileInfoContainer.js index a1806df..6f94a34 100644 --- a/src/components/ProfileInfoContainer/ProfileInfoContainer.js +++ b/src/components/ProfileInfoContainer/ProfileInfoContainer.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import styled from 'styled-components'; import profileExample from '@assets/images/profile_example.png'; -import ProfileIcon from '../ProfileIcon'; +import ProfileIcon from '@components/ProfileIcon'; const Wrapper = styled.div` height: 73px; diff --git a/src/components/ProfileMenuContainer/ProfileMenuContainer.js b/src/components/ProfileMenuContainer/ProfileMenuContainer.js index e1dd3a9..8693a51 100644 --- a/src/components/ProfileMenuContainer/ProfileMenuContainer.js +++ b/src/components/ProfileMenuContainer/ProfileMenuContainer.js @@ -8,8 +8,8 @@ import { useDispatch } from 'react-redux'; import profileExample from '@assets/images/profile_example.png'; import { setLogout } from '@store/Auth/auth'; -import Icon from '../Icon'; -import ProfileIcon from '../ProfileIcon'; +import Icon from '@components/Icon'; +import ProfileIcon from '@components/ProfileIcon'; const Wrapper = styled.div` @media only screen and (max-width: 480px) { diff --git a/src/components/Question/QuestionItem/QuestionItem.js b/src/components/Question/QuestionItem/QuestionItem.js index 745198c..7c7c1c4 100644 --- a/src/components/Question/QuestionItem/QuestionItem.js +++ b/src/components/Question/QuestionItem/QuestionItem.js @@ -3,12 +3,20 @@ import React, { useRef, useState } from 'react'; import { useDrag, useDrop } from 'react-dnd'; import styled from 'styled-components'; import PropTypes from 'prop-types'; -import Icon from '../../Icon'; +import Icon from '@components/Icon'; +import { deleteQuestionItemAPI } from '@repository/questionListRepository'; + + +const Wrapper = styled.div` + display: flex; + align-items: center; + width: 1158px; +`; const QuestionCard = styled.div` position: relative; display: flex; - width: 1158px; + width: 1118px; height: 60px; margin: 5px; border-radius: 10px; @@ -53,8 +61,8 @@ const IconWrapper = styled.span` `; const AnswerBox = styled.div` - width: 1153px; - margin: 5px; + width: 1110px; + margin: 5px 5px 5px 40px; display: ${({ clicked }) => (clicked ? 'block' : 'none')}; overflow: hidden; box-shadow: 0 6px 24px 0 rgba(4, 4, 161, 0.04); @@ -125,16 +133,25 @@ export default function QuestionItem({ setClicked(!clicked); }; + const handleDelete = () => { + deleteQuestionItemAPI(id).then(()=>{ + window.location.reload(false); + }) + } + return ( <>
- - Q - {title} - - - - + + + + Q + {title} + + + + + handleQuestion(e, title)} value={text} /> diff --git a/src/components/Question/QuestionList/QuestionList.js b/src/components/Question/QuestionList/QuestionList.js index 98672a1..c959216 100644 --- a/src/components/Question/QuestionList/QuestionList.js +++ b/src/components/Question/QuestionList/QuestionList.js @@ -1,7 +1,7 @@ import React, { useCallback } from 'react'; import update from 'immutability-helper'; import PropTypes from 'prop-types'; -import QuestionItem from '../QuestionItem'; +import QuestionItem from '@components/Question/QuestionItem'; export default function QuestionList({ questions, setQuestions }) { const moveCard = useCallback((dragIndex, hoverIndex) => { diff --git a/src/components/QuestionCardView/QuestionCardView.js b/src/components/QuestionCardView/QuestionCardView.js index b123dbe..206d9cc 100644 --- a/src/components/QuestionCardView/QuestionCardView.js +++ b/src/components/QuestionCardView/QuestionCardView.js @@ -1,8 +1,11 @@ import React, { useState } from 'react'; +import { useHistory } from 'react-router-dom'; +import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import PropTypes from 'prop-types'; -import Icon from '../Icon'; - +import Icon from '@components/Icon'; +import { deleteQuestionListAPI, getQuestionListAPI } from '@repository/questionListRepository'; +import { SetReload } from '@store/Question/question'; const Box = styled.div` position: relative; width: 334px; @@ -14,10 +17,20 @@ const Box = styled.div` box-sizing: content-box; user-select: none; cursor: pointer; + z-index: 9; `; const Content = styled.div` - padding: 26px 41px; + padding: 0 41px; +`; + +const IconBox = styled.div` + width: 20px; + height: 7px; + margin: 23px 26px 0 0; + margin-left: auto; + background-color: red; + z-index: 10; `; const Number = styled.div` @@ -114,17 +127,66 @@ const StyledIcon = styled.div` left: -18px; `; -export default function QuestionCardView({ number, title, description }) { - const [clicked, setClicked] = useState(false); +const Delete = styled.div` + display: flex; + align-items: center; + position: absolute; + left: 165px; + top: 40px; + width: 143px; + height: 86px; + border-radius: 10px; + box-shadow: 0 12px 24px 0 rgba(4, 4, 161, 0.15); + background-color: #ffffff; + z-index: 1000; +`; + +const DeleteText = styled.div` + margin-left: 28px; + font-family: AppleSDGothicNeoM00; + font-size: 20px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.3; + letter-spacing: normal; + text-align: left; + color: #f2886b; +`; - const handleButtonClick = () => { - setClicked(!clicked); +export default function QuestionCardView({ id, number, title, description, handleDelete }) { + const dispatch = useDispatch(); + const [clicked, setClicked] = useState(false); + const history = useHistory(); + const handleClick = (e) => { + if (e.target === e.currentTarget) { + setClicked(!clicked); + } }; + + const handleMove = (e) => { + if (e.target === e.currentTarget) { + console.log("bye"); + history.push(`/question/${id}`); + } + } + + + return ( <> - - {clicked && ()} - + + + + { clicked && ( + handleDelete(e, id)}> + + 삭제 + + + )} + + {/* */} {number} @@ -142,7 +204,9 @@ export default function QuestionCardView({ number, title, description }) { {description} + + ); } diff --git a/src/components/Sidebar/SidebarButton/SidebarButton.js b/src/components/Sidebar/SidebarButton/SidebarButton.js index eca14f7..67444c3 100644 --- a/src/components/Sidebar/SidebarButton/SidebarButton.js +++ b/src/components/Sidebar/SidebarButton/SidebarButton.js @@ -4,7 +4,7 @@ import styled from 'styled-components'; import PropTypes from 'prop-types'; -import Icon from '../../Icon'; +import Icon from '@components/Icon'; const Wrapper = styled.button` width: ${({ hover }) => (hover ? 296 : 159)}px; diff --git a/src/components/StudyCardView/StudyCardView.js b/src/components/StudyCardView/StudyCardView.js index c4d5a29..3d42bf5 100644 --- a/src/components/StudyCardView/StudyCardView.js +++ b/src/components/StudyCardView/StudyCardView.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; -import Icon from '../Icon/Icon'; +import Icon from '@components/Icon'; const Box = styled.div` width: 374px; diff --git a/src/pages/LoginPage/LoginPage.js b/src/pages/LoginPage/LoginPage.js index e4b6295..f7a1bc3 100644 --- a/src/pages/LoginPage/LoginPage.js +++ b/src/pages/LoginPage/LoginPage.js @@ -142,7 +142,7 @@ export default function LoginPage() { return ( - {authSelector.isLogin && } + {authSelector.isLogin && } logo diff --git a/src/pages/QuestionListPage/IsQuestionList/IsQuestionList.js b/src/pages/QuestionListPage/IsQuestionList/IsQuestionList.js index 77e14f3..e1f899b 100644 --- a/src/pages/QuestionListPage/IsQuestionList/IsQuestionList.js +++ b/src/pages/QuestionListPage/IsQuestionList/IsQuestionList.js @@ -47,7 +47,7 @@ const AddText = styled.div` color: #0c0c59; `; -export default function IsQuestionList({ questionList }) { +export default function IsQuestionList({ questionList, handleDelete }) { return ( <> @@ -70,13 +70,14 @@ export default function IsQuestionList({ questionList }) { }); return ( - - ); })} diff --git a/src/pages/QuestionListPage/QuestionListPage.js b/src/pages/QuestionListPage/QuestionListPage.js index f92c3c5..1a3ee91 100644 --- a/src/pages/QuestionListPage/QuestionListPage.js +++ b/src/pages/QuestionListPage/QuestionListPage.js @@ -1,26 +1,21 @@ import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import { useSelector } from 'react-redux'; -import { getQuestionListAPI } from '@repository/questionListRepository'; +import { getQuestionListAPI, deleteQuestionListAPI } from '@repository/questionListRepository'; import { get } from '@utils/snippet'; -import ProfileMenuContiner from '@components/ProfileMenuContainer'; import NoList from './NoList'; import IsQuestionList from './IsQuestionList'; -import { get } from '../../utils/snippet'; -import ProfileMenuContiner from '../../components/ProfileMenuContainer'; const PageWrapper = styled.div` display: flex; + flex: 1; + flex-direction: column; `; const ContentWrapper = styled.div` width: 100%; `; -const ProfileWrapper = styled.div` - float: right; - margin: 53px 105px 0 0; -`; const Wrapper = styled.div` display: flex; width: 100%; @@ -55,8 +50,10 @@ const Select = styled.div` export default function QuestionListPage() { const authSelector = useSelector(get('auth')); + const questionSelector = useSelector(get('question')); const [questionList, setQuestionList] = useState([]); const [loading, setLoading] = useState(false); + const [flag, setFlag] = useState(0); const fetch = async () => { getQuestionListAPI().then((response) => { setQuestionList(response.data); @@ -64,18 +61,32 @@ export default function QuestionListPage() { }); }; useEffect(() => { + console.log("render new!"); fetch(); }, []); + const handleDelete = (e, id) => { + if (e.target === e.currentTarget) { + deleteQuestionListAPI(id) + } + setFlag(id); + } + useEffect(()=>{ + console.log(flag); + let newArr = questionList.filter(val=>{ + return val["id"] !== flag; + }) + console.log(newArr); + setQuestionList(newArr); + },[flag]) + return ( <> + {JSON.stringify(questionList)} {loading && ( - - - {authSelector.name} @@ -84,7 +95,7 @@ export default function QuestionListPage() { <Select>연습하고 싶은 질문 리스트를 선택해주세요.</Select> {questionList && questionList.length === 0 ? <NoList /> - : <IsQuestionList questionList={questionList} />} + : <IsQuestionList questionList={questionList} handleDelete={handleDelete}/>} </Wrapper> </ContentWrapper> </PageWrapper> diff --git a/src/pages/QuestionPage/QuestionPage.js b/src/pages/QuestionPage/QuestionPage.js index 9be0181..bedfcbd 100644 --- a/src/pages/QuestionPage/QuestionPage.js +++ b/src/pages/QuestionPage/QuestionPage.js @@ -4,19 +4,21 @@ import styled from 'styled-components'; import { useSelector, useDispatch } from 'react-redux'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; -import Button from '../../components/Button'; -import ProfileMenuContiner from '../../components/ProfileMenuContainer'; -import { getQuestionItemAPI, postQuestionItemAPI, patchQuestionItemAPI } from '../../repository/questionListRepository'; -import { get } from '../../utils/snippet'; -import Icon from '../../components/Icon'; -import QuestionList from '../../components/Question/QuestionList'; -import Modal from '../../components/Modal/Modal'; -import { showModal } from '../../store/Modal/modal'; -import { AddQuestions } from '../../store/Question/question'; -import { MODALS } from '../../utils/constant'; +import Button from '@components/Button'; +import ProfileMenuContiner from '@components/ProfileMenuContainer'; +import { getQuestionItemAPI, postQuestionItemAPI, patchQuestionItemAPI } from '@repository/questionListRepository'; +import { get } from '@utils/snippet'; +import Icon from '@components/Icon'; +import QuestionList from '@components/Question/QuestionList'; +import Modal from '@components/Modal/Modal'; +import { showModal } from '@store/Modal/modal'; +import { AddQuestions } from '@store/Question/question'; +import { MODALS } from '@utils/constant'; const PageWrapper = styled.div` display: flex; + flex: 1; + flex-direction: column; `; const ContentWrapper = styled.div` @@ -125,7 +127,6 @@ export default function QuestionPage({ match }) { useEffect(() => { fetch(); setLoading(true); - console.log(`questions: ${questionList}`); }, []); const handleQuestionMake = () => { diff --git a/src/repository/loginRepository.js b/src/repository/loginRepository.js index cafae38..bdabf73 100644 --- a/src/repository/loginRepository.js +++ b/src/repository/loginRepository.js @@ -1,6 +1,6 @@ /* eslint-disable import/prefer-default-export */ /* eslint-disable no-return-await */ -import api from '../context/serverContext'; +import api from '@context/serverContext'; export const LoginApi = async (param) => await api({ url: '/login', diff --git a/src/repository/questionListRepository.js b/src/repository/questionListRepository.js index d5a4663..edb26a9 100644 --- a/src/repository/questionListRepository.js +++ b/src/repository/questionListRepository.js @@ -1,5 +1,5 @@ /* eslint-disable no-return-await */ -import api from '../context/serverContext'; +import api from '@context/serverContext'; export const getQuestionListAPI = async (param) => await api({ url: '/api/self/questionList', @@ -7,17 +7,22 @@ export const getQuestionListAPI = async (param) => await api({ param, }); -export const getQuestionItemAPI = async (param) => await api({ - url: `/api/self/question?listId=${param}`, - type: 'get', -}); - export const postQuestionListAPI = async (param) => await api({ url: '/api/self/questionList', type: 'post', param, }); +export const deleteQuestionListAPI = async (param) => await api({ + url: `/api/self/questionList/${param}`, + type: 'delete', +}); + +export const getQuestionItemAPI = async (param) => await api({ + url: `/api/self/question?listId=${param}`, + type: 'get', +}); + export const postQuestionItemAPI = async (param) => await api({ url: '/api/self/question', type: 'post', @@ -29,3 +34,8 @@ export const patchQuestionItemAPI = async (param) => await api({ type: 'patch', param, }); + +export const deleteQuestionItemAPI = async (param) => await api({ + url: `/api/self/question/${param}`, + type: 'delete', +}); diff --git a/src/repository/requestVideoRepository.js b/src/repository/requestVideoRepository.js index c1ac22a..f614090 100644 --- a/src/repository/requestVideoRepository.js +++ b/src/repository/requestVideoRepository.js @@ -1,6 +1,6 @@ /* eslint-disable import/prefer-default-export */ /* eslint-disable no-return-await */ -import api from '../context/serverContext'; +import api from '@context/serverContext'; export const postVideoApi = async (param) => await api({ url: '/api/self/history', diff --git a/src/repository/sampleRepository.js b/src/repository/sampleRepository.js index 5b6ab73..5b6714d 100644 --- a/src/repository/sampleRepository.js +++ b/src/repository/sampleRepository.js @@ -1,4 +1,4 @@ -import api from '../context/serverContext'; +import api from '@context/serverContext'; const ApiGetSampleData = async (param) => { await api({ diff --git a/src/store/Question/question.js b/src/store/Question/question.js index 55b579b..142912b 100644 --- a/src/store/Question/question.js +++ b/src/store/Question/question.js @@ -3,6 +3,7 @@ import { createSlice } from '@reduxjs/toolkit'; const questionReducer = createSlice({ name: 'question', initialState: { + reload: false, questions: [], }, reducers: { @@ -13,14 +14,23 @@ const questionReducer = createSlice({ }; }, resetQuestions() { - return []; + return { + ...state, + questions: [], + }; }, + setReload(state){ + return{ + ...state, + reload: !state.reload, + } + } }, }); -const { addQuestions, resetQuestions } = questionReducer.actions; +const { addQuestions, resetQuestions, setReload } = questionReducer.actions; -export const AddQuestions = ({ questions }) => (dispatch) => { +export const AddQuestions = ({ questions }) => async (dispatch) => { dispatch(addQuestions({ questions })); }; @@ -28,4 +38,8 @@ export const ResetQuestions = () => (dispatch) => { dispatch(resetQuestions()); }; +export const SetReload = () => (dispatch) => { + dispatch(setReload()); +}; + export default questionReducer.reducer; diff --git a/webpack.config.js b/webpack.config.js index 96c3d1a..8736c60 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -115,6 +115,7 @@ module.exports = { '@repository': path.resolve(__dirname, 'src/repository'), '@store': path.resolve(__dirname, 'src/store'), '@utils': path.resolve(__dirname, 'src/utils'), + '@context': path.resolve(__dirname, 'src/context'), }, },