Skip to content

GitLab

Commit 4a36252e authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

answers 결과 불러오기

parent 036ec8c6
Show whitespace changes
Inline Side-by-side
frontend/src/answers/AnswerSurveyForm.tsx
View file @ 4a36252e
......@@ -35,13 +35,13 @@ export const AnswerSurveyForm = () => {
ansSurvey();
}, [surveyId]);
const isSurvey = localStorage.getItem(`survey_${surveyId}`);
// const isSurvey = localStorage.getItem(`survey_${surveyId}`);
if (isSurvey) {
console.log("object", isSurvey);
alert("제출한 설문조사입니다");
navigate("/");
}
// if (isSurvey) {
// console.log("object", isSurvey);
// alert("제출한 설문조사입니다");
// navigate("/");
// }
const addFiles = (oneFile: { questionId: string; file: File }) => {
if (!files.find((a) => a.questionId === oneFile.questionId)) {
......@@ -74,7 +74,7 @@ export const AnswerSurveyForm = () => {
async function handleSubmit(event: FormEvent) {
event.preventDefault();
const answers = answerSurvey.current.questions.map((q: any) => {
return { questionId: q.questionId, answer: q.answer, type: q.type };
return { questionId: q._id, answer: q.answer, type: q.type };
});
const requiredErrorQ = answerSurvey.current.questions.find(
(q: any) => q.isRequired && q.isRequired !== q.requiredCheck
......@@ -85,7 +85,7 @@ export const AnswerSurveyForm = () => {
try {
const formData = new FormData();
formData.append("surveyId", answerSurvey.current._id);
formData.append("guestId", "quest1");
formData.append("guestId", "guest1");
formData.append("answers", JSON.stringify(answers));
files.map((f) => {
formData.append("uploadFiles", f.file);
......@@ -93,7 +93,7 @@ export const AnswerSurveyForm = () => {
const newAnswer: AnswerType = await answerApi.saveAnswers(formData);
console.log(newAnswer);
localStorage.setItem(`survey_${surveyId}`, surveyId ?? "");
alert("제출되었습니다");
// alert("제출되었습니다");
setSuccess(true);
setError("");
......
frontend/src/apis/answer.api.ts
View file @ 4a36252e
......@@ -6,3 +6,8 @@ export const saveAnswers = async (answer: FormData) => {
const { data } = await axios.post(`${baseUrl}/answers`, answer);
return data;
};
export const getAnswers = async (surveyId: string) => {
const { data } = await axios.get(`${baseUrl}/answers/${surveyId}`);
return data;
};
frontend/src/survey/Accordion.tsx
View file @ 4a36252e
import React, { useState, useRef } from "react";
import { BasicQuestionType } from "../types";
type AccordionProps = {
title: string;
content: string;
question: any;
answers: any;
};
const Accordion = ({ title, content }: AccordionProps) => {
const Accordion = ({ question, answers }: AccordionProps) => {
const [isOpened, setOpened] = useState<boolean>(false);
const [height, setHeight] = useState<string>("0px");
const contentElement = useRef<HTMLDivElement>(null);
......@@ -17,7 +18,7 @@ const Accordion = ({ title, content }: AccordionProps) => {
<div className="p-1">
<div onClick={HandleOpening}>
<div className={"bg-themeColor p-4 flex justify-between text-white"}>
<h4 className="font-semibold">{title}</h4>
<h4 className="font-semibold">{question.title}</h4>
{isOpened ? "△" : "▽"}
</div>
<div
......@@ -25,7 +26,9 @@ const Accordion = ({ title, content }: AccordionProps) => {
style={{ height: height }}
className="bg-gray-100 overflow-hidden transition-all duration-700"
>
<p className="p-4">{content}</p>
{answers.map((answer: any) => (
<p className="p-4">{answer.answer}</p>
))}
</div>
</div>
</div>
......
frontend/src/survey/ResponseSurvey.tsx deleted 100644 → 0
View file @ 036ec8c6
// import React, { FormEvent, useEffect, useState } from "react";
// import { useParams, 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 EditSurvey = () => {
// let { surveyId } = useParams<{ surveyId: string }>();
// const navigate = useNavigate();
// useEffect(() => {
// getSurvey();
// }, [surveyId]);
// const [error, setError] = useState("");
// const [loading, setLoading] = useState(false);
// const [success, setSuccess] = useState(false);
// const [survey, setSurvey] = useState<SurveyType>({
// _id: surveyId,
// user: {},
// title: "",
// comment: "",
// questions: [],
// });
// const [currentId, setCurrentId] = useState("");
// const changeCurrentId = (id: string) => {
// setCurrentId(id);
// };
// async function getSurvey() {
// try {
// if (surveyId) {
// const thisSurvey: SurveyType = await surveyApi.getSurvey(surveyId);
// setSurvey(thisSurvey);
// setSuccess(true);
// setError("");
// } else {
// setLoading(true);
// }
// } catch (error) {
// catchErrors(error, setError);
// // navigate(`/`, {
// // replace: false,
// // });
// } 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.editSurvey(survey);
// console.log(newSurvey);
// setSuccess(true);
// setError("");
// } catch (error) {
// catchErrors(error, setError);
// } finally {
// setLoading(false);
// }
// }
// const questions = survey.questions;
// console.log(questions);
// 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">
// <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 resize-none"
// placeholder="설문조사에 대한 설명을 입력해주세요"
// size={50}
// value={survey.comment}
// onChange={handleSurvey}
// ></input>
// </div>
// {questions.map((question) => (
// <Question
// element={question}
// currentId={currentId}
// />
// ))}
// <div className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3">
// 질문 추가
// </button>
// </div>
// <div>
// <button
// type="submit"
// className="border bg-themeColor my-5 py-2 px-3 font-bold text-white"
// >
// 저장하기
// </button>
// </div>
// </div>
// </form>
// </>
// );
// };
frontend/src/survey/ResultSurvey.tsx
View file @ 4a36252e
import React from "react";
import React, { useEffect, useState } from "react";
import { answerApi } from "../apis";
import { catchErrors } from "../helpers";
import Accordion from "./Accordion";
import { useParams } from "react-router-dom";
export const ResultSurvey = () => {
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [answers, setAnswers] = useState([
{ _id: "", answers: [], question: {} },
]);
let { surveyId } = useParams<{ surveyId: string }>();
useEffect(() => {
getAnswers();
}, [surveyId]);
async function getAnswers() {
try {
if (surveyId) {
const answers = await answerApi.getAnswers(surveyId);
console.log(answers);
setAnswers(answers);
} else {
setLoading(true);
}
} catch (error) {
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
const data = [
{
title: "1번질문",
......@@ -17,6 +47,7 @@ export const ResultSurvey = () => {
content: "3번답변들",
},
];
return (
<div className="flex flex-col place-items-center">
<div className="flex flex-col container place-items-center mt-4">
......@@ -29,11 +60,11 @@ export const ResultSurvey = () => {
</div>
<div className="container w-11/12 place-self-center">
{data.map((item) => (
{answers.map((item) => (
<Accordion
key={item.title}
title={item.title}
content={item.content}
key={item._id}
question={item.question}
answers={item.answers}
/>
))}
</div>
......
src/controllers/answer.controller.ts
View file @ 4a36252e
import { NextFunction, Request, Response } from "express";
import { asyncWrap } from "../helpers";
import { TypedRequest } from "../types";
import formidable from "formidable";
......@@ -11,7 +12,6 @@ export const createAnswers = asyncWrap(async (reqExp, res) => {
const answers = JSON.parse(answer.answers);
answer.answers = answers;
const files = req.files.uploadFiles as formidable.File[];
// console.log("controller의 files", files);
let uploadFile;
try {
if (files) {
......@@ -33,18 +33,19 @@ export const createAnswers = asyncWrap(async (reqExp, res) => {
targetObj.answer = retFile._id;
}
}
// 3) Answer DB 만들기(map을 돌려서 하나씩 추가시켜야 함)
// 3) Answer DB 만들기
console.log("원래 answer", answer);
for (let index = 0; index < answer.answers.length; index++) {
const element = answer.answers[index];
const newAnswer = await answerDb.createAnswer({
surveyId: answer.surveyId,
guestId: answer.guestId,
questionId: element.questionId,
answer: element.answer,
});
console.log("DB에 넣은 answer", newAnswer);
}
console.log("원래 answer", answer.answers.length);
// for (let index = 0; index < answer.answers.length; index++) {
// const element = answer.answers[index];
// const newAnswer = await answerDb.createAnswer({
// surveyId: answer.surveyId,
// guestId: answer.guestId,
// questionId: element.questionId,
// answer: element.answer,
// });
// // console.log("DB에 넣은 answer", newAnswer);
// }
return res.json();
} catch (error: any) {
console.log("error in create answer:", error);
......@@ -56,3 +57,16 @@ export const createAnswers = asyncWrap(async (reqExp, res) => {
res.status(422).send(error.message || "설문조사 응답 생성 오류");
}
});
export const getAnswers = asyncWrap(async (reqExp, res) => {
const req = reqExp as TypedRequest;
const { surveyId } = req.params;
console.log(surveyId);
try {
const answers = await answerDb.getAnswers(surveyId);
console.log("Db에서 가져온 answers= ", answers);
return res.json(answers);
} catch (error: any) {
res.status(422).send(error.message || "설문조사 결과 불러오기 오류");
}
});
src/db/answer.db.ts
View file @ 4a36252e
import { Answer, IAnswer } from "../models";
import { model, Schema, Types } from "mongoose";
export const createAnswer = async (answer: IAnswer) => {
const newQuestion = await Answer.create(answer);
return newQuestion;
};
export const getAnswers = async (surveyId: string) => {
const answers = await Answer.aggregate([
{ $match: { surveyId: new Types.ObjectId(surveyId) } },
{
$lookup: {
from: "questions",
localField: "questionId",
foreignField: "_id",
as: "question",
},
},
{ $unwind: "$question" },
{
$group: {
_id: "$questionId",
answers: { $push: { guestId: "$guestId", answer: "$answer" } },
question: { $mergeObjects: "$question" },
},
},
]);
return answers;
};
src/routes/answer.route.ts
View file @ 4a36252e
import express from "express";
import { answerCtrl, fileCtrl } from "../controllers";
import { answerCtrl, authCtrl, fileCtrl, surveyCtrl } from "../controllers";
const router = express.Router();
router.route("/").post(fileCtrl.uploadFile, answerCtrl.createAnswers);
router
.route("/:surveyId")
.get(authCtrl.requireLogin, authCtrl.authenticate, answerCtrl.getAnswers);
router.param("surveyId", surveyCtrl.userBySurveyId);
export default router;
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