Profile.tsx 1.68 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
24
25
26
27
  async function createSurvey() {
    const newSurvey: SurveyType = await surveyApi.createSurvey(survey);
    navigate(`/surveys/edit/${newSurvey._id}`, {
      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>
39
      <img src={`${baseImageUrl}/9e24ad36a2947b08c89913b01`} />
Jiwon Yoon's avatar
Jiwon Yoon committed
40
      <div className="grid grid-cols-1 md:grid-cols-4 sm:grid-cols-2 gap-4 mt-6">
41
42
        <button
          onClick={createSurvey}
43
          className="flex h-60 w-52 items-center border-2 border-themeColor font-bold bg-gray-200 hover:bg-themeColor rounded-lg "
Lee SeoYeon's avatar
Lee SeoYeon committed
44
45
46
47
        >
          <div className="text-center px-6 py-6 font-bold text-gray-500 place-items-center hover:text-white">
            CREATE NEW SURVEY!
          </div>
48
        </button>
49
50
        {cardDatas.map((data, index) => {
          return <MySurveyCard data={data} key={index} />;
51
        })}
Lee SeoYeon's avatar
Lee SeoYeon committed
52
53
54
      </div>
    </div>
  );
Yoon, Daeki's avatar
Yoon, Daeki committed
55
};