Commit ff18d138 authored by janickess's avatar janickess
Browse files

Merge branch '4-view-for-commit-info'

parents 74ebce3a 843a6df0
......@@ -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) {
......@@ -18,37 +18,80 @@ class Issue extends React.Component<any, any> {
})
.then((result) => result.json())
.then((issue) => this.setState({ issues: issue }));
console.log(this.state.issues);
}
render() {
render() {
const status = this.props.value;
if(status === "Alle"){
return (
<div>
{this.state.issues
.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>
))
}
</div>
);
}
else {
if (status === "All") {
return (
<div>
{this.state.issues
.filter((issue: {labels: string}) =>
issue.labels.includes(this.props.value))
.map((fIssue: {title: string, id:number}, index: React.Key) =>(
{this.state.issues.map(
(
issue: {
title: string;
id: number;
state: string;
labels: string;
},
index: React.Key
) => (
<div key={index} className="panel panel-default">
<div className="panel-heading">{fIssue.title}</div>
<div className="panel-body">{fIssue.id}</div>
<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>
))
}
)
)}
</div>
);
} else {
return (
<div>
{this.state.issues
.filter(
(issue: {
title: string;
id: number;
state: string;
labels: string;
}) => issue.labels.includes(this.props.value)
)
.map(
(
fIssue: {
title: string;
id: number;
state: string;
labels: string;
},
index: React.Key
) => (
<div key={index} className="panel panel-default">
<div className="panel-heading">{fIssue.title}</div>
<div className="panel-body">{fIssue.id}</div>
<Dashboard
infoText={
<div>
<h4>{fIssue.title}</h4>
<p>ID: {fIssue.id}</p>
<p>State: {fIssue.state}</p>
<p>Labels: {fIssue.labels}</p>
</div>
}
/>
</div>
)
)}
</div>
);
}
......
import React, { Component } from "react";
import React from "react";
import Issue from "./Issue";
class IssueView extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {value: 'Alle'};
this.handleChange = this.handleChange.bind(this);
this.state = { value: "Alle" };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event: any) {
this.setState({value: event.target.value});
handleChange(event: any) {
this.setState({ value: event.target.value });
}
render() {
return (
<>
<h3>Issues</h3>
<label>Filtrer issues:
<select value = {this.state.value} onChange = {this.handleChange}>
<option value="Alle">Alle</option>
<label>
Filter issues:
<select value={this.state.value} 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>
......
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>
);
}
......
......@@ -38,15 +38,19 @@ function commitView() {
<h3>Commits</h3>
{commits
? commits.map(
(commit: { message: string; created_at: number }, index) => (
(
commit: { title: string; committed_date: any; short_id: number },
index
) => (
<Commit
key={index}
title={commit.message}
date={commit.created_at}
title={commit.title}
date={commit.committed_date}
id={commit.short_id}
/>
)
)
: "Ingen"}
: "Nothing to show"}
</div>
);
}
......
//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