Skip to content

Commit

Permalink
Merge pull request #792 from bounswe/feature/FE/756/home-page-suggested
Browse files Browse the repository at this point in the history 
Feature/fe/756/home page suggested
  • Loading branch information
@mtkamiloglu
mtkamiloglu authored Dec 23, 2023
2 parents a848b51 + d9e930e commit 6a4b626
Show file tree
Hide file tree
Showing 2 changed files with 240 additions and 38 deletions.
87 changes: 50 additions & 37 deletions ludos/frontend/src/components/GroupTopic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,45 +52,48 @@ function GroupTopic(data) {
};

const boxStyle = {
backgroundColor: "rgba(204, 204, 255, 0.9)",
backgroundColor: "rgba(255, 255, 255, 0.6)",
paddingBottom: "16px",
borderRadius: "10px",
paddingTop: "8px",
border: "4px solid rgba(51, 153, 255, 1)", // Çerçeve rengi ve genişliği
//border: "4px solid rgba(51, 153, 255, 1)", // Çerçeve rengi ve genişliği
boxSizing: "border-box", // Kutu modelini içerir
minHeight: "100px",
fontFamily: "Trebuchet MS, sans-serif",
maxHeight: "200px",
};
const headerStyle = {
color: "black",
color: "white",
fontFamily: "Trebuchet MS, sans-serif",
marginBottom: "10px",
// marginBottom: "10px",
};
const forumStyle = {
color: "rgb(100, 70, 144)",
fontWeight: "bold",
fontFamily: "Trebuchet MS, sans-serif",
};
const gameStyle = {
backgroundColor: "rgba(120 ,63 ,183, 0.7)",
backgroundColor: "rgba(200 ,10 ,10, 1)",
color: "white",
borderRadius: "4px",
borderRadius: "10px",
padding: "2px",
fontWeight: "bold",
fontSize: "13px",
width: "100%",
marginBottom: "10px",
textDecoration: "none",
fontFamily: "Trebuchet MS, sans-serif",
};
const userStyle = {
color: "black",
color: "white",
fontFamily: "Trebuchet MS, sans-serif",
};

