From 7330dad6f9a20be490cb53d223fc671b72b6cedf Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Thu, 27 May 2021 13:41:28 +0530
Subject: [PATCH] Standalone component for empty state of dashboard

---
 frontend/src/HomePage/BlankPage.jsx | 30 +++++++++++++++++++++++++++++
 frontend/src/HomePage/HomePage.jsx  | 26 ++++---------------------
 2 files changed, 34 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/HomePage/BlankPage.jsx

diff --git a/frontend/src/HomePage/BlankPage.jsx b/frontend/src/HomePage/BlankPage.jsx
new file mode 100644
index 0000000000..9ef29d53ce
--- /dev/null
+++ b/frontend/src/HomePage/BlankPage.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+export const BlankPage = function BlankPage({
+  createApp
+}) {
+  return (<div>
+    <div class="page-wrapper">
+      <div class="container-xl">
+      </div>
+      <div class="page-body">
+        <div class="container-xl d-flex flex-column justify-content-center">
+          <div class="empty">
+            <div class="empty-img"><img src="/assets/images/blank.svg" height="128" alt="" />
+            </div>
+            <p class="empty-title">You haven't created any apps yet.</p>
+            <div class="empty-action">
+              <a onClick={createApp} class="btn btn-primary text-light">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+                      Create your first app
+                    </a>
+              <a href="https://docs.tooljet.io" target="_blank" class="btn btn-primary text-light mx-2">
+                Read documentation
+                    </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>)
+}
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index d1ed40648e..e6c623541a 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { Pagination, Header } from '@/_components';
 import { Folders } from './Folders';
 import { AppMenu } from './AppMenu';
+import { BlankPage } from './BlankPage';
 
 class HomePage extends React.Component {
   constructor(props) {
@@ -84,28 +85,9 @@ class HomePage extends React.Component {
 
         />
         {!isLoading && meta.total_count === 0 && 
-          <div class="page-wrapper">
-            <div class="container-xl">
-            </div>
-            <div class="page-body">
-              <div class="container-xl d-flex flex-column justify-content-center">
-                <div class="empty">
-                  <div class="empty-img"><img src="/assets/images/blank.svg" height="128"  alt=""/>
-                  </div>
-                  <p class="empty-title">You haven't created any apps yet.</p>
-                  <div class="empty-action">
-                    <a onClick={this.createApp} class="btn btn-primary text-light">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                      Create your first app
-                    </a>
-                    <a href="https://docs.tooljet.io" target="_blank" class="btn btn-primary text-light mx-2">
-                      Read documentation
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+          <BlankPage 
+            createApp={this.createApp}
+          />
         }
 
         {(isLoading || meta.total_count > 0) &&