Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better handling of state changes on notes

Browse Source
This commit is contained in:
Jackson Harper
2023-06-23 18:54:34 +08:00
parent f1e435ff0b
commit ff06f817fe
9 changed files with 44 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/web/components/patterns/ArticleNotes.tsx
View File

@ -46,7 +46,9 @@ type NoteSectionProps = {
placeHolder: string
text: string | undefined
text: string
setText: (text: string) => void
saveText: (text: string) => void
}
@ -63,6 +65,7 @@ export function ArticleNotes(props: NoteSectionProps): JSX.Element {
targetId={props.targetId}
placeHolder={props.placeHolder}
text={props.text}
setText={props.setText}
saveText={saveText}
fillBackground={false}
/>
@ -79,7 +82,9 @@ type HighlightViewNoteProps = {
setEditMode: (set: 'edit' | 'preview') => void
text: string | undefined
text: string
setText: (text: string) => void
updateHighlight: (highlight: Highlight) => void
}
@ -108,6 +113,7 @@ export function HighlightViewNote(props: HighlightViewNoteProps): JSX.Element {
targetId={props.targetId}
placeHolder={props.placeHolder}
text={props.text}
setText={props.setText}
saveText={saveText}
fillBackground={true}
/>
@ -120,6 +126,7 @@ type MarkdownNote = {
placeHolder: string
text: string | undefined
setText: (text: string) => void
fillBackground: boolean | undefined
saveText: (text: string) => void
@ -147,6 +154,7 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
data: { text: string; html: string },
event?: ChangeEvent<HTMLTextAreaElement> | undefined
) => {
props.setText(data.text)
if (event) {
event.preventDefault()
}
@ -186,8 +194,7 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
<MdEditor
key="note-editor"
ref={editorRef}
autoFocus={true}
defaultValue={props.text}
value={props.text}
placeholder={props.placeHolder}
view={{ menu: true, md: true, html: false }}
canView={{

6
packages/web/components/patterns/RcEditorStyles.tsx
View File

@ -30,11 +30,5 @@ export const RcEditorStyles = (isDark: boolean, shadow: boolean) => {
border: '1px solid $thBorderSubtle',
backgroundColor: isDark ? '#2A2A2A' : 'white',
},
'.rc-md-editor:focus-within': {
outline: '2px solid $omnivoreCtaYellow',
borderRadius: '5px',
border: 'unset',
boxShadow: 'unset',
},
}
}

1
packages/web/components/templates/article/EpubContainer.tsx
View File

@ -333,7 +333,6 @@ export default function EpubContainer(props: EpubContainerProps): JSX.Element {
key={notebookKey}
viewer={props.viewer}
item={props.article}
highlights={highlightsRef.current}
onClose={(updatedHighlights, deletedAnnotations) => {
console.log(
'closed PDF notebook: ',

1
packages/web/components/templates/article/HighlightsLayer.tsx
View File

@ -749,7 +749,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
<NotebookModal
viewer={props.viewer}
item={props.item}
highlights={highlights}
onClose={handleCloseNotebook}
viewHighlightInReader={(highlightId) => {
// The timeout here is a bit of a hack to work around rerendering

47
packages/web/components/templates/article/Notebook.tsx
View File

@ -2,23 +2,8 @@ import { Box, HStack, VStack, SpanBox } from '../../elements/LayoutPrimitives'
import { StyledText } from '../../elements/StyledText'
import { theme } from '../../tokens/stitches.config'
import type { Highlight } from '../../../lib/networking/fragments/highlightFragment'
import {
useCallback,
useEffect,
useMemo,
useReducer,
useRef,
useState,
} from 'react'
import {
BookOpen,
CaretDown,
CaretRight,
DotsThree,
Pencil,
PencilLine,
X,
} from 'phosphor-react'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { CaretDown, CaretRight } from 'phosphor-react'
import { updateHighlightMutation } from '../../../lib/networking/mutations/updateHighlightMutation'
import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
import { diff_match_patch } from 'diff-match-patch'
@ -43,7 +28,6 @@ type NotebookContentProps = {
viewer: UserBasicData
item: ReadableItem
highlights: Highlight[]
viewInReader: (highlightId: string) => void
@ -73,6 +57,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
username: props.viewer.profile.username,
includeFriendsHighlights: false,
})
const [noteText, setNoteText] = useState<string>('')
const [showConfirmDeleteHighlightId, setShowConfirmDeleteHighlightId] =
useState<undefined | string>(undefined)
const [labelsTarget, setLabelsTarget] = useState<Highlight | undefined>(
@ -138,6 +123,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
if (note) {
noteState.current.note = note
noteState.current.isCreating = false
setNoteText(note.annotation || '')
}
return result
}, [articleData])
@ -204,9 +190,24 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
}
createNote(text)
},
[noteState, createNote, updateNote]
[noteText, noteState, createNote, updateNote, highlights]
)
const deleteDocumentNote = useCallback(() => {
;(async () => {
highlights
?.filter((h) => h.type === 'NOTE')
.forEach(async (h) => {
const result = await deleteHighlightMutation(h.id)
if (!result) {
showErrorToast('Error deleting note')
}
})
noteState.current.note = undefined
})()
setNoteText('')
}, [noteState, highlights])
const [articleNotesCollapsed, setArticleNotesCollapsed] = useState(false)
const [highlightsCollapsed, setHighlightsCollapsed] = useState(false)
const [errorSaving, setErrorSaving] = useState<string | undefined>(undefined)
@ -238,7 +239,8 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
>
<ArticleNotes
targetId={props.item.id}
text={noteState.current.note?.annotation}
text={noteText}
setText={setNoteText}
placeHolder="Add notes to this document..."
saveText={handleSaveNoteText}
/>
@ -308,7 +310,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
p: '10px',
mt: '15px',
width: '100%',
fontSize: '9px',
fontSize: '13px',
color: '$thTextSubtle',
alignItems: 'center',
justifyContent: 'center',
@ -373,7 +375,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
message="Are you sure you want to delete the note from this document?"
acceptButtonLabel="Delete"
onAccept={() => {
// deleteDocumentNote()
deleteDocumentNote()
if (props.setShowConfirmDeleteNote) {
props.setShowConfirmDeleteNote(false)
}
@ -403,7 +405,6 @@ function SectionTitle(props: SectionTitleProps): JSX.Element {
css={{
display: 'flex',
alignItems: 'center',
width: '100%',
gap: '5px',
}}
onClick={(event) => {

41
packages/web/components/templates/article/NotebookModal.tsx
View File

@ -24,10 +24,9 @@ type NotebookModalProps = {
viewer: UserBasicData
item: ReadableItem
highlights: Highlight[]
viewHighlightInReader: (arg: string) => void
onClose: (highlights: Highlight[]) => void
onClose: (highlights: Highlight[], deletedHighlights: Highlight[]) => void
}
export const getHighlightLocation = (patch: string): number | undefined => {
@ -42,13 +41,15 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
undefined
)
const [deletedHighlights, setDeletedAnnotations] = useState<
Highlight[] | undefined
>(undefined)
const handleClose = useCallback(() => {
console.log('closing: ', allAnnotations)
props.onClose(allAnnotations ?? [])
props.onClose(allAnnotations ?? [], deletedHighlights ?? [])
}, [props, allAnnotations])
const handleAnnotationsChange = useCallback((allAnnotations) => {
console.log('all annotation: ', allAnnotations)
setAllAnnotations(allAnnotations)
}, [])
@ -191,33 +192,3 @@ function CloseButton(props: { close: () => void }): JSX.Element {
</Button>
)
}
function SizeToggle(props: SizeToggleProps): JSX.Element {
return (
<Button
style="plainIcon"
css={{
display: 'flex',
padding: '2px',
alignItems: 'center',
borderRadius: '9999px',
'&:hover': {
bg: '#898989',
},
'@mdDown': {
display: 'none',
},
}}
onClick={(event) => {
props.setMode(props.mode == 'normal' ? 'maximized' : 'normal')
event.preventDefault()
}}
>
{props.mode == 'normal' ? (
<ArrowsOut size="15" color={theme.colors.thTextContrast2.toString()} />
) : (
<ArrowsIn size="15" color={theme.colors.thTextContrast2.toString()} />
)}
</Button>
)
}

2
packages/web/components/templates/article/NotebookPresenter.tsx
View File

@ -10,7 +10,6 @@ type NotebookPresenterProps = {
viewer: UserBasicData
item: ReadableItem
highlights: Highlight[]
onClose: (highlights: Highlight[]) => void
}
@ -20,7 +19,6 @@ export const NotebookPresenter = (props: NotebookPresenterProps) => {
<NotebookModal
viewer={props.viewer}
item={props.item}
highlights={props.highlights}
onClose={(highlights: Highlight[]) => {
console.log('NotebookModal: ', highlights)
props.onClose(highlights)

7
packages/web/components/templates/article/PdfArticleContainer.tsx
View File

@ -510,14 +510,13 @@ export default function PdfArticleContainer(
key={notebookKey}
viewer={props.viewer}
item={props.article}
highlights={highlightsRef.current}
onClose={(updatedHighlights, deletedAnnotations) => {
onClose={(updatedHighlights, deletedHighlights) => {
console.log(
'closed PDF notebook: ',
updatedHighlights,
deletedAnnotations
deletedHighlights
)
deletedAnnotations.forEach((highlight) => {
deletedHighlights.forEach((highlight) => {
const event = new CustomEvent('deleteHighlightbyId', {
detail: highlight.id,
})

1
packages/web/components/templates/homeFeed/HighlightsLayout.tsx
View File

@ -447,7 +447,6 @@ function HighlightList(props: HighlightListProps): JSX.Element {
<NotebookContent
viewer={props.viewer}
item={props.item.node}
highlights={props.item.node.highlights ?? []}
viewInReader={viewInReader}
/>
)}