From 0e214a77e11321debd5b57309779229b810d3c59 Mon Sep 17 00:00:00 2001
From: Foysal Ahamed <cfaion341@gmail.com>
Date: Tue, 6 Feb 2024 19:51:49 +0100
Subject: [PATCH] :broom: Cleanup according to PR review

---
 components/mod-event/EventList.tsx       | 29 +++++++-----------------
 components/mod-event/useModEventList.tsx | 27 +++++++++++++++-------
 2 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/components/mod-event/EventList.tsx b/components/mod-event/EventList.tsx
index 49658c34..fd01eb9f 100644
--- a/components/mod-event/EventList.tsx
+++ b/components/mod-event/EventList.tsx
@@ -1,6 +1,7 @@
 import {
   EventListState,
   FIRST_EVENT_TIMESTAMP,
+  formatDateForInput,
   ModEventListQueryOptions,
   useModEventList,
 } from './useModEventList'
@@ -243,12 +244,6 @@ const EventFilterPanel = ({
                 checked={types.length === allTypes.length}
                 onChange={() => toggleType('all')}
                 className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault() // make sure we don't submit the form
-                    e.currentTarget.click() // simulate a click on the input
-                  }
-                }}
               />
               <label
                 htmlFor={`type-all`}
@@ -267,12 +262,6 @@ const EventFilterPanel = ({
                   checked={types.includes(type)}
                   onChange={() => toggleType(type)}
                   className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
-                      e.preventDefault() // make sure we don't submit the form
-                      e.currentTarget.click() // simulate a click on the input
-                    }
-                  }}
                 />
                 <label
                   htmlFor={`type-${type}`}
@@ -296,12 +285,6 @@ const EventFilterPanel = ({
               checked={commentFilter.enabled}
               onChange={() => toggleCommentFilter()}
               className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  e.preventDefault() // make sure we don't submit the form
-                  e.currentTarget.click() // simulate a click on the input
-                }
-              }}
             />
             <label
               htmlFor={`comment-filter`}
@@ -389,7 +372,7 @@ const EventFilterPanel = ({
               }
               autoComplete="off"
               min={FIRST_EVENT_TIMESTAMP}
-              max={new Date().toISOString().split('.')[0]}
+              max={formatDateForInput(new Date())}
             />
           </FormLabel>
 
@@ -412,7 +395,7 @@ const EventFilterPanel = ({
               }
               autoComplete="off"
               min={FIRST_EVENT_TIMESTAMP}
-              max={new Date().toISOString().split('.')[0]}
+              max={formatDateForInput(new Date())}
             />
           </FormLabel>
         </div>
@@ -447,7 +430,11 @@ const EventFilterPanel = ({
         )}
 
         {types.includes(MOD_EVENTS.REPORT) && (
-          <FormLabel label="Reason" htmlFor="reasonType" className="flex-1 max-w-sm">
+          <FormLabel
+            label="Reason"
+            htmlFor="reasonType"
+            className="flex-1 max-w-sm"
+          >
             <Select
               isMultiple
               isSearchable
diff --git a/components/mod-event/useModEventList.tsx b/components/mod-event/useModEventList.tsx
index e59a16cf..92f9f36d 100644
--- a/components/mod-event/useModEventList.tsx
+++ b/components/mod-event/useModEventList.tsx
@@ -17,6 +17,12 @@ type CommentFilter = {
   keyword: string
 }
 
+// Since we use default browser's date picker, we need to format the date to the correct format
+// More details here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
+export const formatDateForInput = (date: Date) => {
+  return date.toISOString().split('.')[0]
+}
+
 export const FIRST_EVENT_TIMESTAMP = '2022-11-01T00:00'
 const allTypes = Object.keys(MOD_EVENT_TITLES)
 const initialListState = {
@@ -26,7 +32,7 @@ const initialListState = {
   createdBy: undefined,
   subject: undefined,
   oldestFirst: false,
-  createdBefore: endOfDay(new Date()).toISOString().split('.')[0],
+  createdBefore: formatDateForInput(endOfDay(new Date())),
   createdAfter: FIRST_EVENT_TIMESTAMP,
   reportTypes: [],
   addedLabels: [],
@@ -70,6 +76,13 @@ type EventListAction =
 const eventListReducer = (state: EventListState, action: EventListAction) => {
   switch (action.type) {
     case 'SET_FILTER':
+      // when updating the subject, if the value is the same as the current state, don't update
+      if (
+        action.payload.field === 'subject' &&
+        action.payload.value === state.subject
+      ) {
+        return state
+      }
       return { ...state, [action.payload.field]: action.payload.value }
     case 'RESET':
       return initialListState
@@ -89,12 +102,10 @@ export const useModEventList = (
   }
 
   useEffect(() => {
-    if (props.subject !== listState.subject) {
-      dispatch({
-        type: 'SET_FILTER',
-        payload: { field: 'subject', value: props.subject },
-      })
-    }
+    dispatch({
+      type: 'SET_FILTER',
+      payload: { field: 'subject', value: props.subject },
+    })
   }, [props.subject])
 
   useEffect(() => {
@@ -232,4 +243,4 @@ async function getModerationEvents(
     { headers: client.adminHeaders() },
   )
   return data
-}
+}
\ No newline at end of file