Feat/next previous buttons

src/front-end/typescript/lib/pages/proposal/sprint-with-us/lib/views/proposal-tab-carousel.tsx

@@ -0,0 +1,114 @@
+import { component } from "front-end/lib/framework";
+import Link, {
+  iconLinkSymbol,
+  leftPlacement,
+  rightPlacement,
+  routeDest
+} from "front-end/lib/views/link";
+import React from "react";
+import {
+  SWUProposal,
+  SWUProposalSlim
+} from "shared/lib/resources/proposal/sprint-with-us";
+import { adt } from "shared/lib/types";
+import * as Tab from "front-end/lib/pages/proposal/sprint-with-us/view/tab";
+import { compareNumbers } from "shared/lib";
+
+export interface Props {
+  proposal: SWUProposal;
+  proposals: SWUProposalSlim[];
+  tab: Tab.TabId;
+}
+
+/**
+ * Sorts proponents by anonymous proponent name in ascending order.
+ *
+ * @param proposals - unsorted proponents
+ * @returns - sorted proponents with order property
+ */
+export function sortProponentsByAnonymousProponentName(
+  proposals: SWUProposalSlim[]
+) {
+  return proposals
+    .reduce<(SWUProposalSlim & { order: number })[]>((acc, p) => {
+      const order = Number(p.anonymousProponentName.match(/\d+/)?.at(0));
+      return isNaN(order) ? acc : [...acc, { ...p, order }];
+    }, [])
+    .sort((a, b) => {
+      return compareNumbers(a.order, b.order) * -1;
+    });
+}
+
+/**
+ * Browse opportunity's proposals from a tab details view.
+ * `proposals` should be filtered appropriately for the tab.
+ *
+ * @see {@link Props}
+ *
+ * @param props - proposals, proposal, tab
+ * @returns - base view component
+ */
+const ProposalTabCarousel: component.base.View<Props> = ({
+  proposals,
+  proposal,
+  tab
+}) => {
+  proposals = sortProponentsByAnonymousProponentName(proposals);
+  const index = proposals.findIndex(
+    (otherProposal) => otherProposal.id === proposal.id
+  );
+
+  // Safeguard against proposals/proposal prop mismatch
+  if (index < 0) {
+    return null;
+  }
+
+  const prevIndex = index - 1;
+  const nextIndex = index + 1;
+  const prevRouteParams = proposals[nextIndex]
+    ? {
+        proposalId: proposals[nextIndex].id,
+        opportunityId: proposals[nextIndex].opportunity.id,
+        tab
+      }
+    : null;
+
+  const nextRouteParams = proposals[prevIndex]
+    ? {
+        proposalId: proposals[prevIndex].id,
+        opportunityId: proposals[prevIndex].opportunity.id,
+        tab
+      }
+    : null;
+
+  return (
+    <div className="d-flex justify-content-between">
+      {prevRouteParams ? (
+        <Link
+          button
+          color="info"
+          outline
+          symbol_={leftPlacement(iconLinkSymbol("arrow-left"))}
+          dest={routeDest(adt("proposalSWUView", prevRouteParams))}>
+          Previous Proponent
+        </Link>
+      ) : (
+        <div />
+      )}
+      {nextRouteParams ? (
+        <Link
+          button
+          color="primary"
+          outline
+          symbol_={rightPlacement(iconLinkSymbol("arrow-right"))}
+          dest={routeDest(adt("proposalSWUView", nextRouteParams))}>
+          Next Proponent
+        </Link>
+      ) : (
+        <div />
+      )}
+    </div>
+  );
+};
+
+export default ProposalTabCarousel;

src/front-end/typescript/lib/pages/proposal/sprint-with-us/view/index.tsx

@@ -20,7 +20,8 @@ import * as api from "front-end/lib/http/api";
 import * as Tab from "front-end/lib/pages/proposal/sprint-with-us/view/tab";
 import {
   DEFAULT_SWU_PROPOSAL_TITLE,
-  SWUProposal
+  SWUProposal,
+  SWUProposalSlim
 } from "shared/lib/resources/proposal/sprint-with-us";
 import { UserType, User } from "shared/lib/resources/user";
 import { adt, ADT, Id } from "shared/lib/types";
@@ -29,6 +30,7 @@ import { SWUOpportunity } from "shared/lib/resources/opportunity/sprint-with-us"
 
 interface ValidState<K extends Tab.TabId> extends Tab.ParentState<K> {
   proposal: SWUProposal | null;
+  proposals: SWUProposalSlim[];
 }
 
 export type State_<K extends Tab.TabId> = Validation<
@@ -40,7 +42,10 @@ export type State = State_<Tab.TabId>;
 
 export type InnerMsg_<K extends Tab.TabId> = Tab.ParentInnerMsg<
   K,
