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

삭제된 컴포넌트들

parent af606e31
import React from "react";
import { Outlet } from "react-router-dom";
export const ModifyLayout = () => {
return (
<>
<Outlet />
</>
);
};
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { surveyApi } from "../apis";
import { ISurvey } from "../types";
import { catchErrors } from "../helpers";
import { DuplicateIcon } from "../icons";
type Props = {
data: ISurvey;
};
export const MySurveyCard = ({ data }: Props) => {
const navigate = useNavigate();
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const editSurvey = () => {
navigate(`/surveys/${data._id}/edit`, {
replace: true,
state: { save: true },
});
};
const copyLink = () => {
navigator.clipboard.writeText(`http://localhost:8080/survey/${data._id}`);
alert("설문조사의 링크가 클립보드에 저장되었습니다.");
};
async function deleteSurvey() {
if (window.confirm("해당 설문조사를 삭제하시겠습니까?")) {
try {
if (data._id) {
const survey = await surveyApi.deleteSurvey(data._id);
setSuccess(true);
setError("");
alert("삭제되었습니다.");
location.reload();
} else {
setLoading(true);
}
} catch (error) {
console.log("에러발생");
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
}
return (
<div className="w-40 h-48 md:w-52 md:h-60 rounded border-2 hover:border-2 hover:border-themeColor">
<button className="w-full pt-1" onClick={editSurvey}>
<p className="font-bold">
{data.title ? data.title : "제목없는 설문조사"}
</p>
<div className="h-24 md:h-36 p-3 overflow-y-hidden hover:overflow-y-auto">
<p className="text-gray-700 text-justify">
{data.comment ? data.comment : "설명없는 설문조사"}
</p>
</div>
<p className="text-gray-500 text-sm">
{data.updatedAt?.substring(0, 10)}
</p>
</button>
<div className="flex justify-end pt-1 pr-1">
<button className="flex place-self-center" onClick={copyLink}>
링크복사
<DuplicateIcon className="w-7 h-7" />
</button>
<button
type="button"
className="bg-themeColor rounded text-white py-1 px-1.5 ml-1 mr-1.5"
onClick={deleteSurvey}
>
삭제
</button>
</div>
</div>
);
};
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { baseImageUrl, surveyApi } from "../apis";
import { ISurvey } from "../types";
import { MySurveyCard } from "./MySurveyCard";
export const Profile = () => {
const navigate = useNavigate();
const [survey, setSurvey] = useState<ISurvey>({
_id: "",
user: {},
title: "",
comment: "",
questions: [],
});
const [cardDatas, setCardDatas] = useState<ISurvey[]>([]);
useEffect(() => {
getSurveys();
}, []);
async function createSurvey() {
const newSurvey: ISurvey = await surveyApi.createSurvey(survey);
navigate(`/surveys/${newSurvey._id}/create`, {
replace: true,
});
}
async function getSurveys() {
const surveys: ISurvey[] = await surveyApi.getSurveys();
// console.log(surveys);
setCardDatas(surveys);
}
// let surveys = getSurvey(_id);
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">
<button
onClick={createSurvey}
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>
</button>
{cardDatas.map((data, index) => {
return <MySurveyCard data={data} key={index} />;
})}
</div>
</div>
);
};
export { Profile } from "./Profile";
import React from "react";
import { NavLink } from "react-router-dom";
import { Outlet, useNavigate, useParams } from "react-router-dom";
export const Preview = () => {
let { surveyId } = useParams<{ surveyId: string }>();
const navigate = useNavigate();
return (
<div>
<div className="flex place-content-center mt-6">
<NavLink
to={`/surveys/${surveyId}/edit`}
style={({ isActive }) =>
isActive
? {
width: "140px",
color: "white",
backgroundColor: "#008080",
borderTopLeftRadius: "25px",
borderBottomLeftRadius: "25px",
textAlign: "center",
fontWeight: "bold",
fontSize: "20px",
}
: {
width: "140px",
borderWidth: "1px",
borderColor: "#008080",
borderTopLeftRadius: "25px",
borderBottomLeftRadius: "25px",
textAlign: "center",
fontSize: "18px",
}
}
>
<div className="m-3 ">설문지 수정</div>
</NavLink>
<NavLink
to={`/surveys/${surveyId}/result`}
style={({ isActive }) =>
isActive
? {
width: "140px",
color: "white",
backgroundColor: "#008080",
borderTopRightRadius: "25px",
borderBottomRightRadius: "25px",
textAlign: "center",
fontWeight: "bold",
fontSize: "20px",
}
: {
width: "140px",
borderWidth: "1px",
borderColor: "#008080",
borderTopRightRadius: "25px",
borderBottomRightRadius: "25px",
textAlign: "center",
fontSize: "18px",
}
}
>
<div className="m-3">응답결과</div>
</NavLink>
</div>
<Outlet />
</div>
);
};
import React, { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { surveyApi } from "../apis";
import { catchErrors } from "../helpers";
import { ISurvey } from "../types";
import { SurveyCard } from "./SurveyCard";
export const Profile = () => {
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const [surveys, setSurveys] = useState<ISurvey[]>([]);
useEffect(() => {
getSurveys();
}, []);
async function getSurveys() {
const surveys: ISurvey[] = await surveyApi.getSurveys();
// console.log(surveys);
setSurveys(surveys);
}
async function deleteSurvey(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) => {
return (
<SurveyCard
survey={survey}
key={survey._id}
handleDelete={deleteSurvey}
/>
);
})}
</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