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";
 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.tsx

@@ -0,0 +1,128 @@
+import axios from "axios";
+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";
+
+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%' 
+    },
+}));
+
+const ProfilePage = () => {
+
+    const [AuthorData, setAuthorData] = useState("");
+    const [posts, setPosts] = useState<Post[]>([]);
+
+    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();
+
+    return (
+    <>
+        <CssBaseline />
+        <AppBar position="relative">
+            <Toolbar>
+                <Typography variant="h6">
+                Profile Page
+                </Typography>
+            </Toolbar>
+        </AppBar>
+        <main>
+            <div className={classes.container}>
+                <Container maxWidth="sm">
+                    <img src={require("../assets/defaultprofile.jpg")} alt="profile-pic" className={classes.picture}/>
+                    <Typography variant="h4" align="center" color="black" >
+                        {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="h1" style={{ fontFamily: "Inria Serif, serif" }}>
+                                        {post.title}
+                                    </Typography>
+                                    <Typography variant="h3" style={{ fontFamily: "Bree Serif, serif" }}>
+                                        {post.description} 
+                                    </Typography>
+                                    <Typography variant="body1" style={{ fontFamily: "Bree Serif, serif" }}>
+                                        {post.content}
+                                    </Typography>
+                                </CardContent>
+                                <CardActions>
+                                    <Button size="small" color="primary">View</Button>
+                                    <Button size="small" color="primary">Delete</Button>
+                                </CardActions>
+                            </Card>
+                        </Grid>
+                    ))}
+                </Grid>
+            </Container>
+        </main>
+    </>
+  )
+}
+
+export default ProfilePage

client/src/enums/enums.tsx

@@ -0,0 +1,7 @@
+export enum ContentType {
+    BASE64 = "application/base64",
+    JPEG = "image/jpeg;base64",
+    MARKDOWN = "text/markdown",
+    PLAIN = "text/plain",
+    PNG = "image/png;base64",
+}

client/src/interfaces/interfaces.tsx

@@ -0,0 +1,31 @@
+import { ContentType } from "../enums/enums";
+
+export interface Author {
+  id: string;
+  createdAt: string;
+  displayName: string;
+  github?: string | null;
+  host: string;
+  profileImage: string;
+  url: string;
+}
+
+export interface Category {
+  category: string;
+}
+
+export interface Post {
+  id: string;
+  author: Author;
+  categories: Category[];
+  content?: string | null;
+  contentType: ContentType;
+  description: string;
+  title: string;
+  source: string;
+  origin: string;
+  published: string;
+  updatedAt?: string | null;
+  visibility: string;
+  unlisted: boolean;
+}

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