Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
survey
Commits
3f73d654
Commit
3f73d654
authored
Sep 19, 2022
by
Yoon, Daeki
😅
Browse files
edit survey update title comment 위로 올림
parent
54d2192a
Changes
5
Hide whitespace changes
Inline
Side-by-side
docs/overview.md
View file @
3f73d654
# 개관
![
설치
](
./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`
를 내보냅니다.
frontend/src/layouts/SurveyLayout.tsx
View file @
3f73d654
...
...
@@ -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
>
...
...
frontend/src/layouts/SurveysLayout.tsx
View file @
3f73d654
...
...
@@ -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
;
...
...
frontend/src/surveys/EditSurvey.tsx
View file @
3f73d654
...
...
@@ -8,47 +8,24 @@ import { SpinnerIcon } from "../icons";
import
{
ModifySurveyView
}
from
"
./ModifySurveyView
"
;
export
const
EditSurvey
=
()
=>
{
const
{
survey
,
createQuestion
,
removeQuestion
,
update
,
updateQuestion
}
=
useS
urvey
();
// const [survey, setSurvey] = useState<ISurvey>(surveyData);
// const [questions, setQuestions] = useState<CreateQuestionData[]>(() => {
// const questions = survey.q
uestion
s;
// return questions.map((question) => ({ ...question, isEditing: false }));
// }
);
const
{
s
urvey
,
createQuestion
,
removeQuestion
,
updateQ
uestion
,
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}
/>
);
};
frontend/src/surveys/ModifySurveyView.tsx
View file @
3f73d654
...
...
@@ -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
>
</>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment