Skip to content

Commit

Permalink
Merge pull request #850 from bounswe/feature/FE/764/user-profile-revi…
Browse files Browse the repository at this point in the history 
…sions

Feature/fe/764/user profile revisions
  • Loading branch information
@mtkamiloglu
mtkamiloglu authored Dec 25, 2023
2 parents 3865b52 + 4048816 commit 16df668
Show file tree
Hide file tree
Showing 3 changed files with 181 additions and 43 deletions.
Binary file added ludos/frontend/src/assets/admin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ludos/frontend/src/assets/certification.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
224 changes: 181 additions & 43 deletions ludos/frontend/src/pages/ProfilePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@ import steamLogo from "../assets/steam.png";
//import itchioLogo from "../assets/itchio.png";
import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";
import NotificationsIcon from "@mui/icons-material/Notifications";
import Gamer from "../assets/gamer.png";
import Developer from "../assets/developer.png";
import EsportPlayer from "../assets/esportplayer.png";
import GroupTopic from "../components/GroupTopic";
import Admin from "../assets/admin.png";
import AdminTick from "../assets/certification.png";

function ProfilePage() {
const navigate = useNavigate();
Expand All @@ -42,6 +43,8 @@ function ProfilePage() {
fullName: "",
steamUrl: "",
aboutMe: "",
associatedCompany: "",
associatedTeam: "",
});
const [open, setOpen] = useState(false);
const [auth, setAuth] = useState(false);
Expand Down Expand Up @@ -135,6 +138,8 @@ function ProfilePage() {
fullName: response.data.fullName,
steamUrl: response.data.steamUrl,
aboutMe: response.data.aboutMe,
associatedCompany: response.data.associatedCompany,
associatedTeam: response.data.associatedTeam,
});
if (response.data.followedGames.length > 10) {
setFavGames(response.data.followedGames.slice(0, 10));
Expand Down Expand Up @@ -173,6 +178,8 @@ function ProfilePage() {
fullName: response1.data.fullName,
steamUrl: response1.data.steamUrl,
aboutMe: response1.data.aboutMe,
associatedCompany: response1.data.associatedCompany,
associatedTeam: response1.data.associatedTeam,
});
if (response1.data.followedGames.length > 10) {
setFavGames(response1.data.followedGames.slice(0, 10));
Expand Down Expand Up @@ -229,6 +236,8 @@ function ProfilePage() {
fullName: formData.fullName,
steamUrl: formData.steamUrl,
aboutMe: formData.aboutMe,
associatedCompany: formData.associatedCompany,
associatedTeam: formData.associatedTeam,
},
{
headers: {
Expand Down Expand Up @@ -327,7 +336,19 @@ function ProfilePage() {
color: "rgb(0, 150, 255)",
borderRadius: "15px",
width: "auto",
height: "73%",
height: "75%",
marginTop: "10px",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
display: "flex",
padding: "10px", // Add padding to give some space between the content and the border
};
const assoBoxStyle = {
color: "rgb(0, 150, 255)",
borderRadius: "15px",
width: "auto",
height: "90px",
marginTop: "10px",
justifyContent: "center",
alignItems: "center",
Expand Down Expand Up @@ -375,8 +396,10 @@ function ProfilePage() {
return Gamer;
case "developer":
return Developer;
case "esport player":
case "e-sports_player":
return EsportPlayer;
case "admin":
return Admin;
default:
return null; // Or a default image if userType doesn't match any specific type
}
Expand Down Expand Up @@ -439,17 +462,17 @@ function ProfilePage() {
fontFamily: "Trebuchet MS, sans-serif",
color: "rgb(0, 150, 255)",
marginTop: "2%",
marginLeft: "30%",
}}
>
@{profile.username}
</Typography>
<Button>
<NotificationsIcon
style={{ color: "red" }}
className="notification-icon"
{userType === "admin" && (
<img
src={AdminTick}
style={{ height: 15, width: 15, marginTop: "3.5%" }}
alt="Admin"
/>
</Button>
)}
</Grid>

<Grid style={{ marginTop: "3%" }}>
Expand Down Expand Up @@ -668,6 +691,62 @@ function ProfilePage() {
multiline
maxRows={4}
/>
{profile.userType === "developer" && (
<>
<Typography
component="legend"
style={{
fontFamily: "Trebuchet MS, sans-serif",
marginTop: "2%",
marginLeft: "5%",
marginRight: "5%",
}}
>
Associated Company:
</Typography>
<TextField
id="associatedCompany"
value={formData.associatedCompany}
onChange={handleChange}
style={{
backgroundColor: "white",
marginTop: "2%",
marginLeft: "5%",
marginRight: "5%",
}}
multiline
maxRows={4}
/>
</>
)}
{profile.userType === "e-sports_player" && (
<>
<Typography
component="legend"
style={{
fontFamily: "Trebuchet MS, sans-serif",
marginTop: "2%",
marginLeft: "5%",
marginRight: "5%",
}}
>
Associated Team:
</Typography>
<TextField
id="associatedTeam"
value={formData.associatedTeam}
onChange={handleChange}
style={{
backgroundColor: "white",
marginTop: "2%",
marginLeft: "5%",
marginRight: "5%",
}}
multiline
maxRows={4}
/>
</>
)}
<Button
variant="contained"
style={{
Expand All @@ -689,36 +768,66 @@ function ProfilePage() {
</Grid>
</Grid>
<Grid item xs={12} sm={12} md={12} lg={12} style={genreBoxStyle}>
<Typography
component="legend"
style={{
fontFamily: "Trebuchet MS, sans-serif",
color: "rgb(0, 150, 255)",
}}
>
User Type:
</Typography>
{userTypeImage && (
<img
src={userTypeImage}
alt={userType}
<Grid>
<Typography
component="legend"
style={{
width: "100px",
marginBottom: "10px",
marginTop: "10px",
fontFamily: "Trebuchet MS, sans-serif",
color: "rgb(0, 150, 255)",
}}
/>
)}
<Typography
variant="caption"
component="legend"
style={{
fontFamily: "Trebuchet MS, sans-serif",
color: "rgb(0, 150, 255)",
}}
>
{userType}
</Typography>
>
User Type:
</Typography>
{userTypeImage && (
<img
src={userTypeImage}
alt={userType}
style={{
width: "100px",
marginBottom: "10px",
marginTop: "10px",
}}
/>
)}
<Typography
variant="caption"
component="legend"
style={{
fontFamily: "Trebuchet MS, sans-serif",
color: "rgb(0, 150, 255)",
}}
>
{userType}
</Typography>
{(profile.associatedTeam || profile.associatedCompany) && (
<Grid item xs={12} sm={12} md={12} lg={12}>
<Grid style={assoBoxStyle}>
<Typography
component="legend"
style={{
fontFamily: "Trebuchet MS, sans-serif",
color: "rgb(0, 150, 255)",
}}
>
{profile.associatedTeam && "Team"}
{!profile.associatedTeam &&
profile.associatedCompany &&
"Company"}
</Typography>
<Typography
variant="caption"
component="legend"
style={{
fontFamily: "Trebuchet MS, sans-serif",
color: "rgb(0, 150, 255)",
}}
>
{profile.associatedTeam || profile.associatedCompany}
</Typography>
</Grid>
</Grid>
)}
</Grid>
</Grid>
</Grid>
</Grid>
Expand Down Expand Up @@ -838,17 +947,17 @@ function ProfilePage() {
fontFamily: "Trebuchet MS, sans-serif",
color: "rgb(0, 150, 255)",
marginTop: "2%",
marginLeft: "30%",
}}
>
@{profile.username}
</Typography>
<Button>
<NotificationsIcon
style={{ color: "red" }}
className="notification-icon"
{userType === "admin" && (
<img
src={AdminTick}
style={{ height: 15, width: 15, marginTop: "3.5%" }}
alt="Admin"
/>
</Button>
)}
</Grid>

<Grid style={{ marginTop: "3%" }}>
Expand Down Expand Up @@ -1017,6 +1126,35 @@ function ProfilePage() {
>
{userType}
</Typography>
{(profile.associatedTeam || profile.associatedCompany) && (
<Grid item xs={12} sm={12} md={12} lg={12}>
<Grid style={assoBoxStyle}>
<Typography
component="legend"
style={{
fontFamily: "Trebuchet MS, sans-serif",
color: "rgb(0, 150, 255)",
}}
>
{profile.associatedTeam && "Team"}
{!profile.associatedTeam &&
profile.associatedCompany &&
"Company"}
</Typography>

<Typography
variant="caption"
component="legend"
style={{
fontFamily: "Trebuchet MS, sans-serif",
color: "rgb(0, 150, 255)",
}}
>
{profile.associatedTeam || profile.associatedCompany}
</Typography>
</Grid>
</Grid>
)}
</Grid>
</Grid>
</Grid>
Expand Down

0 comments on commit 16df668

Please sign in to comment.