The History PR: III - Editor integration (#1158)

* Update history on editor load and title change

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Add pinning to history from sidebar

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Add CHANGELOG entry

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Only update local history entries

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Update property names to match backend ones

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Show error notification on failure

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Apply requested changes from review

- rename use hook to reflect the situation that only local entries will be updated
- extract the update ready check from the hook
- rename vars to make comparison more clear

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

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

@@ -4,20 +4,40 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { SidebarButton } from './sidebar-button'
 import { SpecificSidebarEntryProps } from './types'
+import { useParams } from 'react-router-dom'
+import { EditorPagePathParams } from '../editor-page'
+import { useSelector } from 'react-redux'
+import { ApplicationState } from '../../../redux'
+import { toggleHistoryEntryPinning } from '../../../redux/history/methods'
+import { showErrorNotification } from '../../../redux/ui-notifications/methods'
 
 export const PinNoteSidebarEntry: React.FC<SpecificSidebarEntryProps> = ({ className, hide }) => {
-  useTranslation()
+  const { t } = useTranslation()
+  const { id } = useParams<EditorPagePathParams>()
+  const history = useSelector((state: ApplicationState) => state.history)
 
-  const isPinned = true
-  const i18nKey = isPinned ? 'editor.documentBar.pinNoteToHistory' : 'editor.documentBar.pinnedToHistory'
+  const isPinned = useMemo(() => {
+    const entry = history.find(entry => entry.identifier === id)
+    if (!entry) {
+      return false
+    }
+    return entry.pinStatus
+  }, [id, history])
+
+  const onPinClicked = useCallback(() => {
+    toggleHistoryEntryPinning(id).catch(
+      showErrorNotification(t('landing.history.error.updateEntry.text'))
+    )
+  }, [id, t])
 
   return (
-    <SidebarButton icon={ 'thumb-tack' } className={ className } hide={ hide }>
-      <Trans i18nKey={ i18nKey }/>
+    <SidebarButton icon={ 'thumb-tack' } hide={ hide } onClick={ onPinClicked }
+                   className={ `${ className ?? '' } ${ isPinned ? 'icon-highlighted' : '' }` }>
+      <Trans i18nKey={ isPinned ? 'editor.documentBar.pinnedToHistory' : 'editor.documentBar.pinNoteToHistory' }/>
     </SidebarButton>
   )
 }

src/components/editor-page/sidebar/style/colors.scss

@@ -33,6 +33,10 @@
         background: $entry-hover-bg;
       }
     }
+
+    &.icon-highlighted > .sidebar-icon {
+      color: $orange
+    }
   }
 }