From cd4a88a4f0f6d0e8ac86ebc184f511b53c6c06c0 Mon Sep 17 00:00:00 2001
From: Pham Hai Duong <tanphamhaiduong@gmail.com>
Date: Tue, 21 Jan 2020 17:06:22 +0700
Subject: [PATCH] fix: add new search button when no result for searching
 developer (#284)

* chore: bump elements version

* fix: add button new search when no result

* fix: change from info text to helper info
---
 src/components/pages/admin-dev-management.tsx | 18 ++++++++++++++++--
 src/styles/pages/admin-dev-management.scss    |  4 ++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/admin-dev-management.tsx b/src/components/pages/admin-dev-management.tsx
index fdd85ba595..dc3bcf1707 100644
--- a/src/components/pages/admin-dev-management.tsx
+++ b/src/components/pages/admin-dev-management.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { History } from 'history'
 import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
 import { withRouter, RouteComponentProps, match } from 'react-router'
 import { ReduxState } from '@/types/core'
 import { REVISIONS_PER_PAGE } from '@/constants/paginator'
@@ -14,7 +15,8 @@ import {
   Button,
   Loader,
   Section,
-  setQueryParams
+  setQueryParams,
+  Helper
 } from '@reapit/elements'
 import Routes from '@/constants/routes'
 import AdminDevManagementFilterForm, {
@@ -24,6 +26,7 @@ import AdminSetDeveloperStatusModal from '@/components/ui/developer-set-status'
 import { DeveloperModel } from '@reapit/foundations-ts-definitions'
 import { adminDevManagementRequestData, AdminDevManagementRequestDataValues } from '@/actions/admin-dev-management'
 import qs from 'querystring'
+import styles from '@/styles/pages/admin-dev-management.scss?mod'
 
 export interface AdminDevManagementMappedActions {
   fetchData: (requestdata: AdminDevManagementRequestDataValues) => void
@@ -99,7 +102,18 @@ export const AdminDevManagement: React.FC<AdminDevManagementProps> = ({
   }
 
   if (!loading && data?.data?.length === 0) {
-    return <Info infoType="DEVELOPER_EMPTY" />
+    return (
+      <React.Fragment>
+        <Helper variant="info">
+          Unfortunately, there are no results that match your search criteria, please try again
+        </Helper>
+        <Link className={styles.textCenter} to="/admin/dev-management">
+          <Button variant="primary" type="button">
+            New Search
+          </Button>
+        </Link>
+      </React.Fragment>
+    )
   }
 
   return (
diff --git a/src/styles/pages/admin-dev-management.scss b/src/styles/pages/admin-dev-management.scss
index 27b11d8a67..4ddcf7b0db 100644
--- a/src/styles/pages/admin-dev-management.scss
+++ b/src/styles/pages/admin-dev-management.scss
@@ -2,3 +2,7 @@
   margin-left: 0;
   margin-right: 0;
 }
+
+.textCenter {
+  text-align: center;
+}