Skip to content

GitLab

Commit 2e1489ce authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

usecontext

parent eab79372
Show whitespace changes
Inline Side-by-side
frontend/src/CreateSurveyForm/CreateSurveyFormPage.tsx
View file @ 2e1489ce
import React, { useState } from "react";
import { Question } from "./Question";
import axios from "axios";
import { QuestionProvider } from "./question.context";
export interface BasicQuestionType {
type: string;
id: string;
_id: string;
title: string;
isRequired: boolean;
comment: string;
......@@ -50,7 +50,7 @@ export interface RatingType extends BasicQuestionType {
const EssayQ: EssayType = {
type: "essay",
id: "000000000000",
_id: "000000000000",
title: "Question Title",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
......@@ -58,7 +58,7 @@ const EssayQ: EssayType = {
};
const RadioQ: RadioType = {
type: "radio",
id: "000000000001",
_id: "000000000001",
title: "Question Title",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
......@@ -70,7 +70,7 @@ const RadioQ: RadioType = {
};
const CheckboxQ: CheckboxType = {
type: "checkbox",
id: "000000000002",
_id: "000000000002",
title: "Question Title",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
......@@ -81,7 +81,7 @@ const CheckboxQ: CheckboxType = {
};
const DropdownQ: DropdownType = {
type: "dropdown",
id: "000000000003",
_id: "000000000003",
title: "Question Title",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
......@@ -92,7 +92,7 @@ const DropdownQ: DropdownType = {
};
const FileQ: FileType = {
type: "file",
id: "000000000004",
_id: "000000000004",
title: "Question Title",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
......@@ -103,7 +103,7 @@ const FileQ: FileType = {
};
const RatingQ: RatingType = {
type: "rating",
id: "000000000005",
_id: "000000000005",
title: "Question Title",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
......@@ -119,68 +119,14 @@ const RatingQ: RatingType = {
};
export const CreateSurveyForm = () => {
const [currentId, setCurrentId] = useState<string>("");
const [survey, setSurvey] = useState();
const [error, setError] = useState("");
const [disabled, setDisabled] = useState(false);
const [success, setSuccess] = useState(false);
const [questionList, setQuestionList] = useState<Array<BasicQuestionType>>([
EssayQ,
RadioQ,
CheckboxQ,
]);
const [survey, setSurvey] = useState();
function changeCurrentId(event: React.MouseEvent<HTMLButtonElement>): void {
setCurrentId(event.currentTarget.id);
}
function QuestionListChange(e: React.ChangeEvent<HTMLInputElement>): void {
const newList: BasicQuestionType[] = [...questionList];
const obj: any = newList.find((a) => a.id === e.target.id); //고유 _id로 질문찾기
const targetKey: any = e.target.name;
obj[targetKey] = e.target.value;
setQuestionList(newList);
}
async function addQuestion(event: React.MouseEvent<HTMLButtonElement>) {
event.preventDefault();
try {
const res = await axios.post("/api/question/create");
console.log("서버연결됬나요", res);
console.log("회원가입");
setSuccess(true);
setError("");
} catch (error) {
console.log("에러발생");
// catchErrors(error, setError)
} finally {
// setLoading(false);
}
//무작위로 12자리 ID제공, 추후에 질문을 DB에 생성하고 _id를 DB에서 가져오는 것으로 교체할 예정
function getRandomInt(min: number, max: number): string {
min = Math.ceil(min);
max = Math.floor(max);
const randomNum: number = Math.floor(Math.random() * (max - min)) + min;
return randomNum.toString();
}
const randomId: string = getRandomInt(100000000000, 999999999999);
//새로운 질문 생성
const newQ: EssayType = {
type: "essay",
id: randomId,
title: "Question",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: null,
};
setQuestionList([...questionList, newQ]);
}
function deleteQuestion(): void {}
return (
<>
{console.log(currentId)}
<QuestionProvider>
<div className="flex flex-col place-items-center">
<div className="flex flex-col container place-items-center mt-4">
<input
......@@ -195,18 +141,14 @@ export const CreateSurveyForm = () => {
cols={60}
></textarea>
</div>
<Question
questionList={questionList}
QuestionListChange={QuestionListChange}
addQuestion={addQuestion}
changeCurrentId={changeCurrentId}
/>
<Question />
<div>
<button className="border bg-themeColor my-5 py-2 px-3 font-bold text-white">
설문조사 생성
</button>
</div>
</div>
</QuestionProvider>
</>
);
};
frontend/src/CreateSurveyForm/Edit.tsx
View file @ 2e1489ce
import React from "react";
import { useQuestion } from "./question.context";
type Props = {
id: string;
changeCurrentId: (event: React.MouseEvent<HTMLButtonElement>) => void;
};
export const Edit = ({ id, changeCurrentId }: Props) => {
export const Edit = ({ id }: Props) => {
const { editClick } = useQuestion();
return (
<button id={id} className="" onClick={changeCurrentId}>
<button id={id} className="w-1/12" onClick={editClick}>
수정
</button>
);
......
frontend/src/CreateSurveyForm/QCheckbox.tsx
View file @ 2e1489ce
import React from "react";
import { CheckboxType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
import { Edit } from "./Edit";
type Props = {
element: CheckboxType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};
export const QCheckbox = ({ element, QuestionListChange }: Props) => (
export const QCheckbox = ({ element }: Props) => {
const { questionListChange } = useQuestion();
return (
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
<div className="flex flexgi-row h-16 w-full place-content-between items-center">
<input
type="text"
name={element.name}
id="title"
name="title"
id={element._id}
className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title}
onChange={QuestionListChange}
onChange={questionListChange}
></input>
<select
id="Questions"
......@@ -37,11 +41,11 @@ export const QCheckbox = ({ element, QuestionListChange }: Props) => (
<div className="flex w-full justify-center">
<input
type="text"
name={element.name}
id="comment"
name="comment"
id={element._id}
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange}
onChange={questionListChange}
></input>
</div>
<div id="commentarea" className="flex mt-4">
......@@ -60,6 +64,8 @@ export const QCheckbox = ({ element, QuestionListChange }: Props) => (
<button className="w-1/12">필수</button>
<button className="w-1/12">옵션</button>
<button className="w-1/12">삭제</button>
<Edit id={element._id} />
</div>
</div>
);
);
};
frontend/src/CreateSurveyForm/QDate.tsx
View file @ 2e1489ce
import { useQuestion } from "./question.context";
frontend/src/CreateSurveyForm/QDropdown.tsx
View file @ 2e1489ce
import React from "react";
import { DropdownType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
type Props = {
element: DropdownType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};
export const QDropdown = ({ element, QuestionListChange }: Props) => (
export const QDropdown = ({ element }: Props) => {
const { questionListChange } = useQuestion();
return (
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
<div className="flex flexgi-row h-16 w-full place-content-between items-center">
<input
type="text"
name={element.name}
id="title"
name="title"
id={element._id}
className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title}
onChange={QuestionListChange}
onChange={questionListChange}
></input>
<select
id="Questions"
......@@ -37,11 +39,11 @@ export const QDropdown = ({ element, QuestionListChange }: Props) => (
<div className="flex w-full justify-center">
<input
type="text"
name={element.name}
id="comment"
name="comment"
id={element._id}
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange}
onChange={questionListChange}
></input>
</div>
<div id="commentarea" className="flex mt-4">
......@@ -62,4 +64,5 @@ export const QDropdown = ({ element, QuestionListChange }: Props) => (
<button className="w-1/12">삭제</button>
</div>
</div>
);
);
};
frontend/src/CreateSurveyForm/QEssay.tsx
View file @ 2e1489ce
import React, { useState } from "react";
import { EssayType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
import { Edit } from "./Edit";
type Props = {
element: EssayType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
changeCurrentId: (event: React.MouseEvent<HTMLButtonElement>) => void;
};
export const QEssay = ({
element,
QuestionListChange,
changeCurrentId,
}: Props) => {
export const QEssay = ({ element }: Props) => {
const { questionListChange } = useQuestion();
return (
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
<div className="flex h-16 w-full place-content-between items-center">
<input
type="text"
name="title"
id={element.id}
id={element._id}
className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title}
onChange={QuestionListChange}
onChange={questionListChange}
></input>
<select
id="Questions"
......@@ -45,10 +42,10 @@ export const QEssay = ({
<input
type="text"
name="comment"
id={element.id}
id={element._id}
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange}
onChange={questionListChange}
></input>
</div>
<div id="commentarea" className="flex mt-4 w-full justify-center">
......@@ -58,7 +55,7 @@ export const QEssay = ({
<button className="w-1/12">필수</button>
<button className="w-1/12">옵션</button>
<button className="w-1/12">삭제</button>
<Edit id={element.id} changeCurrentId={changeCurrentId} />
<Edit id={element._id} />
</div>
</div>
);
......
frontend/src/CreateSurveyForm/QFile.tsx
View file @ 2e1489ce
import React, { useState } from "react";
import { FileType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
type Props = {
element: FileType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};
export const QFile = ({ element, QuestionListChange }: Props) => {
export const QFile = ({ element }: Props) => {
const { questionListChange } = useQuestion();
return (
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
<div className="flex h-16 w-full place-content-between items-center">
<input
type="text"
name={element.name}
id="title"
name="title"
id={element._id}
className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title}
onChange={QuestionListChange}
onChange={questionListChange}
></input>
<select
id="Questions"
......@@ -38,11 +40,11 @@ export const QFile = ({ element, QuestionListChange }: Props) => {
<div className="flex w-full justify-center">
<input
type="text"
name={element.name}
id="comment"
name="comment"
id={element._id}
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange}
onChange={questionListChange}
></input>
</div>
<div id="commentarea" className="flex mt-4 w-full justify-center">
......
frontend/src/CreateSurveyForm/QMatrix.tsx
View file @ 2e1489ce
import { useQuestion } from "./question.context";
frontend/src/CreateSurveyForm/QRadio.tsx
View file @ 2e1489ce
import React from "react";
import { RadioType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
type Props = {
element: RadioType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};
export const QRadio = ({ element, QuestionListChange }: Props) => (
export const QRadio = ({ element }: Props) => {
const { questionListChange } = useQuestion();
return (
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
<div className="flex h-16 w-full place-content-between items-center">
<input
type="text"
id={element.id}
name="title"
id={element._id}
className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title}
onChange={QuestionListChange}
onChange={questionListChange}
></input>
<select
id="Questions"
......@@ -36,11 +38,11 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
<div className="flex w-full justify-center">
<input
type="text"
id={element.id}
name="comment"
id={element._id}
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange}
onChange={questionListChange}
></input>
</div>
<div className="flex mt-4">
......@@ -48,7 +50,7 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
<div>
<input
type="radio"
id={element.id}
id={element._id}
name="choice"
value={e}
disabled
......@@ -59,7 +61,7 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
// key={`${index}`}
className="mx-2 border-b-2"
placeholder={e}
onChange={QuestionListChange}
onChange={questionListChange}
></input>
<button></button>
</div>
......@@ -74,4 +76,5 @@ export const QRadio = ({ element, QuestionListChange }: Props) => (
<button className="w-1/12">삭제</button>
</div>
</div>
);
);
};
frontend/src/CreateSurveyForm/QRating.tsx
View file @ 2e1489ce
import React from "react";
import { RatingType } from "./CreateSurveyFormPage";
import { useQuestion } from "./question.context";
type Props = {
element: RatingType;
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
// deleteValue: (e: React.MouseEvent<HTMLButtonElement>) => void;
};
export const QRating = ({ element, QuestionListChange }: Props) => {
export const QRating = ({ element }: Props) => {
const { questionListChange } = useQuestion();
return (
<div className="flex flex-col container w-4/5 h-auto border-2 border-themeColor items-center m-3 py-2">
<div className="flex h-16 w-full place-content-between items-center">
<input
type="text"
name="title"
id={element.id}
id={element._id}
className="text-xl font-bold ml-6 border-b-2 w-1/2"
placeholder={element.title}
onChange={QuestionListChange}
onChange={questionListChange}
></input>
<select
id={element.id}
id={element._id}
className="w-36 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-themeColor w-full mr-3 p-2.5"
>
<option>질문종류</option>
......@@ -40,16 +42,16 @@ export const QRating = ({ element, QuestionListChange }: Props) => {
<input
type="text"
name="comment"
id={element.id}
id={element._id}
className="border w-11/12"
placeholder="질문에 대한 설명을 입력해주세요"
onChange={QuestionListChange}
onChange={questionListChange}
></input>
</div>
<div className="flex place-content-between items-center p-5">
<input
name="minRateDescription"
id={element.id}
id={element._id}
className="border-b-2 text-center"
size={10}
placeholder={element.content.minRateDescription}
......@@ -57,7 +59,7 @@ export const QRating = ({ element, QuestionListChange }: Props) => {
{element.content.rateValues.map((e) => (
<input
name="text"
id={element.id}
id={element._id}
type="text"
className="border border-black rounded-full py-1 m-2 text-center"
size={1}
......@@ -66,7 +68,7 @@ export const QRating = ({ element, QuestionListChange }: Props) => {
))}
<input
name="maxRateDescription"
id={element.id}
id={element._id}
className="border-b-2 text-center"
size={10}
placeholder={element.content.maxRateDescription}
......@@ -76,7 +78,7 @@ export const QRating = ({ element, QuestionListChange }: Props) => {
<button
// type="button"
name="rateValues"
id={element.id}
id={element._id}
className="border border-red-500 rounded mx-2 px-2"
// onClick={deleteValue}
>
......
frontend/src/CreateSurveyForm/Question.tsx
View file @ 2e1489ce
import React, { useState } from "react";
import { BasicQuestionType } from "./CreateSurveyFormPage";
import { QEssay } from "./QEssay";
import { QCheckbox } from "./QCheckbox";
import { QRadio } from "./QRadio";
import { QDropdown } from "./QDropdown";
import { QFile } from "./QFile";
import { QRating } from "./QRating";
import { useQuestion } from "./question.context";
type Props = {
questionList: BasicQuestionType[];
QuestionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
addQuestion: (event: React.MouseEvent<HTMLButtonElement>) => void;
changeCurrentId: (event: React.MouseEvent<HTMLButtonElement>) => void;
};
type Props = {};
export const Question = ({}: Props) => {
const { addQuestion, questionList, currentId } = useQuestion();
export const Question = ({
questionList,
QuestionListChange,
addQuestion,
changeCurrentId,
}: Props) => {
return (
<>
{console.log(questionList)}
{console.log(questionList, currentId)}
{questionList.map((element) => {
switch (element.type) {
case "essay":
return (
<QEssay
element={element}
QuestionListChange={QuestionListChange}
changeCurrentId={changeCurrentId}
/>
);
return <QEssay element={element} />;
case "radio":
return (
<QRadio
element={element}
QuestionListChange={QuestionListChange}
/>
);
return <QRadio element={element} />;
case "checkbox":
return (
<QCheckbox
element={element}
QuestionListChange={QuestionListChange}
/>
);
return <QCheckbox element={element} />;
case "dropdown":
return (
<QDropdown
element={element}
QuestionListChange={QuestionListChange}
/>
);
return <QDropdown element={element} />;
case "file":
return (
<QFile
element={element}
QuestionListChange={QuestionListChange}
/>
);
return <QFile element={element} />;
case "rating":
return (
<QRating
element={element}
QuestionListChange={QuestionListChange}
/>
);
return <QRating element={element} />;
default:
break;
}
......
frontend/src/CreateSurveyForm/question.context.tsx 0 → 100644
View file @ 2e1489ce
import React, {
createContext,
FC,
ReactNode,
useContext,
useState,
} from "react";
import axios from "axios";
import { BasicQuestionType } from "./CreateSurveyFormPage";
interface IQuestionContext {
questionListChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
questionList: BasicQuestionType[];
editClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
currentId: string;
addQuestion: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
}
const QuestionContext = createContext<IQuestionContext>({
questionListChange: () => {},
questionList: [],
editClick: () => {},
currentId: "",
addQuestion: async () => {},
});
export const QuestionProvider: FC<{ children: ReactNode }> = ({ children }) => {
const [questionList, setQuestionList] = useState<Array<BasicQuestionType>>(
[]
);
const [currentId, setCurrentId] = useState<string>("");
function questionListChange(e: React.ChangeEvent<HTMLInputElement>): void {
const newList: BasicQuestionType[] = [...questionList];
const obj: any = newList.find((a) => a._id === e.target.id); //고유 _id로 질문찾기
const targetKey: any = e.target.name;
obj[targetKey] = e.target.value;
setQuestionList(newList);
}
async function addQuestion(e: React.MouseEvent<HTMLButtonElement>) {
try {
const res = await axios.post("/api/questions/create", {
type: "essay",
title: "Question Title",
isRequired: false,
comment: "질문에 대한 설명을 입력해주세요",
content: null,
});
console.log(res.data);
setQuestionList([...questionList, res.data]);
// setSuccess(true);
// setError("");
} catch (error) {
console.log("에러발생");
// catchErrors(error, setError)
} finally {
// setLoading(false);
}
}
function editClick(e: React.MouseEvent<HTMLButtonElement>) {
setCurrentId(e.currentTarget.id);
}
return (
<QuestionContext.Provider
value={{
questionListChange,
addQuestion,
questionList,
editClick,
currentId,
}}
>
{children}
</QuestionContext.Provider>
);
};
export const useQuestion = () => useContext(QuestionContext);
frontend/src/index.html
View file @ 2e1489ce
......@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webpack TypeScript React TailwindCSS Template</title>
<title>Simple Survey Form</title>
</head>
<body>
<div id="root"></div>
......
src/controllers/question.controller.ts
View file @ 2e1489ce
......@@ -5,5 +5,5 @@ export const createQuestion = asyncWrap(async (req, res) => {
const question = req.body;
console.log("question body", question);
const newQuestion = await questionDb.createQuestion(question);
return res.json(question);
return res.json(newQuestion);
});
src/db/question.db.ts
View file @ 2e1489ce
......@@ -2,5 +2,13 @@ import { Question, IQuestion } from "../models";
export const createQuestion = async (question: IQuestion) => {
const newQuestion = await Question.create(question);
return newQuestion;
const newQ = {
_id: newQuestion._id,
type: newQuestion.type,
title: newQuestion.title,
isRequired: newQuestion.isRequired,
comment: newQuestion.comment,
content: newQuestion.content,
}
return newQ;
};
src/models/question.model.ts
View file @ 2e1489ce
......@@ -2,7 +2,7 @@ import { model, Schema, Types } from "mongoose";
export interface IQuestion {
type: string;
id: string;
// id: string;
title?: string;
isRequired: boolean;
comment?: string;
......@@ -10,7 +10,7 @@ export interface IQuestion {
}
const schema = new Schema<IQuestion>({
id: {type:String},
// id: {type:String},
type:{type:String},
title: {type:String},
isRequired: {type:Boolean},
......
src/routes/index.ts
View file @ 2e1489ce
......@@ -7,6 +7,6 @@ const router = express.Router();
router.use("/users", userRouter);
router.use("/auth", authRouter);
router.use("/question", questionRouter)
router.use("/questions", questionRouter)
export default router;
src/routes/question.route.ts
View file @ 2e1489ce
......@@ -5,7 +5,6 @@ const router = express.Router();
router
.route("/create")
.get()
.post(questionCtrl.createQuestion);
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