chore: improve document group selection

src/components/chat/commented-documents.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 
 import { useFirestore } from "../../hooks/firestore-hooks";
-import { useStores, usePersistentUIStore, useUserStore, useUIStore} from "../../hooks/use-stores";
+import { useStores } from "../../hooks/use-stores";
 import { useDocumentCaption } from "../../hooks/use-document-caption";
 import { UserModelType } from "../../models/stores/user";
 import { getNavTabOfDocument, getTabsOfCurriculumDoc, isStudentWorkspaceDoc } from "../../models/stores/persistent-ui";
@@ -21,8 +21,7 @@ interface IProps {
 export const CommentedDocuments: React.FC<IProps>
     = observer(function CommentedDocuments({user, handleDocView}) {
   const [db] = useFirestore();
-  const ui = useUIStore();
-  const persistentUI = usePersistentUIStore();
+  const { ui, persistentUI } = useStores();
   const store = useStores();
   const problem =  store.problemOrdinal;
   const unit = store.unit.code;
@@ -109,9 +108,7 @@ interface JProps {
 // This is rendering a single document item in the commented document list
 export const WorkDocumentItem: React.FC<JProps> = (props) => {
   const { doc, sectionOrNetworkDoc, isNetworkDoc, handleDocView } = props;
-  const ui = useUIStore();
-  const persistentUI = usePersistentUIStore();
-  const user = useUserStore();
+  const { persistentUI, sortedDocuments, ui, user } = useStores();
   // We need the navTab to style the item.
   const navTab = getNavTabOfDocument(doc, user);
   const title =  useDocumentCaption(sectionOrNetworkDoc, isStudentWorkspaceDoc(sectionOrNetworkDoc, user.id));
@@ -120,7 +117,7 @@ export const WorkDocumentItem: React.FC<JProps> = (props) => {
     <div
       className={`document-box my-work-document ${navTab}`}
       onClick={()=>{
-        persistentUI.openResourceDocument(sectionOrNetworkDoc, user);
+        persistentUI.openResourceDocument(sectionOrNetworkDoc, user, sortedDocuments);
         ui.setSelectedTile();
         if (handleDocView !== undefined){
           handleDocView();

src/components/document/document.tsx

@@ -17,7 +17,6 @@ import ToggleControl from "../utilities/toggle-control";
 import { Logger } from "../../lib/logger";
 import { LogEventName } from "../../lib/logger-types";
 import { DocumentAnnotationToolbar } from "./document-annotation-toolbar";
-import { PrimarySortType } from "../../models/stores/ui-types";
 
 import "./document.scss";
 
@@ -282,12 +281,10 @@ export class DocumentComponent extends BaseComponent<IProps, IState> {
   }
 
   private openDocument(key: string) {
-    const primarySortBy = this.stores.persistentUI.primarySortBy as PrimarySortType;
-    const sortedDocumentGroups = this.stores.sortedDocuments.sortBy(primarySortBy);
-    const openGroup = sortedDocumentGroups.find(group => group.documents.some((d) => d.key === key));
-    const doc = this.stores.documents.getDocument(key);
+    const { documents, persistentUI, sortedDocuments, user } = this.stores;
+    const doc = documents.getDocument(key);
     if (doc) {
-      this.stores.persistentUI.openResourceDocument(doc, this.stores.user, openGroup?.label);
+      persistentUI.openResourceDocument(doc, user, sortedDocuments);
       logDocumentViewEvent(doc);
     }
   }

src/components/document/sort-work-view.tsx

@@ -36,23 +36,26 @@ export const SortWorkView: React.FC = observer(function SortWorkView() {
   };
 
   const handlePrimarySortBySelection = (sort: string) => {
-    const sortType = normalizeSortString(sort);
-    persistentUI.setPrimarySortBy(sortType);
-    if (sortType === secondarySortBy) {
+    persistentUI.setPrimarySortBy(sort);
+    if (sort === secondarySortBy) {
       persistentUI.setSecondarySortBy("None");
     }
   };
 
   const primarySortByOptions: ICustomDropdownItem[] = sortOptions.map((option) => ({
+    dataTest: normalizeSortString(option).toLowerCase(),
     disabled: false,
-    selected: option === primarySortBy,
+    id: normalizeSortString(option),
+    selected: normalizeSortString(option) === primarySortBy,
     text: option,
-    onClick: () => handlePrimarySortBySelection(option)
+    onClick: () => handlePrimarySortBySelection(normalizeSortString(option))
   }));
 
   const secondarySortOptions: ICustomDropdownItem[] = sortOptions.map((option) => ({
+    dataTest: normalizeSortString(option).toLowerCase(),
     disabled: option === primarySortBy,
-    selected: option === secondarySortBy,
+    id: normalizeSortString(option),
+    selected: normalizeSortString(option) === secondarySortBy,
     text: option,
     onClick: () => persistentUI.setSecondarySortBy(normalizeSortString(option))
   }));
@@ -116,9 +119,7 @@ export const SortWorkView: React.FC = observer(function SortWorkView() {
               key={`sort-work-header-${primarySortBy}`}
               docFilter={docFilter}
               docFilterItems={docFilterOptions}
-              primarySort={primarySortBy}
               primarySortItems={primarySortByOptions}
-              secondarySort={secondarySortBy}
               secondarySortItems={secondarySortOptions}
             />
             <div key={primarySortBy} className="tab-panel-documents-section">

src/components/navigation/sort-work-header.tsx

@@ -7,14 +7,12 @@ import "./sort-work-header.scss";
 interface ISortHeaderProps{
   docFilter: string;
   docFilterItems: ICustomDropdownItem[];
-  primarySort: string;
   primarySortItems: ICustomDropdownItem[];
-  secondarySort: string;
   secondarySortItems: ICustomDropdownItem[];
 }
 
 export const SortWorkHeader:React.FC<ISortHeaderProps>= observer(function SortWorkView(props){
-  const { docFilter, docFilterItems, primarySort, primarySortItems, secondarySort, secondarySortItems } = props;
+  const { docFilter, docFilterItems, primarySortItems, secondarySortItems } = props;
   return (
     <div className="sort-filter-menu-container">
       <div className="sort-work-header">
@@ -23,7 +21,6 @@ export const SortWorkHeader:React.FC<ISortHeaderProps>= observer(function SortWo
           <CustomSelect
             className="sort-work-sort-menu primary-sort-menu"
             dataTest="sort-work-sort-menu"
-            title={primarySort}
             items={primarySortItems}
             showItemChecks={true}
           />
@@ -33,7 +30,6 @@ export const SortWorkHeader:React.FC<ISortHeaderProps>= observer(function SortWo
           <CustomSelect
             className="sort-work-sort-menu secondary-sort-menu"
             dataTest="sort-work-sort-menu"
-            title={secondarySort}
             items={secondarySortItems}
             showItemChecks={true}
           />

src/models/stores/persistent-ui.ts

@@ -3,7 +3,8 @@ import { getSnapshot, applySnapshot, types,
 } from "mobx-state-tree";
 import { AppConfigModelType } from "./app-config-model";
 import { DocFilterType, DocFilterTypeEnum, kDividerHalf, kDividerMax,
-         kDividerMin } from "./ui-types";
+         kDividerMin,
+         PrimarySortType} from "./ui-types";
 import { isWorkspaceModelSnapshot, WorkspaceModel } from "./workspace";
 import { DocumentModelType } from "../document/document";
 import { ENavTab } from "../view/nav-tabs";
@@ -16,6 +17,7 @@ import { DB } from "../../lib/db";
 import { safeJsonParse } from "../../utilities/js-utils";
 import { urlParams } from "../../utilities/url-params";
 import { removeLoadingMessage, showLoadingMessage } from "../../utilities/loading-utils";
+import { SortedDocuments } from "./sorted-documents";
 
 export const kPersistentUiStateVersion = "1.0.0";
 
@@ -214,7 +216,7 @@ export const PersistentUIModel = types
      *
      * @param doc a non curriculum document
      */
-    openResourceDocument(doc: DocumentModelType, user?: UserModelType, docGroupLabel?: string) {
+    openResourceDocument(doc: DocumentModelType, user?: UserModelType, sortedDocuments?: SortedDocuments) {
       const navTab = getNavTabOfDocument(doc, user)  || "";
       let subTab = "";
       if (navTab === ENavTab.kClassWork) {
@@ -240,7 +242,18 @@ export const PersistentUIModel = types
         }
       }
       if (navTab === ENavTab.kSortWork) {
-        subTab = JSON.stringify({"primaryLabel": docGroupLabel, "primaryType": self.primarySortBy});
+        if (doc.type === ExemplarDocument) {
+          const sortedDocumentGroups = sortedDocuments?.sortBy("Strategy");
+          const openGroup = sortedDocumentGroups?.find(group => group.documents.some((d) => d.key === doc.key));
+          subTab = JSON.stringify({primaryLabel: openGroup?.label, "primaryType": "Strategy"});
+          self.setPrimarySortBy("Strategy");
+          self.setSecondarySortBy("None");
+        } else {
+          const primarySortBy = self.primarySortBy as PrimarySortType;
+          const sortedDocumentGroups = sortedDocuments?.sortBy(primarySortBy);
+          const openGroup = sortedDocumentGroups?.find(group => group.documents.some((d) => d.key === doc.key));
+          subTab = JSON.stringify({"primaryLabel": openGroup?.label, "primaryType": self.primarySortBy});
+        }
       }
 
       if (!subTab) {