const tagBox = {
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: "rgba(51, 153, 255, 1)",
backgroundColor: "rgb(50, 150, 30, 1)",
color: "white",
height: "6px",
borderRadius: "10px",
Expand Down Expand Up @@ -118,10 +121,10 @@ function GroupTopic(data) {
md={12}
lg={12}
style={{
gap: "16px",
//gap: "16px",
display: "flex",
flexDirection: "column",
marginBottom: "20px",
//marginBottom: "20px",
}}
>
<Box p={5} style={boxStyle}>
Expand Down Expand Up @@ -170,30 +173,6 @@ function GroupTopic(data) {
@{data.topic.admin.username}
</Link>
</Typography>
<AccessTimeIcon style={{ fontSize: "18px", marginRight: "3px" }} />
<Typography
variant="caption"
component="div"
textAlign="left"
style={{
fontStyle: "italic",
marginRight: "10px",
color: "black",
}}
>
{data.topic.createdAt.split("T")[0] +
" " +
data.topic.createdAt.split("T")[1].split(".")[0]}
</Typography>
<Diversity1Icon style={{ fontSize: "18px", marginRight: "3px" }} />
<Typography
variant="caption"
component="div"
textAlign="right"
style={forumStyle}
>
{data.topic.maxNumberOfMembers}
</Typography>
</Grid>
<Grid style={{ display: "flex", justifyContent: "right" }}>
{data.topic &&
Expand All @@ -210,7 +189,7 @@ function GroupTopic(data) {
</Grid>
</Grid>
<Typography
variant="h5"
variant="h6"
component="div"
textAlign="left"
style={headerStyle}
Expand All @@ -219,6 +198,7 @@ function GroupTopic(data) {
{data.topic.name}
</Link>
</Typography>
{/**
<Grid
style={{
display: "flex",
Expand All @@ -236,7 +216,40 @@ function GroupTopic(data) {
{data.topic.description}
</Typography>
</Grid>
<Grid style={{ display: "flex", justifyContent: "right" }}>
*/}
<Grid style={{ display: "flex", justifyContent: "space-between" }}>
<Grid
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<AccessTimeIcon style={{ fontSize: "18px", marginRight: "3px" }} />
<Typography
variant="caption"
component="div"
textAlign="left"
style={{
fontStyle: "italic",
marginRight: "10px",
color: "black",
}}
>
{data.topic.createdAt.split("T")[0] +
" " +
data.topic.createdAt.split("T")[1].split(".")[0]}
</Typography>
<Diversity1Icon style={{ fontSize: "18px", marginRight: "3px" }} />
<Typography
variant="caption"
component="div"
textAlign="right"
style={forumStyle}
>
{data.topic.maxNumberOfMembers}
</Typography>
</Grid>
<Button
variant="contained"
color="primary"
Expand All @@ -247,7 +260,7 @@ function GroupTopic(data) {
justifyContent: "flex-end",
borderRadius: "10px",
textTransform: "none",
backgroundColor: "rgba(120 ,63 ,183, 0.7)",
backgroundColor: "rgba(37 ,137 ,216, 0.7)",
}}
>
{isUserJoined ? "Leave the Group" : "Join Us"}
Expand Down
191 changes: 190 additions & 1 deletion ludos/frontend/src/pages/Homepage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,28 @@ import TrendingGamesSlider from "../components/TrendingGamesSlider";
import Game1 from "../assets/witcher3.jpg";
import Game2 from "../assets/sims4.png";
import Game3 from "../assets/Tekken5Cover.jpg";
import { Typography, Container } from "@mui/material";
import { Typography, Container, Grid } from "@mui/material";
import ForumTopic from "../components/ForumTopic";
import GroupTopic from "../components/GroupTopic";
import axios from "axios";

const convertToSlug = (text) => {
return text
?.toString()
.toLowerCase()
.trim()
.replace(/[\s_]/g, "-") // Replace spaces or underscores with dashes
.replace(/[^\w-]+/g, "") // Remove non-word characters except dashes
.replace(/--+/g, "-"); // Replace multiple dashes with single dash
};

const Homepage = () => {
const [trendingTopics, setTrendingTopics] = useState([]);
const [groups, setGroups] = useState([]);
const [suggestedGames, setSuggestedGames] = useState([]);
useEffect(() => {
fetchTrendingTopics();
fetchSuggestedGames();
const link = `http://${process.env.REACT_APP_API_URL}/group?limit=3&page=1&order=DESC&orderByKey=maxNumberOfMembers`;
axios
.get(link, {
Expand Down Expand Up @@ -64,6 +76,24 @@ const Homepage = () => {
// Add more topics as needed...
];
*/

const mockSuggestedGames = [
{
title: "Sims 3",
coverLink:
"https://upload.wikimedia.org/wikipedia/tr/6/6f/Sims3cover.jpg",
},
{
title: "Undertale",
coverLink:
"https://cdn.cloudflare.steamstatic.com/steam/apps/391540/capsule_616x353.jpg?t=1579096091",
},
{
title: "Super Mario",
coverLink:
"https://upload.wikimedia.org/wikipedia/en/a/a9/MarioNSMBUDeluxe.png",
},
];
const groupTopics = [
{
title: "GameZone Guild",
Expand Down Expand Up @@ -122,6 +152,34 @@ const Homepage = () => {
},
});

const fetchSuggestedGames = async () => {
try {
const response = await axios.get(
`http://${process.env.REACT_APP_API_URL}/user/suggested`,
{
headers: {
Authorization: "Bearer " + localStorage.getItem("accessToken"),
},
},
);
let suggestedGamesData = response.data;

// Check if there are more than 3 suggested games, then select 3 randomly
if (suggestedGamesData.length > 3) {
const shuffledGames = suggestedGamesData.sort(
() => Math.random() - 0.5,
);
suggestedGamesData = shuffledGames.slice(0, 3);
}

// Update suggestedGames state with the selected 3 games
setSuggestedGames(suggestedGamesData);
console.log(suggestedGamesData);
} catch (error) {
console.log("error: ", error);
}
};

const fetchTrendingTopics = async () => {
const options = {
year: "numeric",
Expand Down Expand Up @@ -165,6 +223,137 @@ const Homepage = () => {
{/* Other homepage content */}

<TrendingGamesSlider games={games} />
{/* Suggested Games Grid */}
<Grid
style={{
backgroundColor: "rgba(30, 30, 30, 0.9)",
padding: "20px",
}}
>
<Typography
variant="h3"
gutterBottom
align="center"
style={{
fontWeight: "bold",
color: "white",
fontFamily: "Trebuchet MS, sans-serif",
}}
>
Suggested Games for You!
</Typography>
<Grid
container
justifyContent="center"
style={{
padding: "20px",
}}
>
{suggestedGames && suggestedGames.length > 0
? suggestedGames.map((game, index) => (
<Grid
item
key={index}
xs={12}
sm={4}
md={4}
style={{
backgroundColor: "rgba(255, 255, 255, 0.1)",
borderRadius: "10px",
padding: "10px",
margin: "10px",
textAlign: "center",
maxWidth: "25%",
justifyContent: "center",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<a
href={`/game/${convertToSlug(game.title)}`}
style={{
textDecoration: "none",
maxWidth: "33.33%",
color: "inherit",
}}
>
<img
src={game.coverLink}
alt={game.title}
style={{
maxWidth: "100%",
height: "150px",
marginBottom: "10px",
}}
/>
</a>
<a
href={`/game/${convertToSlug(game.title)}`}
style={{
textDecoration: "none",
color: "inherit",
}}
>
<Typography variant="h6" style={{ color: "#fff" }}>
{game.title}
</Typography>
</a>
</Grid>
))
: mockSuggestedGames.map((game, index) => (
<Grid
item
xs={12}
sm={4}
md={4}
key={index}
style={{
backgroundColor: "rgba(255, 255, 255, 0.1)",
borderRadius: "10px",
padding: "10px",
margin: "10px",
textAlign: "center",
maxWidth: "25%",
justifyContent: "center",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<a
href={`/game/${convertToSlug(game.title)}`}
style={{
textDecoration: "none",
maxWidth: "33.33%",
color: "inherit",
}}
>
<img
src={game.coverLink}
alt={game.title}
style={{
maxWidth: "100%",
height: "150px",
marginBottom: "10px",
}}
/>
</a>
<a
href={`/game/${convertToSlug(game.title)}`}
style={{
textDecoration: "none",
color: "inherit",
}}
>
<Typography variant="h6" style={{ color: "#fff" }}>
{game.title}
</Typography>
</a>
</Grid>
))}
</Grid>
</Grid>
{/* Other sections */}
<div
style={{
Expand Down

0 comments on commit 6a4b626

Please sign in to comment.