Merge pull request #351 from bounswe/feature/FE/300/Forum-Page

Feature/fe/300/forum page

ludos/frontend/src/App.js

@@ -1,22 +1,44 @@
-import HomePage from './pages/Homepage.js'
-import GamePage from './pages/GamePage.js'
-import LoginPage from './pages/LoginPage.js';
-import SignUpPage from './pages/SignupPage.js'
-import React from 'react'
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import './App.css';
-import Layout from './layout.js'
-
+import ForumPage from "./pages/forumPage.js";
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import "./App.css";
+import Layout from "./layout.js";
+import HomePage from "./pages/Homepage.js";
+import GamePage from "./pages/GamePage.js";
+import LoginPage from "./pages/LoginPage.js";
+import SignUpPage from "./pages/SignupPage.js";
 
 function App() {
   return (
     <Router>
       <div className="App">
         <Routes>
-          <Route path="/home" element={<Layout><HomePage/></Layout>} />
-          <Route path="/game" element={<Layout><GamePage/></Layout>} />
-          <Route path="/login" element={<LoginPage/>} />
-          <Route path="/signup" element={<SignUpPage/>} />
+          <Route
+            path="/home"
+            element={
+              <Layout>
+                <HomePage />
+              </Layout>
+            }
+          />
+          <Route
+            path="/game"
+            element={
+              <Layout>
+                <GamePage />
+              </Layout>
+            }
+          />
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/signup" element={<SignUpPage />} />
+          <Route
+            path="/forum"
+            element={
+              <Layout>
+                <ForumPage />
+              </Layout>
+            }
+          />
         </Routes>
       </div>
     </Router>

ludos/frontend/src/components/Post.js

@@ -144,7 +144,7 @@ function Post(data) {
                 <FaThumbsUp style={{ color: "rgb(124, 252, 0)" }} />
               </Button>
               <Button variant="contained" style={downVoteButton}>
-                <FaThumbsDown style={{ color: "rgb(222, 49, 99)"}} />
+                <FaThumbsDown style={{ color: "rgb(222, 49, 99)" }} />
               </Button>
             </>
           )}

ludos/frontend/src/components/forum_post.js

@@ -0,0 +1,131 @@
+import React, { useEffect } from "react";
+import { Box, Typography, Button, Grid, IconButton } from "@mui/material";
+import { FaArrowUp, FaArrowDown } from "react-icons/fa";
+import { Comment, MoreHoriz } from "@mui/icons-material";
+
+function Post(data, key) {
+  const boxStyle = {
+    backgroundColor: "rgba(30, 30, 30, 0.9)",
+    borderRadius: "10px",
+    paddingTop: "15px",
+  };
+  const headerStyle = {
+    color: "white",
+    fontFamily: "Trebuchet MS, sans-serif",
+    marginBottom: "10px",
+  };
+  const usernameStyle = { color: "rgb(255, 255, 0)" };
+  const timestampStyle = { color: "rgb(255, 255, 0)" };
+  const forumStyle = { color: "rgb(0, 150, 255)" };
+
+  const descriptionStyle = { color: "white" };
+  const iconStyle = {
+    color: "white", // Set the color to white
+  };
+  const tagBox = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgb(0, 150, 255)",
+    color: "white",
+    height: "6px",
+    borderRadius: "10px",
+    padding: "5px",
+    marginRight: "5px",
+  };
+  const upVoteButton = {
+    backgroundColor: "rgb(124, 252, 0)",
+    marginRight: "5px",
+  };
+  const downVoteButton = { backgroundColor: "rgb(222, 49, 99)" };
+  useEffect(() => {}, []);
+
+  return (
+    <Grid item xs={12} sm={12} md={12} lg={12} key={key}>
+      <Box p={5} style={boxStyle}>
+        <Grid
+          item
+          xs={12}
+          sm={12}
+          md={12}
+          lg={12}
+          style={{ display: "flex", justifyContent: "space-between" }}
+        >
+          <Typography variant="caption" component="div" style={forumStyle}>
+            {data.post.forum}
+          </Typography>
+          <Typography variant="caption" component="div" style={usernameStyle}>
+            {data.post.username}
+          </Typography>
+          <Typography variant="caption" component="div" style={timestampStyle}>
+            {data.post.timestamp}
+          </Typography>
+          <Grid style={{ display: "flex", justifyContent: "space-between" }}>
+            {data.post &&
+              data.post.tags.map((data1, index1) => (
+                <Typography
+                  variant="caption"
+                  component="div"
+                  style={tagBox}
+                  key={index1}
+                >
+                  {data1}
+                </Typography>
+              ))}
+          </Grid>
+        </Grid>
+
+        <Typography
+          variant="h4"
+          component="div"
+          textAlign="left"
+          style={headerStyle}
+        >
+          {data.post.header}
+        </Typography>
+        <Typography
+          variant="body2"
+          color="textSecondary"
+          textAlign="left"
+          style={descriptionStyle}
+        >
+          {data.post.description}
+        </Typography>
+        <Grid
+          style={{
+            display: "flex",
+            justifyContent: "flex-start",
+            alignItems: "center",
+            marginTop: "10px",
+          }}
+        >
+          <Button variant="contained" style={upVoteButton}>
+            <FaArrowUp style={{ color: "black" }} />
+          </Button>
+          <Button variant="contained" style={downVoteButton}>
+            <FaArrowDown />
+          </Button>
+        </Grid>
+        <Grid
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "flex-start",
+            alignItems: "center",
+            marginTop: "5px",
+            marginBottom: "-30px",
+          }}
+        >
+          <IconButton style={iconStyle}>
+            <Comment />
+          </IconButton>
+          <IconButton style={iconStyle}>
+            <MoreHoriz />
+          </IconButton>
+        </Grid>
+      </Box>
+    </Grid>
+  );
+}
+
+export default Post;

ludos/frontend/src/components/header.js

@@ -9,6 +9,7 @@ import MenuItem from "@mui/material/MenuItem";
 import SettingsIcon from "@mui/icons-material/Settings";
 import SearchIcon from "@mui/icons-material/Search";
 import logo from "../assets/logo.png";
+import { useNavigate } from "react-router-dom";
 
 const Header = ({ userLoggedIn, onSettingsClick }) => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -21,6 +22,15 @@ const Header = ({ userLoggedIn, onSettingsClick }) => {
     setAnchorEl(null);
   };
 
+  const navigate = useNavigate();
+  const handleSignInClick = () => {
+    navigate("/login");
+  };
+
+  const handleRegisterClick = () => {
+    navigate("/signup");
+  };
+
   return (
     <AppBar
       position="static"
@@ -82,6 +92,7 @@ const Header = ({ userLoggedIn, onSettingsClick }) => {
                 <MenuItem onClick={() => onSettingsClick()}>
                   Go to Settings
                 </MenuItem>
+                <MenuItem onClick={() => onSettingsClick()}>Log out</MenuItem>
               </Menu>
             </>
           ) : (
@@ -101,6 +112,7 @@ const Header = ({ userLoggedIn, onSettingsClick }) => {
                   fontWeight: "bold",
                   marginRight: "10px", // Add margin to separate the buttons
                 }}
+                onClick={handleSignInClick}
               >
                 Sign In
               </Button>
@@ -112,8 +124,8 @@ const Header = ({ userLoggedIn, onSettingsClick }) => {
                   color: "black",
                   fontFamily: "OCR A Std, monospace",
                   fontWeight: "bold",
-                  marginRight: "10px",
                 }}
+                onClick={handleRegisterClick}
               >
                 Register
               </Button>

ludos/frontend/src/components/sidebar.js

@@ -9,7 +9,7 @@ import {
   Menu,
   MenuItem,
   Stack,
-  Paper, // Import Stack from Material-UI
+  Paper,
 } from "@mui/material";
 
 import HomeIcon from "@mui/icons-material/Home";
@@ -19,15 +19,17 @@ import AddCircleIcon from "@mui/icons-material/AddCircle";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import { Link } from "react-router-dom";
 
-const drawerWidth = 90; // Adjust the width as needed
-//const theme = createTheme;
+const drawerWidth = 90;
+
 const rootSx = {
   display: "flex",
 };
+
 const drawer = {
   width: drawerWidth,
   flexShrink: 0,
 };
+
 const drawerPaper = {
   width: drawerWidth,
   height: "100%",
@@ -37,12 +39,14 @@ const drawerPaper = {
   paddingTop: 0,
   backgroundColor: "#F49A32",
 };
+
 const listItem = {
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
   padding: 1,
 };
+
 const circleIcon = {
   marginTop: "auto",
   marginBottom: "10px",
@@ -54,12 +58,8 @@ const circleIcon = {
   width: "3rem",
   height: "3rem",
 };
-//const smallText = {
-//fontSize: "6px", // Adjust the font size as needed
-//};
 
-function Sidebar() {
-  //const classes = useStyles();
+function Sidebar({ userLoggedIn }) {
   const [anchorEl, setAnchorEl] = useState(null);
 
   const handleProfileClick = (event) => {
@@ -75,7 +75,7 @@ function Sidebar() {
       <Drawer style={drawer} variant="permanent">
         <Paper style={drawerPaper}>
           <List>
-            <ListItem button component={Link} to="/">
+            <ListItem button component={Link} to="/home">
               <div>
                 <ListItemIcon style={listItem}>
                   <div style={circleIcon}>
@@ -179,34 +179,57 @@ function Sidebar() {
             <AccountCircleIcon />
           </IconButton>
 
-          {/* Profile Menu */}
-          <Menu
-            anchorEl={anchorEl}
-            open={Boolean(anchorEl)}
-            onClose={handleProfileClose}
-          >
-            <MenuItem
-              component={Link}
-              to="/profile-page"
-              onClick={handleProfileClose}
-            >
-              Profile Page
-            </MenuItem>
-            <MenuItem
-              component={Link}
-              to="/change-password"
-              onClick={handleProfileClose}
+          {/* Profile Menu (conditional rendering based on userLoggedIn) */}
+          {userLoggedIn ? (
+            <Menu
+              anchorEl={anchorEl}
+              open={Boolean(anchorEl)}
+              onClose={handleProfileClose}
             >
-              Change Password
-            </MenuItem>
-            <MenuItem
-              component={Link}
-              to="/log-out"
-              onClick={handleProfileClose}
+              <MenuItem
+                component={Link}
+                to="/profile-page"
+                onClick={handleProfileClose}
+              >
+                Profile Page
+              </MenuItem>
+              <MenuItem
+                component={Link}
+                to="/change-password"
+                onClick={handleProfileClose}
+              >
+                Change Password
+              </MenuItem>
+              <MenuItem
+                component={Link}
+                to="/log-out"
+                onClick={handleProfileClose}
+              >
+                Log Out
+              </MenuItem>
+            </Menu>
+          ) : (
+            <Menu
+              anchorEl={anchorEl}
+              open={Boolean(anchorEl)}
+              onClose={handleProfileClose}
             >
-              Log Out
-            </MenuItem>
-          </Menu>
+              <MenuItem
+                component={Link}
+                to="/login"
+                onClick={handleProfileClose}
+              >
+                Sign In
+              </MenuItem>
+              <MenuItem
+                component={Link}
+                to="/signup"
+                onClick={handleProfileClose}
+              >
+                Register
+              </MenuItem>
+            </Menu>
+          )}
         </Paper>
       </Drawer>
     </div>