Add context when navigating to appearing proposition from MediaExcerpt

premiser-ui/src/App.tsx

@@ -64,6 +64,7 @@ import NavTabs from "./NavTabs";
 
 import "./App.scss";
 import "./fonts.js";
+import { PrimaryContextTrailProvider } from "./components/contextTrail/PrimaryContextTrailProvider";
 
 class App extends Component<Props> {
   throttledOnWindowScroll: () => void;
@@ -464,7 +465,9 @@ class App extends Component<Props> {
               {navDrawer}
 
               <div id="page">
-                <Switch>{routes}</Switch>
+                <PrimaryContextTrailProvider>
+                  <Switch>{routes}</Switch>
+                </PrimaryContextTrailProvider>
               </div>
 
               <div id="footer">

premiser-ui/src/JustificationBranch.tsx

@@ -43,7 +43,7 @@ import { EditorTypes } from "./reducers/editors";
 import { RootState } from "./setupStore";
 import t from "./texts";
 import { OnClickJustificationWritQuoteUrl } from "./types";
-import { extendContextTrailItems } from "./viewModels";
+import { makeContextTrailItems } from "./viewModels";
 
 import "./JustificationBranch.scss";
 
@@ -69,7 +69,7 @@ function JustificationBranch({
   isCondensed = false,
   isUnCondensed = false,
   showBasisUrls,
-  contextTrailItems = [],
+  contextTrailItems,
   showStatusText,
   onClickWritQuoteUrl,
 }: Props) {
@@ -181,6 +181,11 @@ function JustificationBranch({
 
   const doHideControls = !isOver;
 
+  const nextContextTrailItems = makeContextTrailItems(contextTrailItems, {
+    connectingEntityType: "JUSTIFICATION",
+    connectingEntity: justification,
+  });
+
   const menu = (
     <DropdownMenu
       buttonType="icon"
@@ -347,10 +352,6 @@ function JustificationBranch({
             return <div>Placeholder justification {j.id}</div>;
           }
           const id = `counter-justification-${j.id}-branch`;
-          const nextContextTrailItems = extendContextTrailItems(
-            contextTrailItems,
-            { connectingEntityType: "JUSTIFICATION", connectingEntity: j }
-          );
           return (
             <div id={id} key={id} className="counter-justification-branch">
               <ConnectedJustificationBranch
@@ -386,7 +387,7 @@ function JustificationBranch({
         showBasisUrls={showBasisUrls}
         showStatusText={showStatusText}
         menu={menu}
-        contextTrailItems={contextTrailItems}
+        contextTrailItems={nextContextTrailItems}
         actions={<div className="actions">{actions}</div>}
         onMouseOver={onBubbleMouseOver}
         onMouseLeave={onBubbleMouseLeave}

premiser-ui/src/JustificationsTree.tsx

@@ -14,7 +14,7 @@ import {
 import config from "./config";
 import JustificationBranch from "./JustificationBranch";
 import t, { ADD_JUSTIFICATION_CALL_TO_ACTION } from "./texts";
-import { combineIds, extendContextTrailItems } from "./viewModels";
+import { combineIds } from "./viewModels";
 import { ComponentId, OnClickJustificationWritQuoteUrl } from "./types";
 import { useAppSelector } from "./hooks";
 import { selectIsWindowNarrow } from "./selectors";
@@ -53,10 +53,6 @@ export default function JustificationsTree({
 }: Props) {
   function toBranch(j: JustificationView) {
     const treeId = combineIds(id, "justification-tree", j.id);
-    const nextContextTrailItems = extendContextTrailItems(contextTrailItems, {
-      connectingEntityType: "JUSTIFICATION",
-      connectingEntity: j,
-    });
     return (
       <FlipMoveWrapper key={treeId}>
         <JustificationBranch
@@ -67,7 +63,7 @@ export default function JustificationsTree({
           isUnCondensed={isUnCondensed}
           showBasisUrls={showBasisUrls}
           showStatusText={true}
-          contextTrailItems={nextContextTrailItems}
+          contextTrailItems={contextTrailItems}
           onClickWritQuoteUrl={onClickWritQuoteUrl}
         />
       </FlipMoveWrapper>

premiser-ui/src/components/contextTrail/ContextTrail.tsx

@@ -143,6 +143,7 @@ function appearanceToCard(
 ) {
   return (
     <>
+      {/* TODO(684) split into MediaExcerptCard and AppearanceInfoCard ("has an appearance of") */}
       <AppearanceCard
         id={combineIds(id, "appearance", appearance.id)}
         style={{ width: "100%" }}

premiser-ui/src/components/contextTrail/PrimaryContextTrailProvider.test.tsx

@@ -13,7 +13,6 @@ import {
 } from "howdju-common";
 
 import {
-  makeRouteComponentProps,
   renderWithProviders,
   withFakeTimers,
   withMockServer,
@@ -57,11 +56,10 @@ describe("PrimaryContextTrailProvider", () => {
       })
     );
 
-    const history = createMemoryHistory();
-    const { location, match } = makeRouteComponentProps("submit", {
-      searchParams: {
-        "context-trail": serializeContextTrail(contextTrailInfos),
-      },
+    const history = createMemoryHistory({
+      initialEntries: [
+        `/any-path?context-trail=${serializeContextTrail(contextTrailInfos)}`,
+      ],
     });
 
     let contextValue: any;
@@ -72,11 +70,7 @@ describe("PrimaryContextTrailProvider", () => {
 
     // Act
     renderWithProviders(
-      <PrimaryContextTrailProvider
-        history={history}
-        location={location}
-        match={match}
-      >
+      <PrimaryContextTrailProvider>
         <PrimaryContextTrail.Consumer>
           {captureContextValue}
         </PrimaryContextTrail.Consumer>

premiser-ui/src/components/contextTrail/PrimaryContextTrailProvider.tsx

@@ -1,7 +1,7 @@
-import React, { createContext, PropsWithChildren } from "react";
+import React, { createContext, ReactNode } from "react";
 import queryString from "query-string";
 import { isArray, isEmpty, map, some } from "lodash";
-import { RouteComponentProps } from "react-router";
+import { useLocation } from "react-router";
 import { Location } from "history";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import { denormalize } from "normalizr";
@@ -20,15 +20,15 @@ import { api } from "@/apiActions";
 import { RootState } from "@/setupStore";
 import { normalizationSchemaByEntityType } from "@/normalizationSchemas";
 
-interface Props extends RouteComponentProps {}
-
 /**
  * Obtains the context trail from the query params and API for the PrimaryContextTrail context.
  */
 export function PrimaryContextTrailProvider({
-  location,
   children,
-}: PropsWithChildren<Props>) {
+}: {
+  children: ReactNode;
+}) {
+  const location = useLocation();
   const { infos, hasInvalidInfos } =
     contextTrailItemInfosFromLocation(location);
 

premiser-ui/src/components/mediaExcerpts/MediaExcerptViewer.tsx

@@ -3,6 +3,7 @@ import { MaterialSymbol } from "react-material-symbols";
 import { Moment } from "moment";
 
 import {
+  ContextTrailItem,
   MediaExcerptView,
   toUrlWithFragmentFromAnchors,
   toUrlWithFragmentFromQuotation,
@@ -27,11 +28,13 @@ interface Props {
   id: string;
   mediaExcerpt: MediaExcerptView;
   showApparitionCount?: boolean;
+  contextTrailItems?: ContextTrailItem[];
 }
 
 export default function MediaExcerptViewer({
   mediaExcerpt,
   showApparitionCount = true,
+  contextTrailItems,
 }: Props) {
   const dispatch = useAppDispatch();
   const onClickUrlLocator =
@@ -69,7 +72,7 @@ export default function MediaExcerptViewer({
         </span>
       )}
       <Link
-        to={paths.mediaExcerpt(mediaExcerpt)}
+        to={paths.mediaExcerpt(mediaExcerpt, contextTrailItems)}
         title={`used in ${justificationBasisUsageCount} ${
           justificationBasisUsageCount === 1
             ? "justification"

premiser-ui/src/normalizationSchemas.ts

@@ -3,7 +3,7 @@ import { schema } from "normalizr";
 
 import {
   AccountSettings,
-  AppearanceOut,
+  AppearanceView,
   ContextTrailItem,
   Domain,
   JustificationView,
@@ -329,7 +329,7 @@ export const accountSettingsSchema = new schema.Entity<AccountSettings>(
   "accountSettings"
 );
 
-export const appearanceSchema = new schema.Entity<AppearanceOut>(
+export const appearanceSchema = new schema.Entity<AppearanceView>(
   "appearances",
   {
     mediaExcerpt: mediaExcerptSchema,

premiser-ui/src/pages/appearances/ApparitionCard.tsx

@@ -0,0 +1,4 @@
+import withEntityCard from "@/withEntityCard";
+import AppearanceApparitionViewer from "./ApparitionViewer";
+
+export default withEntityCard(AppearanceApparitionViewer, "appearance");

premiser-ui/src/pages/appearances/ApparitionViewer.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import { AppearanceView, ContextTrailItem, EntityId } from "howdju-common";
+
+import { logger } from "@/logger";
+import PropositionEntityViewer from "@/PropositionEntityViewer";
+import { makeContextTrailItems } from "@/viewModels";
+
+interface Props {
+  id: EntityId;
+  appearance: AppearanceView;
+  contextTrailItems?: ContextTrailItem[];
+}
+
+/**
+ * Component for viewing the apparition of an appearance. This is useful on
+ * a page dedicated to the MediaExcerpt, since this component will not duplicate
+ * the MediaExcerpt information.
+ */
+export default function ApparitionViewer({
+  id,
+  appearance,
+  contextTrailItems,
+}: Props) {
+  const nextContextTrailItems = makeContextTrailItems(contextTrailItems, {
+    connectingEntityType: "APPEARANCE",
+    connectingEntity: appearance,
+  });
+  switch (appearance.apparition.type) {
+    case "PROPOSITION":
+      return (
+        <PropositionEntityViewer
+          id={id}
+          proposition={appearance.apparition.entity}
+          contextTrailItems={nextContextTrailItems}
+        />
+      );
+    default:
+      logger.error(
+        `"Unknown apparition type for ApparitionViewer ${appearance.apparition.type}`
+      );
+      return <div>Unknown apparition type</div>;
+  }
+}

premiser-ui/src/pages/appearances/AppearanceViewer.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { AppearanceView, ContextTrailItem } from "howdju-common";
 
 import CreationInfo from "@/components/creationInfo/CreationInfo";
-import { combineIds, extendContextTrailItems } from "@/viewModels";
+import { combineIds, makeContextTrailItems } from "@/viewModels";
 import PropositionEntityViewer from "@/PropositionEntityViewer";
 import MediaExcerptEntityViewer from "@/components/mediaExcerpts/MediaExcerptEntityViewer";
 
@@ -22,12 +22,10 @@ export default function AppearanceViewer({
   contextTrailItems,
   mode = "TOP_LEVEL",
 }: Props) {
-  const nextContextTrailItems = contextTrailItems
-    ? extendContextTrailItems(contextTrailItems, {
-        connectingEntityType: "APPEARANCE",
-        connectingEntity: appearance,
-      })
-    : undefined;
+  const nextContextTrailItems = makeContextTrailItems(contextTrailItems, {
+    connectingEntityType: "APPEARANCE",
+    connectingEntity: appearance,
+  });
   if (mode === "CONTEXT_TRAIL") {
     return (
       <div className="appearance-viewer">

premiser-ui/src/pages/mediaExcerpt/MediaExcerptUsages.tsx

@@ -1,6 +1,5 @@
 import React, { UIEvent, useEffect } from "react";
 import isEmpty from "lodash/isEmpty";
-import map from "lodash/map";
 import { GridCell } from "@react-md/utils";
 
 import { EntityId } from "howdju-common";
@@ -11,7 +10,7 @@ import {
 } from "../../normalizationSchemas";
 import JustificationCard from "../../JustificationCard";
 import { useAppDispatch, useAppSelector, useAppEntitySelector } from "@/hooks";
-import AppearanceCard from "../appearances/AppearanceCard";
+import ApparitionCard from "../appearances/ApparitionCard";
 import page from "./mediaExcerptUsagesSlice";
 import FetchMoreButton from "@/components/button/FetchMoreButton";
 import {
@@ -97,11 +96,11 @@ export default function MediaExcerptUsages({ mediaExcerptId }: Props) {
 
       <h1>Appearances</h1>
       <FlipGrid>
-        {map(appearances, (a) => {
+        {appearances.map((a) => {
           const id = `appearance-card-${a.id}`;
           return (
             <GridCell key={id} {...appearanceCardColSpans}>
-              <AppearanceCard id={id} appearance={a} />
+              <ApparitionCard id={id} appearance={a} />
             </GridCell>
           );
         })}

premiser-ui/src/pages/propositionUsages/PropositionUsagesPage.tsx

@@ -135,7 +135,6 @@ function ValidPropositionUsagesPage({ propositionId }: ValidProps) {
           />
         </SingleColumnGrid>
       )}
-
       <h2>Direct Statements</h2>
       <FlipGrid>
         {map(directStatements, (s) => {
@@ -155,7 +154,6 @@ function ValidPropositionUsagesPage({ propositionId }: ValidProps) {
           <CircularProgress id={`$justificationsSearchPage-Progress`} />
         </div>
       )}
-
       <h2>Indirect Statements</h2>
       <FlipGrid>
         {map(indirectStatements, (s) => {
@@ -175,7 +173,6 @@ function ValidPropositionUsagesPage({ propositionId }: ValidProps) {
           <CircularProgress id={`$justificationsSearchPage-Progress`} />
         </div>
       )}
-
       <h2>Justifications</h2>
       <FlipGrid>
         {map(justifications, (j) => {
@@ -196,10 +193,9 @@ function ValidPropositionUsagesPage({ propositionId }: ValidProps) {
         </div>
       )}
       <div>{fetchMoreJustificationsButton}</div>
-
       <h2>Appearances</h2>
       <FlipGrid>
-        {map(appearances, (a) => {
+        {appearances.map((a) => {
           const id = `appearance-card-${a.id}`;
           return (
             <GridCell key={id} {...appearanceCardColSpans}>
@@ -214,7 +210,6 @@ function ValidPropositionUsagesPage({ propositionId }: ValidProps) {
           <CircularProgress id={`appearances-progress`} />
         </div>
       )}
-
       <h2>PropositionCompounds</h2>
       <FlipGrid>
         {map(propositionCompounds, (pc) => {