HomeProfile.js 1.4 KB
Newer Older
Kim, Chaerin's avatar
Kim, Chaerin committed
1
import { Link } from "react-router-dom";
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
2
3
4
5
6
7
8
import { useState, useEffect } from "react";
import userApi from "../../apis/user.api";
import catchErrors from "../../context/catchError";

const userprofile = localStorage.getItem("user");
const INIT_USER = {
  id: userprofile,
Kim, Chaerin's avatar
Kim, Chaerin committed
9
10
11
  email: "",
  img: "",
};
우지원's avatar
0628    
우지원 committed
12

Kim, Chaerin's avatar
Kim, Chaerin committed
13
const HomeProfile = () => {
Kim, Chaerin's avatar
Kim, Chaerin committed
14
15
16
  const [user, setUser] = useState(INIT_USER);
  const [error, setError]= useState("");
  
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
17
18
  async function getSetUser(userID) {
    try {
Kim, Chaerin's avatar
Kim, Chaerin committed
19
20
21
      const data = await userApi.getUser(userID);

      setUser(data);
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
22
    } catch (error) {
Kim, Chaerin's avatar
Kim, Chaerin committed
23
      catchErrors(error, setError);
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
24
25
26
27
    }
  }

  useEffect(() => {
Kim, Chaerin's avatar
Kim, Chaerin committed
28
29
    getSetUser(userprofile);
  }, [userprofile]);
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
30

Kim, Chaerin's avatar
Kim, Chaerin committed
31
  return (
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
32
    <Link to={`/profile/${user.id}`} className="text-decoration-none text-dark">
Kim, Chaerin's avatar
Kim, Chaerin committed
33
34
35
      <form className="flex-column align-items-center justify-content-center m-2">
        <div className="d-flex justify-content-center">
          <img
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
36
            src={`/uploads/${user.img}`}
Kim, Chaerin's avatar
Kim, Chaerin committed
37
38
39
40
41
42
43
            className="rounded-circle"
            style={{
              width: "157px",
              height: "157px",
            }}
          />
        </div>
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
44
45
        <h1 className="d-flex justify-content-center"> {user.email} </h1>
        <h2 className="d-flex justify-content-center"> #{user.id} </h2>
Kim, Chaerin's avatar
Kim, Chaerin committed
46
47
48
49
50
51
      </form>
      <div
        style={{ backgroundColor: "#262626", width: "auto", height: "2px" }}
      />
    </Link>
  );
Kim, Chaerin's avatar
Kim, Chaerin committed
52
53
54
};

export default HomeProfile;