Merge pull request #1495 from concord-consortium/183725759-network-do…

…cuments-dont-show-up-in-document-view 183725759 network documents dont show up in document view
concord-consortium · Nov 14, 2022 · 495e025 · 495e025
2 parents c26779c + a325bf1
commit 495e025
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 11 deletions.
diff --git a/src/components/chat/commented-documents.scss b/src/components/chat/commented-documents.scss
@@ -61,13 +61,35 @@
       flex-basis: 130px;
       margin: 0 5px;
     }
+
     .document-type-icon {
       align-self: flex-start;
       svg {
         width: 18px;
         height: 16.5px;
       }
     }
+
+    .document-type-icon-yellow {
+      align-self: flex-start;
+      position: relative;
+      svg {
+        width: 18px;
+        height: 16.5px;
+      }
+      .yellow-background{
+        background-color: yellow;
+        height: 9px;
+        width: 11px;
+        position: absolute;
+        top: 25%;
+        left: 25%;
+        opacity: 0.4;
+      }
+    }
+
+
+
     .numComments {
       align-self: flex-start;
       width: 24px;

diff --git a/src/components/chat/commented-documents.tsx b/src/components/chat/commented-documents.tsx
@@ -8,6 +8,7 @@ import { DocumentModelType } from "../../models/document/document";
 import { useDocumentCaption } from "../thumbnail/decorated-document-thumbnail-item";
 import { ENavTab } from "../../models/view/nav-tabs";
 import DocumentIcon from "../../assets/icons/document-icon.svg";
+
 import "./commented-documents.scss";
 import { getProblemOrdinal } from "../../models/stores/stores";
 
@@ -157,13 +158,27 @@ export const CommentedDocuments: React.FC<IProps> = ({user, handleDocView}) => {
         myWorkDocuments &&
         (myWorkDocuments).map((doc: PromisedDocumentDocument, index: number) =>{
           const sectionDoc =  store.documents.getDocument(doc.key);
+          const networkDoc = store.networkDocuments.getDocument(doc.key);
           if (sectionDoc){
             return (
               <MyWorkDocuments
                 key={index}
                 doc={doc}
                 index={index}
-                sectionDoc={sectionDoc}
+                sectionOrNetworkDoc={sectionDoc}
+                isNetworkDoc={false}
+                handleDocView={handleDocView}
+              />
+            );
+          }
+          if (networkDoc){
+            return (
+              <MyWorkDocuments
+                key={index}
+                doc={doc}
+                index={index}
+                sectionOrNetworkDoc={networkDoc}
+                isNetworkDoc={true}
                 handleDocView={handleDocView}
               />
             );
@@ -178,12 +193,12 @@ export const CommentedDocuments: React.FC<IProps> = ({user, handleDocView}) => {
 interface JProps {
   doc: any,
   index: number,
-  sectionDoc: DocumentModelType,
+  sectionOrNetworkDoc: DocumentModelType,
+  isNetworkDoc: boolean,
   handleDocView: (() => void) | undefined,
-
 }
 
-export const MyWorkDocuments: React.FC<JProps> = ({doc, index, sectionDoc, handleDocView}) => {
+export const MyWorkDocuments: React.FC<JProps> = ({doc, index, sectionOrNetworkDoc, isNetworkDoc, handleDocView}) => {
   const ui = useUIStore();
   let navTab = '';
   const myWorkTypes = ["problem", "planning", "learningLog", "personal"];
@@ -196,24 +211,35 @@ export const MyWorkDocuments: React.FC<JProps> = ({doc, index, sectionDoc, handl
       navTab = ENavTab.kClassWork;
     }
   }
-  const title =  useDocumentCaption(sectionDoc as DocumentModelType);
+  const title =  useDocumentCaption(sectionOrNetworkDoc);
 
   return (
     <div
       className={`document-box my-work-document ${navTab}`}
       onClick={()=>{
         ui.setActiveNavTab(navTab); //open correct NavTab
         ui.setSelectedTile();
-        ui.setSelectedCommentedDocument(sectionDoc.key);
-        ui.setFocusDocument(doc.key);
+        ui.setSelectedCommentedDocument(sectionOrNetworkDoc?.key);
+        ui.setFocusDocument(sectionOrNetworkDoc?.key);
         if (handleDocView !== undefined){
           handleDocView();
         }
       }}
     >
+    {
+      isNetworkDoc ?
+          <div className="document-type-icon-yellow">
+            <DocumentIcon/>
+            <div className="yellow-background"/>
+
+          </div>
+      :
       <div className="document-type-icon">
         <DocumentIcon/>
       </div>
+    }
+
+
       <div className={"title"}>
         {title}
       </div>

diff --git a/src/components/navigation/section-document-or-browser.tsx b/src/components/navigation/section-document-or-browser.tsx
@@ -109,7 +109,7 @@ export const SectionDocumentOrBrowser: React.FC<IProps> = observer(({ tabSpec, r
     const isActiveTab =  ui.activeNavTab === tabSpec.label.toLowerCase().replace(' ', '-');
 
     function getNewTabIndex(key: string, navTab: string ){
-      const doc = store.documents.getDocument(key);
+      const doc = store.documents.getDocument(key) || store.networkDocuments.getDocument(key);
       if (navTab === "Class Work") {
         if (doc?.type === "learningLogPublication"){
           return 1;
@@ -132,9 +132,13 @@ export const SectionDocumentOrBrowser: React.FC<IProps> = observer(({ tabSpec, r
       }
     }
     if (ui.selectedCommentedDocument){
-      const newDoc = store.documents.getDocument(ui.selectedCommentedDocument);
+      const newDoc = store.documents.getDocument(ui.selectedCommentedDocument)
+      || store.networkDocuments.getDocument(ui.selectedCommentedDocument);
       if (isActiveTab) {
         setReferenceDocument(newDoc);
+        if (newDoc?.isRemote){
+          handleSelectDocument(newDoc);
+        }
       }
       const newIndex = getNewTabIndex(ui.selectedCommentedDocument, tabSpec.label);
       if (newIndex !== undefined) {
@@ -145,13 +149,12 @@ export const SectionDocumentOrBrowser: React.FC<IProps> = observer(({ tabSpec, r
   // if ui.activeNavTab is in dependency array, it will not remember last saved section subTab
   // eslint-disable-next-line react-hooks/exhaustive-deps
   },[store.documents, tabSpec.label, ui.selectedCommentedDocument]);
+
   const handleTabSelect = (tabidx: number) => {
     setTabIndex(tabidx);
     ui.updateFocusDocument();
   };
 
-
-
   const handleSelectDocument = (document: DocumentModelType) => {
     if (!document.hasContent && document.isRemote) {
       loadDocumentContent(document);
@@ -212,6 +215,7 @@ export const SectionDocumentOrBrowser: React.FC<IProps> = observer(({ tabSpec, r
         }
       });
   };
+
   const renderDocumentBrowserView = (subTab: ISubTabSpec) => {
     const classHash = classStore.classHash;
     return (
@@ -221,6 +225,7 @@ export const SectionDocumentOrBrowser: React.FC<IProps> = observer(({ tabSpec, r
             const _handleDocumentStarClick = section.showStarsForUser(user)
               ? handleDocumentStarClick
               : undefined;
+
             return (
               <DocumentCollectionByType
                 key={`${section.type}_${index}`}