From 72276237d43adb591ba019a8ad5e7e8969bef30d Mon Sep 17 00:00:00 2001 From: Mehsheed Ahmed Syed Abdul Date: Tue, 28 Nov 2023 01:15:49 -0700 Subject: [PATCH 1/7] feat : Added GithubEventList Component --- .../components/Profilepage/ProfilePage.tsx | 13 ++ .../src/components/post/GitHubEventList.tsx | 178 ++++++++++++++++++ client/src/interfaces/interfaces.tsx | 18 ++ 3 files changed, 209 insertions(+) create mode 100644 client/src/components/post/GitHubEventList.tsx diff --git a/client/src/components/Profilepage/ProfilePage.tsx b/client/src/components/Profilepage/ProfilePage.tsx index 54eb5ede..ba20dcbf 100644 --- a/client/src/components/Profilepage/ProfilePage.tsx +++ b/client/src/components/Profilepage/ProfilePage.tsx @@ -27,7 +27,9 @@ import { Hosts, ImageLink, ShareType, ToastMessages, Username } from "../../enum import { useParams, useLocation } from "react-router-dom"; import MakePostModal from "../post/MakePostModal"; import LeftNavBar from "../template/LeftNavBar"; +import PostsList from "../post/PostsList"; +import GitHubEventList from "../post/GitHubEventList"; import CloseIcon from "@mui/icons-material/Close"; import FavoriteRoundedIcon from "@mui/icons-material/FavoriteRounded"; import FollowAuthorButton from "./FollowAuthorButton"; @@ -126,6 +128,7 @@ const ProfilePage = () => { github: response.data.github, profileImage: response.data.profileImage, }); + console.log("authorData", authorData); } } catch (error) { console.error("Error fetching author", error); @@ -136,6 +139,8 @@ const ProfilePage = () => { setIsMakePostModalOpen(true); }; + + const fetchPosts = useCallback(async () => { const url = (isLocal()) ? `${APP_URI}authors/${authorId}/posts/` : @@ -436,6 +441,14 @@ const ProfilePage = () => { posts={posts} /> + + + {authorData && authorData.github && ( + + )} +
{ + // Split the URL by '/' and get the last segment + const segments = url.split('/'); + return segments[segments.length - 1]; +}; + +const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { + const [githubEvents, setGitHubEvents] = useState([]); + const username = extractUsernameFromUrl(githubUrl); + const gitehubUrl = `https://api.github.com/users/${username}/events`; + + useEffect(() => { + const fetchGitHubEvents = async (): Promise => { + try { + const response = await axios.get(gitehubUrl); + const eventsData = response.data as Array; + + const filteredEvents = eventsData + .map((event: any) => ({ + id: event.id, + type: event.type, + created_at: event.created_at, + username: username, + repoName: event.repo.name, + repoUrl: event.repo.url, + actor: { + display_login: event.actor.display_login, + avatar_url: event.actor.avatar_url, + }, + payload: { + size: event.payload?.size, + action : event.payload?.action, + } + })) + .filter((event: any): event is GitHubEvent => { + + return ( + event.type === 'PushEvent' || + event.type === 'PullRequestEvent' || + event.type === 'ForkEvent' || + event.type === 'CreateEvent' || + event.type === 'IssueEvent' + ); + }); + + setGitHubEvents(filteredEvents.map((event: any) => ({ + ...event, + + }))); + } catch (error) { + console.error('Error fetching GitHub events:', error); + setGitHubEvents([]); + } + }; + + fetchGitHubEvents(); + }, [githubUrl, username,gitehubUrl]); + + const renderEventContent = (event: GitHubEvent) => { + switch (event.type) { + case 'PushEvent': + console.log(event.payload.size); + return ( + <> + + + {event.actor.display_login} pushed {event.payload.size} commits to {event.repoName} + + + ); + case 'PullRequestEvent': + return ( + <> + + {event.actor.display_login}{event.payload.size} a Pull Request. + + + ); + case 'ForkEvent': + return ( + <> + + Fork Event Specific Content: . + + + ); + case 'CreateEvent': + return ( + <> + + Create Event Specific Content: . + + + ); + case 'IssueEvent': + return ( + <> + + Issue Event Specific Content: Y. + + + ); + default: + return null; + } + }; + + return ( + + {githubEvents.length > 0 ? ( + githubEvents.map((event) => ( + + + } + title={event.actor.display_login} + subheader={formatDateTime(event.created_at)} + sx = {{margin:0}} + /> + + {event.type} + + + + {renderEventContent(event)} + + + + )) + ) : ( + + No GitHub events available... + + )} + + ); +}; + +export default GitHubEventsList; + + + + + + + + + + + + diff --git a/client/src/interfaces/interfaces.tsx b/client/src/interfaces/interfaces.tsx index c1b24323..32e84644 100644 --- a/client/src/interfaces/interfaces.tsx +++ b/client/src/interfaces/interfaces.tsx @@ -72,6 +72,24 @@ export interface Post { comments: string; } +export interface GitHubEvent { + id: string; + type: string; + created_at: string; + repoUrl: string; + repoName: string; + actor: { + display_login: string; + avatar_url: string; + }; + payload: { + size?: number; + action?: string; + + }; +} + + export interface Comment { id: string; author: Author; From 07b44475f4f8d909794750804ab6de1958a8a953 Mon Sep 17 00:00:00 2001 From: Mehsheed Ahmed Syed Abdul Date: Tue, 28 Nov 2023 11:26:29 -0700 Subject: [PATCH 2/7] feat : handle rest of the events and match global post format --- .../components/Profilepage/ProfilePage.tsx | 18 ++--- .../src/components/post/GitHubEventList.tsx | 69 ++++++++++--------- client/src/interfaces/interfaces.tsx | 6 +- 3 files changed, 49 insertions(+), 44 deletions(-) diff --git a/client/src/components/Profilepage/ProfilePage.tsx b/client/src/components/Profilepage/ProfilePage.tsx index ba20dcbf..68df694e 100644 --- a/client/src/components/Profilepage/ProfilePage.tsx +++ b/client/src/components/Profilepage/ProfilePage.tsx @@ -342,6 +342,7 @@ const ProfilePage = () => { paddingTop: 2, paddingBottom: 5, borderBottom: "1px solid #dbd9d9", + }} > { fetchPosts={fetchPosts} posts={posts} /> - - - - {authorData && authorData.github && ( - - )} - + + + {authorData && authorData.github && ( + + )} +
{ }, payload: { size: event.payload?.size, - action : event.payload?.action, + action: event.payload?.action, + title: event.payload?.title, + issue: { + title: event.payload?.issue?.title + } } })) .filter((event: any): event is GitHubEvent => { - + return ( event.type === 'PushEvent' || event.type === 'PullRequestEvent' || event.type === 'ForkEvent' || event.type === 'CreateEvent' || - event.type === 'IssueEvent' + event.type === 'IssuesEvent' ); }); setGitHubEvents(filteredEvents.map((event: any) => ({ ...event, - + }))); } catch (error) { console.error('Error fetching GitHub events:', error); @@ -81,7 +82,7 @@ const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { }; fetchGitHubEvents(); - }, [githubUrl, username,gitehubUrl]); + }, [githubUrl, username, gitehubUrl]); const renderEventContent = (event: GitHubEvent) => { switch (event.type) { @@ -91,7 +92,7 @@ const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { <> - {event.actor.display_login} pushed {event.payload.size} commits to {event.repoName} + {event.actor.display_login} pushed {event.payload.size} commit/s to {event.repoName} ); @@ -99,7 +100,7 @@ const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { return ( <> - {event.actor.display_login}{event.payload.size} a Pull Request. + {event.actor.display_login} {event.payload.action} a Pull Request in {event.repoName} ); @@ -107,7 +108,7 @@ const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { return ( <> - Fork Event Specific Content: . + {event.actor.display_login} forked a repository from {event.repoName} ); @@ -115,15 +116,15 @@ const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { return ( <> - Create Event Specific Content: . + {event.actor.display_login} created a repository at {event.repoName} ); - case 'IssueEvent': + case 'IssuesEvent': return ( <> - Issue Event Specific Content: Y. + {event.actor.display_login} {event.payload.action} " {event.payload?.issue?.title} " issue in {event.repoName} ); @@ -137,18 +138,18 @@ const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { {githubEvents.length > 0 ? ( githubEvents.map((event) => ( - - } - title={event.actor.display_login} - subheader={formatDateTime(event.created_at)} - sx = {{margin:0}} - /> + + } + title={event.actor.display_login} + subheader={formatDateTime(event.created_at)} + sx={{ margin: 0 }} + /> - {event.type} - - - + {/* {event.type} */} + + + {renderEventContent(event)} diff --git a/client/src/interfaces/interfaces.tsx b/client/src/interfaces/interfaces.tsx index 32e84644..4a5df4a6 100644 --- a/client/src/interfaces/interfaces.tsx +++ b/client/src/interfaces/interfaces.tsx @@ -85,7 +85,11 @@ export interface GitHubEvent { payload: { size?: number; action?: string; - + title?: string; + issue? : { + title?: string; + + } }; } From e7a665b9f0b2d160c6dc423f163530474d9488a9 Mon Sep 17 00:00:00 2001 From: Mehsheed Ahmed Syed Abdul Date: Tue, 28 Nov 2023 11:27:24 -0700 Subject: [PATCH 3/7] cleanup --- client/src/components/Profilepage/ProfilePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/Profilepage/ProfilePage.tsx b/client/src/components/Profilepage/ProfilePage.tsx index 68df694e..7b625b0c 100644 --- a/client/src/components/Profilepage/ProfilePage.tsx +++ b/client/src/components/Profilepage/ProfilePage.tsx @@ -128,7 +128,7 @@ const ProfilePage = () => { github: response.data.github, profileImage: response.data.profileImage, }); - console.log("authorData", authorData); + } } catch (error) { console.error("Error fetching author", error); From 34f2a748db93eef3ace2a2ae9d2321300cbff763 Mon Sep 17 00:00:00 2001 From: Mehsheed Ahmed Syed Abdul Date: Tue, 28 Nov 2023 22:09:45 -0700 Subject: [PATCH 4/7] cleanup --- .../src/components/post/GitHubEventList.tsx | 115 +++++++++--------- 1 file changed, 57 insertions(+), 58 deletions(-) diff --git a/client/src/components/post/GitHubEventList.tsx b/client/src/components/post/GitHubEventList.tsx index 10786f3b..b76b8939 100644 --- a/client/src/components/post/GitHubEventList.tsx +++ b/client/src/components/post/GitHubEventList.tsx @@ -1,30 +1,29 @@ -import React from 'react'; -import { Post, Author, GitHubEvent } from "../../interfaces/interfaces"; +import { GitHubEvent } from "../../interfaces/interfaces"; import { - Avatar, Card, CardContent, CardHeader, Typography, CardMedia, Link, - Grid, Button, IconButton, CardActionArea, ButtonBase + Avatar, + Card, + CardContent, + CardHeader, + Typography, + CardMedia, + Link, + Grid, + Button, + IconButton, + CardActionArea, + ButtonBase, } from "@mui/material"; import { formatDateTime } from "../../utils/dateUtils"; -import { getAuthorId } from "../../utils/localStorageUtils"; -import { renderVisibility } from '../../utils/postUtils'; -import { MuiMarkdown } from 'mui-markdown'; -import PostCategories from "./PostCategories"; -import { getAuthorIdFromResponse } from "../../utils/responseUtils"; - -import Tooltip from '@mui/material/Tooltip'; -import { useState, useEffect } from 'react'; -import { useNavigate, useParams } from 'react-router-dom'; -import axios from 'axios'; - - +import { useState, useEffect } from "react"; +import axios from "axios"; const APP_URI = process.env.REACT_APP_URI; const extractUsernameFromUrl = (url: string): string => { // Split the URL by '/' and get the last segment - const segments = url.split('/'); + const segments = url.split("/"); return segments[segments.length - 1]; }; @@ -56,27 +55,27 @@ const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { action: event.payload?.action, title: event.payload?.title, issue: { - title: event.payload?.issue?.title - } - } + title: event.payload?.issue?.title, + }, + }, })) .filter((event: any): event is GitHubEvent => { - return ( - event.type === 'PushEvent' || - event.type === 'PullRequestEvent' || - event.type === 'ForkEvent' || - event.type === 'CreateEvent' || - event.type === 'IssuesEvent' + event.type === "PushEvent" || + event.type === "PullRequestEvent" || + event.type === "ForkEvent" || + event.type === "CreateEvent" || + event.type === "IssuesEvent" ); }); - setGitHubEvents(filteredEvents.map((event: any) => ({ - ...event, - - }))); + setGitHubEvents( + filteredEvents.map((event: any) => ({ + ...event, + })) + ); } catch (error) { - console.error('Error fetching GitHub events:', error); + console.error("Error fetching GitHub events:", error); setGitHubEvents([]); } }; @@ -86,45 +85,52 @@ const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { const renderEventContent = (event: GitHubEvent) => { switch (event.type) { - case 'PushEvent': + case "PushEvent": console.log(event.payload.size); return ( <> - - {event.actor.display_login} pushed {event.payload.size} commit/s to {event.repoName} + {event.actor.display_login} pushed {" "} + {event.payload.size} commit/s to {event.repoName} ); - case 'PullRequestEvent': + case "PullRequestEvent": return ( <> - {event.actor.display_login} {event.payload.action} a Pull Request in {event.repoName} + {event.actor.display_login}{" "} + {event.payload.action} a Pull Request in{" "} + {event.repoName} ); - case 'ForkEvent': + case "ForkEvent": return ( <> - {event.actor.display_login} forked a repository from {event.repoName} + {event.actor.display_login} forked a repository + from {event.repoName} ); - case 'CreateEvent': + case "CreateEvent": return ( <> - {event.actor.display_login} created a repository at {event.repoName} + {event.actor.display_login} created a + repository at {event.repoName} ); - case 'IssuesEvent': + case "IssuesEvent": return ( <> - {event.actor.display_login} {event.payload.action} " {event.payload?.issue?.title} " issue in {event.repoName} + {event.actor.display_login}{" "} + {event.payload.action} " + {event.payload?.issue?.title} " issue in{" "} + {event.repoName} ); @@ -138,9 +144,16 @@ const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { {githubEvents.length > 0 ? ( githubEvents.map((event) => ( - + } + avatar={ + + } title={event.actor.display_login} subheader={formatDateTime(event.created_at)} sx={{ margin: 0 }} @@ -148,8 +161,6 @@ const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { {/* {event.type} */} - - {renderEventContent(event)} @@ -165,15 +176,3 @@ const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { }; export default GitHubEventsList; - - - - - - - - - - - - From b5e737861c7dd509ef383b13a9492b6cc91048cc Mon Sep 17 00:00:00 2001 From: Mehsheed Ahmed Syed Abdul Date: Tue, 28 Nov 2023 22:21:24 -0700 Subject: [PATCH 5/7] fix : check if valid github URL --- .../src/components/post/GitHubEventList.tsx | 91 +++++++++++-------- 1 file changed, 53 insertions(+), 38 deletions(-) diff --git a/client/src/components/post/GitHubEventList.tsx b/client/src/components/post/GitHubEventList.tsx index b76b8939..539b0210 100644 --- a/client/src/components/post/GitHubEventList.tsx +++ b/client/src/components/post/GitHubEventList.tsx @@ -21,10 +21,21 @@ import axios from "axios"; const APP_URI = process.env.REACT_APP_URI; -const extractUsernameFromUrl = (url: string): string => { - // Split the URL by '/' and get the last segment - const segments = url.split("/"); - return segments[segments.length - 1]; +const extractUsernameFromUrl = (url: string): string | null => { + try { + const urlObject = new URL(url); + + if ( + urlObject.hostname === "github.com" && + urlObject.pathname.split("/").length >= 2 + ) { + return urlObject.pathname.split("/")[1]; + } else { + return null; + } + } catch (error) { + return null; + } }; const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { @@ -139,40 +150,44 @@ const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { } }; - return ( - - {githubEvents.length > 0 ? ( - githubEvents.map((event) => ( - - - - } - title={event.actor.display_login} - subheader={formatDateTime(event.created_at)} - sx={{ margin: 0 }} - /> - - {/* {event.type} */} - - {renderEventContent(event)} - - - - )) - ) : ( - - No GitHub events available... - - )} - - ); + if (username !== null) { + return ( + + {githubEvents.length > 0 ? ( + githubEvents.map((event) => ( + + + + } + title={event.actor.display_login} + subheader={formatDateTime(event.created_at)} + sx={{ margin: 0 }} + /> + {renderEventContent(event)} + + + )) + ) : ( + + No GitHub events available... + + )} + + ); + } else { + return ( + + Invalid GitHub URL... + + ); + } }; export default GitHubEventsList; From 0371546ff430c718a3c01906ce5188dfeeac5310 Mon Sep 17 00:00:00 2001 From: Mehsheed Ahmed Syed Abdul Date: Tue, 28 Nov 2023 23:16:03 -0700 Subject: [PATCH 6/7] feat : add styling for GitHubEventList component --- .../components/Profilepage/ProfilePage.tsx | 2 +- .../src/components/post/GitHubEventList.tsx | 101 +++++++++++------- 2 files changed, 63 insertions(+), 40 deletions(-) diff --git a/client/src/components/Profilepage/ProfilePage.tsx b/client/src/components/Profilepage/ProfilePage.tsx index 7b625b0c..9298b0f8 100644 --- a/client/src/components/Profilepage/ProfilePage.tsx +++ b/client/src/components/Profilepage/ProfilePage.tsx @@ -27,7 +27,7 @@ import { Hosts, ImageLink, ShareType, ToastMessages, Username } from "../../enum import { useParams, useLocation } from "react-router-dom"; import MakePostModal from "../post/MakePostModal"; import LeftNavBar from "../template/LeftNavBar"; -import PostsList from "../post/PostsList"; + import GitHubEventList from "../post/GitHubEventList"; import CloseIcon from "@mui/icons-material/Close"; diff --git a/client/src/components/post/GitHubEventList.tsx b/client/src/components/post/GitHubEventList.tsx index 539b0210..750f5cb1 100644 --- a/client/src/components/post/GitHubEventList.tsx +++ b/client/src/components/post/GitHubEventList.tsx @@ -5,22 +5,16 @@ import { CardContent, CardHeader, Typography, - CardMedia, - Link, Grid, - Button, - IconButton, - CardActionArea, - ButtonBase, + Paper, } from "@mui/material"; + import { formatDateTime } from "../../utils/dateUtils"; import { useState, useEffect } from "react"; import axios from "axios"; -const APP_URI = process.env.REACT_APP_URI; - const extractUsernameFromUrl = (url: string): string | null => { try { const urlObject = new URL(url); @@ -153,40 +147,69 @@ const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { if (username !== null) { return ( - {githubEvents.length > 0 ? ( - githubEvents.map((event) => ( - - - - } - title={event.actor.display_login} - subheader={formatDateTime(event.created_at)} - sx={{ margin: 0 }} - /> - {renderEventContent(event)} - - - )) - ) : ( - - No GitHub events available... - - )} + + + + + theme.palette.background.paper, + boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)", + }} + > + {githubEvents.length > 0 ? ( + githubEvents.map((event) => ( + + } + title={event.actor.display_login} + subheader={formatDateTime(event.created_at)} + sx={{ margin: 0 }} + /> + {renderEventContent(event)} + + )) + ) : ( + + GitHub activity unavailable please check username + + )} + + ); } else { - return ( - - Invalid GitHub URL... - - ); + return ; } }; From 371fb85b3593dc63812cbf08169a8d7c3dc918a9 Mon Sep 17 00:00:00 2001 From: rmgutierrez Date: Wed, 29 Nov 2023 08:44:26 -0700 Subject: [PATCH 7/7] Updated styling --- .../src/components/post/GitHubEventList.tsx | 60 +++++++++++++++---- 1 file changed, 47 insertions(+), 13 deletions(-) diff --git a/client/src/components/post/GitHubEventList.tsx b/client/src/components/post/GitHubEventList.tsx index 750f5cb1..6fd6d96d 100644 --- a/client/src/components/post/GitHubEventList.tsx +++ b/client/src/components/post/GitHubEventList.tsx @@ -7,14 +7,19 @@ import { Typography, Grid, Paper, + Box } from "@mui/material"; +import { makeStyles } from "@mui/styles"; + import { formatDateTime } from "../../utils/dateUtils"; import { useState, useEffect } from "react"; import axios from "axios"; +import GitHubIcon from '@mui/icons-material/GitHub'; + const extractUsernameFromUrl = (url: string): string | null => { try { const urlObject = new URL(url); @@ -32,10 +37,19 @@ const extractUsernameFromUrl = (url: string): string | null => { } }; +const useStyles = makeStyles((theme) => ({ + root: { + "&::-webkit-scrollbar": { + width: 0, + }, + }, +})); + const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { const [githubEvents, setGitHubEvents] = useState([]); const username = extractUsernameFromUrl(githubUrl); const gitehubUrl = `https://api.github.com/users/${username}/events`; + const classes = useStyles(); useEffect(() => { const fetchGitHubEvents = async (): Promise => { @@ -156,52 +170,72 @@ const GitHubEventsList = ({ githubUrl }: { githubUrl: string }) => { alignItems: "center", }} > - + + + + Github + + theme.palette.background.paper, - boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)", + maxHeight: "85vh", + width: "100%" }} + className={classes.root} > {githubEvents.length > 0 ? ( githubEvents.map((event) => ( } - title={event.actor.display_login} + title={{event.actor.display_login}} subheader={formatDateTime(event.created_at)} sx={{ margin: 0 }} /> - {renderEventContent(event)} + {renderEventContent(event)} )) ) : ( - GitHub activity unavailable please check username + GitHub activity unavailable, please check username )}