24 user profile

client/package.json

@@ -7,6 +7,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.14",
     "@mui/material": "^5.14.14",
+    "@mui/styles": "^5.14.14",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

client/src/App.tsx

@@ -7,6 +7,7 @@ import Login from "./components/authentication/Login";
 import SignUp from "./components/authentication/SignUp";
 
 import "./App.css";
+import ProfilePage from "./components/Profilepage/ProfilePage";
 import { ToastContainer } from "react-toastify";
 import { getToken } from "./utils/localStorageUtils";
 
@@ -33,6 +34,7 @@ const App = () => {
         <Route path="/home-page" element={<HomePage />} />
         <Route path="/login" element={<Login />} />
         <Route path="/sign-up" element={<SignUp />} />
+        <Route path="/profile-page" element={<ProfilePage />} />
       </Routes>
     </>
   );

client/src/components/Profilepage/ProfilePage.tsx

@@ -0,0 +1,167 @@
+import axios from "axios";
+import Popup from "./popup";
+import { useEffect, useState } from "react";
+import { Typography, CssBaseline, AppBar, Toolbar, Container, Card, Grid, CardMedia, CardContent, CardActions, Button} from "@mui/material"
+import { makeStyles } from "@mui/styles";
+import {Post} from "../../interfaces/interfaces";
+import "./styles.css";
+import { Link } from "react-router-dom";
+
+const APP_URI = process.env.REACT_APP_URI;
+
+const useStyles = makeStyles((theme) => ({
+    container : {
+        backgroundColor: "#FAF8F1",
+        paddingTop: "2rem",
+        paddingBottom: "2rem",
+        display: 'flex',
+        flexDirection: 'column',
+    }, 
+    picture :{
+        width: '30%',
+        height: '30%',
+        borderRadius: '50%',
+        display: 'block',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        marginTop: '20px',
+        marginBottom: '20px' 
+    }, 
+    cardGrid: {
+        paddingTop: "2rem",
+        paddingBottom: "2rem", 
+        dislpay: 'flex',
+        flexDirection: 'column',
+    },
+    card: {
+        width: '100%',
+        height: '100%' 
+    },
+    customLink: {
+        color: "white",
+        textDecoration: "none !important"
+    }
+}));
+
+const ProfilePage = () => {
+
+    const [AuthorData, setAuthorData] = useState("");
+    const [posts, setPosts] = useState<Post[]>([]);
+    const [openPopups, setOpenPopups] = useState<boolean[]>(Array(posts.length).fill(false));
+
+    const togglePopup = (index: number) => {
+        const newOpenPopups = [...openPopups];
+        newOpenPopups[index] = !newOpenPopups[index];
+        setOpenPopups(newOpenPopups);
+      };
+
+    const fetchAuthors = async () => {
+        // TODO: replace hardcoded author id with AUTHOR_ID
+        const url = `${APP_URI}author/5ba6d758-257f-4f47-b0b7-d3d5f5e32561/`;
+
+        try {
+            const response = await axios.get(url);
+            setAuthorData(response.data.displayName);
+        } catch (error) {
+            console.error("Error fetching author", error);
+        }
+    };
+
+    const fetchPosts = async () => {
+        // TODO: replace hardcoded author id with AUTHOR_ID
+        const url = `${APP_URI}author/5ba6d758-257f-4f47-b0b7-d3d5f5e32561/posts/`;
+
+        try {
+            const response = await axios.get(url);
+            setPosts(response.data);
+        } catch (error) {
+            console.error("Error fetching posts:", error);
+        }
+    };
+
+    useEffect(() => {
+        fetchAuthors();
+        fetchPosts();
+    }, []);
+
+    const username = AuthorData;
+    const classes = useStyles();
+
+    function limitContentTo100Words(content: string): string {
+        const words: string[] = content.split(' ');
+
+        if (words.length > 100) {
+          const limitedContent: string = words.slice(0, 100).join(' ');
+          return limitedContent + ' ...';
+        } else {
+          return content;
+        }
+    }
+
+    return (
+    <>
+        <CssBaseline />
+        <AppBar position="relative">
+            <Toolbar>
+                <Link to="/home-page">
+                    <Typography variant="h6" className={classes.customLink} style={{ textDecoration: 'none' }}>
+                        SocialDistribution
+                    </Typography>
+                </Link> 
+            </Toolbar>
+        </AppBar>
+        <main>
+            <div className={classes.container}>
+                <Container maxWidth="sm">
+                    <img src={require("../../assets/defaultprofile.jpg")} alt="profile-pic" className={classes.picture}/>
+                    <Typography variant="h2" align="center" color="black" style={{ fontFamily: "Bree Serif, serif" }}>
+                        {username}
+                    </Typography>
+                </Container>
+            </div>
+            <Container className={classes.cardGrid} maxWidth="md">
+                <Grid container spacing={4}>
+                    {posts.map((post, index) => (
+                        <Grid item key={index} xs={12} sm={12} md={12}>
+                            <Card className={classes.card}>
+                                <CardMedia>
+                                </CardMedia>
+                                <CardContent>
+                                    <Typography variant="h3" style={{ fontFamily: "Bree Serif, serif" }}>
+                                        {post.title}
+                                    </Typography>
+                                    <Typography variant="h5" style={{ fontFamily: "Bree Serif, serif" }}>
+                                        {post.description} 
+                                    </Typography>
+                                    <Typography variant="body1" style={{ fontFamily: "Bree Serif, serif" }}>
+                                        {limitContentTo100Words(post.content ? post.content : '')}
+                                    </Typography>
+                                </CardContent>
+                                <CardActions>
+                                    <Button size="small" color="primary" onClick={() => togglePopup(index)}>
+                                        View
+                                    </Button>
+                                    <Popup trigger={openPopups[index]} setTrigger={() => togglePopup(index)}>
+                                        <Typography variant="h3" style={{ fontFamily: "Bree Serif, serif" }}>
+                                            {post.title}
+                                        </Typography>
+                                        <Typography variant="h5" style={{ fontFamily: "Bree Serif, serif" }}>
+                                            {post.description} 
+                                        </Typography>
+                                        <Typography variant="body1" style={{ fontFamily: "Bree Serif, serif" }}>
+                                            {post.content}
+                                        </Typography>
+                                    </Popup>
+                                    <Button size="small" color="primary">Delete</Button>
+                                </CardActions>
+                            </Card>
+                        </Grid>
+                    ))}
+                </Grid>
+            </Container>
+        </main>
+    </>
+  )
+}
+
+export default ProfilePage

