UI: Show all jobs instead of only one in Job tab (#1945)

src/Locations/ui/CompanyLocation.tsx

@@ -50,7 +50,6 @@ export function CompanyLocation(props: IProps): React.ReactElement {
 
   /** Name of company position that player holds, if applicable */
   const jobTitle = Player.jobs[props.companyName] ? Player.jobs[props.companyName] : null;
-  const hasMoreJobs = Object.keys(Player.jobs).length > 1;
 
   /**
    * CompanyPosition object for the job that the player holds at this company, if applicable
@@ -86,29 +85,11 @@ export function CompanyLocation(props: IProps): React.ReactElement {
     }
   }
 
-  function switchLoc(num: number): void {
-    let targetNum = Object.keys(Player.jobs).findIndex((x) => x == props.companyName);
-    if (targetNum === -1) return;
-    targetNum += num;
-    if (targetNum >= Object.keys(Player.jobs).length) {
-      targetNum = 0;
-    } else if (targetNum < 0) {
-      targetNum = Object.keys(Player.jobs).length - 1;
-    }
-    Router.toPage(Page.Job, { location: Locations[Object.keys(Player.jobs)[targetNum]] });
-  }
-
   const isEmployedHere = currentPosition != null;
 
   return (
     <>
       <Box sx={{ display: "grid", width: "fit-content", minWidth: "25em" }}>
-        {isEmployedHere && hasMoreJobs && (
-          <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
-            <Button onClick={() => switchLoc(-1)}>Previous Job</Button>
-            <Button onClick={() => switchLoc(1)}>Next Job</Button>
-          </Box>
-        )}
         {isEmployedHere && (
           <Paper sx={{ p: "0.5em 1em", mt: 2, mb: 2 }}>
             <JobSummary company={company} position={currentPosition} />

src/Locations/ui/GenericLocation.tsx

@@ -33,9 +33,10 @@ import { getEnumHelper } from "../../utils/EnumHelper";
 
 interface IProps {
   loc: Location;
+  showBackButton: boolean;
 }
 
-export function GenericLocation({ loc }: IProps): React.ReactElement {
+export function GenericLocation({ loc, showBackButton }: IProps): React.ReactElement {
   /**
    * Determine what needs to be rendered for this location based on the locations
    * type. Returns an array of React components that should be rendered
@@ -93,7 +94,7 @@ export function GenericLocation({ loc }: IProps): React.ReactElement {
 
   return (
     <>
-      <Button onClick={() => Router.toPage(Page.City)}>Return to World</Button>
+      {showBackButton && <Button onClick={() => Router.toPage(Page.City)}>Return to World</Button>}
       <Typography variant="h4" sx={{ mt: 1 }}>
         {backdoorInstalled && serverMeta ? (
           <Tooltip title={`Backdoor installed on ${serverMeta.hostname}.`}>

src/Locations/ui/JobRoot.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Box } from "@mui/material";
+
+import { Player } from "@player";
+import { getRecordKeys } from "../../Types/Record";
+import { useCycleRerender } from "../../ui/React/hooks";
+import { Locations } from "../Locations";
+import { GenericLocation } from "./GenericLocation";
+
+export function JobRoot(): React.ReactElement {
+  useCycleRerender();
+
+  const jobs = getRecordKeys(Player.jobs).map((companyName) => {
+    const location = Locations[companyName];
+    if (location == null) {
+      throw new Error(`Invalid company name: ${companyName}`);
+    }
+    return (
+      <Box key={companyName} sx={{ marginBottom: "20px" }}>
+        <GenericLocation loc={location} showBackButton={false} />;
+      </Box>
+    );
+  });
+
+  return <Box sx={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, 28em)" }}>{jobs}</Box>;
+}

src/ui/GameRoot.tsx

@@ -34,6 +34,7 @@ import { GameOptionsRoot } from "../GameOptions/ui/GameOptionsRoot";
 import { SleeveRoot } from "../PersonObjects/Sleeve/ui/SleeveRoot";
 import { HacknetRoot } from "../Hacknet/ui/HacknetRoot";
 import { GenericLocation } from "../Locations/ui/GenericLocation";
+import { JobRoot } from "../Locations/ui/JobRoot";
 import { LocationCity } from "../Locations/ui/City";
 import { ProgramsRoot } from "../Programs/ui/ProgramsRoot";
 import { ScriptEditorRoot } from "../ScriptEditor/ui/ScriptEditorRoot";
@@ -332,8 +333,10 @@ export function GameRoot(): React.ReactElement {
       break;
     }
     case Page.Job:
+      mainPage = <JobRoot />;
+      break;
     case Page.Location: {
-      mainPage = <GenericLocation loc={pageWithContext.location} />;
+      mainPage = <GenericLocation loc={pageWithContext.location} showBackButton={true} />;
       break;
     }
     case Page.Options: {