From 592b3680d36bc978e8510ec922627e150413fcd0 Mon Sep 17 00:00:00 2001 From: Kaye Ena Crayzhel Misay Date: Sun, 22 Oct 2023 21:35:49 -0600 Subject: [PATCH 1/7] refactor: move homepage to feed directory and export theme --- client/src/App.tsx | 2 +- client/src/components/{ => feed}/HomePage.tsx | 1 + client/src/index.tsx | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) rename client/src/components/{ => feed}/HomePage.tsx (97%) diff --git a/client/src/App.tsx b/client/src/App.tsx index 06874267..a5451784 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Routes, Route } from "react-router-dom"; -import HomePage from "./components/HomePage"; +import HomePage from "./components/feed/HomePage"; import Login from "./components/authentication/Login"; import SignUp from "./components/authentication/SignUp"; diff --git a/client/src/components/HomePage.tsx b/client/src/components/feed/HomePage.tsx similarity index 97% rename from client/src/components/HomePage.tsx rename to client/src/components/feed/HomePage.tsx index 25d0422c..35d4663f 100644 --- a/client/src/components/HomePage.tsx +++ b/client/src/components/feed/HomePage.tsx @@ -6,6 +6,7 @@ import { Box, CssBaseline, Paper } from "@mui/material"; import AppBar from "@mui/material/AppBar"; import MakePostModal from "./post/MakePostModal"; +const APP_URI = process.env.REACT_APP_URI; export default function HomePage() { const [isMakePostModalOpen, setIsMakePostModalOpen] = useState(false); diff --git a/client/src/index.tsx b/client/src/index.tsx index 18b48e0c..8139c1d4 100644 --- a/client/src/index.tsx +++ b/client/src/index.tsx @@ -9,7 +9,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom"; import "./index.css"; -const theme = createTheme({ +export const theme = createTheme({ palette: { primary: { main: "#103f5b", From 8632637dca9da0035d605d14b627250128805488 Mon Sep 17 00:00:00 2001 From: Kaye Ena Crayzhel Misay Date: Sun, 22 Oct 2023 21:37:07 -0600 Subject: [PATCH 2/7] feat: sort posts on GET via published field, descending --- server/socialdistribution/views.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/socialdistribution/views.py b/server/socialdistribution/views.py index e078aa86..7b228931 100644 --- a/server/socialdistribution/views.py +++ b/server/socialdistribution/views.py @@ -24,7 +24,7 @@ def get(self, request, author_id): get the recent posts from author AUTHOR_ID TODO: paginate """ - posts = Post.objects.filter(author__id=author_id) + posts = Post.objects.filter(author__id=author_id).order_by("-published") serializer = PostSerializer(posts, many=True, context={"request": request}) return Response(serializer.data, status=status.HTTP_200_OK) From 2b5ad83cac16b99423e58a3617ba6e0735364666 Mon Sep 17 00:00:00 2001 From: Kaye Ena Crayzhel Misay Date: Sun, 22 Oct 2023 21:37:22 -0600 Subject: [PATCH 3/7] cleanup: consistent "" --- server/socialdistribution/models/post.py | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/server/socialdistribution/models/post.py b/server/socialdistribution/models/post.py index 9018fe6e..cc7251ee 100644 --- a/server/socialdistribution/models/post.py +++ b/server/socialdistribution/models/post.py @@ -10,11 +10,11 @@ class Post(models.Model): """ # Types of content types class ContentType(models.TextChoices): - BASE64 = 'application/base64' # images can need base 64 decoding - JPEG = 'image/jpeg;base64' - MARKDOWN = 'text/markdown' - PLAIN = 'text/plain' - PNG = 'image/png;base64' + BASE64 = "application/base64" # images can need base 64 decoding + JPEG = "image/jpeg;base64" + MARKDOWN = "text/markdown" + PLAIN = "text/plain" + PNG = "image/png;base64" # Types of visibility for posts class Visibility(models.TextChoices): From 22d21d87d49a6aefa586e2e893f0cce7fdc6b3bf Mon Sep 17 00:00:00 2001 From: Kaye Ena Crayzhel Misay Date: Sun, 22 Oct 2023 21:37:56 -0600 Subject: [PATCH 4/7] feat: add interface and enums for typing (initial only, feel free to change) --- client/src/enums/enums.tsx | 7 +++++++ client/src/interfaces/interfaces.tsx | 31 ++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 client/src/enums/enums.tsx create mode 100644 client/src/interfaces/interfaces.tsx diff --git a/client/src/enums/enums.tsx b/client/src/enums/enums.tsx new file mode 100644 index 00000000..d7fd6573 --- /dev/null +++ b/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", +} diff --git a/client/src/interfaces/interfaces.tsx b/client/src/interfaces/interfaces.tsx new file mode 100644 index 00000000..5632b576 --- /dev/null +++ b/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; +} From 5d20ac7be458f36b40e607d69f6694643aa2e577 Mon Sep 17 00:00:00 2001 From: Kaye Ena Crayzhel Misay Date: Sun, 22 Oct 2023 21:38:51 -0600 Subject: [PATCH 5/7] feat: add initial display posts UI so that posts show up on webpage --- client/src/components/feed/HomePage.tsx | 40 +++++++++++++++++++++--- client/src/components/post/PostsList.tsx | 36 +++++++++++++++++++++ client/src/utils/dateUtils.tsx | 17 ++++++++++ 3 files changed, 88 insertions(+), 5 deletions(-) create mode 100644 client/src/components/post/PostsList.tsx create mode 100644 client/src/utils/dateUtils.tsx diff --git a/client/src/components/feed/HomePage.tsx b/client/src/components/feed/HomePage.tsx index 35d4663f..3ac513e9 100644 --- a/client/src/components/feed/HomePage.tsx +++ b/client/src/components/feed/HomePage.tsx @@ -1,20 +1,42 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import Button from "@mui/material/Button"; 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 MakePostModal from "./post/MakePostModal"; +import MakePostModal from "../post/MakePostModal"; +import PostsList from "../post/PostsList"; +import axios from "axios"; +import {Post} from "../../interfaces/interfaces"; + const APP_URI = process.env.REACT_APP_URI; export default function HomePage() { const [isMakePostModalOpen, setIsMakePostModalOpen] = useState(false); + const [posts, setPosts] = useState([]); const openMakePostModal = () => { setIsMakePostModalOpen(true); }; + 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); + } + }; + + // https://react.dev/reference/react/useEffect + useEffect(() => { + fetchPosts(); + }, []); + return ( <> @@ -32,7 +54,10 @@ export default function HomePage() { socialdistribution - + - - main + + + + + side { + return ( + <> + { posts.map(post => ( + + + {post.author.displayName[0]} + + } + title={post.author.displayName} + subheader={formatDateTime(post.published)} + /> + + {post.title} + {post.description} + {post.content} + + + ))} + + ); +}; + +export default PostsList; \ No newline at end of file diff --git a/client/src/utils/dateUtils.tsx b/client/src/utils/dateUtils.tsx new file mode 100644 index 00000000..ce48a143 --- /dev/null +++ b/client/src/utils/dateUtils.tsx @@ -0,0 +1,17 @@ +export function formatDateTime(date_str: string): string { + // TypeScript Date Object: https://www.javatpoint.com/typescript-date-object + const date = new Date(date_str); + const months = [ + "January", "February", "March", "April", "May", "June", + "July", "August", "September", "October", "November", "December" + ]; + + const hours = date.getHours(); + const minutes = String(date.getMinutes()).padStart(2, '0'); + + // Convert 24-hour format to 12-hour format and determine AM or PM + const twelveHour = hours % 12 || 12; + const amOrPm = hours < 12 ? "AM" : "PM"; + + return `${twelveHour}:${minutes} ${amOrPm}, ${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`; +} From b1b2e626a302d23ebe2bda85f33ed7e3c10b4e13 Mon Sep 17 00:00:00 2001 From: Kaye Ena Crayzhel Misay Date: Sun, 22 Oct 2023 21:39:10 -0600 Subject: [PATCH 6/7] feat: add callback when a post is created to fetch recent posts --- client/src/components/feed/HomePage.tsx | 1 + client/src/components/post/MakePostModal.tsx | 3 +++ 2 files changed, 4 insertions(+) diff --git a/client/src/components/feed/HomePage.tsx b/client/src/components/feed/HomePage.tsx index 3ac513e9..617cb0c5 100644 --- a/client/src/components/feed/HomePage.tsx +++ b/client/src/components/feed/HomePage.tsx @@ -89,6 +89,7 @@ export default function HomePage() { diff --git a/client/src/components/post/MakePostModal.tsx b/client/src/components/post/MakePostModal.tsx index 7934f6b6..ecbf02e3 100644 --- a/client/src/components/post/MakePostModal.tsx +++ b/client/src/components/post/MakePostModal.tsx @@ -23,9 +23,11 @@ const APP_URI = process.env.REACT_APP_URI; const MakePostModal = ({ isModalOpen, + onPostCreated, setIsModalOpen, }: { isModalOpen: boolean; + onPostCreated: () => void; setIsModalOpen: (isOpen: boolean) => void; }) => { const [title, setTitle] = useState(""); @@ -55,6 +57,7 @@ const MakePostModal = ({ try { await axios.post(url, payload); + onPostCreated(); handleClose(); } catch (error) { console.error("Failed to post", error); From 938f9e93f7078797867a971c1920c5675a3d9c4c Mon Sep 17 00:00:00 2001 From: rmgutierrez Date: Mon, 23 Oct 2023 07:28:47 -0600 Subject: [PATCH 7/7] UI changes - Top bar has fixed position - Left bar also has fixed position - Only the post area will be scrollable (right area is still scrollable - what are we putting here?) - Post cards now have sharp edges and are connected, separated via their borders - Margin initializations to make post cards look bigger - Reduced overall width of post cards(can be decided later) --- client/src/components/feed/HomePage.tsx | 15 +++++++++++---- client/src/components/post/PostsList.tsx | 12 ++++++++++-- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/client/src/components/feed/HomePage.tsx b/client/src/components/feed/HomePage.tsx index 617cb0c5..3afff6df 100644 --- a/client/src/components/feed/HomePage.tsx +++ b/client/src/components/feed/HomePage.tsx @@ -40,7 +40,7 @@ export default function HomePage() { return ( <> - + - + - + diff --git a/client/src/components/post/PostsList.tsx b/client/src/components/post/PostsList.tsx index 38bad4bc..3343e5bb 100644 --- a/client/src/components/post/PostsList.tsx +++ b/client/src/components/post/PostsList.tsx @@ -12,7 +12,14 @@ const PostsList = ({ return ( <> { posts.map(post => ( - + @@ -21,8 +28,9 @@ const PostsList = ({ } title={post.author.displayName} subheader={formatDateTime(post.published)} + sx = {{marginTop:2}} /> - + {post.title} {post.description} {post.content}