From 037f38354077be23dd21cae14e6aca37f0fee853 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Thu, 4 Feb 2021 13:44:29 +0000
Subject: [PATCH] Fixed when the empty message should appear

---
 new-lamassu-admin/src/pages/MachineLogs.js | 31 +++++++++-----------
 new-lamassu-admin/src/pages/ServerLogs.js  | 34 ++++++++++------------
 2 files changed, 30 insertions(+), 35 deletions(-)

diff --git a/new-lamassu-admin/src/pages/MachineLogs.js b/new-lamassu-admin/src/pages/MachineLogs.js
index dc25d57c..376afc57 100644
--- a/new-lamassu-admin/src/pages/MachineLogs.js
+++ b/new-lamassu-admin/src/pages/MachineLogs.js
@@ -16,7 +16,7 @@ import {
   TableBody,
   TableCell
 } from 'src/components/table'
-import { Info3 } from 'src/components/typography'
+import { Info3, H4 } from 'src/components/typography'
 
 import styles from './Logs.styles'
 
@@ -74,7 +74,7 @@ const Logs = () => {
 
   const { data: machineResponse } = useQuery(GET_MACHINES)
 
-  const { data: logsResponse } = useQuery(GET_MACHINE_LOGS, {
+  const { data: logsResponse, loading } = useQuery(GET_MACHINE_LOGS, {
     variables: { deviceId, limit: NUM_LOG_RESULTS },
     skip: !selected,
     onCompleted: () => setSaveMessage('')
@@ -123,22 +123,19 @@ const Logs = () => {
                 <TableHeader className={classes.fillColumn} />
               </TableRow>
             </TableHead>
-            {logsResponse &&
-              (!logsResponse.machineLogs.length ? (
-                <p>{'No activity so far'}</p>
-              ) : (
-                <TableBody>
-                  {logsResponse &&
-                    logsResponse.machineLogs.map((log, idx) => (
-                      <TableRow key={idx} size="sm">
-                        <TableCell>{formatDate(log.timestamp)}</TableCell>
-                        <TableCell>{log.logLevel}</TableCell>
-                        <TableCell>{log.message}</TableCell>
-                      </TableRow>
-                    ))}
-                </TableBody>
-              ))}
+            <TableBody>
+              {logsResponse &&
+                logsResponse.machineLogs.map((log, idx) => (
+                  <TableRow key={idx} size="sm">
+                    <TableCell>{formatDate(log.timestamp)}</TableCell>
+                    <TableCell>{log.logLevel}</TableCell>
+                    <TableCell>{log.message}</TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
           </Table>
+          {loading && <H4>{'Loading...'}</H4>}
+          {!loading && !logsResponse && <H4>{'No activity so far'}</H4>}
         </div>
       </div>
     </>
diff --git a/new-lamassu-admin/src/pages/ServerLogs.js b/new-lamassu-admin/src/pages/ServerLogs.js
index 27442513..b8a0d835 100644
--- a/new-lamassu-admin/src/pages/ServerLogs.js
+++ b/new-lamassu-admin/src/pages/ServerLogs.js
@@ -17,7 +17,7 @@ import {
   TableBody,
   TableCell
 } from 'src/components/table'
-import { Info3 } from 'src/components/typography'
+import { Info3, H4 } from 'src/components/typography'
 import typographyStyles from 'src/components/typography/styles'
 import { offColor } from 'src/styling/variables'
 import { startCase } from 'src/utils/string'
@@ -91,7 +91,7 @@ const Logs = () => {
   const [saveMessage, setSaveMessage] = useState(null)
   const [logLevel, setLogLevel] = useState(SHOW_ALL)
 
-  const { data } = useQuery(GET_DATA, {
+  const { data, loading } = useQuery(GET_DATA, {
     onCompleted: () => setSaveMessage(''),
     variables: {
       limit: NUM_LOG_RESULTS
@@ -174,24 +174,22 @@ const Logs = () => {
             </TableHead>
             <TableBody>
               {data &&
-                (!data.serverLogs.length ? (
-                  <p>{'No activity so far'} </p>
-                ) : (
-                  data.serverLogs
-                    .filter(
-                      log =>
-                        logLevel === SHOW_ALL || log.logLevel === logLevel.code
-                    )
-                    .map((log, idx) => (
-                      <TableRow key={idx} size="sm">
-                        <TableCell>{formatDate(log.timestamp)}</TableCell>
-                        <TableCell>{log.logLevel}</TableCell>
-                        <TableCell>{log.message}</TableCell>
-                      </TableRow>
-                    ))
-                ))}
+                data.serverLogs
+                  .filter(
+                    log =>
+                      logLevel === SHOW_ALL || log.logLevel === logLevel.code
+                  )
+                  .map((log, idx) => (
+                    <TableRow key={idx} size="sm">
+                      <TableCell>{formatDate(log.timestamp)}</TableCell>
+                      <TableCell>{log.logLevel}</TableCell>
+                      <TableCell>{log.message}</TableCell>
+                    </TableRow>
+                  ))}
             </TableBody>
           </Table>
+          {loading && <H4>{'Loading...'}</H4>}
+          {!loading && !data && <H4>{'No activity so far'}</H4>}
         </div>
       </div>
     </>