Profile.tsx 1.63 KB
Newer Older
1
import React, { useEffect, useState } from "react";
2
import { useNavigate } from "react-router-dom";
3
import { baseImageUrl, surveyApi } from "../apis";
Jiwon Yoon's avatar
Jiwon Yoon committed
4
import { SurveyType } from "../types";
5
import { MySurveyCard } from "./MySurveyCard";
Yoon, Daeki's avatar
Yoon, Daeki committed
6
7

export const Profile = () => {
8
  const navigate = useNavigate();
Jiwon Yoon's avatar
Jiwon Yoon committed
9
  const [survey, setSurvey] = useState<SurveyType>({
Yoon, Daeki's avatar
Yoon, Daeki committed
10
    _id: "",
Jiwon Yoon's avatar
Jiwon Yoon committed
11
12
13
14
15
    user: {},
    title: "",
    comment: "",
    questions: [],
  });
16
17
18
19
  const [cardDatas, setCardDatas] = useState<SurveyType[]>([]);

  useEffect(() => {
    getSurveys();
20
21
  }, []);

Jiwon Yoon's avatar
Jiwon Yoon committed
22
23
  async function createSurvey() {
    const newSurvey: SurveyType = await surveyApi.createSurvey(survey);
jang dong hyeok's avatar
.    
jang dong hyeok committed
24
    navigate(`/surveys/${newSurvey._id}/edit`, {
Jiwon Yoon's avatar
Jiwon Yoon committed
25
26
27
      replace: true,
    });
  }
28

29
30
  async function getSurveys() {
    const surveys: SurveyType[] = await surveyApi.getSurveys();
31
    console.log(surveys);
32
33
34
35
    setCardDatas(surveys);
  }
  // let surveys = getSurvey(_id);

Lee SeoYeon's avatar
Lee SeoYeon committed
36
  return (
Lee SeoYeon's avatar
0708    
Lee SeoYeon committed
37
    <div className="flex flex-col items-center">
Jiwon Yoon's avatar
Jiwon Yoon committed
38
      <div className="mt-10 text-xl font-bold">나의 설문조사</div>
jang dong hyeok's avatar
jang dong hyeok committed
39
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-6">
40
41
        <button
          onClick={createSurvey}
Lee SeoYeon's avatar
Lee SeoYeon committed
42
          className="flex w-40 h-48 md:h-60 md:w-52 items-center font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
Lee SeoYeon's avatar
Lee SeoYeon committed
43
        >
jang dong hyeok's avatar
jang dong hyeok committed
44
          <div className="text-center md:px-6 md:py-6 font-xs md:font-bold text-gray-500 place-items-center hover:text-white">
Lee SeoYeon's avatar
Lee SeoYeon committed
45
46
            CREATE NEW SURVEY!
          </div>
47
        </button>
48
49
        {cardDatas.map((data, index) => {
          return <MySurveyCard data={data} key={index} />;
50
        })}
Lee SeoYeon's avatar
Lee SeoYeon committed
51
52
53
      </div>
    </div>
  );
Yoon, Daeki's avatar
Yoon, Daeki committed
54
};