import React from "react"; import styled from "styled-components"; import { GoTrashcan, GoRepoForked, GoRepoPull, GoComment, GoGitBranch, GoPlus, GoRepoPush, GoStar, GoBook, GoIssueClosed, GoIssueOpened, } from "react-icons/go"; const ActivitiesContainer = styled.div` margin: 3rem auto; width: 100rem; & ul li a { text-decoration: none; &:link, &:visited { color: #0098f0; } &:hover, &:active { text-decoration: underline; } } @media only screen and (max-width: 1000px) { width: 100%; } `; const ActivitiesItem = styled.div` padding: 2rem 4rem; margin-bottom: 2rem; width: 100%; display: flex; flex-wrap: wrap; border-radius: 5px; box-shadow: 0 1rem 2rem -0.6rem rgba(0,0,0, .2); justify-content: space-between; background-color: ${p => p.theme.cardColor}; `; const ActivityDiv = styled.div` width: 75%; & svg { vertical-align: middle; margin-bottom: 4px; margin-right: 5px; } @media only screen and (max-width: 600px) { width: 100%; } `; const TimeDiv = styled.div` width: 25%; display: flex; justify-content: flex-end; @media only screen and (max-width: 600px) { justify-content: flex-start; margin-top: 1rem; width: 100%; } `; const FlexContainer = styled.div` width: 100%; display: flex; justify-content: center; `; const Activities = ({ activityData }) => { const extractActivity = () => { const message = activityData.map((activity) => { let icon = ""; let action = ""; let actionPerformed; // For Pull req let repoName = activity.repo.name; let time = new Date(activity.created_at) .toDateString() .split(" ") .slice(1) .join(" "); switch (activity.type) { case "CommitCommentEvent": break; case "CreateEvent": if (activity.payload.ref_type === "branch") { icon = <GoGitBranch />; action = `Created a branch ${activity.payload.ref} in `; } else { icon = <GoPlus />; action = `Created a ${activity.payload.ref_type} in `; } break; case "DeleteEvent": icon = <GoTrashcan />; action = `Deleted a ${activity.payload.ref_type} ${activity.payload.ref} from `; break; case "ForkEvent": icon = <GoRepoForked />; action = `Forked a repository ${repoName} to `; repoName = activity.payload.forkee.full_name; break; case "IssueCommentEvent": icon = <GoComment />; actionPerformed = activity.payload.action.charAt(0).toUpperCase() + activity.payload.action.slice(1); action = `${actionPerformed} a comment on an issue in `; break; case "IssuesEvent": if (activity.payload.action === "closed") { icon = <GoIssueClosed />; } else { icon = <GoIssueOpened />; } actionPerformed = activity.payload.action.charAt(0).toUpperCase() + activity.payload.action.slice(1); action = `${actionPerformed} an issue in `; break; case "PullRequestEvent": if (activity.payload.action === "closed") { icon = <GoTrashcan />; } else { icon = <GoRepoPull />; } actionPerformed = activity.payload.action.charAt(0).toUpperCase() + activity.payload.action.slice(1); action = `${actionPerformed} a pull request in `; break; case "PullRequestReviewCommentEvent": icon = <GoComment />; actionPerformed = activity.payload.action.charAt(0).toUpperCase() + activity.payload.action.slice(1); action = `${actionPerformed} a comment on their pull request in `; break; case "PushEvent": icon = <GoRepoPush />; let commit = "commit"; let branch = activity.payload.ref.slice(11); if (activity.payload.size > 1) { commit = "commits"; } action = `Pushed ${activity.payload.size} ${commit} to ${branch} in `; break; case "WatchEvent": icon = <GoStar />; action = "Starred the repository "; break; case "ReleaseEvent": icon = <GoBook />; actionPerformed = activity.payload.action.charAt(0).toUpperCase() + activity.payload.action.slice(1); action = `${actionPerformed} a release in `; break; default: action = ""; } return { icon, action, repoName, time }; }); return message; }; const buildActivityList = () => { const messages = extractActivity(); if (messages.length !== 0) { return messages.map((message) => ( <li> <ActivitiesItem> <ActivityDiv> <span> {message.icon} {message.action} </span> <a href={`https://github.com/${message.repoName}`}> {message.repoName} </a> </ActivityDiv> <TimeDiv>{message.time}</TimeDiv> </ActivitiesItem> </li> )); } else { return ( <li> <ActivitiesItem> <FlexContainer> No recent activities found :( </FlexContainer> </ActivitiesItem> </li> ); } }; return ( <> <ActivitiesContainer> <ul>{buildActivityList()}</ul> </ActivitiesContainer> </> ); }; export default Activities;