diff --git a/frontend/app/PrivateRoutes.tsx b/frontend/app/PrivateRoutes.tsx
index 7e4a85955..5ddcf8ee4 100644
--- a/frontend/app/PrivateRoutes.tsx
+++ b/frontend/app/PrivateRoutes.tsx
@@ -59,7 +59,7 @@ const enhancedComponents: any = {
SpotsList: withSiteIdUpdater(components.SpotsListPure),
Spot: components.SpotPure,
ScopeSetup: components.ScopeSetup,
- Highlights: components.HighlightsPure,
+ Highlights: withSiteIdUpdater(components.HighlightsPure),
};
const withSiteId = routes.withSiteId;
diff --git a/frontend/app/components/Highlights/HighlightClip.tsx b/frontend/app/components/Highlights/HighlightClip.tsx
index f0bad1494..68866658d 100644
--- a/frontend/app/components/Highlights/HighlightClip.tsx
+++ b/frontend/app/components/Highlights/HighlightClip.tsx
@@ -20,6 +20,7 @@ function HighlightClip({
openEdit = () => undefined,
onItemClick = () => undefined,
onDelete = () => undefined,
+ canEdit = false,
}: {
note: string | null;
tag: string;
@@ -30,6 +31,7 @@ function HighlightClip({
openEdit: (id: any) => any;
onItemClick: (id: any) => any;
onDelete: (id: any) => any;
+ canEdit: boolean;
}) {
const noteMsg = note || noNoteMsg
const copyToClipboard = () => {
@@ -48,16 +50,19 @@ function HighlightClip({
key: 'edit',
icon: ,
label: 'Edit',
+ disabled: !canEdit,
},
{
key: 'visibility',
icon: ,
label: 'Visibility',
+ disabled: !canEdit,
},
{
key: 'delete',
icon: ,
label: 'Delete',
+ disabled: !canEdit,
},
];
diff --git a/frontend/app/components/Highlights/HighlightsList.tsx b/frontend/app/components/Highlights/HighlightsList.tsx
index e09095e7f..e0158b3ce 100644
--- a/frontend/app/components/Highlights/HighlightsList.tsx
+++ b/frontend/app/components/Highlights/HighlightsList.tsx
@@ -14,13 +14,14 @@ import HighlightsListHeader from './HighlightsListHeader';
import withPermissions from 'HOCs/withPermissions';
function HighlightsList() {
- const { notesStore, projectsStore } = useStore();
+ const { notesStore, projectsStore, userStore } = useStore();
const [activeId, setActiveId] = React.useState(null);
const [editModalOpen, setEditModalOpen] = React.useState(false);
const [editHl, setEditHl] = React.useState>({
message: '',
isPublic: false
});
+ const currentUserId = userStore.account.id;
const activeProject = projectsStore.activeSiteId;
const query = notesStore.query;
@@ -150,6 +151,7 @@ function HighlightsList() {
createdAt={note.createdAt}
hId={note.noteId}
thumbnail={note.thumbnail}
+ canEdit={note.userId === currentUserId}
openEdit={() => onEdit(note.noteId)}
onDelete={() => onDelete(note.noteId)}
onItemClick={() => onItemClick(note.noteId)}