Commit 791517f5 authored by Keith Charlene Tan Esmena's avatar Keith Charlene Tan Esmena
Browse files

localStorage for filter of commits (#5)

parent d6c50dc1
import { useEffect, useState } from "react";
import { SetStateAction, useEffect, useState } from "react";
import Commit from "./commit";
import DatePicker from "react-datepicker";
function CommitView() {
function CommitView(this: any) {
// eslint-disable-next-line react-hooks/rules-of-hooks
const [commits, setCommits] = useState([]);
let token = "3Nhst8cnMWx5puz8KEzR";
......@@ -27,7 +26,6 @@ function CommitView() {
throw response;
})
.then((data) => {
console.log(data);
setCommits(data);
})
.catch((error) => {
......@@ -46,84 +44,92 @@ function CommitView() {
var displayDate = year + separator + correctFormatMonth + separator + day;
return displayDate;
}
function getCurrentDay(){
return getCurrentDate().substring(8,10);
function getCurrentDay() {
return getCurrentDate().substring(8, 10);
}
function getCurrentMonth(){
return getCurrentDate().substring(5,7);
function getCurrentMonth() {
return getCurrentDate().substring(5, 7);
}
function getCurrentYear(){
return getCurrentDate().substring(0,4);
function getCurrentYear() {
return getCurrentDate().substring(0, 4);
}
function getDay(date: string){
return date.substring(8,10);
function getDay(date: string) {
return date.substring(8, 10);
}
function getMonth(date: string){
return date.substring(5,7);
function getMonth(date: string) {
return date.substring(5, 7);
}
function getYear(date: string){
return date.substring(0,4);
function getYear(date: string) {
return date.substring(0, 4);
}
function getStartDate(){
function getStartDate() {
var separator = "-";
if(filterParam === "lastWeek"){
return getCurrentYear() + separator + getCurrentMonth() + separator + (parseInt(getCurrentDay()) - 7);
}
else if(filterParam === "lastTwoWeeks") {
return getCurrentYear() + separator + getCurrentMonth() + separator + (parseInt(getCurrentDay()) - 14);
}
else if(filterParam === "lastThreeWeeks" ) {
return getCurrentYear() + separator + getCurrentMonth() + separator + (parseInt(getCurrentDay()) - 21);
}
else if(filterParam === "thisMonth") {
return getCurrentYear() + separator + getCurrentMonth() + separator + "01";
}
else {
return "No commits"
if (filterParam === "lastWeek") {
return (
getCurrentYear() +
separator +
getCurrentMonth() +
separator +
(parseInt(getCurrentDay()) - 7)
);
} else if (filterParam === "lastTwoWeeks") {
return (
getCurrentYear() +
separator +
getCurrentMonth() +
separator +
(parseInt(getCurrentDay()) - 14)
);
} else if (filterParam === "lastThreeWeeks") {
return (
getCurrentYear() +
separator +
getCurrentMonth() +
separator +
(parseInt(getCurrentDay()) - 21)
);
} else if (filterParam === "thisMonth") {
return (
getCurrentYear() + separator + getCurrentMonth() + separator + "01"
);
} else {
return "No commits";
}
}
function getMonthLength(month: number) {
if(month === 2){
if (month === 2) {
return 28; // Dont care for skuddår right now
}
else if(month === 4 || month === 6 || month === 9 || month === 12) {
} else if (month === 4 || month === 6 || month === 9 || month === 12) {
return 30;
}
else {
} else {
return 31;
}
}
function getDayDifference(month: number) {
if(filterParam === "lastWeek"){
if (filterParam === "lastWeek") {
return 7;
}
else if (filterParam === "lastTwoWeeks"){
} else if (filterParam === "lastTwoWeeks") {
return 14;
}
else if(filterParam === "lastThreeWeeks") {
} else if (filterParam === "lastThreeWeeks") {
return 21;
}
else if(filterParam === "thisMonth"){
} else if (filterParam === "thisMonth") {
return getMonthLength(month);
}
else {
} else {
return 0;
}
}
function filterOnWeeks(){
function filterOnWeeks() {
var startDate = getStartDate();
console.log(startDate);
var startDay = parseInt(getDay(startDate.toString()));
var month = parseInt(getMonth(startDate.toString()));
var year = getYear(startDate.toString());
......@@ -131,71 +137,99 @@ function CommitView() {
var commitsList: any = [];
var dayDifference = getDayDifference(month);
var dateFormat = "";
console.log("DayDifference:" + dayDifference);
for(var i = 0; i <= dayDifference; i++) {
dateFormat = (year + separator + (month < 10 ? "0" + (month) : (month)) + separator + (startDay < 10 ? "0" + (startDay) : (startDay)));
console.log("DateFormat:" + dateFormat);
console.log("StartDay:" + startDay);
console.log()
console.log("Month:" + month)
if(startDay === getMonthLength(month) && month.toString().includes(month.toString())) {
for (var i = 0; i <= dayDifference; i++) {
dateFormat =
year +
separator +
(month < 10 ? "0" + month : month) +
separator +
(startDay < 10 ? "0" + startDay : startDay);
if (
startDay === getMonthLength(month) &&
month.toString().includes(month.toString())
) {
startDay = 0;
month ++;
month++;
}
console.log(startDay);
commitsList.push(commits.filter((issue: {committed_date: string}) =>
issue.committed_date.includes(dateFormat)).map(
(commit: { message: string; created_at: number }, index: React.Key) => (
commitsList.push(
commits
.filter((issue: { committed_date: string }) =>
issue.committed_date.includes(dateFormat)
)
.map(
(
commit: { message: string; created_at: number },
index: React.Key
) => (
<Commit
key={index}
title={commit.message}
date={commit.created_at}
/>)))
/>
)
)
);
startDay += 1;
}
return commitsList;
}
function displayCommits(){
if(filterParam === "all"){
function displayCommits() {
if (filterParam === "all") {
return commits.map(
(commit: { message: string; created_at: number }, index: React.Key) => (
<Commit
key={index}
title={commit.message}
date={commit.created_at}
/>))}
else if(filterParam === "today"){
return commits.filter((issue: {committed_date: string}) =>
issue.committed_date.includes(getCurrentDate())).map(
(commit: { message: string; created_at: number }, index: React.Key) => (
<Commit
key={index}
title={commit.message}
date={commit.created_at}
/>))
}
else {
(commit: { message: string; created_at: number }, index: React.Key) => (
<Commit key={index} title={commit.message} date={commit.created_at} />
)
);
} else if (filterParam === "today") {
return commits
.filter((issue: { committed_date: string }) =>
issue.committed_date.includes(getCurrentDate())
)
.map(
(
commit: { message: string; created_at: number },
index: React.Key
) => (
<Commit
key={index}
title={commit.message}
date={commit.created_at}
/>
)
);
} else {
return filterOnWeeks();
}
}
function handleSelectChange(event: {
target: { value: SetStateAction<string> };
}) {
setFilterParam(event.target.value);
localStorage.setItem("filterParam", String(event.target.value));
}
return (
<div className="commits">
<h3>Commits</h3>
<label>Filters:
<select onChange = {(e) => {
setFilterParam(e.target.value);}} >
<option value="all">All commits</option>
<option value="today">Today</option>
<option value="lastWeek">Last week</option>
<option value="lastTwoWeeks">Two weeks ago</option>
<option value="lastThreeWeeks">Three weeks ago</option>
<option value="thisMonth">This month</option>
</select>
</label>
{displayCommits()}
<label>
Filters:
<select
value={String(localStorage.getItem("filterParam"))}
onChange={handleSelectChange}
>
<option value="all">All commits</option>
<option value="today">Today</option>
<option value="lastWeek">Last week</option>
<option value="lastTwoWeeks">Two weeks ago</option>
<option value="lastThreeWeeks">Three weeks ago</option>
<option value="thisMonth">This month</option>
</select>
</label>
{displayCommits()}
</div>
);
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment