Merge pull request #91 from mitaai/stateful-rendering-of-annotations-…

…doc-view

#9 Stateful rendering of annotations doc view

src/components/AnnotationCard/AnnotationCard.js

@@ -159,7 +159,7 @@ function AnnotationCard({
       } else if (newAnnotationPermissions === 1) {
         // user wants the annotation to be shared with groups
         // getting the intersection between the groups that have access to this specific document and the groups that the user is in
-        newAnnotationData.permissions.groups = newAnnotationData.target.document.groups.filter((value) => (user.groups.indexOf(value) != -1));
+        newAnnotationData.permissions.groups = newAnnotationData.target.document.groups.filter((id) => (user.groups.includes(id)));
         newAnnotationData.permissions.documentOwner = false;
         newAnnotationData.permissions.private = false;
       } else if (newAnnotationPermissions === 2) {

src/components/Dashboard/DashboardAnnotationList/DashboardAnnotationList.js

@@ -98,7 +98,7 @@ const DashboardAnnotationList = ({
               <ListGroup.Item key={annotation._id}>
                 <Row>
                   <Col className="ellipsis" xl={8}>
-                    <Link href={`/documents/${annotation.target.document.slug}?mine=${key === 'mine'}#${annotation._id}`}>
+                    <Link href={`/documents/${annotation.target.document.slug}?mine=${key === 'mine'}&aid=${annotation._id}`}>
                       {annotation.target.selector.exact}
                     </Link>
                   </Col>
@@ -120,7 +120,9 @@ const DashboardAnnotationList = ({
                       {') '}
                       {annotation.permissions.groups
                       && annotation.permissions.groups.length > 0
-                      && annotation.permissions.private === false && (
+                      && annotation.permissions.private === false
+                      && annotation.permissions.documentOwner === false
+                      && (
                       <Badge
                         variant="info"
                         key={annotation.permissions.groups.sort()[0]}

src/pages/api/annotations.js

@@ -54,6 +54,7 @@ const handler = async (req, res) => {
             .collection('annotations')
             .find({
               'permissions.private': false,
+              'permissions.documentOwner': false,
               'permissions.groups': { $in: groupIds },
             })
             .limit(parseInt(limit, 10))
@@ -64,6 +65,7 @@ const handler = async (req, res) => {
             .collection('annotations')
             .find({
               'permissions.private': false,
+              'permissions.documentOwner': false,
               'permissions.groups': { $in: groupIds },
             })
             .toArray();

src/pages/documents/[slug]/index.jsx

@@ -2,7 +2,7 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable no-restricted-syntax */
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useSession } from 'next-auth/client';
 import $ from 'jquery';
 import {
@@ -79,9 +79,18 @@ function DeepCopyObj(obj) {
 
 const DocumentPage = (props) => {
   const {
-    document, annotations, initAlerts,
+    document, annotations, initAlerts, query,
   } = props;
 
+  let validQuery = false;
+  let defaultPermissions = 0;
+  if ((query.mine === 'true' || query.mine === 'false') && query.aid !== undefined) {
+    if (annotations.find((anno) => anno._id === query.aid) !== undefined) {
+      validQuery = true;
+      defaultPermissions = query.mine === 'true' ? 0 : 1;
+    }
+  }
+
   const [alerts, setAlerts] = useState(initAlerts || []);
   const [documentHighlightedAndLoaded, setDocumentHighlightedAndLoaded] = useState(false);
   const [channelAnnotations, setChannelAnnotations] = useState({ left: null, right: null });
@@ -90,12 +99,14 @@ const DocumentPage = (props) => {
     filters: {
       annotatedBy: [], // list of filter options that have been selected by user
       byTags: [], // list of filter options that have been selected by user},
-      permissions: 0,
+      permissions: defaultPermissions,
     },
   });
   const [annotationChannel1Loaded, setAnnotationChannel1Loaded] = useState(false);
   const [annotationChannel2Loaded, setAnnotationChannel2Loaded] = useState(false);
 
+  const [scrollToAnnotation, setScrollToAnnotation] = useState(validQuery);
+
   const [session, loading] = useSession();
 
   const saveAnnotationChanges = (anno, side) => {
@@ -312,6 +323,31 @@ const DocumentPage = (props) => {
     }
   };
 
+  useEffect(() => {
+    // when both annotation channels are loaded we are going to check the query data and if there is a key 'mine' and 'aid', and 'aid' value actually equals an annotation id that we have then we will trigger scroll to the annotation
+
+    if (scrollToAnnotation) {
+      if (annotationChannel1Loaded && annotationChannel2Loaded) {
+        if (!documentFilters.filterOnInit) {
+          const f = DeepCopyObj(documentFilters);
+          f.filterOnInit = true;
+          setDocumentFilters(f);
+        } else {
+          const anno = $(`#${query.aid}.annotation-card-container`);
+          if (anno.length !== 0) {
+            const scrollTo = anno.offset().top - $('#document-container').offset().top - 40;
+            setScrollToAnnotation(false);
+            $('#document-container').animate({
+              scrollTop: scrollTo < 0 ? 0 : scrollTo,
+            }, 500, () => {
+              anno.children('.annotation-header').trigger('click');
+            });
+          }
+        }
+      }
+    }
+  });
+
 
   return (
     <DocumentContext.Provider value={document}>
@@ -473,8 +509,9 @@ const DocumentPage = (props) => {
 };
 
 export async function getServerSideProps(context) {
+  console.log(context.req.query);
   const { slug } = context.params;
-  let props = {};
+  let props = { query: context.query };
   await prefetchDocumentBySlug(slug, context.req.headers.cookie).then((response) => {
     props.document = {
       slug,