Commit 96d0a352 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

Merge branch 'main' into edit-ui

parents ff284f3c b9c83052
...@@ -26,10 +26,10 @@ export const EditSurvey = () => { ...@@ -26,10 +26,10 @@ export const EditSurvey = () => {
// return result; // return result;
// }; // };
const handleTitle = (title: string) => { const handleTitleComment = (state: { title: string; comment: string }) => {
console.log("title in handle title:", title); console.log("title in handle title and comment:", state);
// survey.title = title // survey.title = title
update({ ...survey, title: title }); update({ ...survey, title: state.title, comment: state.comment });
}; };
/** /**
...@@ -86,7 +86,7 @@ export const EditSurvey = () => { ...@@ -86,7 +86,7 @@ export const EditSurvey = () => {
addQuestion={addQuestion} addQuestion={addQuestion}
deleteQuestion={deleteQuestion} deleteQuestion={deleteQuestion}
handleQuestion={updateQuestion} handleQuestion={updateQuestion}
handleTitle={handleTitle} handleTitleComment={handleTitleComment}
// callApi={update} // callApi={update}
/> />
); );
......
...@@ -5,6 +5,7 @@ import { SpinnerIcon } from "../icons"; ...@@ -5,6 +5,7 @@ import { SpinnerIcon } from "../icons";
import { CreateQuestionData, ISurvey } from "../types"; import { CreateQuestionData, ISurvey } from "../types";
import { QuestionsList } from "./QuestionsList"; import { QuestionsList } from "./QuestionsList";
import { SurveyTitle } from "./SurveyTitle"; import { SurveyTitle } from "./SurveyTitle";
import { SurveyTitleAndComment } from "./SurveyTitleAndComment";
type Props = { type Props = {
questions: CreateQuestionData[]; questions: CreateQuestionData[];
...@@ -12,7 +13,7 @@ type Props = { ...@@ -12,7 +13,7 @@ type Props = {
addQuestion: () => void; addQuestion: () => void;
deleteQuestion: (id: string) => void; deleteQuestion: (id: string) => void;
handleQuestion: (question: CreateQuestionData) => void; handleQuestion: (question: CreateQuestionData) => void;
handleTitle: Function; handleTitleComment: Function;
// callApi: (surveyData: ISurvey) => Promise<any>; // callApi: (surveyData: ISurvey) => Promise<any>;
}; };
...@@ -22,7 +23,7 @@ export const ModifySurveyView = ({ ...@@ -22,7 +23,7 @@ export const ModifySurveyView = ({
addQuestion, addQuestion,
deleteQuestion, deleteQuestion,
handleQuestion, handleQuestion,
handleTitle, handleTitleComment,
}: // callApi, }: // callApi,
Props) => { Props) => {
const [error, setError] = useState(""); const [error, setError] = useState("");
...@@ -104,8 +105,13 @@ Props) => { ...@@ -104,8 +105,13 @@ Props) => {
)} )}
<form> <form>
<div className="flex flex-col place-items-center"> <div className="flex flex-col place-items-center">
<SurveyTitle text={survey.title} handleTitle={handleTitle} /> {/* <SurveyTitle text={survey.title} handleTitle={handleTitle} /> */}
<div className="flex flex-col container place-items-center mt-4"> <SurveyTitleAndComment
title={survey.title}
comment={survey.comment}
handleTitleComment={handleTitleComment}
/>
{/* <div className="flex flex-col container place-items-center mt-4">
<input <input
type="text" type="text"
name="title" name="title"
...@@ -125,7 +131,7 @@ Props) => { ...@@ -125,7 +131,7 @@ Props) => {
value={survey.comment} value={survey.comment}
onChange={handleChange} onChange={handleChange}
></input> ></input>
</div> </div> */}
<QuestionsList <QuestionsList
questions={questions} questions={questions}
handleQuestion={handleQuestion} handleQuestion={handleQuestion}
......
import React, {
ChangeEvent,
ChangeEventHandler,
MouseEventHandler,
useState,
} from "react";
type Props = {
// isEditing: boolean;
title: string;
comment: string;
handleTitleComment: Function;
};
export const SurveyTitleAndComment = ({
comment,
title,
handleTitleComment,
}: Props) => {
const [state, setState] = useState({ title: title, comment: comment });
const [disabled, setDisabled] = useState(true);
console.log("title:", title, "comment:", comment, "state:", state);
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setState({ ...state, [name]: value });
};
const onEdit = () => {
setDisabled(false);
};
const onCancel = () => {
setDisabled(true);
setState({ title, comment });
};
const handleConfirm = () => {
setDisabled(true);
handleTitleComment(state);
};
return (
<div
className={`flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2 rounded-lg ${
disabled ? "border-themeColor" : "border-red-500"
}`}
>
<input
type="text"
name="title"
className="font-bold text-4xl text-center m-2 border-b-2"
placeholder="설문지 제목"
autoComplete="on"
value={state.title}
disabled={disabled}
onChange={handleChange}
/>
<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={state.comment}
disabled={disabled}
onChange={handleChange}
/>
<div className="flex w-11/12 justify-end">
{disabled ? (
<>
<button type="button" className="px-1" onClick={onEdit}>
수정
</button>
</>
) : (
<>
<button type="button" className="px-1" onClick={onCancel}>
취소
</button>
<button type="button" className="px-1" onClick={handleConfirm}>
확인
</button>
</>
)}
</div>
</div>
);
};
...@@ -67,8 +67,8 @@ export const getSurveys = asyncWrap(async (reqExp: Request, res: Response) => { ...@@ -67,8 +67,8 @@ export const getSurveys = asyncWrap(async (reqExp: Request, res: Response) => {
export const updateSurvey = asyncWrap(async (req, res) => { export const updateSurvey = asyncWrap(async (req, res) => {
const survey = req.body; const survey = req.body;
const newSurvey = await surveyDb.updateSurvey(survey); const updatedSurvey = await surveyDb.updateSurvey(survey);
return res.json(newSurvey); return res.json(updatedSurvey);
}); });
export const userBySurveyId = async ( export const userBySurveyId = async (
......
...@@ -75,18 +75,22 @@ export const getSurveys = async (userId: string) => { ...@@ -75,18 +75,22 @@ export const getSurveys = async (userId: string) => {
export const updateSurvey = async (survey: HydratedDocument<ISurvey>) => { export const updateSurvey = async (survey: HydratedDocument<ISurvey>) => {
console.log("update survey", survey); console.log("update survey", survey);
await Promise.all( // await Promise.all(
survey.questions.map( // survey.questions.map(
async (question) => // async (question) =>
await Question.findOneAndUpdate({ _id: question._id }, question, { // await Question.findOneAndUpdate({ _id: question._id }, question, {
upsert: true, // upsert: true,
}) // })
) // )
); // );
const newSurvey = await Survey.findOneAndUpdate({ _id: survey._id }, survey, { const updatedSurvey = await Survey.findOneAndUpdate(
{ _id: survey._id },
survey,
{
new: true, new: true,
}).populate("questions"); }
return newSurvey; ).populate("questions");
return updatedSurvey;
}; };
export const putNewQuestion = async (newQuestion: any, surveyId: string) => { export const putNewQuestion = async (newQuestion: any, surveyId: string) => {
......
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