Cleanup

RolnickLab · Dec 16, 2024 · 0c53c30 · 0c53c30
1 parent 29c3274
commit 0c53c30
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 14 deletions.
diff --git a/ui/src/components/error-state/error-state.tsx b/ui/src/components/error-state/error-state.tsx
@@ -1,4 +1,5 @@
 import { AlertCircleIcon } from 'lucide-react'
+import { useMemo } from 'react'
 
 interface ErrorStateProps {
   error?: any
@@ -7,16 +8,23 @@ interface ErrorStateProps {
 export const ErrorState = ({ error }: ErrorStateProps) => {
   const title = error?.message ?? 'Unknown error'
   const data = error?.response?.data
-  const description = data ? Object.values(data)?.[0] : undefined
+
+  const description = useMemo(() => {
+    const entries = data ? Object.entries(data) : undefined
+
+    if (entries?.length) {
+      const [key, value] = entries[0]
+
+      return `${key}: ${value}`
+    }
+  }, [error])
 
   return (
     <div className="flex flex-col items-center py-24">
       <AlertCircleIcon className="w-8 h-8 text-destructive mb-8" />
       <span className="body-large font-medium mb-2">{title}</span>
       {description ? (
-        <span className="body-base text-muted-foreground">
-          {description as string}
-        </span>
+        <span className="body-base text-muted-foreground">{description}</span>
       ) : null}
     </div>
   )

diff --git a/ui/src/components/filtering/filters/date-filter.tsx b/ui/src/components/filtering/filters/date-filter.tsx
@@ -17,11 +17,11 @@ export const DateFilter = ({ isValid, onAdd, onClear, value }: FilterProps) => {
   const selected = value ? new Date(value) : undefined
 
   const triggerLabel = (() => {
-    if (!selected) {
+    if (!value) {
       return 'Select a date'
     }
 
-    return dateToLabel(selected)
+    return value
   })()
 
   return (

diff --git a/ui/src/components/filtering/filters/type-filter.tsx b/ui/src/components/filtering/filters/type-filter.tsx
@@ -3,10 +3,10 @@ import { Select } from 'nova-ui-kit'
 import { FilterProps } from './types'
 
 const OPTIONS = SERVER_JOB_TYPES.map((key) => {
-  const typrInfo = Job.getJobTypeInfo(key)
+  const typeInfo = Job.getJobTypeInfo(key)
 
   return {
-    ...typrInfo,
+    ...typeInfo,
   }
 })
 

diff --git a/ui/src/utils/useFilters.ts b/ui/src/utils/useFilters.ts
@@ -53,7 +53,7 @@ export const AVAILABLE_FILTERS: {
       }
 
       if (!isValid(new Date(value))) {
-        return 'Date has not a valid format.'
+        return 'Date is not valid'
       }
 
       const dateEnd = filters?.find(
@@ -112,7 +112,7 @@ export const AVAILABLE_FILTERS: {
 export const useFilters = (defaultFilters?: { [field: string]: string }) => {
   const [searchParams, setSearchParams] = useSearchParams()
 
-  const filters = AVAILABLE_FILTERS.map(({ field, ...rest }) => {
+  const _filters = AVAILABLE_FILTERS.map(({ field, ...rest }) => {
     const value = searchParams.get(field) ?? defaultFilters?.[field]
 
     return {
@@ -122,17 +122,19 @@ export const useFilters = (defaultFilters?: { [field: string]: string }) => {
     }
   })
 
-  const validatedFilters = filters.map(({ validate, value, ...rest }) => {
-    const error = validate ? validate(value, filters) : undefined
+  const filters = _filters.map(({ validate, value, ...rest }) => {
+    const error = validate ? validate(value, _filters) : undefined
+    const isValid = !error
 
     return {
       ...rest,
       value,
+      isValid,
       error,
     }
   })
 
-  const activeFilters = filters.filter((filter) => filter.value?.length)
+  const activeFilters = filters.filter((filter) => !!filter.value?.length)
 
   const addFilter = (field: string, value: string) => {
     if (AVAILABLE_FILTERS.some((filter) => filter.field === field)) {
@@ -152,6 +154,6 @@ export const useFilters = (defaultFilters?: { [field: string]: string }) => {
     activeFilters,
     addFilter,
     clearFilter,
-    filters: validatedFilters,
+    filters,
   }
 }