From f88322cd62963797d219d31010a9b6ca900e9dcf Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Fri, 25 Feb 2022 23:27:07 +1100
Subject: [PATCH] Add clear logs functionality

---
 src/core/slices/meshtasticSlice.ts |  4 ++++
 src/pages/Extensions/Logs.tsx      | 15 ++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/core/slices/meshtasticSlice.ts b/src/core/slices/meshtasticSlice.ts
index 78ae14dc..5b2354d0 100644
--- a/src/core/slices/meshtasticSlice.ts
+++ b/src/core/slices/meshtasticSlice.ts
@@ -87,6 +87,9 @@ export const meshtasticSlice = createSlice({
     addLogEvent: (state, action: PayloadAction<Types.LogEventPacket>) => {
       state.logs.push(action.payload);
     },
+    clearLogs: (state) => {
+      state.logs = [];
+    },
     setDeviceStatus: (state, action: PayloadAction<Types.DeviceStatusEnum>) => {
       state.deviceStatus = action.payload;
     },
@@ -286,6 +289,7 @@ export const meshtasticSlice = createSlice({
 
 export const {
   addLogEvent,
+  clearLogs,
   setDeviceStatus,
   setLastMeshInterraction,
   setReady,
diff --git a/src/pages/Extensions/Logs.tsx b/src/pages/Extensions/Logs.tsx
index c162530f..e38d0ad1 100644
--- a/src/pages/Extensions/Logs.tsx
+++ b/src/pages/Extensions/Logs.tsx
@@ -5,10 +5,14 @@ import { FiArrowRight, FiPaperclip, FiX } from 'react-icons/fi';
 
 import { Button } from '@app/components/generic/button/Button';
 import { Card } from '@app/components/generic/Card';
+import { clearLogs } from '@app/core/slices/meshtasticSlice';
+import { useAppDispatch } from '@app/hooks/useAppDispatch';
 import { useAppSelector } from '@hooks/useAppSelector';
 import { Protobuf, Types } from '@meshtastic/meshtasticjs';
 
 export const Logs = (): JSX.Element => {
+  const dispatch = useAppDispatch();
+
   const meshtasticState = useAppSelector((state) => state.meshtastic);
   const appState = useAppSelector((state) => state.app);
 
@@ -52,7 +56,16 @@ export const Logs = (): JSX.Element => {
     <div className="flex h-full flex-col gap-4 p-4">
       <Card
         title="Device Logs"
-        actions={<Button icon={<FiX />}>Clear Logs</Button>}
+        actions={
+          <Button
+            onClick={(): void => {
+              dispatch(clearLogs());
+            }}
+            icon={<FiX />}
+          >
+            Clear Logs
+          </Button>
+        }
         className="flex-grow overflow-y-auto"
       >
         <table className="table-cell flex-grow">