Skip to content

implement commits activity for months #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 18, 2022
Merged

implement commits activity for months #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 125 additions & 35 deletions components/Calendar/calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,27 @@
import React from "react";
import React, { useState, useEffect } from "react";
import dayjs from "dayjs";
import styled from "styled-components";
import { randomInt } from "crypto";
import { useRouter } from "next/router";
import { useSelector, useDispatch } from "react-redux";
import { SelectedDateInterface, updateDate } from "@redux/actions";
import { Divider, Tooltip } from "@mui/material";
import { GitSt } from "@services/gitstory";
import CircularProgress from "@mui/material/CircularProgress";
import Link from "next/link";

interface RootState {
selectedDate: SelectedDateInterface;
}

export default function Calendar(props) {
const router = useRouter();
const [calendarState, setCalendarState] = useState([]);
const [monthActivityState, setMonthActivityState] = useState<any>({});
const [isLoading, setIsLoading] = useState(true);
const [isScanOn, setIsScanOn] = useState(false);
const GitStory = new GitSt();
GitStory.init({ client: "github", owner: router.query.slug[1], repo: router.query.slug[2] });

// Redux
const dispatch = useDispatch();
Expand All @@ -31,15 +40,10 @@ export default function Calendar(props) {
const month = date.month() + 1;
const year = date.year();

// Init array calendar
let calendar = [];

// Execute Calendar function
fillCalendar();

// Fill Calendar in Array
function fillCalendar() {
let counter = true;
let calendar = [];
weekdaysArray.forEach((day) => {
if (counter === true) {
if (String(day) === String(firstDayOfMonth)) {
Expand All @@ -52,12 +56,31 @@ export default function Calendar(props) {
}
}
});
setCalendarState(calendar);
isScanOn ? null : setIsLoading(false);
}

//
async function scanMonth(month, year) {
setIsScanOn(true);
setIsLoading(true);
let activity = await GitStory.getMonthCommitsActivity(year, month);
setMonthActivityState(activity);
console.log(activity);

setIsScanOn(false);
setIsLoading(false);
}

useEffect(() => {
fillCalendar();
}, [isLoading]);

// 📣 Interaction
//--------------------------------
function handleClickDayOfMonth(day, e) {
router.push("/[...slug]/date/[...date]", `/commits/${router.query.slug[0]}/${router.query.slug[1]}/${router.query.slug[2]}/date/${year}/${month}/${day}`);
e.preventDefault();
dispatch(
updateDate({
day: day,
Expand All @@ -70,33 +93,80 @@ export default function Calendar(props) {
// 📣 Rendering
//--------------------------------
function renderCalendar() {
return (
<CalendarBox>
<Tooltip title={"Check "+ monthsArray[month - 1] + " commits "}><MonthBox>
{monthsArray[month - 1]}
</MonthBox></Tooltip>
<HeadDaysOfTheWeek>
{weekdaysArray.map((day) => {
return (
<DayOfWeek>
<i key={day + randomInt}>{day} </i>
</DayOfWeek>
);
})}
</HeadDaysOfTheWeek>
<DaysOfTheMonth>
{calendar.map((day) => {
return (
<DayOfMonth onClick={(e) => handleClickDayOfMonth(day, e)}>
<DayBox key={day + randomInt} selected={parseInt(day) == state.day && month == state.month && year == state.year ? "selected" : null}>
{day}
</DayBox>
</DayOfMonth>
);
})}
</DaysOfTheMonth>
</CalendarBox>
);
if (isLoading) {
return (
<CalendarBox>
<Tooltip title={"Check " + monthsArray[month - 1] + " commits activity "}>
<MonthBox
onClick={() => {
scanMonth(month, year);
}}
>
{monthsArray[month - 1]}
</MonthBox>
</Tooltip>
<HeadDaysOfTheWeek>
{weekdaysArray.map((day) => {
return (
<DayOfWeek>
<i key={day + randomInt}>{day} </i>
</DayOfWeek>
);
})}
</HeadDaysOfTheWeek>
<LoadingPanel>
<CircularProgress style={{ color: "white" }} size={90} thickness={6} />
<h5>Searching for commits... this may take minutes</h5>
</LoadingPanel>
</CalendarBox>
);
} else {
return (
<CalendarBox>
<Tooltip
id={monthsArray[month - 1]}
arrow
enterDelay={800}
placement="top"
title={"🔬 Experimental: Check " + monthsArray[month - 1] + " commits activity "}
>
<MonthBox
onClick={() => {
scanMonth(month, year);
}}
>
{monthsArray[month - 1]}
</MonthBox>
</Tooltip>
<HeadDaysOfTheWeek>
{weekdaysArray.map((day) => {
return (
<DayOfWeek>
<i key={day + randomInt}>{day} </i>
</DayOfWeek>
);
})}
</HeadDaysOfTheWeek>
<DaysOfTheMonth>
{calendarState.map((day) => {
return (
<DayOfMonth>
<DayBox
key={day + randomInt}
activity={monthActivityState[day - 1] ? (monthActivityState[day - 1].commits > 0 ? monthActivityState[day - 1].commits : 0) : false}
selected={parseInt(day) == state.day && month == state.month && year == state.year ? "selected" : null}
>
<Link href={`/commits/${router.query.slug[0]}/${router.query.slug[1]}/${router.query.slug[2]}/date/${year}/${month}/${day}`}>
<a>{day}</a>
</Link>
</DayBox>
</DayOfMonth>
);
})}
</DaysOfTheMonth>
</CalendarBox>
);
}
}

// 📣 Final Rendering
Expand All @@ -114,7 +184,7 @@ const MonthBox = styled.div`
background-color: #ffffff14;
padding: 10px;
border-radius: 5px;
transition: 0.7s;
transition: 0.7s;

&:hover {
background-color: #363167;
Expand Down Expand Up @@ -208,6 +278,22 @@ const CalendarBox = styled.div`
}
`;

const LoadingPanel = styled.div`
//center everything in the box
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 230px;
width: 100%;
h5 {
width: 80%;
padding-top: 20px;
text-align: center;
}
//
`;

// CSS
const DayBox: any = styled.div`
background-color: ${(props: any) => (props.selected ? "white" : null)};
Expand All @@ -217,6 +303,10 @@ const DayBox: any = styled.div`
cursor: pointer;
transition: 0.2s;

// Active status
border-bottom: ${(props: any) => (props.activity ? "solid" : null)};
border-color: ${(props: any) => (props.activity ? "hsl(141deg 89% 72% / " + (props.activity + 20) + "%);" : null)};

&:hover {
background-color: ${(props: any) => (props.selected ? "white" : "#101417")};
color: ${(props: any) => (props.selected ? "black" : "white")};
Expand Down
23 changes: 14 additions & 9 deletions pages/commits/[[...slug]].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Header from "@components/Header/Header";
import { useRouter } from "next/router";
import Link from 'next/link';
import { useEffect, useState } from "react";
import styled from "styled-components";
import { GitSt } from "@services/gitstory";
Expand All @@ -11,7 +12,7 @@ import AccessTimeFilledIcon from "@mui/icons-material/AccessTimeFilled";
import Tooltip from "@mui/material/Tooltip";
import InfoIcon from "@mui/icons-material/Info";
import FancyRender from "@components/Loading/FancyRender";
import NumbersIcon from '@mui/icons-material/Numbers';
import NumbersIcon from "@mui/icons-material/Numbers";
import Footer from "@components/Footer/Footer";

export default function Repo() {
Expand Down Expand Up @@ -73,16 +74,20 @@ export default function Repo() {
</RepoBar>
<SubRepoInfo>
<BackToCalendarBtn>
<a href={`/calendar/${slug[0]}/${slug[1]}/${slug[2]}`}>
<Tooltip title="Back to Calendar">
<KeyboardBackspaceIcon sx={{ fontSize: "20px" }} />
</Tooltip>
</a>
<Link href={`/calendar/${slug[0]}/${slug[1]}/${slug[2]}`}>
<a>
<Tooltip title="Back to Calendar">
<KeyboardBackspaceIcon sx={{ fontSize: "20px" }} />
</Tooltip>
</a>
</Link>
</BackToCalendarBtn>
<span>
<InfoIcon sx={{fontSize:"13px"}}></InfoIcon> Commits on {dayjs(slug[4] + "-" + slug[5] + "-" + slug[6]).format("DD MMMM YYYY")}
<InfoIcon sx={{ fontSize: "13px" }}></InfoIcon> Commits on {dayjs(slug[4] + "-" + slug[5] + "-" + slug[6]).format("DD MMMM YYYY")}
</span>
<div><NumbersIcon sx={{fontSize:"13px"}}></NumbersIcon> {dateCommits.length} Commits</div>
<div>
<NumbersIcon sx={{ fontSize: "13px" }}></NumbersIcon> {dateCommits.length} Commits
</div>
</SubRepoInfo>
</GradientHeader>
<ListOfCommitsBox>
Expand Down Expand Up @@ -191,7 +196,7 @@ const SubRepoInfo = styled.div`
padding: 18px;
}

div{
div {
padding: 18px;
}
`;
Expand Down
20 changes: 18 additions & 2 deletions services/gitstory.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import GitStory from "gitstorykit";
import Cookies from "js-cookie";
import dayjs from "dayjs";

interface ParamsInterface {
client: any;
Expand All @@ -8,8 +9,6 @@ interface ParamsInterface {
auth?: string;
}



export class GitSt {
private config;
private client: string;
Expand Down Expand Up @@ -39,4 +38,21 @@ export class GitSt {
let commits = await this.gitstory.getCommitsBetweenDates(startDate, endDate, per_page, page);
return commits;
}

public async getMonthCommitsActivity(year: string, month: string) {
let daysinmonth = dayjs("2019-01-25").daysInMonth();
let CommitsActivityArray = [];
for (let index = 0; index < daysinmonth; index++) {
let date = dayjs(`${year}-${month}-${index + 1}`).format("YYYY-MM-DD");
let firsthour = dayjs(date).startOf("day").format("YYYY-MM-DDTHH:mm:ssZ");
let lasthour = dayjs(date).endOf("day").format("YYYY-MM-DDTHH:mm:ssZ");
let commits = await this.getCommitsBetween(firsthour, lasthour, 100, 0);
// push commits activity to array with day as key
CommitsActivityArray.push({
day: dayjs(date),
commits: commits.data.length,
});
}
return CommitsActivityArray;
}
}