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

Surveys, Survey 컴포넌트 새로 만들고 적용

parent f299336a
......@@ -28,7 +28,7 @@ export const Header = () => {
>
로그아웃
</button>
<Link to="/surveys/profile">
<Link to="/surveys">
<button className="font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md">
프로필
</button>
......@@ -71,7 +71,7 @@ export const Header = () => {
로그아웃
</div>
</Link>
<Link to="/profile">
<Link to="/surveys">
<div className="p-2 w-24 text-center text-l text-gray-600 hover:text-themeColor">
프로필
</div>
......
import React from "react";
import { NavLink, useOutletContext } from "react-router-dom";
import { Outlet, useNavigate, useParams } from "react-router-dom";
import { useSurveys } from "./SurveysLayout";
import type { ISurvey } from "../types";
type SurveyContextType = {
survey: ISurvey;
update: (survey: ISurvey) => Promise<any>;
};
const activeStyle =
"w-36 h-12 flex justify-center items-center bg-themeColor p-1 text-white text-center font-bold text-xl";
const inActiveStyle =
"w-36 h-12 flex justify-center items-center bg-white border border-themeColor p-1 text-center font-bold text-xl";
export const SurveyLayout = () => {
const { surveys, update } = useSurveys();
let { surveyId } = useParams<{ surveyId: string }>();
const survey = surveys.find((survey) => survey._id === surveyId);
return (
<div>
<div className="flex justify-center items-center mt-6">
<NavLink
to={`/surveys/${surveyId}`}
end={true}
className={({ isActive }) =>
isActive
? activeStyle + " rounded-l-3xl"
: inActiveStyle + " rounded-l-3xl"
}
>
설문 미리보기
</NavLink>
<NavLink
to={`/surveys/${surveyId}/edit`}
className={({ isActive }) => (isActive ? activeStyle : inActiveStyle)}
>
설문지 수정
</NavLink>
<NavLink
to={`/surveys/${surveyId}/result`}
className={({ isActive }) =>
isActive
? activeStyle + " rounded-r-3xl"
: inActiveStyle + " rounded-r-3xl"
}
>
응답결과
</NavLink>
</div>
<Outlet context={{ survey, update }} />
</div>
);
};
export const useSurvey = () => {
return useOutletContext<SurveyContextType>();
};
import React, { useEffect, useState } from "react";
import { Outlet, useOutletContext } from "react-router-dom";
import { surveyApi } from "../apis";
import { catchErrors } from "../helpers";
import type { ISurvey } from "../types";
type SurveysContextType = {
error: string;
loading: boolean;
surveys: ISurvey[];
create: () => Promise<any>;
remove: (id: string) => Promise<any>;
update: (survey: ISurvey) => Promise<any>;
};
export const SurveysLayout = () => {
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const [surveys, setSurveys] = useState<ISurvey[]>([]);
useEffect(() => {
const getSurveys = async () => {
const surveys: ISurvey[] = await surveyApi.getSurveys();
// console.log(surveys);
setSurveys(surveys);
};
getSurveys();
}, []);
const create = async (surveyData: ISurvey) => {
const result: ISurvey = await surveyApi.createSurvey(surveyData);
setSurveys([result, ...surveys]);
return result;
};
const update = async (surveyData: ISurvey) => {
const result = await surveyApi.updateSurvey(surveyData);
const index = surveys.findIndex((survey) => survey._id === result._id);
surveys[index] = result;
console.log("result in modify layout:", result);
setSurveys([...surveys]);
return result;
};
/**
* 설문 삭제
* @param id survey id
*/
const remove = async (id: string) => {
if (window.confirm("해당 설문조사를 삭제하시겠습니까?")) {
try {
setLoading(true);
const result = await surveyApi.deleteSurvey(id);
console.log("deleted survey", result);
setError("");
const items = surveys.filter((survey) => survey._id !== result._id);
// console.log("items left:", newItems);
setSurveys(items);
alert("삭제되었습니다.");
} catch (error) {
console.log("에러발생");
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
};
return (
<>
<Outlet context={{ error, loading, surveys, create, remove, update }} />
</>
);
};
export const useSurveys = () => {
return useOutletContext<SurveysContextType>();
};
export { AnswerLayout } from "./AnswerLayout";
export { BaseLayout } from "./BaseLayout";
export { ModifyLayout } from "./ModifyLayout";
export { SurveyLayout, useSurvey } from "./SurveyLayout";
export { SurveysLayout, useSurveys } from "./SurveysLayout";
export { ResultLayout } from "./ResultLayout";
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { surveyApi } from "../apis";
import { catchErrors } from "../helpers";
import { useSurveys } from "../layouts";
import type { ISurvey } from "../types";
import { SurveyCard } from "./SurveyCard";
export const SurveysList = () => {
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const { surveys, remove: handleDelete } = useSurveys();
// const [surveys, setSurveys] = useState<ISurvey[]>([]);
// useEffect(() => {
// const getSurveys = async () => {
// const surveys: ISurvey[] = await surveyApi.getSurveys();
// // console.log(surveys);
// setSurveys(surveys);
// };
// getSurveys();
// }, []);
/**
* 설문 삭제
* @param id survey id
*/
// const handleDelete = async (id: string) => {
// if (window.confirm("해당 설문조사를 삭제하시겠습니까?")) {
// try {
// setLoading(true);
// const result = await surveyApi.deleteSurvey(id);
// console.log("deleted survey", result);
// setError("");
// const newItems = surveys.filter((survey) => survey._id !== result._id);
// // console.log("items left:", newItems);
// setSurveys(newItems);
// alert("삭제되었습니다.");
// } catch (error) {
// console.log("에러발생");
// catchErrors(error, setError);
// } finally {
// setLoading(false);
// }
// }
// };
return (
<div className="flex flex-col items-center">
<div className="mt-10 text-xl font-bold">나의 설문조사</div>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-6">
<Link
to={"/surveys/create"}
className="flex w-40 h-48 md:h-60 md:w-52 items-center font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
>
<div className="text-center md:px-6 md:py-6 font-xs md:font-bold text-gray-500 place-items-center hover:text-white">
CREATE NEW SURVEY!
</div>
</Link>
{surveys.map((survey) => (
<SurveyCard
key={survey._id}
survey={survey}
handleDelete={handleDelete}
/>
))}
</div>
</div>
);
};
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