fix(pinning): Use new object for redux mutations

Elements retrieved from the redux state must not be manipulated.
Instead, a new object is created with the adjusted properties and committed to the redux store.
A missing css class has been additionally added, so that the pinning state can be deduced from the color of the sidebar icon.

Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Erik Michelson 2022-08-14 23:00:37 +02:00
parent 761f112491
commit d57b2f27fd
3 changed files with 17 additions and 7 deletions

View file

@ -0,0 +1,9 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
.highlighted {
color: #b51f08 !important;
}

View file

@ -11,6 +11,7 @@ import type { SpecificSidebarEntryProps } from '../types'
import { toggleHistoryEntryPinning } from '../../../../redux/history/methods'
import { showErrorNotification } from '../../../../redux/ui-notifications/methods'
import { useApplicationState } from '../../../../hooks/common/use-application-state'
import styles from './pin-note-sidebar-entry.module.css'
/**
* Sidebar entry button that toggles the pinned status of the current note in the history.
@ -40,7 +41,7 @@ export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ class
icon={'thumb-tack'}
hide={hide}
onClick={onPinClicked}
className={`${className ?? ''} ${isPinned ? 'icon-highlighted' : ''}`}>
className={`${className ?? ''} ${isPinned ? styles['highlighted'] : ''}`}>
<Trans i18nKey={isPinned ? 'editor.documentBar.pinnedToHistory' : 'editor.documentBar.pinNoteToHistory'} />
</SidebarButton>
)

View file

@ -106,15 +106,15 @@ export const toggleHistoryEntryPinning = async (noteId: string): Promise<void> =
if (!entryToUpdate) {
return Promise.reject(`History entry for note '${noteId}' not found`)
}
if (entryToUpdate.pinStatus === undefined) {
entryToUpdate.pinStatus = false
const updatedEntry = {
...entryToUpdate,
pinStatus: !entryToUpdate.pinStatus
}
entryToUpdate.pinStatus = !entryToUpdate.pinStatus
if (entryToUpdate.origin === HistoryEntryOrigin.LOCAL) {
updateLocalHistoryEntry(noteId, entryToUpdate)
updateLocalHistoryEntry(noteId, updatedEntry)
} else {
await updateRemoteHistoryEntryPinStatus(noteId, entryToUpdate.pinStatus)
updateHistoryEntryRedux(noteId, entryToUpdate)
await updateRemoteHistoryEntryPinStatus(noteId, updatedEntry.pinStatus)
updateHistoryEntryRedux(noteId, updatedEntry)
}
}