From be0c818d8f7df15de86418566f0948142139ddcd Mon Sep 17 00:00:00 2001 From: Ethan McElroy Date: Thu, 19 Sep 2024 17:02:26 -0400 Subject: [PATCH] chore: improve document group selection --- src/components/chat/commented-documents.tsx | 11 ++++------- src/components/document/document.tsx | 9 +++------ src/components/document/sort-work-view.tsx | 17 +++++++++-------- .../navigation/sort-work-header.tsx | 6 +----- src/models/stores/persistent-ui.ts | 19 ++++++++++++++++--- 5 files changed, 33 insertions(+), 29 deletions(-) diff --git a/src/components/chat/commented-documents.tsx b/src/components/chat/commented-documents.tsx index ae786465d4..5acc823caf 100644 --- a/src/components/chat/commented-documents.tsx +++ b/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 = 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 = (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 = (props) => {
{ - persistentUI.openResourceDocument(sectionOrNetworkDoc, user); + persistentUI.openResourceDocument(sectionOrNetworkDoc, user, sortedDocuments); ui.setSelectedTile(); if (handleDocView !== undefined){ handleDocView(); diff --git a/src/components/document/document.tsx b/src/components/document/document.tsx index fb8f3cb8bf..a94c54bd78 100644 --- a/src/components/document/document.tsx +++ b/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 { } 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); } } diff --git a/src/components/document/sort-work-view.tsx b/src/components/document/sort-work-view.tsx index 66180551f4..74962beb06 100644 --- a/src/components/document/sort-work-view.tsx +++ b/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} />
diff --git a/src/components/navigation/sort-work-header.tsx b/src/components/navigation/sort-work-header.tsx index 17a599f6ba..e586c58467 100644 --- a/src/components/navigation/sort-work-header.tsx +++ b/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= observer(function SortWorkView(props){ - const { docFilter, docFilterItems, primarySort, primarySortItems, secondarySort, secondarySortItems } = props; + const { docFilter, docFilterItems, primarySortItems, secondarySortItems } = props; return (
@@ -23,7 +21,6 @@ export const SortWorkHeader:React.FC= observer(function SortWo @@ -33,7 +30,6 @@ export const SortWorkHeader:React.FC= observer(function SortWo diff --git a/src/models/stores/persistent-ui.ts b/src/models/stores/persistent-ui.ts index 24818f60c2..2b030cd72e 100644 --- a/src/models/stores/persistent-ui.ts +++ b/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) {