client/src/components/Profilepage/popup.css

@@ -0,0 +1,33 @@
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); 
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .popup-inner {
+    background-color: #fff;
+    padding: 20px; 
+    border-radius: 8px; 
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  }
+
+  .close-btn {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    font-size: 20px;
+    color: #333;
+    cursor: pointer;
+    background-color: #fff; /* White background */
+    padding: 8px; /* Adjust padding as needed */
+    border-radius: 10%; /* Rounded borders for a circular button */
+  }
+

client/src/components/Profilepage/popup.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import './popup.css';
+
+type PopupProps = {
+  trigger: boolean;
+  setTrigger: (value: boolean) => void;
+  children: React.ReactNode;
+};
+
+const Popup: React.FC<PopupProps> = (props) => {
+  return props.trigger ? (
+    <div className='modal'>
+      <div className='popup-inner'>
+        <button className='close-btn' onClick={() => props.setTrigger(false)}>close</button>
+        {props.children}
+      </div>
+    </div>
+  ) : null;
+};
+
+export default Popup;

client/src/components/Profilepage/styles.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap");

client/src/components/feed/HomePage.tsx

@@ -4,6 +4,7 @@ import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import { Box, CssBaseline, Paper } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
+import {useNavigate} from "react-router-dom";
 
 import MakePostModal from "../post/MakePostModal";
 import PostsList from "../post/PostsList";
@@ -20,6 +21,11 @@ export default function HomePage() {
     setIsMakePostModalOpen(true);
   };
 
+  const navigate = useNavigate();
+  const handleProfileClick = () => {
+    navigate("/profile-page");
+  };
+
   const fetchPosts = async () => {
     // TODO: replace hardcoded author id with AUTHOR_ID
     const url = `${APP_URI}author/5ba6d758-257f-4f47-b0b7-d3d5f5e32561/posts/`;
@@ -76,6 +82,13 @@ export default function HomePage() {
               Testing{" "}
             </Typography>
             <Box textAlign="center">
+              <Button
+                variant="contained"
+                style={{ marginTop: 10, width: "60%" }}
+                onClick={handleProfileClick}
+              >
+                Profile
+              </Button>
               <Button
                 variant="contained"
                 style={{ marginTop: 10, width: "60%" }}

server/socialdistribution/views.py

@@ -18,6 +18,12 @@ class AuthorView(APIView):
     queryset = Author.objects.all()
     serializer_class = AuthorSerializer
 
+    def get(self, request, author_id):
+        # get the author data whose id is AUTHOR_ID
+        author = Author.objects.get(id=author_id)
+        serializer = AuthorSerializer(author)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
 
 class PostsView(APIView):
     # add allowed HTTP requests