Skip to content

Commit

Permalink
feat(benchmarks): add navigation and error messages
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mikadows @angristan
Mikadows authored and angristan committed May 29, 2021
1 parent c0659dd commit 69329c6
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 24 deletions.
15 changes: 2 additions & 13 deletions src/components/benchmarks/Benchmarks.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { createBrowserHistory as history} from 'history';
import {BenchmarkServices} from "../../api/BenchmarkServices";
import { Link } from "react-router-dom";

// @ts-ignore
function BenchmarkRow({benchmark}) {
Expand Down Expand Up @@ -38,14 +38,11 @@ function BenchmarkRow({benchmark}) {
{benchmark.creator.name}
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
{/*<a href="#" className="text-indigo-600 hover:text-indigo-900">View</a>*/}
<button className="text-indigo-600 hover:text-indigo-900" disabled>View</button>
{/*<a className="text-indigo-600 hover:text-indigo-900">View</a>*/}
</td>
</tr>
}


export class Benchmarks extends React.Component<{}, { benchmarksJson: benchmarkModel[] }> {

constructor(props: any) {
Expand All @@ -65,20 +62,12 @@ export class Benchmarks extends React.Component<{}, { benchmarksJson: benchmarkM
this.onLoadData();
}

navigateToBenchCreation() {
history().push('/benchmarks/create')
}

render() {
return <>
<header className="bg-white shadow">
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between" >
<h1 className="text-3xl font-bold text-gray-900">Benchmarks</h1>
{/*<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">*/}

<button onClick={() => this.navigateToBenchCreation()} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
Create
</button>
<Link className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full" to="/benchmarks/create">Create</Link>
</div>
</header>
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
Expand Down
64 changes: 53 additions & 11 deletions src/components/benchmarks/CreateBenchmark.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,50 @@
import React from "react";
import {BenchmarkServices} from "../../api/BenchmarkServices";
import {Link} from "react-router-dom";

export class CreateBenchmark extends React.Component<{}, { state: String, message: String }> {
constructor(props: {} | Readonly<{}>) {
super(props);
this.state = {
state: '',
message: '',
}
this.onSubmit = this.onSubmit.bind(this);
}

export class CreateBenchmark extends React.Component {

createUser(event: any) {
onSubmit(event: any) {
event.preventDefault();
const title = event.target.title.value;
const subject = event.target.subject.value;
const difficulty = event.target.difficulty.value;

if (title === "" || subject === "") {
// console.log('At least one field is blank')
this.setState({message: 'At least one field is blank'});
this.setState({state: 'Error'});
return;
}

BenchmarkServices.createBenchmark(
event.target.title.value,
event.target.subject.value,
event.target.difficulty.value,
).then(r => console.log(r))
title,
subject,
difficulty,
).then(r => {
this.setState({message: 'Your benchmark'+ r.subject +' have been saved'});
this.setState({state: 'Success'});
})

}

render() {
render() {
return <>
<header className="bg-white shadow">
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between">
<h1 className="text-3xl font-bold text-gray-900">Create benchmark</h1>
</div>
</header>
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<form className="w-full max-w-lg" onSubmit={this.createUser}>
<form className="w-full max-w-lg" onSubmit={this.onSubmit}>
<div className="flex flex-wrap -mx-3 mb-6">
<div className="w-full px-3">
<label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
Expand All @@ -41,8 +62,9 @@ export class CreateBenchmark extends React.Component {
htmlFor="grid-password">
Subject
</label>
<textarea className="xl:resize-y appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="subject" placeholder="Your benchmark subject"/>
<textarea
className="xl:resize-y appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="subject" placeholder="Your benchmark subject"/>
</div>
</div>
<div className="flex flex-wrap -mx-3 mb-6">
Expand All @@ -65,6 +87,26 @@ export class CreateBenchmark extends React.Component {
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"/>
</div>
</form>
<div className="p-2 items-center">
{(() => {
if (this.state.state !== '') {
if (this.state.state === 'Error') {
return <div className="inline-flex items-center bg-white leading-none text-red-600 rounded-full p-2 shadow text-teal text-sm">
<span className="inline-flex bg-red-600 text-white rounded-full h-6 px-3 justify-center items-center">{this.state.state}</span>
<span className="inline-flex px-2">{this.state.message}</span>
</div>
} else if (this.state.state === 'Success') {
return <div className="inline-flex items-center bg-white leading-none text-green-600 rounded-full p-2 shadow text-teal text-sm">
<span className="inline-flex bg-green-600 text-white rounded-full h-6 px-3 justify-center items-center">{this.state.state}</span>
<span className="inline-flex px-2">{this.state.message}</span>
</div>
}
}
})()}
</div>
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between">
<Link to="/benchmarks">Back to benchmarks</Link>
</div>
</div>
</>
}
Expand Down

0 comments on commit 69329c6

Please sign in to comment.