-
Notifications
You must be signed in to change notification settings - Fork 0
/
page.jsx
97 lines (86 loc) · 2.55 KB
/
page.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
"use client"
import React, {useEffect, useState} from "react";
import Image from "next/image";
import { CircularProgress, Typography, Grid } from "@mui/material";
import TextField from '@mui/material/TextField';
export default function Settings() {
const [userData, setUserData] = useState({});
const [characteristics, setCharacteristics] = useState([]);
const fetchCharacteristics = async () => {
try {
const response = await fetch("http://127.0.0.1:5000/get-characteristics");
if (!response.ok) {
throw new Error("Network response was not ok");
}
const data = await response.json();
setCharacteristics(data);
} catch (error) {
console.error("Error fetching characteristics:", error);
}
};
const fetchUserData = async () => {
try {
const response = await fetch("http://127.0.0.1:5000/get-user");
if (!response.ok) {
throw new Error("Network response was not ok");
}
const data = await response.json();
setUserData(data);
} catch (error) {
console.error("Error fetching user data:", error);
}
};
useEffect(() => {
fetchUserData();
fetchCharacteristics();
}, []);
const isActive = (tempChar) => {
return userData?.characteristics.includes(tempChar);
};
return (
<>
<h1 style={{ textAlign: "center" }}>Profile</h1>
{userData.username && characteristics.length > 0 ? (
<>
<div style={{ textAlign: "center" }}>
<Image
width={100}
height={100}
src="/images/sloth-profile.svg"
alt="Profile Image"
/>
</div>
<TextField
id="outlined-read-only-input"
label="Name"
defaultValue={userData.username}
InputProps={{
readOnly: true,
}}
/>
<Grid container spacing={4}>
{characteristics.map((characteristic, index) => (
<Grid item key={index} xs={4}>
<Image
width={400}
height={400}
src={`/images/${characteristic}${
isActive(characteristic) ? "_active" : ""
}.png`}
alt="Icon"
style={{
width: "100%",
height: "auto",
maxWidth: "100%",
}}
/>
</Grid>
))}
</Grid>
</>
) : (
<CircularProgress />
)}
</>
);
}