Implement filter logs by creation date and refactor a bit

latitude-dev · Dec 12, 2024 · 8fa3470 · 8fa3470
1 parent c15b1ec
commit 8fa3470
Show file tree

Hide file tree

Showing 34 changed files with 702 additions and 385 deletions.
diff --git a/...s/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useLogHistoryParams.ts b/...s/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useLogHistoryParams.ts
@@ -8,7 +8,7 @@ import useDocumentLogWithPaginationPosition, {
   LogWithPosition,
 } from '$/stores/documentLogWithPaginationPosition'
 import useDocumentLogsPagination from '$/stores/useDocumentLogsPagination'
-import { useFilterOptions } from '$/hooks/useLogFilterOptions'
+import { useDefaultLogFilterOptions } from '$/hooks/logFilters/useDefaultLogFilterOptions'
 
 const ONLY_ONE_PAGE = '1'
 
@@ -28,7 +28,7 @@ export function useLogHistoryParams({
     commitVersionUuid,
   })
 
-  const filterOptions = useFilterOptions()
+  const filterOptions = useDefaultLogFilterOptions()
   const { data: pagination, isLoading: isLoadingCounter } =
     useDocumentLogsPagination({
       documentUuid: document.documentUuid,

diff --git a/...valuations/[evaluationId]/_components/ManualEvaluationResults/DocumentLogsTable/index.tsx b/...valuations/[evaluationId]/_components/ManualEvaluationResults/DocumentLogsTable/index.tsx
@@ -30,7 +30,7 @@ import { useSearchParams } from 'next/navigation'
 import { DocumentLogWithMetadataAndErrorAndEvaluationResult } from '..'
 import { ResultCellContent } from '../../EvaluationResults/EvaluationResultsTable'
 import { useCommits } from '$/stores/commitsStore'
-import { useFilterOptions } from '$/hooks/useLogFilterOptions'
+import { useDefaultLogFilterOptions } from '$/hooks/logFilters/useDefaultLogFilterOptions'
 
 const countLabel = (selected: number) => (count: number) => {
   return selected ? `${selected} of ${count} logs selected` : `${count} logs`
@@ -69,7 +69,7 @@ export const DocumentLogsTable = forwardRef<HTMLTableElement, Props>(
     const { commit } = useCurrentCommit()
     const { document } = useCurrentDocument()
     const { data: commits } = useCommits()
-    const filterOptions = useFilterOptions()
+    const filterOptions = useDefaultLogFilterOptions()
     const { data: pagination, isLoading } = useDocumentLogsPagination({
       documentUuid: commits ? document.documentUuid : undefined,
       projectId: project.id,

diff --git a/...[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx b/...[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx
@@ -6,6 +6,7 @@ import { capitalize } from 'lodash-es'
 import {
   DocumentLogFilterOptions,
   EvaluationResultableType,
+  LOG_FILTERS_ENCODED_PARAMS,
 } from '@latitude-data/core/browser'
 import { buildPagination } from '@latitude-data/core/lib/pagination/buildPagination'
 import {
@@ -142,6 +143,7 @@ export const DocumentLogsTable = forwardRef<HTMLTableElement, Props>(
       })
     const queryParams =
       typeof window !== 'undefined' ? window.location.search : ''
+
     return (
       <Table
         ref={ref}
@@ -160,6 +162,8 @@ export const DocumentLogsTable = forwardRef<HTMLTableElement, Props>(
                       .root,
                     count: pagination.count,
                     queryParams,
+                    encodeQueryParams: false,
+                    paramsToEncode: LOG_FILTERS_ENCODED_PARAMS,
                     page: Number(page),
                     pageSize: Number(pageSize),
                   })

diff --git a/...logs/_components/Filters/CommitFilter.tsx → ...components/Filters/CommitFilter/index.tsx b/...logs/_components/Filters/CommitFilter.tsx → ...components/Filters/CommitFilter/index.tsx
@@ -4,25 +4,25 @@ import { Commit } from '@latitude-data/core/browser'
 import { Button, Checkbox, Text } from '@latitude-data/web-ui'
 import { useCommits } from '$/stores/commitsStore'
 
-import { BadgeCommit } from '../../../../../_components/Sidebar/CommitSelector/CommitItem'
-import { FilterButton } from './FilterButton'
+import { BadgeCommit } from '../../../../../../_components/Sidebar/CommitSelector/CommitItem'
+import { FilterButton } from '../FilterButton'
 
 function CommitCheckbox({
   commit,
   selectedCommitsIds,
-  setSelectedCommitsIds,
+  onSelectCommits,
 }: {
   commit: Commit
   selectedCommitsIds: number[]
-  setSelectedCommitsIds: (selectedCommitsIds: number[]) => void
+  onSelectCommits: (selectedCommitsIds: number[]) => void
 }) {
   const isSelected = useMemo(
     () => selectedCommitsIds.includes(commit.id),
     [selectedCommitsIds, commit],
   )
 
   const onSelect = useCallback(() => {
-    setSelectedCommitsIds(
+    onSelectCommits(
       isSelected
         ? selectedCommitsIds.filter((id) => id !== commit.id)
         : [...selectedCommitsIds, commit.id],
@@ -51,12 +51,12 @@ function CommitsList({
   title,
   commits,
   selectedCommitsIds,
-  setSelectedCommitsIds,
+  onSelectCommits,
 }: {
   title: string
   commits: Commit[]
   selectedCommitsIds: number[]
-  setSelectedCommitsIds: (selectedCommitsIds: number[]) => void
+  onSelectCommits: (selectedCommitsIds: number[]) => void
 }) {
   return (
     <div className='flex flex-col gap-2 w-full'>
@@ -67,7 +67,7 @@ function CommitsList({
             <CommitCheckbox
               commit={commit}
               selectedCommitsIds={selectedCommitsIds}
-              setSelectedCommitsIds={setSelectedCommitsIds}
+              onSelectCommits={onSelectCommits}
             />
           </li>
         ))}
@@ -78,12 +78,12 @@ function CommitsList({
 
 export function CommitFilter({
   selectedCommitsIds,
-  setSelectedCommitsIds,
+  onSelectCommits,
   isDefault,
   reset,
 }: {
   selectedCommitsIds: number[]
-  setSelectedCommitsIds: (selectedCommitsIds: number[]) => void
+  onSelectCommits: (selectedCommitsIds: number[]) => void
   isDefault: boolean
   reset: () => void
 }) {
@@ -131,7 +131,7 @@ export function CommitFilter({
         <Checkbox
           checked={headerState}
           onClick={() =>
-            setSelectedCommitsIds(headerState ? [] : commits.map((c) => c.id))
+            onSelectCommits(headerState ? [] : commits.map((c) => c.id))
           }
           label={
             <Text.H5 noWrap ellipsis>
@@ -140,29 +140,24 @@ export function CommitFilter({
           }
         />
 
-        <Button
-          variant='link'
-          className='p-0'
-          onClick={reset}
-          disabled={isDefault}
-        >
+        <Button size='none' variant='link' onClick={reset} disabled={isDefault}>
           Reset
         </Button>
       </div>
-      <div className='flex flex-col gap-4 pr-4'>
+      <div className='flex flex-col gap-4'>
         {drafts.length > 0 ? (
           <CommitsList
             title='Drafts'
             commits={drafts}
             selectedCommitsIds={selectedCommitsIds}
-            setSelectedCommitsIds={setSelectedCommitsIds}
+            onSelectCommits={onSelectCommits}
           />
         ) : null}
         <CommitsList
           title='Published versions'
           commits={mergedCommits}
           selectedCommitsIds={selectedCommitsIds}
-          setSelectedCommitsIds={setSelectedCommitsIds}
+          onSelectCommits={onSelectCommits}
         />
       </div>
     </FilterButton>

diff --git a/...s/_components/Filters/LogSourceFilter.tsx → ...ponents/Filters/LogSourceFilter/index.tsx b/...s/_components/Filters/LogSourceFilter.tsx → ...ponents/Filters/LogSourceFilter/index.tsx
@@ -3,7 +3,7 @@ import { useCallback, useMemo } from 'react'
 import { LOG_SOURCES, LogSources } from '@latitude-data/core/browser'
 import { Button, Checkbox, Text } from '@latitude-data/web-ui'
 
-import { FilterButton } from './FilterButton'
+import { FilterButton } from '../FilterButton'
 
 const LogSourceLabel: { [key in LogSources]: string } = {
   [LogSources.API]: 'API',
@@ -16,24 +16,24 @@ const LogSourceLabel: { [key in LogSources]: string } = {
 function LogSourceCheckbox({
   logSource,
   selectedLogSources,
-  setSelectedLogSources,
+  onSelectLogSources,
 }: {
   logSource: LogSources
   selectedLogSources: LogSources[]
-  setSelectedLogSources: (selectedLogSources: LogSources[]) => void
+  onSelectLogSources: (selectedLogSources: LogSources[]) => void
 }) {
   const isSelected = useMemo(
     () => selectedLogSources.includes(logSource),
     [selectedLogSources, logSource],
   )
 
   const onSelect = useCallback(() => {
-    setSelectedLogSources(
+    onSelectLogSources(
       isSelected
         ? selectedLogSources.filter((origin) => origin !== logSource)
         : [...selectedLogSources, logSource],
     )
-  }, [selectedLogSources, logSource, isSelected])
+  }, [selectedLogSources, logSource, isSelected, onSelectLogSources])
 
   return (
     <Checkbox
@@ -50,12 +50,12 @@ function LogSourceCheckbox({
 
 export function LogSourceFilter({
   selectedLogSources,
-  setSelectedLogSources,
+  onSelectLogSources,
   isDefault,
   reset,
 }: {
   selectedLogSources: LogSources[]
-  setSelectedLogSources: (selectedOrigins: LogSources[]) => void
+  onSelectLogSources: (selectedOrigins: LogSources[]) => void
   isDefault: boolean
   reset: () => void
 }) {
@@ -87,7 +87,7 @@ export function LogSourceFilter({
         <Checkbox
           checked={headerState}
           onCheckedChange={() =>
-            setSelectedLogSources(headerState ? [] : LOG_SOURCES)
+            onSelectLogSources(headerState ? [] : LOG_SOURCES)
           }
           label={
             <Text.H5 noWrap ellipsis>
@@ -96,22 +96,17 @@ export function LogSourceFilter({
           }
         />
 
-        <Button
-          variant='link'
-          className='p-0'
-          onClick={reset}
-          disabled={isDefault}
-        >
+        <Button size='none' variant='link' onClick={reset} disabled={isDefault}>
           Reset
         </Button>
       </div>
-      <ul className='flex flex-col gap-2 pr-4'>
-        {Object.values(LogSources).map((logSource) => (
+      <ul className='flex flex-col gap-2'>
+        {LOG_SOURCES.map((logSource) => (
           <li key={logSource}>
             <LogSourceCheckbox
               logSource={logSource}
               selectedLogSources={selectedLogSources}
-              setSelectedLogSources={setSelectedLogSources}
+              onSelectLogSources={onSelectLogSources}
             />
           </li>
         ))}

diff --git a/...jectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/Filters/index.tsx b/...jectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/Filters/index.tsx
@@ -1,98 +1,27 @@
-import { useCallback, useMemo } from 'react'
-
 import {
   DocumentLogFilterOptions,
   LOG_SOURCES,
-  LogSources,
 } from '@latitude-data/core/browser'
-import { usePathname, useRouter } from 'next/navigation'
 
 import { CommitFilter } from './CommitFilter'
 import { LogSourceFilter } from './LogSourceFilter'
 import { ReactStateDispatch, DatePickerRange } from '@latitude-data/web-ui'
-
-function useEditableSearchParams() {
-  const router = useRouter()
-  const pathname = usePathname()
-
-  const setSearchParam = (key: string, value?: string | string[]) => {
-    const prevParams = window.location.search
-    const urlParams = new URLSearchParams(prevParams)
-    const params = Object.fromEntries(urlParams.entries())
-
-    let newParams = prevParams
-    if (value) {
-      const data = {
-        ...params,
-        [key]: Array.isArray(value) ? value.join(',') : value,
-      }
-      newParams = new URLSearchParams(data).toString()
-    }
-
-    router.replace(`${pathname}${newParams ? '?' : ''}${newParams}`)
-  }
-
-  return setSearchParam
-}
+import { useProcessLogFilters } from '$/hooks/logFilters/useProcessLogFilters'
 
 export function DocumentLogFilters({
-  documentLogFilterOptions,
-  setDocumentLogFilterOptions,
+  filterOptions,
+  onFiltersChanged,
   originalSelectedCommitsIds,
 }: {
-  documentLogFilterOptions: DocumentLogFilterOptions
-  setDocumentLogFilterOptions: ReactStateDispatch<DocumentLogFilterOptions>
+  filterOptions: DocumentLogFilterOptions
+  onFiltersChanged: ReactStateDispatch<DocumentLogFilterOptions>
   originalSelectedCommitsIds: number[]
 }) {
-  const setSearchParams = useEditableSearchParams()
-
-  const isCommitsDefault = useMemo(() => {
-    return (
-      documentLogFilterOptions.commitIds.sort().join(',') ===
-      originalSelectedCommitsIds.sort().join(',')
-    )
-  }, [documentLogFilterOptions.commitIds])
-
-  const isLogSourcesDefault = useMemo(() => {
-    return (
-      documentLogFilterOptions.logSources.sort().join(',') ===
-      LOG_SOURCES.sort().join(',')
-    )
-  }, [documentLogFilterOptions.logSources])
-
-  const setSelectedCommitsIds = useCallback((selectedCommitsIds: number[]) => {
-    setDocumentLogFilterOptions((currentFilters) => ({
-      ...currentFilters,
-      commitIds: selectedCommitsIds,
-    }))
-    if (
-      selectedCommitsIds.sort().join(',') ===
-      originalSelectedCommitsIds.sort().join(',')
-    ) {
-      setSearchParams('versions', undefined)
-    } else {
-      setSearchParams('versions', selectedCommitsIds.map(String))
-    }
-  }, [])
-
-  const setSelectedLogSources = useCallback(
-    (selectedLogSources: LogSources[]) => {
-      setDocumentLogFilterOptions((currentFilters) => ({
-        ...currentFilters,
-        logSources: selectedLogSources,
-      }))
-      if (
-        selectedLogSources.sort().join(',') ===
-        Object.values(LogSources).sort().join(',')
-      ) {
-        setSearchParams('origins', undefined)
-      } else {
-        setSearchParams('origins', selectedLogSources)
-      }
-    },
-    [],
-  )
-
+  const filters = useProcessLogFilters({
+    onFiltersChanged,
+    filterOptions,
+    originalSelectedCommitsIds,
+  })
   return (
     <>
       <DatePickerRange
@@ -102,16 +31,16 @@ export function DocumentLogFilters({
         }}
       />
       <CommitFilter
-        selectedCommitsIds={documentLogFilterOptions.commitIds}
-        setSelectedCommitsIds={setSelectedCommitsIds}
-        isDefault={isCommitsDefault}
-        reset={() => setSelectedCommitsIds(originalSelectedCommitsIds)}
+        selectedCommitsIds={filterOptions.commitIds}
+        onSelectCommits={filters.onSelectCommits}
+        isDefault={filters.isCommitsDefault}
+        reset={() => filters.onSelectCommits(originalSelectedCommitsIds)}
       />
       <LogSourceFilter
-        selectedLogSources={documentLogFilterOptions.logSources}
-        setSelectedLogSources={setSelectedLogSources}
-        isDefault={isLogSourcesDefault}
-        reset={() => setSelectedLogSources(Object.values(LogSources))}
+        selectedLogSources={filterOptions.logSources}
+        onSelectLogSources={filters.onSelectLogSources}
+        isDefault={filters.isLogSourcesDefault}
+        reset={() => filters.onSelectLogSources(LOG_SOURCES)}
       />
     </>
   )