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

verion 0.1 시작

parent 1ea0c555
import React, { useState } from "react";
import { DropdownType } from "../types";
import { IDropdown } from "../types";
type Props = {
element: DropdownType;
element: IDropdown;
handleQuestion: (id: string) => void;
isEditing: boolean;
};
......
import React from "react";
import { EssayType } from "../types";
import { IEssay } from "../types";
type Props = {
element: EssayType;
element: IEssay;
isEditing: boolean;
};
......
import React from "react";
import { FileType } from "../types";
import { IFile } from "../types";
type Props = {
element: FileType;
element: IFile;
isEditing: boolean;
};
......
import React, { useState } from "react";
import { BasicQuestionType } from "../types";
import { IQuestionData } from "../types";
import { questionApi } from "../apis";
import { EssayForm } from "./EssayForm";
import { CheckboxForm } from "./CheckboxForm";
......@@ -11,10 +11,10 @@ import { DateForm } from "./DateForm";
import { QUESTION_TYPES } from "../commons";
type Props = {
element: BasicQuestionType;
element: IQuestionData;
isEditing: boolean;
handleEditing: (qid: string, isEditing: boolean) => void;
handleQuestion: (element: BasicQuestionType) => void;
handleQuestion: (element: IQuestionData) => void;
deleteQuestion: (id: string) => void;
};
......@@ -33,7 +33,7 @@ export const Question = ({
async function handleEditComplete() {
try {
console.log(question);
const newQuestion: BasicQuestionType = await questionApi.updateQuestion(
const newQuestion: IQuestionData = await questionApi.updateQuestion(
question
);
// console.log(newQuestion);
......@@ -84,7 +84,7 @@ export const Question = ({
setQuestion({ ...question, [name]: value });
}
function getContent(element: BasicQuestionType) {
function getContent(element: IQuestionData) {
switch (element.type) {
case "essay":
return <EssayForm element={element} isEditing={isEditing} />;
......
import React, { useState } from "react";
import { RadioType } from "../types";
import { IRadio } from "../types";
type Props = {
element: RadioType;
element: IRadio;
handleQuestion: (id: string) => void;
isEditing: boolean;
};
......
import React, { useState } from "react";
import { RatingType } from "../types";
import { IRating } from "../types";
type Props = {
element: RatingType;
element: IRating;
handleQuestion: (id: string) => void;
isEditing: boolean;
};
......
import React, { useState, useRef, useEffect } from "react";
import { BasicQuestionType } from "../types";
import { IQuestionData } from "../types";
import { REssayForm } from "./REssayForm";
import { RCheckboxForm } from "./RCheckboxForm";
import { RRadioForm } from "./RRadioForm";
......@@ -9,7 +9,7 @@ import { RRatingForm } from "./RRatingForm";
import { RDateForm } from "./RDateForm";
type AccordionProps = {
question: BasicQuestionType;
question: IQuestionData;
};
export const Accordion = ({ question }: AccordionProps) => {
......@@ -21,7 +21,7 @@ export const Accordion = ({ question }: AccordionProps) => {
setOpened(!isOpened);
setHeight(!isOpened ? `${contentElement.current?.scrollHeight}px` : "0px");
};
function getContent(question: BasicQuestionType) {
function getContent(question: IQuestionData) {
switch (question.type) {
case "essay":
return <REssayForm question={question} />;
......
import React from "react";
import { BasicQuestionType } from "../types";
import { IQuestionData } from "../types";
type Props = {
question: BasicQuestionType;
question: IQuestionData;
};
export const RCheckboxForm = ({ question }: Props) => {
......
import React from "react";
import { BasicQuestionType } from "../types";
import { IQuestionData } from "../types";
type Props = {
question: BasicQuestionType;
question: IQuestionData;
};
export const RDateForm = ({ question }: Props) => {
......
import React from "react";
import { BasicQuestionType } from "../types";
import { IQuestionData } from "../types";
type Props = {
question: BasicQuestionType;
question: IQuestionData;
};
export const RDropdownForm = ({ question }: Props) => {
......
import React from "react";
import { BasicQuestionType } from "../types";
import { IQuestionData } from "../types";
type Props = {
question: BasicQuestionType;
question: IQuestionData;
};
export const REssayForm = ({ question }: Props) => {
......
import React from "react";
import { BasicQuestionType } from "../types";
import { IQuestionData } from "../types";
type Props = {
question: BasicQuestionType;
question: IQuestionData;
};
export const RRadioForm = ({ question }: Props) => {
......
import React from "react";
import { BasicQuestionType } from "../types";
import { IQuestionData } from "../types";
type Props = {
question: BasicQuestionType;
question: IQuestionData;
};
export const RRatingForm = ({ question }: Props) => {
......
......@@ -3,7 +3,7 @@ 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 { IQuestionData, ISurvey } from "../types";
import { catchErrors } from "../helpers";
export const CreateSurvey = () => {
......@@ -15,7 +15,7 @@ export const CreateSurvey = () => {
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const navigate = useNavigate();
const [survey, setSurvey] = useState<SurveyType>({
const [survey, setSurvey] = useState<ISurvey>({
_id: surveyId || "",
user: {},
title: "",
......@@ -30,7 +30,7 @@ export const CreateSurvey = () => {
async function getSurvey() {
try {
if (surveyId) {
const thisSurvey: SurveyType = await surveyApi.getSurvey(surveyId);
const thisSurvey: ISurvey = await surveyApi.getSurvey(surveyId);
const initEditing = thisSurvey.questions.map((question) => {
return { qid: question._id, isEditing: false };
......@@ -60,7 +60,7 @@ export const CreateSurvey = () => {
}
};
const handleQuestion = (element: BasicQuestionType) => {
const handleQuestion = (element: IQuestionData) => {
const index = survey.questions.findIndex(
(question) => question._id === element._id
);
......@@ -82,7 +82,7 @@ export const CreateSurvey = () => {
alert("아직 수정이 완료되지 않은 질문이 존재합니다.");
} else {
try {
const newSurvey: SurveyType = await surveyApi.editSurvey(survey);
const newSurvey: ISurvey = await surveyApi.editSurvey(survey);
console.log(newSurvey);
setSuccess(true);
alert("저장되었습니다");
......@@ -103,7 +103,7 @@ export const CreateSurvey = () => {
// surveyId
// );
// console.log(questions);
const question: BasicQuestionType = await questionApi.createQuestion(
const question: IQuestionData = await questionApi.createQuestion(
surveyId
);
console.log(question);
......@@ -126,11 +126,9 @@ export const CreateSurvey = () => {
}
async function deleteQuestion(id: string) {
const newList: BasicQuestionType[] = [...survey.questions];
const newList: IQuestionData[] = [...survey.questions];
try {
const newQuestion: BasicQuestionType = await questionApi.deleteQuestion(
id
);
const newQuestion: IQuestionData = await questionApi.deleteQuestion(id);
setSurvey({ ...survey, questions: newList.filter((a) => a._id !== id) });
setSuccess(true);
setError("");
......
......@@ -3,7 +3,7 @@ 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 { IQuestionData, ISurvey } from "../types";
import { catchErrors } from "../helpers";
export const EditSurvey = () => {
......@@ -17,7 +17,7 @@ export const EditSurvey = () => {
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const navigate = useNavigate();
const [survey, setSurvey] = useState<SurveyType>({
const [survey, setSurvey] = useState<ISurvey>({
_id: surveyId || "",
user: {},
title: "",
......@@ -32,7 +32,7 @@ export const EditSurvey = () => {
async function getSurvey() {
try {
if (surveyId) {
const thisSurvey: SurveyType = await surveyApi.getSurvey(surveyId);
const thisSurvey: ISurvey = await surveyApi.getSurvey(surveyId);
const initEditing = thisSurvey.questions.map((question) => {
return { qid: question._id, isEditing: false };
......@@ -62,7 +62,7 @@ export const EditSurvey = () => {
}
};
const handleQuestion = (element: BasicQuestionType) => {
const handleQuestion = (element: IQuestionData) => {
const index = survey.questions.findIndex(
(question) => question._id === element._id
);
......@@ -84,7 +84,7 @@ export const EditSurvey = () => {
alert("아직 수정이 완료되지 않은 질문이 존재합니다.");
} else {
try {
const newSurvey: SurveyType = await surveyApi.editSurvey(survey);
const newSurvey: ISurvey = await surveyApi.editSurvey(survey);
console.log(newSurvey);
setSuccess(true);
alert("저장되었습니다");
......@@ -105,7 +105,7 @@ export const EditSurvey = () => {
// surveyId
// );
// console.log(questions);
const question: BasicQuestionType = await questionApi.createQuestion(
const question: IQuestionData = await questionApi.createQuestion(
surveyId
);
console.log(question);
......@@ -132,11 +132,9 @@ export const EditSurvey = () => {
}
async function deleteQuestion(id: string) {
const newList: BasicQuestionType[] = [...survey.questions];
const newList: IQuestionData[] = [...survey.questions];
try {
const newQuestion: BasicQuestionType = await questionApi.deleteQuestion(
id
);
const newQuestion: IQuestionData = await questionApi.deleteQuestion(id);
setSurvey({ ...survey, questions: newList.filter((a) => a._id !== id) });
setSuccess(true);
setError("");
......
......@@ -3,14 +3,14 @@ import { answerApi, surveyApi } from "../apis";
import { catchErrors } from "../helpers";
import { Accordion } from "../results";
import { useParams } from "react-router-dom";
import { SurveyType } from "../types";
import { ISurvey } from "../types";
export const ResultSurvey = () => {
let { surveyId } = useParams<{ surveyId: string }>();
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [survey, setSurvey] = useState<SurveyType>({
const [survey, setSurvey] = useState<ISurvey>({
_id: surveyId || "",
user: {},
title: "",
......
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { surveyApi } from "../apis";
import { catchErrors } from "../helpers";
import { SpinnerIcon } from "../icons";
import { ISurvey } from "../types";
export const AnswerSurvey = () => {
let { surveyId } = useParams<{ surveyId: string }>();
const [survey, setSurvey] = useState<ISurvey>();
const [error, setError] = useState("");
useEffect(() => {
surveyId && getSurvey(surveyId);
}, [surveyId]);
const handleSubmit = () => {};
async function getSurvey(surveyId: string) {
try {
setError("");
const survey: any = await surveyApi.getSurveyById(surveyId);
console.log("survey가져옴ㅎㅎ", survey);
// answerSurvey.current._id = survey._id;
// answerSurvey.current.questions = survey.questions;
setSurvey(survey);
// setSuccess(true);
} catch (error) {
catchErrors(error, setError);
} finally {
// setLoading(false);
}
}
if (!survey) {
return (
<div className="flex justify-center mt-5">
<SpinnerIcon className="animate-spin h-10 w-10 mr-1 bg-white text-slate-500" />
</div>
);
}
return (
<form onSubmit={handleSubmit}>
<div className="flex flex-col place-items-center">
<div className="flex flex-col container place-items-center mt-4">
<p className="font-bold text-4xl text-center m-2">{survey.title}</p>
<p className="font-bold text-1xl text-center m-2">{survey.comment}</p>
{/* {survey.questions.map((question, index) => {
return (
<AQuestion
key={question._id}
question={question}
answerQuestion={answerSurvey.current.questions[index]}
addFiles={addFiles}
></AQuestion>
);
})} */}
<div>
<button
type="submit"
className="rounded bg-themeColor my-5 py-2 px-5 font-bold text-white"
>
제출하기
</button>
</div>
</div>
</div>
</form>
);
};
import React from "react";
import { surveyApi } from "../apis";
import { ISurvey } from "../types";
import { ModifySurvey } from "./ModifySurvey";
export const CreateSurvey = () => {
const surveyData = {
_id: "",
user: "",
title: "",
comment: "",
questions: [],
};
const create = async (surveyData: ISurvey) => {
const result = await surveyApi.createSurvey(surveyData);
return result;
};
return <ModifySurvey surveyData={surveyData} callApi={create} />;
};
import React from "react";
import { useLocation } from "react-router-dom";
import { surveyApi } from "../apis";
import { ISurvey } from "../types";
import { ModifySurvey } from "./ModifySurvey";
export const EditSurvey = () => {
const location = useLocation();
const surveyState = location.state as ISurvey;
console.log("edit survey:", surveyState);
const update = async (surveyData: ISurvey) => {
const result = await surveyApi.updateSurvey(surveyData);
return result;
};
return <ModifySurvey surveyData={surveyState} callApi={update} />;
};
import React, { ChangeEvent, FormEvent, useState } from "react";
import { useNavigate } from "react-router-dom";
import { catchErrors } from "../helpers";
import { SpinnerIcon } from "../icons";
import { CreateQuestionData, ISurvey } from "../types";
import { QuestionsList } from "./QuestionsList";
type Props = {
surveyData: ISurvey;
callApi: (surveyData: ISurvey) => Promise<any>;
};
export const ModifySurvey = ({ surveyData, callApi }: 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;
};
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 handleSubmit = async (e: FormEvent) => {
e.preventDefault();
survey.questions = questions;
try {
setLoading(true);
const result = await callApi(survey);
console.log("result:", result);
navigate("/surveys/profile", { replace: true });
} catch (error) {
setLoading(false);
catchErrors(error, setError);
}
};
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 disabled = hasIncompleteEditing();
return (
<>
{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="설문지 제목"
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}
deleteQuestion={deleteQuestion}
/>
<button
type="button"
onClick={addQuestion}
className="flex w-4/5 content-center justify-center border-2 border-black h-8 mt-3"
>
질문 추가
</button>
{error && (
<div className="text-red-500 text-sm mt-3">
<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