refactor: add optional navigation button on header

Author: Mikadows

src/components/Benchmarks/BenchmarkDetail.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Redirect } from 'react-router-dom';
 import { BenchmarkServices } from '../../api/BenchmarkServices';
 import Header from '../Page/Header';
 import Page from '../Page/Page';
@@ -27,29 +27,17 @@ const BenchmarkDetail = (props) => {
       });
   }, [setBenchmark, props.match.params.id]);
 
-  if (benchmark === '') {
+  if (benchmark === ''|| undefined) {
     return <Redirect to="/404" />;
   }
 
   return (
     <Page>
-      <Header title="Dashboard" />
-      <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">
-            {
-              // @ts-ignore
-              benchmark === undefined ? '' : benchmark.title
-            }
-          </h1>
-          <Link
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
-            to="/benchmarks"
-          >
-            Back
-          </Link>
-        </div>
-      </header>
+      <Header title={
+          // @ts-ignore
+          benchmark === undefined ? '' : benchmark.title}
+              button='Back' navTo='/benchmarks'
+      />
       <div className="flex p-4">
         <div className="flex-1 mx-auto border-4 border-dashed border-gray-200 rounded-lg h-96">
           <div className="pl-8 pr-8">

src/components/Benchmarks/Benchmarks.tsx

@@ -103,7 +103,7 @@ export class Benchmarks extends React.Component<
   render() {
     return (
       <Page>
-        <Header title="Benchmarks" />
+        <Header title="Benchmarks" button="Create" navTo="/benchmarks/create"/>
         <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
           <div className="flex flex-col">
             <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">

src/components/Benchmarks/CreateBenchmark.tsx

@@ -45,14 +45,7 @@ export class CreateBenchmark extends React.Component<
   render() {
     return (
       <Page>
-        <Header title="Dashboard" />
-        <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>
+        <Header title="Create benchmark" />
         <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.onSubmit}>
             <div className="flex flex-wrap -mx-3 mb-6">

src/components/Page/Header.tsx

@@ -1,14 +1,31 @@
+import {Link} from "react-router-dom";
+import React from "react";
+
 interface HeaderProps {
   title: string;
+  button?: string;
+  navTo?: string;
 }
 
-const Header: React.FC<HeaderProps> = ({ title }) => {
-  return (
+const Header: React.FC<HeaderProps> = ({ title, button, navTo}) => {
+    const isButtonNeeded = button !== undefined && navTo !== undefined;
+
+    return (
     <header className="bg-white shadow">
-      <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+      <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">{title}</h1>
+          {isButtonNeeded?
+              <Link
+                  className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
+                  to={navTo !== undefined ? navTo : '/500'}
+              >
+                  {button}
+              </Link>
+              : <></>}
       </div>
+
     </header>
+
   );
 };