Commit 385f7f64 authored by Keith Charlene Tan Esmena's avatar Keith Charlene Tan Esmena
Browse files

Merge branch '5-storage-commits' of...

Merge branch '5-storage-commits' of https://gitlab.stud.idi.ntnu.no/it2810-h21/team-10/webdev into 5-all-storage
parents 09ce8d9c 791517f5
......@@ -4,7 +4,8 @@ type commitProps = {
title: string;
date: number;
};
function commit({ title, date }: commitProps) {
function Commit({ title, date }: commitProps) {
return (
<div className="panel panel-default">
<div className="panel-heading">{title}</div>
......@@ -13,4 +14,4 @@ function commit({ title, date }: commitProps) {
);
}
export default commit;
export default Commit;
import { useEffect, useState } from "react";
import { SetStateAction, useEffect, useState } from "react";
import Commit from "./commit";
import FilterCommits from "./filterCommits";
function commitView() {
function CommitView(this: any) {
// eslint-disable-next-line react-hooks/rules-of-hooks
const [commits, setCommits] = useState([]);
let token = "3Nhst8cnMWx5puz8KEzR";
const [filterParam, setFilterParam] = useState("all");
// eslint-disable-next-line react-hooks/rules-of-hooks
useEffect(() => {
// Kode hentet fra https://www.freecodecamp.org/news/fetch-data-react/
......@@ -25,7 +26,6 @@ function commitView() {
throw response;
})
.then((data) => {
console.log(data);
setCommits(data);
})
.catch((error) => {
......@@ -34,13 +34,135 @@ function commitView() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<div className="commits">
<h3>Commits</h3>
<FilterCommits />
{commits
? commits.map(
(commit: { message: string; created_at: number }, index) => (
function getCurrentDate() {
var dateObject = new Date();
var day = dateObject.getDate();
var month = dateObject.getMonth() + 1; // Must add 1 as January is equal to 0 if not
var correctFormatMonth = month < 10 ? "0" + month : month; // Must have 0 if month earlier than october to get correct dateformat
var year = dateObject.getFullYear();
var separator = "-";
var displayDate = year + separator + correctFormatMonth + separator + day;
return displayDate;
}
function getCurrentDay() {
return getCurrentDate().substring(8, 10);
}
function getCurrentMonth() {
return getCurrentDate().substring(5, 7);
}
function getCurrentYear() {
return getCurrentDate().substring(0, 4);
}
function getDay(date: string) {
return date.substring(8, 10);
}
function getMonth(date: string) {
return date.substring(5, 7);
}
function getYear(date: string) {
return date.substring(0, 4);
}
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";
}
}
function getMonthLength(month: number) {
if (month === 2) {
return 28; // Dont care for skuddår right now
} else if (month === 4 || month === 6 || month === 9 || month === 12) {
return 30;
} else {
return 31;
}
}
function getDayDifference(month: number) {
if (filterParam === "lastWeek") {
return 7;
} else if (filterParam === "lastTwoWeeks") {
return 14;
} else if (filterParam === "lastThreeWeeks") {
return 21;
} else if (filterParam === "thisMonth") {
return getMonthLength(month);
} else {
return 0;
}
}
function filterOnWeeks() {
var startDate = getStartDate();
var startDay = parseInt(getDay(startDate.toString()));
var month = parseInt(getMonth(startDate.toString()));
var year = getYear(startDate.toString());
var separator = "-";
var commitsList: any = [];
var dayDifference = getDayDifference(month);
var dateFormat = "";
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++;
}
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}
......@@ -48,9 +170,68 @@ function commitView() {
/>
)
)
: "Ingen"}
);
startDay += 1;
}
return commitsList;
}
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 {
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
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>
);
}
export default commitView;
export default CommitView;
import React, { useState } from "react";
import commitView from "./commitView";
import commit from "./commit";
// Resource: https://reactjs.org/docs/forms.html
class filterCommits extends React.Component<{}, { value: string }>{
constructor(props: string) {
super(props);
this.state = {value: 'Alle commits'};
this.handleChange = this.handleChange.bind(this);
}
// Todo: Trenger å finne ut av hva slags type event er
// Bytte navn til filter-funksjon eller noe mer spesifikt
handleChange(event: any) {
this.setState({value: event.currentTarget.value});
alert("Filter on: " + event.currentTarget.value);
}
// Videre: Tror jeg må flytte alle commitsa hit fra commitView, eventuelt lage et interface eller noe (refactoring)
render(){
return (
<div>
<label>Filtrer commits:
<select value = {this.state.value} onChange = {this.handleChange}>
<option value="AllCommits">Alle commits</option>
<option value="lastSevenDays">Siste 7 dager</option>
<option value="lastFourteenDays">Siste 14 dager</option>
<option value="lastTwentyoneDays">Siste 21 dager</option>
<option value="lastThirtyDays">Siste 30 dager</option>
</select>
</label>
</div>
);
}
}
export default filterCommits;
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