fix bugs, restyle components, ...

htl-leo-itp-2325-4-5BHITM · Oct 22, 2024 · c917255 · c917255
1 parent c1cc1ce
commit c917255
Show file tree

Hide file tree

Showing 9 changed files with 131 additions and 47 deletions.
diff --git a/logic/frontend/web/public/boast.svg b/logic/frontend/web/public/boast.svg
diff --git a/logic/frontend/web/public/boast_white.png b/logic/frontend/web/public/boast_white.png
diff --git a/logic/frontend/web/public/boast_white.svg b/logic/frontend/web/public/boast_white.svg
diff --git a/logic/frontend/web/src/app/FYP/ForYouComponent.tsx b/logic/frontend/web/src/app/FYP/ForYouComponent.tsx
@@ -110,6 +110,7 @@ export default function ForYouComponent({ setShowPostComponent, setSelectedPost
             <Grid container spacing={4}
                   sx={{
                       width: "100%",
+                      overflowY: "scroll",
                       margin: "auto",
                   }}
             >

diff --git a/logic/frontend/web/src/app/FYP/page.tsx b/logic/frontend/web/src/app/FYP/page.tsx
@@ -1,11 +1,11 @@
 "use client";
-import React, { useState } from "react";
+import React, {useState} from "react";
 import Grid from "@mui/material/Grid2";
 import ForYouComponent from "./ForYouComponent";
 import CreateComponent from "@/app/FYP/CreateComponent";
 import PostComponent from "@/app/FYP/PostComponent";
-import { PostModel } from "@/model/model";
-import { Box } from "@mui/material";
+import {PostModel} from "@/model/model";
+import {Box} from "@mui/material";
 
 export default function Page() {
     const [showPostComponent, setShowPostComponent] = useState(false);
@@ -22,7 +22,7 @@ export default function Page() {
                 <Box
                     sx={{
                         width: "100%",
-                        height: "100%",
+                        height: "80%",
                         display: "flex",
                         justifyContent: "center",
                         alignItems: "center",
@@ -31,18 +31,16 @@ export default function Page() {
                     <Box
                         sx={{
                             width: "90%",
-                            height: "80%",
-                            overflowY: "scroll",
+                            height: "90%",
                             backgroundColor: "#22264B",
-                            borderRadius: "8px",
-                            marginTop: "-4rem",
+                            borderRadius: "1em",
                         }}
                     >
-                        {showPostComponent && selectedPost ? (
-                            <PostComponent post={selectedPost} onGoBack={handleGoBack} />
-                        ) : (
-                            <ForYouComponent setShowPostComponent={setShowPostComponent} setSelectedPost={setSelectedPost} />
-                        )}
+                        {
+                            showPostComponent && selectedPost &&
+                            <PostComponent post={selectedPost} onGoBack={handleGoBack}/>
+                        }
+                        <ForYouComponent setShowPostComponent={setShowPostComponent} setSelectedPost={setSelectedPost}/>
                     </Box>
                 </Box>
             </Grid>
@@ -55,7 +53,7 @@ export default function Page() {
                         mt: "4em",
                     }}
                 >
-                    <CreateComponent />
+                    <CreateComponent/>
                 </Box>
             </Grid>
         </Grid>

diff --git a/logic/frontend/web/src/app/profile/[slug]/page.tsx b/logic/frontend/web/src/app/profile/[slug]/page.tsx
@@ -5,7 +5,7 @@ import axios from "axios";
 import {useUser} from "@/provider/UserProvider";
 import {ProfileModel, PostModel} from "@/model/model";
 
-export default function Page({ params }: { params: { slug: string } }) {
+export default function Page({params}: { params: { slug: string } }) {
     const [profile, setProfile] = useState<ProfileModel | null>(null);
     const [posts, setPosts] = useState<Array<PostModel>>([]);
     const [loading, setLoading] = useState(true);
@@ -54,7 +54,7 @@ export default function Page({ params }: { params: { slug: string } }) {
     }, [user?.userId, params.slug]);
 
     if (loading) {
-        return <CircularProgress />;
+        return <CircularProgress/>;
     }
 
     if (!profile) {
@@ -116,7 +116,10 @@ export default function Page({ params }: { params: { slug: string } }) {
                     Posts
                 </Typography>
 
-                <Grid container spacing={2}>
+                <Grid container spacing={2} sx={{
+                    height: "71vh",
+                    overflowY: "scroll"
+                }}>
                     {posts.length === 0 ? (
                         <Typography variant="body2" sx={{color: "#C20B4E", textAlign: 'center', width: '100%'}}>
                             No posts yet.
@@ -147,6 +150,7 @@ export default function Page({ params }: { params: { slug: string } }) {
                             </Grid>
                         ))
                     )}
+                    <br/><br/>
                 </Grid>
             </Box>
         </Box>

diff --git a/logic/frontend/web/src/app/profile/page.tsx b/logic/frontend/web/src/app/profile/page.tsx
@@ -110,14 +110,17 @@ export default function Page() {
                     Posts
                 </Typography>
 
-                <Grid container spacing={2}>
+                <Grid container spacing={2} sx={{
+                    height: "71vh",
+                    overflowY: "scroll"
+                }}>
                     {posts.length === 0 ? (
                         <Typography variant="body2" sx={{color: "#C20B4E", textAlign: 'center', width: '100%'}}>
                             No posts yet.
                         </Typography>
                     ) : (
                         posts.map((post, index) => (
-                            <Grid item xs={12} key={index}>
+                            <Grid item p={0} xs={12} key={index}>
                                 <Card sx={{bgcolor: "#2E2F55", color: "#fff"}}>
                                     <CardContent>
                                         <Typography variant="h6">{post.title}</Typography>
@@ -141,6 +144,7 @@ export default function Page() {
                             </Grid>
                         ))
                     )}
+                    <br/><br/>
                 </Grid>
             </Box>
         </Box>

diff --git a/logic/frontend/web/src/component/HeaderComponent.tsx b/logic/frontend/web/src/component/HeaderComponent.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, {useEffect, useState} from 'react';
 import {AppBar, Autocomplete, Box, TextField, Toolbar, Typography} from "@mui/material";
+import Image from "next/image";
 import AccountCircle from '@mui/icons-material/AccountCircle';
 import { useUser } from '@/provider/UserProvider';
 import axios from "axios";
@@ -12,43 +13,58 @@ const HeaderComponent = () => {
     const [searchTerm, setSearchTerm] = useState('');
     const [options, setOptions] = useState<UserModel[]>([]);
 
-    useEffect(() => {
-        const fetchUsers = async () => {
-            if (searchTerm.length > 2) {
-                try {
-                    const response = await axios.get(`https://www.boast.social/api/users/search/${searchTerm}`, {
-                        headers: {
-                            'accept': '*/*',
-                            'reqUserId': '100'
-                        }
-                    });
-                    setOptions(response.data);
-                } catch (error) {
-                    console.error('Error fetching users:', error);
-                }
-            } else {
-                setOptions([]);
+    const fetchUsers = async () => {
+        if (searchTerm.length > 1) {
+            try {
+                const response = await axios.get(`https://www.boast.social/api/users/search/${searchTerm}`, {
+                    headers: {
+                        'accept': '*/*',
+                        'reqUserId': user?.userId || '100',
+                    }
+                });
+                setOptions(response.data);
+            } catch (error) {
+                console.error('Error fetching users:', error);
             }
-        };
+        } else {
+            setOptions([]);
+        }
+    };
 
+    useEffect(() => {
         fetchUsers();
     }, [searchTerm]);
 
 
     return (
         <AppBar position="static" sx={{ bgcolor: "#1C2357" }}>
             <Toolbar sx={{ mx: 3 }} disableGutters>
-                <Typography variant="h6" component="div">
-                    boast
-                </Typography>
-
-
+                <Image src={"/boast_white.png"} alt={"boast"} width={120} height={10}
+                       priority={true} style={{objectFit: "contain", width: "auto", height: "auto"}}/>
                 <Autocomplete
+                    sx={{
+                        width: 300,
+                        ml: 4,
+                        '& .MuiInputBase-root': {
+                            color: '#fff',
+                        },
+                        '& .MuiInputLabel-root': {
+                            color: '#fff',
+                        },
+                        '& .MuiAutocomplete-popupIndicator': {
+                            color: '#fff',
+                        },
+                        '& .MuiAutocomplete-clearIndicator': {
+                            color: '#fff',
+                        },
+                    }}
                     freeSolo
                     options={options}
-                    getOptionLabel={(option) => option.username}
+                    getOptionLabel={(option: UserModel | string ) => (typeof option === "string") ? option : option.username}
                     renderOption={(props, option) => (
-                        <Link href={`/profile/${option.username}`} passHref>
+                        <Link onClick={() => {
+                            setSearchTerm('')
+                        }} href={`/profile/${option.username}`} passHref>
                             <Box component="li" {...props}>
                                 {option.username}
                             </Box>
@@ -57,12 +73,14 @@ const HeaderComponent = () => {
                     renderInput={(params) => (
                         <TextField
                             {...params}
+                            InputLabelProps={{
+                                style: {color: '#fff'},
+                            }}
                             label="Search Users"
                             variant="outlined"
                             onChange={(e) => setSearchTerm(e.target.value)}
                         />
                     )}
-                    sx={{ width: 300, mx: 2}}
                 />
 
                 <Box sx={{flexGrow: 1}}></Box>

diff --git a/logic/frontend/web/src/component/SideBarComponent.tsx b/logic/frontend/web/src/component/SideBarComponent.tsx
@@ -1,10 +1,17 @@
+"use client";
+
 import { Drawer, Typography, List, ListItem, ListItemIcon, ListItemText } from "@mui/material";
 import { RocketLaunch, Person, Logout } from "@mui/icons-material";
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import Link from "next/link";
 import React from "react";
+import {usePathname} from "next/navigation";
 
 export default function SideBarComponent() {
+    const pathname = usePathname();
+
+    console.log(pathname)
+
     return (
         <Drawer
             sx={{
@@ -32,7 +39,7 @@ export default function SideBarComponent() {
                         </ListItemIcon>
                         <ListItemText>
                             <Typography
-                                sx={{ color: "#8691C3", fontWeight: "500", fontSize: "16px" }}
+                                sx={{ color: pathname === "/FYP" ? "#fff" : "#8691C3", fontWeight: "500", fontSize: "16px" }}
                             >
                                 For You
                             </Typography>
@@ -50,7 +57,7 @@ export default function SideBarComponent() {
                         </ListItemIcon>
                         <ListItemText>
                             <Typography
-                                sx={{ color: "#8691C3", fontWeight: "500", fontSize: "16px" }}
+                                sx={{ color: pathname === "/notification" ? "#fff" : "#8691C3", fontWeight: "500", fontSize: "16px" }}
                             >
                                 Notifications
                             </Typography>
@@ -68,7 +75,7 @@ export default function SideBarComponent() {
                         </ListItemIcon>
                         <ListItemText>
                             <Typography
-                                sx={{ color: "#8691C3", fontWeight: "500", fontSize: "16px" }}
+                                sx={{ color: pathname === "/profile" ? "#fff" : "#8691C3", fontWeight: "500", fontSize: "16px" }}
                             >
                                 Profile
                             </Typography>