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>

src/components/editor-page/sidebar/specific-sidebar-entries/pin-note-sidebar-entry.module.css

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

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

@@ -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>
   )

src/redux/history/methods.ts

@@ -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)
   }
 }