Commit 3f73d654 authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

edit survey update title comment 위로 올림

parent 54d2192a
# 개관
![설치](./install.drawio.svg)
## 클라이언트
### `/surveys` 라우트
`SurveysLayout`으로 둘러 싸여 있습니다.
**SurveysLayout**
```js
useEffect(() => {
await getSurveys()
}, [])
```
`surveysList` 상태를 초기화 하는 과정입니다. 이곳에서 `Outlet context`를 통해서 `surveys`를 내보냅니다.
### `/surveys/:surveyId` 라우트
`SurveyLayout`으로 둘러 싸여 있습니다.
**SurveyLayout**
`SurveysLayout context`로부터 `surveys`를 받아 `surveyId`에 해당하는 `survey` 상태를 뽑아내서 `Outlet context``survey`를 내보냅니다.
......@@ -13,10 +13,10 @@ import { surveyApi } from "../apis";
type SurveyContextType = {
survey: ICreateSurvey;
update: (survey: ISurvey) => Promise<any>;
createQuestion: (question: IQuestionData) => Promise<any>;
removeQuestion: (questionId: string) => Promise<any>;
updateQuestion: (question: CreateQuestionData) => Promise<any>;
updateTitleComment: (state: { title: string; comment: string }) => void;
};
const activeStyle =
......@@ -58,6 +58,11 @@ export const SurveyLayout = () => {
updateLocalSurveysList(survey);
};
/**
* 수정된 질문을 입력받아 기존 질문을 대체합니다.
* @param question 수정할 질문
* @returns 없음
*/
const updateQuestion = async (question: CreateQuestionData) => {
const updatedQuestion = await surveyApi.updateQuestion(
survey._id!,
......@@ -71,11 +76,21 @@ export const SurveyLayout = () => {
}
questions[index] = question;
console.log("questions in update question:", questions);
// setQuestions([...questions]);
survey.questions = questions;
updateLocalSurveysList(survey);
};
const updateTitleComment = async (state: {
title: string;
comment: string;
}) => {
survey.title = state.title;
survey.comment = state.comment;
console.log("title in handle title and comment:", state);
const result = await surveyApi.updateSurvey(survey);
updateLocalSurveysList(survey);
};
return (
<div>
<div className="flex justify-center items-center mt-6">
......@@ -112,8 +127,8 @@ export const SurveyLayout = () => {
survey,
createQuestion,
removeQuestion,
update,
updateQuestion,
updateTitleComment,
}}
/>
</div>
......
......@@ -50,6 +50,10 @@ export const SurveysLayout = () => {
// return result;
};
/**
* 로컬 설문데이터 상태 업데이트
* @param surveyData 로컬 설문데이터
*/
const updateLocalSurveysList = (surveyData: ICreateSurvey) => {
const index = surveys.findIndex((survey) => survey._id === surveyData._id);
surveys[index] = surveyData;
......
......@@ -8,47 +8,24 @@ import { SpinnerIcon } from "../icons";
import { ModifySurveyView } from "./ModifySurveyView";
export const EditSurvey = () => {
const { survey, createQuestion, removeQuestion, update, updateQuestion } =
useSurvey();
// const [survey, setSurvey] = useState<ISurvey>(surveyData);
// const [questions, setQuestions] = useState<CreateQuestionData[]>(() => {
// const questions = survey.questions;
// return questions.map((question) => ({ ...question, isEditing: false }));
// });
const {
survey,
createQuestion,
removeQuestion,
updateQuestion,
updateTitleComment,
} = useSurvey();
const questions = survey.questions;
console.log("survey", survey);
console.log("questions", questions);
// const update = async (surveyData: ISurvey) => {
// const result = await surveyApi.updateSurvey(surveyData);
// return result;
// };
const handleTitleComment = (state: { title: string; comment: string }) => {
console.log("title in handle title and comment:", state);
// survey.title = title
update({ ...survey, title: state.title, comment: state.comment });
updateTitleComment(state);
};
/**
* 수정된 질문을 입력받아 기존 질문을 대체합니다.
* @param question 수정할 질문
* @returns 없음
*/
// const updateQuestion = (question: CreateQuestionData) => {
// const index = questions.findIndex((q) => q._id === question._id);
// if (index < 0) {
// return;
// }
// questions[index] = question;
// console.log("questions in update question:", questions);
// // setQuestions([...questions]);
// survey.questions = questions;
// update(survey);
// };
const addQuestion = async () => {
const question: IQuestionData = {
order: questions.length,
......@@ -58,17 +35,11 @@ export const EditSurvey = () => {
isRequired: false,
content: { choices: [] },
};
// const updatedSurvey = await surveyApi.addQuestion(survey._id!, question);
await createQuestion(question);
// console.log("new question:", updatedSurvey);
// await update(updatedSurvey);
// setQuestions([...questions, question]);
};
async function deleteQuestion(id: string) {
await removeQuestion(id);
// const delQuestions = questions.filter((question) => question._id !== id);
// setQuestions(delQuestions);
}
if (!survey) {
......@@ -87,7 +58,6 @@ export const EditSurvey = () => {
deleteQuestion={deleteQuestion}
handleQuestion={updateQuestion}
handleTitleComment={handleTitleComment}
// callApi={update}
/>
);
};
......@@ -14,7 +14,6 @@ type Props = {
deleteQuestion: (id: string) => void;
handleQuestion: (question: CreateQuestionData) => void;
handleTitleComment: Function;
// callApi: (surveyData: ISurvey) => Promise<any>;
};
export const ModifySurveyView = ({
......@@ -24,79 +23,9 @@ export const ModifySurveyView = ({
deleteQuestion,
handleQuestion,
handleTitleComment,
}: // callApi,
Props) => {
}: Props) => {
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
// const [survey, setSurvey] = useState<ISurvey>(surveyData);
// const [questions, setQuestions] = useState<CreateQuestionData[]>(() => {
// const questions = survey.questions;
// return questions.map((question) => ({ ...question, isEditing: false }));
// });
// const navigate = useNavigate();
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
// setSurvey({ ...survey, [name]: value });
};
// const hasIncompleteEditing = () => {
// if (questions.length <= 0) {
// return true;
// }
// const incompleted = questions.some((question) => question.isEditing);
// return incompleted;
// };
// /**
// * 수정된 질문을 입력받아 기존 질문을 대체합니다.
// * @param question 수정할 질문
// * @returns 없음
// */
// const handleQuestion = (question: CreateQuestionData) => {
// const index = questions.findIndex((q) => q._id === question._id);
// if (index < 0) {
// return;
// }
// questions[index] = question;
// console.log("handle question questions:", questions);
// setQuestions([...questions]);
// };
// const addQuestion = () => {
// const question: CreateQuestionData = {
// _id: Math.random().toString(),
// order: questions.length,
// type: "singletext",
// title: "",
// comment: "",
// isRequired: false,
// content: { choices: [] },
// isEditing: true,
// };
// setQuestions([...questions, question]);
// };
// async function deleteQuestion(id: string) {
// const delQuestions = questions.filter((question) => question._id !== id);
// setQuestions(delQuestions);
// }
// const handleSubmit = async (e: FormEvent) => {
// e.preventDefault();
// // survey.questions = questions;
// try {
// setLoading(true);
// const result = await callApi(survey);
// console.log("result:", result);
// navigate(-1);
// } catch (error) {
// setLoading(false);
// catchErrors(error, setError);
// }
// };
// const disabled = hasIncompleteEditing();
return (
<>
......@@ -105,33 +34,11 @@ Props) => {
)}
<form>
<div className="flex flex-col place-items-center">
{/* <SurveyTitle text={survey.title} handleTitle={handleTitle} /> */}
<SurveyTitleAndComment
title={survey.title}
comment={survey.comment}
handleTitleComment={handleTitleComment}
/>
{/* <div className="flex flex-col container place-items-center mt-4">
<input
type="text"
name="title"
className="font-bold text-4xl text-center m-2 border-b-2"
placeholder="설문지 제목"
autoComplete="on"
value={survey.title}
onChange={handleChange}
></input>
<input
type="text"
name="comment"
className="font-bold text-1xl text-center m-2 border-b-2 resize-none"
placeholder="설문조사에 대한 설명을 입력해주세요"
autoComplete="on"
size={50}
value={survey.comment}
onChange={handleChange}
></input>
</div> */}
<QuestionsList
questions={questions}
handleQuestion={handleQuestion}
......@@ -149,14 +56,6 @@ Props) => {
<p>{error}</p>
</div>
)}
{/* <button
type="submit"
disabled={disabled}
title={`${disabled ? "완성되지 않은 부분이 존재합니다" : ""}`}
className="border bg-themeColor my-5 py-2 px-3 disabled:opacity-60 font-bold text-white"
>
저장
</button> */}
</div>
</form>
</>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment