From 6eb6a2d80d3089f46a13d9af6137104b5d8f6561 Mon Sep 17 00:00:00 2001
From: Boaz Poolman <boaz_skater@hotmail.com>
Date: Wed, 24 Mar 2021 22:03:30 +0100
Subject: [PATCH] Component for initial config export

---
 admin/src/components/ActionButtons/index.js |  4 +--
 admin/src/components/ConfigList/index.js    |  7 ++++-
 admin/src/components/FirstExport/index.js   | 33 +++++++++++++++++++++
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 admin/src/components/FirstExport/index.js

diff --git a/admin/src/components/ActionButtons/index.js b/admin/src/components/ActionButtons/index.js
index a4b043f..f642838 100644
--- a/admin/src/components/ActionButtons/index.js
+++ b/admin/src/components/ActionButtons/index.js
@@ -23,8 +23,8 @@ const ActionButtons = ({ diff }) => {
 
   return (
     <ActionButtonsStyling>
-      <Button disabled={isEmpty(diff.diff)} color="primary" label="Import" onClick={() => openModal('import')} />
-      <Button disabled={isEmpty(diff.diff)} color="primary" label="Export" onClick={() => openModal('export')} />
+      <Button disabled={isEmpty(diff.fileConfig)} color="primary" label="Import" onClick={() => openModal('import')} />
+      <Button disabled={isEmpty(diff.fileConfig)} color="primary" label="Export" onClick={() => openModal('export')} />
       <ConfirmModal
         isOpen={modalIsOpen}
         onClose={closeModal}
diff --git a/admin/src/components/ConfigList/index.js b/admin/src/components/ConfigList/index.js
index 0990d15..03aeee2 100644
--- a/admin/src/components/ConfigList/index.js
+++ b/admin/src/components/ConfigList/index.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Table } from '@buffetjs/core';
 import { isEmpty } from 'lodash';
 import ConfigDiff from '../ConfigDiff';
+import FirstExport from '../FirstExport';
 
 const headers = [
   {
@@ -26,7 +27,7 @@ const ConfigList = ({ diff, isLoading }) => {
   const [rows, setRows] = useState([]);
 
   useEffect(() => {
-    if (isEmpty(diff)) {
+    if (isEmpty(diff.diff)) {
       setRows([]);
       return;
     }
@@ -53,6 +54,10 @@ const ConfigList = ({ diff, isLoading }) => {
     setOpenModal(false);
   };
 
+  if (!isLoading && !isEmpty(diff.message)) {
+    return <FirstExport />
+  }
+
   return (
     <div>
       <ConfigDiff
diff --git a/admin/src/components/FirstExport/index.js b/admin/src/components/FirstExport/index.js
new file mode 100644
index 0000000..18c57fe
--- /dev/null
+++ b/admin/src/components/FirstExport/index.js
@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Button } from '@buffetjs/core';
+import { exportAllConfig } from '../../state/actions/Config';
+import ConfirmModal from '../ConfirmModal';
+
+const FirstExport = () => {
+  const dispatch = useDispatch();
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+
+  return (
+    <div style={{ 
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      textAlign: 'center',
+      height: '300px',
+     }}>
+      <ConfirmModal
+        isOpen={modalIsOpen}
+        onClose={() => setModalIsOpen(false)}
+        type={'export'}
+        onSubmit={() =>  dispatch(exportAllConfig())}
+      />
+      <h3>Looks like this is your first time using config-sync for this project.</h3>
+      <p>Make the initial export!</p>
+      <Button color="primary" onClick={() => setModalIsOpen(true)}>Initial export</Button>
+    </div>
+  );
+}
+ 
+export default FirstExport;
\ No newline at end of file