-  ADT<"onInitResponse", [User, RouteParams, SWUProposal, SWUOpportunity]>
+  ADT<
+    "onInitResponse",
+    [User, RouteParams, SWUProposal, SWUOpportunity, SWUProposalSlim[]]
+  >
 >;
 
 export type InnerMsg = InnerMsg_<Tab.TabId>;
@@ -75,14 +80,17 @@ function makeInit<K extends Tab.TabId>(): component_.page.Init<
           })
         ) as State_<K>,
         [
-          component_.cmd.join(
+          component_.cmd.join3(
             api.proposals.swu.readOne(opportunityId)(proposalId, (response) =>
               api.isValid(response) ? response.value : null
             ),
             api.opportunities.swu.readOne()(opportunityId, (response) =>
               api.isValid(response) ? response.value : null
             ),
-            (proposal, opportunity) => {
+            api.proposals.swu.readMany(opportunityId)((response) =>
+              api.getValidValue(response, [])
+            ),
+            (proposal, opportunity, proposals) => {
               if (!proposal || !opportunity)
                 return component_.global.replaceRouteMsg(
                   adt("notFound" as const, { path: routePath })
@@ -91,7 +99,8 @@ function makeInit<K extends Tab.TabId>(): component_.page.Init<
                 shared.sessionUser,
                 routeParams,
                 proposal,
-                opportunity
+                opportunity,
+                proposals
               ]) as Msg;
             }
           )
@@ -139,8 +148,13 @@ function makeComponent<K extends Tab.TabId>(): component_.page.Component<
         extraUpdate: ({ state, msg }) => {
           switch (msg.tag) {
             case "onInitResponse": {
-              const [viewerUser, routeParams, proposal, opportunity] =
-                msg.value;
+              const [
+                viewerUser,
+                routeParams,
+                proposal,
+                opportunity,
+                proposals
+              ] = msg.value;
               // Set up the visible tab state.
               const tabId = routeParams.tab || "proposal";
               // Initialize the sidebar.
@@ -153,7 +167,8 @@ function makeComponent<K extends Tab.TabId>(): component_.page.Component<
               const [tabState, tabCmds] = tabComponent.init({
                 viewerUser,
                 proposal,
-                opportunity
+                opportunity,
+                proposals
               });
               // Everything checks out, return valid state.
               return [
@@ -163,7 +178,8 @@ function makeComponent<K extends Tab.TabId>(): component_.page.Component<
                     immutable<Tab.Tabs[K]["state"]>(tabState)
                   ])
                   .set("sidebar", immutable(sidebarState))
-                  .set("proposal", proposal),
+                  .set("proposal", proposal)
+                  .set("proposals", proposals),
                 [
                   ...component_.cmd.mapMany(
                     sidebarCmds,

src/front-end/typescript/lib/pages/proposal/sprint-with-us/view/tab/index.ts

@@ -8,7 +8,10 @@ import * as TeamQuestionsTab from "front-end/lib/pages/proposal/sprint-with-us/v
 import * as TeamScenarioTab from "front-end/lib/pages/proposal/sprint-with-us/view/tab/team-scenario";
 import { routeDest } from "front-end/lib/views/link";
 import { SWUOpportunity } from "shared/lib/resources/opportunity/sprint-with-us";
-import { SWUProposal } from "shared/lib/resources/proposal/sprint-with-us";
+import {
+  SWUProposal,
+  SWUProposalSlim
+} from "shared/lib/resources/proposal/sprint-with-us";
 import { User } from "shared/lib/resources/user";
 import { adt } from "shared/lib/types";
 
@@ -33,6 +36,7 @@ export interface Params {
   proposal: SWUProposal;
   opportunity: SWUOpportunity;
   viewerUser: User;
+  proposals: SWUProposalSlim[];
 }
 
 export type InitResponse = null;

src/front-end/typescript/lib/pages/proposal/sprint-with-us/view/tab/team-questions.tsx

@@ -11,6 +11,7 @@ import {
 import * as api from "front-end/lib/http/api";
 import * as toasts from "front-end/lib/pages/proposal/sprint-with-us/lib/toasts";
 import ViewTabHeader from "front-end/lib/pages/proposal/sprint-with-us/lib/views/view-tab-header";
+import ProposalTabCarousel from "front-end/lib/pages/proposal/sprint-with-us/lib/views/proposal-tab-carousel";
 import * as Tab from "front-end/lib/pages/proposal/sprint-with-us/view/tab";
 import Accordion from "front-end/lib/views/accordion";
 import { iconLinkSymbol, leftPlacement } from "front-end/lib/views/link";
@@ -436,6 +437,11 @@ const view: component_.base.ComponentView<State, Msg> = ({
           </Col>
         </Row>
       </div>
+      <ProposalTabCarousel
+        proposals={state.proposals}
+        proposal={state.proposal}
+        tab="teamQuestions"
+      />
     </div>
   );
 };