Commit 786a69db authored by Keith Charlene Tan Esmena's avatar Keith Charlene Tan Esmena
Browse files

Merge branch 'master' of...

Merge branch 'master' of https://gitlab.stud.idi.ntnu.no/it2810-h21/team-10/webdev into 5-all-storage
parents 385f7f64 cadfe8c8
......@@ -25,6 +25,12 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
......
......@@ -37,6 +37,10 @@
}
}
.panel {
padding: 20px;
}
.panel-heading {
font-weight: bold;
}
......
import React, { useEffect, useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import IssueView from "./components/IssueView";
import CommitView from "./components/commitView";
// import ModalTemplate from "./components/modalTemplate";
// import Dashboard from "./components/dashboard";
function App() {
return (
<>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<div className="App">
<header className="App-header">
<h1>Gitlab statistikk</h1>
</header>
<IssueView />
<CommitView />
</div>
</>
<div className="App">
<header className="App-header">
<h1>Gitlab statistikk</h1>
</header>
{/* <ModalTemplate /> */}
<IssueView />
<CommitView />
</div>
);
}
export default App;
function componentDidMount() {
throw new Error("Function not implemented.");
}
import React, { Component, useEffect, useState } from "react";
import IssueView from "./IssueView";
import React from "react";
import Dashboard from "./dashboard";
class Issue extends React.Component<any, any> {
constructor(props: any) {
......@@ -26,12 +26,27 @@ class Issue extends React.Component<any, any> {
.filter((issue: { labels: string }) =>
status === "All" ? issue : issue.labels.includes(this.props.value)
)
.map((issue: { title: string; id: number }, index: React.Key) => (
<div key={index} className="panel panel-default">
<div className="panel-heading">{issue.title}</div>
<div className="panel-body">{issue.id}</div>
</div>
));
.map(
(
issue: { title: string; id: number; state: string; labels: string },
index: React.Key
) => (
<div key={index} className="panel panel-default">
<div className="panel-heading">{issue.title}</div>
<div className="panel-body">{issue.id}</div>
<Dashboard
infoText={
<div>
<h4>{issue.title}</h4>
<p>ID: {issue.id}</p>
<p>State: {issue.state}</p>
<p>Labels: {issue.labels}</p>
</div>
}
/>
</div>
)
);
return (
<div>
......
import React, { Component } from "react";
import React from "react";
import Issue from "./Issue";
class IssueView extends React.Component<any, any> {
......@@ -25,17 +25,15 @@ class IssueView extends React.Component<any, any> {
return (
<>
<h3>Issues</h3>
<label>Filter issues: </label>
<select
value={this.state.issueFilter}
onChange={this.handleChange}
id="issues"
>
<option value="All">All</option>
<option value="To do">To do</option>
<option value="Doing">Doing</option>
<option value="Done">Done</option>
</select>
<label>
Filter issues:
<select value={this.state.issueFilter} onChange={this.handleChange}>
<option value="All">All</option>
<option value="To do">To do</option>
<option value="Doing">Doing</option>
<option value="Done">Done</option>
</select>
</label>
<div id="issueBox">
{/* Må ha dette hvis Issue skal inni en IssueBox i App: {this.props.children} */}
<Issue value={this.state.issueFilter} />
......
import React from "react";
import Dashboard from "./dashboard";
type commitProps = {
title: string;
date: number;
date: any;
id: number;
};
function Commit({ title, date }: commitProps) {
function commit({ title, date, id }: commitProps) {
var newDate = new Date(date);
let str = newDate.toDateString();
return (
<div className="panel panel-default">
<div className="panel-heading">{title}</div>
<div className="panel-body">{date}</div>
<div className="panel-body">{str}</div>
<Dashboard
infoText={
<div>
<h4>{title}</h4>
<p>ID: {id}</p>
<p>Date: {str}</p>
</div>
}
/>
</div>
);
}
export default Commit;
export default commit;
import { SetStateAction, useEffect, useState } from "react";
import Commit from "./commit";
function CommitView(this: any) {
// eslint-disable-next-line react-hooks/rules-of-hooks
function CommitView() {
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/
fetch(
......@@ -31,7 +29,6 @@ function CommitView(this: any) {
.catch((error) => {
console.error("Error fetching data: ", error);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
function getCurrentDate() {
......@@ -106,7 +103,7 @@ function CommitView(this: any) {
function getMonthLength(month: number) {
if (month === 2) {
return 28; // Dont care for skuddår right now
return 28; // Dont care for leap year right now
} else if (month === 4 || month === 6 || month === 9 || month === 12) {
return 30;
} else {
......@@ -137,7 +134,6 @@ function CommitView(this: any) {
var commitsList: any = [];
var dayDifference = getDayDifference(month);
var dateFormat = "";
for (var i = 0; i <= dayDifference; i++) {
dateFormat =
year +
......@@ -145,14 +141,6 @@ function CommitView(this: any) {
(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 }) =>
......@@ -167,6 +155,7 @@ function CommitView(this: any) {
key={index}
title={commit.message}
date={commit.created_at}
id={0}
/>
)
)
......@@ -180,7 +169,12 @@ function CommitView(this: any) {
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} />
<Commit
key={index}
title={commit.message}
date={commit.created_at}
id={0}
/>
)
);
} else if (filterParam === "today") {
......@@ -197,6 +191,7 @@ function CommitView(this: any) {
key={index}
title={commit.message}
date={commit.created_at}
id={0}
/>
)
);
......
//Kode hentet fra https://www.digitalocean.com/community/tutorials/react-modal-component
import React, { useState } from "react";
import Modal from "./modal";
const dashboard = ({ infoText }: any) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const [show, setShow] = useState(false);
let showModal = () => {
setShow(true);
};
let hideModal = () => {
setShow(false);
};
return (
<main>
<Modal show={show} handleClose={hideModal}>
<div className="modal_text">{infoText}</div>
</Modal>
<button type="button" onClick={showModal}>
Show details
</button>
</main>
);
};
export default dashboard;
/* Kode hentet fra https://www.digitalocean.com/community/tutorials/react-modal-component */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
.modal-main {
position: fixed;
background: rgb(243, 243, 243);
width: 80%;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border-radius: 10px;
border-width: 1px;
border-style: solid;
}
//Kode hentet fra https://www.digitalocean.com/community/tutorials/react-modal-component
import "./modal.css";
const modal = ({ handleClose, show, children }: any) => {
//let showHideClassName = show ? "modal display-block" : "modal display-none";
let showHideStyle = show ? "block" : "none";
return (
<div className="modal" style={{ display: showHideStyle }}>
<section className="modal-main">
{children}
<button type="button" onClick={handleClose}>
Close
</button>
</section>
</div>
);
};
export default modal;
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