mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-24 20:14:35 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(pinning): Use new object for redux mutations

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

9
src/components/editor-page/sidebar/specific-sidebar-entries/pin-note-sidebar-entry.module.css Normal file
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;
}

3
src/components/editor-page/sidebar/specific-sidebar-entries/pin-note-sidebar-entry.tsx
View file

@ -11,6 +11,7 @@ import type { SpecificSidebarEntryProps } from '../types'
import { toggleHistoryEntryPinning } from '../../../../redux/history/methods' import { toggleHistoryEntryPinning } from '../../../../redux/history/methods'
import { showErrorNotification } from '../../../../redux/ui-notifications/methods' import { showErrorNotification } from '../../../../redux/ui-notifications/methods'
import { useApplicationState } from '../../../../hooks/common/use-application-state' 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. * 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'} icon={'thumb-tack'}
hide={hide} hide={hide}
onClick={onPinClicked} onClick={onPinClicked}
className={`${className ?? ''} ${isPinned ? 'icon-highlighted' : ''}`}> className={`${className ?? ''} ${isPinned ? styles['highlighted'] : ''}`}>
<Trans i18nKey={isPinned ? 'editor.documentBar.pinnedToHistory' : 'editor.documentBar.pinNoteToHistory'} /> <Trans i18nKey={isPinned ? 'editor.documentBar.pinnedToHistory' : 'editor.documentBar.pinNoteToHistory'} />
</SidebarButton> </SidebarButton>
) )

12
src/redux/history/methods.ts
View file

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