Commit f891465f authored by Lee SeoYeon's avatar Lee SeoYeon
Browse files

create survey

parent 0659b434
...@@ -11,6 +11,7 @@ import { EditSurvey } from "./survey/EditSurvey"; ...@@ -11,6 +11,7 @@ import { EditSurvey } from "./survey/EditSurvey";
import { ResultSurvey } from "./survey/ResultSurvey"; import { ResultSurvey } from "./survey/ResultSurvey";
import { CompleteSurvey } from "./survey/CompleteSurvey"; import { CompleteSurvey } from "./survey/CompleteSurvey";
import { SameSurvey } from "./survey/SameSurvey"; import { SameSurvey } from "./survey/SameSurvey";
import { CreateSurvey } from "./survey/CreateSurvey";
export const SurveyRouter = () => { export const SurveyRouter = () => {
return ( return (
...@@ -20,6 +21,7 @@ export const SurveyRouter = () => { ...@@ -20,6 +21,7 @@ export const SurveyRouter = () => {
<Route index element={<Home />} /> <Route index element={<Home />} />
<Route path="login" element={<Login />} /> <Route path="login" element={<Login />} />
<Route path="signup" element={<SignUp />} /> <Route path="signup" element={<SignUp />} />
<Route path="surveys/:surveyId/create" element={<CreateSurvey />} />
<Route path="surveys/:surveyId/" element={<EditResultButton />}> <Route path="surveys/:surveyId/" element={<EditResultButton />}>
<Route path="edit" element={<EditSurvey />} /> <Route path="edit" element={<EditSurvey />} />
<Route path="result" element={<ResultSurvey />} /> <Route path="result" element={<ResultSurvey />} />
......
...@@ -12,6 +12,19 @@ export const getSurvey = async (surveyId: string) => { ...@@ -12,6 +12,19 @@ export const getSurvey = async (surveyId: string) => {
return data; return data;
}; };
export const surveycreate = async (surveyId: string) => {
const { data } = await axios.get(`${baseUrl}/surveys/${surveyId}/create`);
return data;
};
export const surveyscreate = async (survey: SurveyType) => {
const { data } = await axios.put(
`${baseUrl}/surveys/${survey._id}/create`,
survey
);
return data;
};
export const ansSurvey = async (surveyId: string) => { export const ansSurvey = async (surveyId: string) => {
const { data } = await axios.get(`${baseUrl}/surveys/${surveyId}`); const { data } = await axios.get(`${baseUrl}/surveys/${surveyId}`);
return data; return data;
......
...@@ -21,7 +21,7 @@ export const Profile = () => { ...@@ -21,7 +21,7 @@ export const Profile = () => {
async function createSurvey() { async function createSurvey() {
const newSurvey: SurveyType = await surveyApi.createSurvey(survey); const newSurvey: SurveyType = await surveyApi.createSurvey(survey);
navigate(`/surveys/${newSurvey._id}/edit`, { navigate(`/surveys/${newSurvey._id}/create`, {
replace: true, replace: true,
}); });
} }
......
import React, { FormEvent, useEffect, useState } from "react";
import { useParams, useLocation, useNavigate } from "react-router-dom";
import { questionApi, surveyApi } from "../apis";
import { SpinnerIcon } from "../icons";
import { Question } from "../questions";
import { BasicQuestionType, SurveyType } from "../types";
import { catchErrors } from "../helpers";
export const CreateSurvey = () => {
let { surveyId } = useParams<{ surveyId: string }>();
interface CustomizedState {
save: boolean;
}
const location = useLocation();
const state = location.state as CustomizedState;
useEffect(() => {
getSurvey();
}, [surveyId]);
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const navigate = useNavigate();
const [survey, setSurvey] = useState<SurveyType>({
_id: surveyId || "",
user: {},
title: "",
comment: "",
questions: [],
});
async function getSurvey() {
try {
if (surveyId) {
const thisSurvey: SurveyType = await surveyApi.surveycreate(surveyId);
setSurvey(thisSurvey);
setSuccess(true);
setError("");
} else {
setLoading(true);
}
} catch (error) {
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
const handleQuestion = (id: string) => {
const newList: BasicQuestionType[] = [...survey.questions];
setSurvey({ ...survey, questions: newList });
};
const handleSurvey = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = event.currentTarget;
setSurvey({ ...survey, [name]: value });
};
async function handleSubmit(event: FormEvent) {
event.preventDefault();
try {
const newSurvey: SurveyType = await surveyApi.surveyscreate(survey);
console.log(newSurvey);
setSuccess(true);
alert("저장되었습니다");
navigate("/profile");
setError("");
} catch (error) {
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
function savesurvey() {}
async function addQuestion() {
try {
if (surveyId) {
const questions: BasicQuestionType[] = await questionApi.createQuestion(
surveyId
);
console.log(questions);
setSurvey({ ...survey, questions: questions });
setSuccess(true);
setError("");
} else {
setLoading(true);
}
} catch (error) {
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
async function deleteQuestion(id: string) {
const newList: BasicQuestionType[] = [...survey.questions];
try {
const newQuestion: BasicQuestionType = await questionApi.deleteQuestion(
id
);
setSurvey({ ...survey, questions: newList.filter((a) => a._id !== id) });
setSuccess(true);
setError("");
} catch (error) {
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
const questions = survey.questions;
console.log(questions);
console.log(state);
return (
<>
{error ? alert(error) : <></>}
{loading && (
<SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
)}
<form onSubmit={handleSubmit}>
<div className="flex flex-col place-items-center mt-5">
<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="설문지 제목"
value={survey.title}
onChange={handleSurvey}
></input>
<input
type="text"
name="comment"
className="font-bold text-1xl text-center m-2 border-b-2 resize-none"
placeholder="설문조사에 대한 설명을 입력해주세요"
size={50}
value={survey.comment}
onChange={handleSurvey}
></input>
</div>
{questions.map((question) => (
<Question
key={question._id}
element={question}
isSave={state ? true : false}
handleQuestion={handleQuestion}
deleteQuestion={deleteQuestion}
/>
))}
<div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
<button type="button" onClick={addQuestion}>
질문 추가
</button>
</div>
<div>
<button
type="submit"
className="border bg-themeColor my-5 py-2 px-3 font-bold text-white"
>
저장하기
</button>
</div>
</div>
</form>
</>
);
};
...@@ -4,15 +4,14 @@ import { authCtrl, surveyCtrl, questionCtrl } from "../controllers"; ...@@ -4,15 +4,14 @@ import { authCtrl, surveyCtrl, questionCtrl } from "../controllers";
const router = express.Router(); const router = express.Router();
router.route("/").get(authCtrl.requireLogin, surveyCtrl.getSurveys); router.route("/").get(authCtrl.requireLogin, surveyCtrl.getSurveys);
router.route("/:surveyId") router.route("/:surveyId").get(surveyCtrl.getSurveyById);
.get(surveyCtrl.getSurveyById);
router.route("/create").post(authCtrl.requireLogin, surveyCtrl.createSurvey);
router router
.route("/:surveyId") .route("/:surveyId/create")
.get(surveyCtrl.getSurveyById); .get(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.getSurveyById)
.put(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.updateSurvey);
router.route("/create").post(authCtrl.requireLogin, surveyCtrl.createSurvey);
router.route("/:surveyId").get(surveyCtrl.getSurveyById);
router router
.route("/:surveyId/edit") .route("/:surveyId/edit")
.get(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.getSurveyById) .get(authCtrl.requireLogin, authCtrl.authenticate, surveyCtrl.getSurveyById)
......
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