refactor: use common sortHighlights function

This commit is contained in:
Sandy S Kuo
2024-07-03 20:47:27 +02:00
parent c4f00c657e
commit 547dccab64
5 changed files with 44 additions and 107 deletions

View File

@ -7,11 +7,11 @@ import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery
import { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
import { Button } from '../../elements/Button'
import { theme } from '../../tokens/stitches.config'
import { getHighlightLocation } from '../../templates/article/NotebookModal'
import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
import { HighlightView } from '../HighlightView'
import { useRouter } from 'next/router'
import { showErrorToast } from '../../../lib/toastHelpers'
import { sortHighlights } from '../../../lib/highlights/sortHighlights'
export const GridSeparator = styled(Box, {
height: '1px',
@ -57,37 +57,7 @@ export function LibraryHighlightGridCard(
)
const sortedHighlights = useMemo(() => {
const sorted = (a: number, b: number) => {
if (a < b) {
return -1
}
if (a > b) {
return 1
}
return 0
}
if (!props.item.highlights) {
return []
}
return props.item.highlights
.filter((h) => h.type === 'HIGHLIGHT')
.sort((a: Highlight, b: Highlight) => {
if (a.highlightPositionPercent && b.highlightPositionPercent) {
return sorted(a.highlightPositionPercent, b.highlightPositionPercent)
}
// We do this in a try/catch because it might be an invalid diff
// With PDF it will definitely be an invalid diff.
try {
const aPos = getHighlightLocation(a.patch)
const bPos = getHighlightLocation(b.patch)
if (aPos && bPos) {
return sorted(aPos, bPos)
}
} catch {}
return a.createdAt.localeCompare(b.createdAt)
})
return sortHighlights(props.item.highlights ?? [])
}, [props.item.highlights])
return (

View File

@ -4,7 +4,6 @@ import type { Highlight } from '../../../lib/networking/fragments/highlightFragm
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { updateHighlightMutation } from '../../../lib/networking/mutations/updateHighlightMutation'
import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
import { diff_match_patch } from 'diff-match-patch'
import 'react-markdown-editor-lite/lib/index.css'
import { createHighlightMutation } from '../../../lib/networking/mutations/createHighlightMutation'
import { v4 as uuidv4 } from 'uuid'
@ -20,6 +19,7 @@ import { ArticleNotes } from '../../patterns/ArticleNotes'
import { useGetArticleQuery } from '../../../lib/networking/queries/useGetArticleQuery'
import { formattedShortTime } from '../../../lib/dateFormatting'
import { isDarkTheme } from '../../../lib/themeUpdater'
import { sortHighlights } from '../../../lib/highlights/sortHighlights'
type NotebookContentProps = {
viewer: UserBasicData
@ -34,12 +34,6 @@ type NotebookContentProps = {
setShowConfirmDeleteNote?: (show: boolean) => void
}
export const getHighlightLocation = (patch: string): number | undefined => {
const dmp = new diff_match_patch()
const patches = dmp.patch_fromText(patch)
return patches[0].start1 || undefined
}
type NoteState = {
isCreating: boolean
note: Highlight | undefined
@ -137,33 +131,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
}, [props, highlights])
const sortedHighlights = useMemo(() => {
const sorted = (a: number, b: number) => {
if (a < b) {
return -1
}
if (a > b) {
return 1
}
return 0
}
return (highlights ?? [])
.filter((h) => h.type === 'HIGHLIGHT')
.sort((a: Highlight, b: Highlight) => {
if (a.highlightPositionPercent && b.highlightPositionPercent) {
return sorted(a.highlightPositionPercent, b.highlightPositionPercent)
}
// We do this in a try/catch because it might be an invalid diff
// With PDF it will definitely be an invalid diff.
try {
const aPos = getHighlightLocation(a.patch)
const bPos = getHighlightLocation(b.patch)
if (aPos && bPos) {
return sorted(aPos, bPos)
}
} catch {}
return a.createdAt.localeCompare(b.createdAt)
})
return sortHighlights(highlights ?? [])
}, [highlights])
const handleSaveNoteText = useCallback(

View File

@ -12,7 +12,6 @@ import { useCallback, useState } from 'react'
import { X } from '@phosphor-icons/react'
import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
import { diff_match_patch } from 'diff-match-patch'
import { MenuTrigger } from '../../elements/MenuTrigger'
import { highlightsAsMarkdown } from '../homeFeed/HighlightItem'
import 'react-markdown-editor-lite/lib/index.css'
@ -29,12 +28,6 @@ type NotebookModalProps = {
onClose: (highlights: Highlight[], deletedHighlights: Highlight[]) => void
}
export const getHighlightLocation = (patch: string): number | undefined => {
const dmp = new diff_match_patch()
const patches = dmp.patch_fromText(patch)
return patches[0].start1 || undefined
}
export function NotebookModal(props: NotebookModalProps): JSX.Element {
const [showConfirmDeleteNote, setShowConfirmDeleteNote] = useState(false)
const [allAnnotations, setAllAnnotations] = useState<Highlight[] | undefined>(

View File

@ -11,9 +11,8 @@ import {
DropdownSeparator,
} from '../../elements/DropdownElements'
import { Box, VStack } from '../../elements/LayoutPrimitives'
import { styled, theme } from '../../tokens/stitches.config'
import { getHighlightLocation } from '../article/Notebook'
import { sortHighlights } from '../../../lib/highlights/sortHighlights'
type HighlightsMenuProps = {
viewer: UserBasicData
@ -133,36 +132,6 @@ export function HighlightsMenu(props: HighlightsMenuProps): JSX.Element {
)
}
const sortHighlights = (highlights: Highlight[]) => {
const sorted = (a: number, b: number) => {
if (a < b) {
return -1
}
if (a > b) {
return 1
}
return 0
}
return (highlights ?? [])
.filter((h) => h.type === 'HIGHLIGHT')
.sort((a: Highlight, b: Highlight) => {
if (a.highlightPositionPercent && b.highlightPositionPercent) {
return sorted(a.highlightPositionPercent, b.highlightPositionPercent)
}
// We do this in a try/catch because it might be an invalid diff
// With PDF it will definitely be an invalid diff.
try {
const aPos = getHighlightLocation(a.patch)
const bPos = getHighlightLocation(b.patch)
if (aPos && bPos) {
return sorted(aPos, bPos)
}
} catch {}
return a.createdAt.localeCompare(b.createdAt)
})
}
export function highlightAsMarkdown(highlight: Highlight) {
let buffer = `> ${highlight.quote}`
if (highlight.annotation) {
@ -175,8 +144,7 @@ export function highlightAsMarkdown(highlight: Highlight) {
export function highlightsAsMarkdown(highlights: Highlight[]) {
const noteMD = highlights.find((h) => h.type == 'NOTE')
const highlightMD = sortHighlights(highlights)
.filter((h) => h.type == 'HIGHLIGHT')
const highlightMD = sortHighlights(highlights ?? [])
.map((highlight) => {
return highlightAsMarkdown(highlight)
})

View File

@ -0,0 +1,38 @@
import { diff_match_patch } from 'diff-match-patch'
import type { Highlight } from '../networking/fragments/highlightFragment'
export function sortHighlights(highlights: Highlight[]) {
const sorted = (a: number, b: number) => {
if (a < b) {
return -1
}
if (a > b) {
return 1
}
return 0
}
const getHighlightLocation = (patch: string): number | undefined => {
const dmp = new diff_match_patch()
const patches = dmp.patch_fromText(patch)
return patches[0].start1 || undefined
}
return highlights
.filter((h) => h.type === 'HIGHLIGHT')
.sort((a: Highlight, b: Highlight) => {
if (a.highlightPositionPercent && b.highlightPositionPercent) {
return sorted(a.highlightPositionPercent, b.highlightPositionPercent)
}
// We do this in a try/catch because it might be an invalid diff
// With PDF it will definitely be an invalid diff.
try {
const aPos = getHighlightLocation(a.patch)
const bPos = getHighlightLocation(b.patch)
if (aPos && bPos) {
return sorted(aPos, bPos)
}
} catch {}
return a.createdAt.localeCompare(b.createdAt)
})
}