Commit 99b13c91 authored by Live Jortveit Sagebakken's avatar Live Jortveit Sagebakken
Browse files

(#3) Filter commits, all commits or commited today

parent 6c279786
......@@ -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 Commit from "./commit";
function commitView() {
function CommitView() {
// 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/
......@@ -33,22 +34,57 @@ function commitView() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
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 add 0 if month earlier than october to get correct format.
var year = dateObject.getFullYear();
var separator = "-";
var displayDate = year + separator + correctFormatMonth + separator + day;
return displayDate;
}
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 "No commits";
}
}
return (
<div className="commits">
<h3>Commits</h3>
{commits
? commits.map(
(commit: { message: string; created_at: number }, index) => (
<Commit
key={index}
title={commit.message}
date={commit.created_at}
/>
)
)
: "Ingen"}
<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="lastMonth">Last 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;
\ No newline at end of file
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