From 0ed8623e654028016c59ed91ec48c52f46675d32 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 26 Feb 2024 14:08:10 +0800 Subject: [PATCH] Comment out the withLabel icon until its working better --- .../templates/article/HighlightsLayer.tsx | 15 +++++++---- .../components/templates/article/Notebook.tsx | 9 +++++-- .../article/SetLabelsModalPresenter.tsx | 27 ++++++++++++------- .../web/lib/highlights/highlightGenerator.ts | 22 +++++++-------- .../web/lib/hooks/useSetHighlightLabels.tsx | 1 + 5 files changed, 47 insertions(+), 27 deletions(-) diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx index dd1ed5bf1..c0066bc58 100644 --- a/packages/web/components/templates/article/HighlightsLayer.tsx +++ b/packages/web/components/templates/article/HighlightsLayer.tsx @@ -80,13 +80,15 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { const focusedHighlightMousePos = useRef({ pageX: 0, pageY: 0 }) const [currentHighlightIdx, setCurrentHighlightIdx] = useState(0) - const [focusedHighlight, setFocusedHighlight] = - useState(undefined) + const [focusedHighlight, setFocusedHighlight] = useState< + Highlight | undefined + >(undefined) const [selectionData, setSelectionData] = useSelection(highlightLocations) - const [labelsTarget, setLabelsTarget] = - useState(undefined) + const [labelsTarget, setLabelsTarget] = useState( + undefined + ) const [ confirmDeleteHighlightWithNoteId, @@ -811,7 +813,10 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { setLabelsTarget(undefined)} + onUpdate={updateHighlightsCallback} + onOpenChange={() => { + setLabelsTarget(undefined) + }} /> )} {confirmDeleteHighlightWithNoteId && ( diff --git a/packages/web/components/templates/article/Notebook.tsx b/packages/web/components/templates/article/Notebook.tsx index 90aaff720..a8f6e4504 100644 --- a/packages/web/components/templates/article/Notebook.tsx +++ b/packages/web/components/templates/article/Notebook.tsx @@ -57,8 +57,9 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element { const [noteText, setNoteText] = useState('') const [showConfirmDeleteHighlightId, setShowConfirmDeleteHighlightId] = useState(undefined) - const [labelsTarget, setLabelsTarget] = - useState(undefined) + const [labelsTarget, setLabelsTarget] = useState( + undefined + ) const noteState = useRef({ isCreating: false, note: undefined, @@ -359,6 +360,10 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element { { + // Don't actually need to do something here + console.log('update highlight: ', highlight) + }} onOpenChange={() => { mutate() setLabelsTarget(undefined) diff --git a/packages/web/components/templates/article/SetLabelsModalPresenter.tsx b/packages/web/components/templates/article/SetLabelsModalPresenter.tsx index 7bf7232b7..5fb68dd66 100644 --- a/packages/web/components/templates/article/SetLabelsModalPresenter.tsx +++ b/packages/web/components/templates/article/SetLabelsModalPresenter.tsx @@ -3,6 +3,7 @@ import { useSetPageLabels } from '../../../lib/hooks/useSetPageLabels' import { LabelsProvider } from './SetLabelsControl' import { SetLabelsModal } from './SetLabelsModal' import { useSetHighlightLabels } from '../../../lib/hooks/useSetHighlightLabels' +import { Highlight } from '../../../lib/networking/fragments/highlightFragment' type SetPageLabelsModalPresenterProps = { articleId: string @@ -15,13 +16,6 @@ export function SetPageLabelsModalPresenter( ): JSX.Element { const [labels, dispatchLabels] = useSetPageLabels(props.articleId) - useEffect(() => { - dispatchLabels({ - type: 'RESET', - labels: props.article.labels ?? [], - }) - }, [props.article, dispatchLabels]) - const onOpenChange = useCallback(() => { if (props.article) { props.article.labels = labels.labels @@ -29,6 +23,13 @@ export function SetPageLabelsModalPresenter( props.onOpenChange(true) }, [props, labels]) + useEffect(() => { + dispatchLabels({ + type: 'RESET', + labels: props.article.labels ?? [], + }) + }, [props.article, dispatchLabels]) + return ( void onOpenChange: (open: boolean) => void } @@ -57,12 +60,18 @@ export function SetHighlightLabelsModalPresenter( }) }, [props.highlight, dispatchLabels]) + const onOpenChange = useCallback(() => { + props.highlight.labels = labels.labels + props.onUpdate(props.highlight) + props.onOpenChange(true) + }, [props]) + return ( ) } diff --git a/packages/web/lib/highlights/highlightGenerator.ts b/packages/web/lib/highlights/highlightGenerator.ts index a74b33185..9d9c96949 100644 --- a/packages/web/lib/highlights/highlightGenerator.ts +++ b/packages/web/lib/highlights/highlightGenerator.ts @@ -206,19 +206,19 @@ export function makeHighlightNodeAttributes( lastElement.appendChild(ctr) } - if (withLabels && lastElement) { - const svg = labelsImage(customColor) - svg.setAttribute(highlightLabelIdAttribute, id) + // if (withLabels && lastElement) { + // const svg = labelsImage(customColor) + // svg.setAttribute(highlightLabelIdAttribute, id) - const ctr = document.createElement('span') - ctr.className = 'highlight_label_button' - ctr.appendChild(svg) - ctr.setAttribute(highlightLabelIdAttribute, id) - ctr.setAttribute('width', '14px') - ctr.setAttribute('height', '14px') + // const ctr = document.createElement('span') + // ctr.className = 'highlight_label_button' + // ctr.appendChild(svg) + // ctr.setAttribute(highlightLabelIdAttribute, id) + // ctr.setAttribute('width', '14px') + // ctr.setAttribute('height', '14px') - lastElement.appendChild(ctr) - } + // lastElement.appendChild(ctr) + // } return { prefix, diff --git a/packages/web/lib/hooks/useSetHighlightLabels.tsx b/packages/web/lib/hooks/useSetHighlightLabels.tsx index 71d199437..2e1567d5e 100644 --- a/packages/web/lib/hooks/useSetHighlightLabels.tsx +++ b/packages/web/lib/hooks/useSetHighlightLabels.tsx @@ -3,6 +3,7 @@ import { Label } from '../networking/fragments/labelFragment' import { showErrorToast } from '../toastHelpers' import { setLabelsForHighlight } from '../networking/mutations/setLabelsForHighlight' import { LabelsDispatcher } from './useSetPageLabels' +import { Highlight } from '../networking/fragments/highlightFragment' export const useSetHighlightLabels = ( highlightId?: string