Change back button to last viewed page

src/colors.ts

@@ -5,7 +5,7 @@ export const lightGrey = '#E8E8E8'
 export const faintGrey = '#f5f5f5'
 export const blue = '#295dc0'
 export const red = '#c30000'
-export const greenOnPurple = '#4FAC40'
-export const redOnPurple = '#D61E42'
+export const greenOnPurple = '#47D232'
+export const redOnPurple = '#FF3C2E'
 export const offBlack = '#333'
 export const focusRing = '#0044ff40'

src/components/authenticated/index.tsx

@@ -104,7 +104,7 @@ const Authenticated = ({ label, render }: Props) => {
 
   if (!jwt) {
     return (
-      <Page name={label || 'Log In'} back={() => window.history.back()}>
+      <Page name={label || 'Log In'}>
         {/* Don't flash the login page if we don't yet know if there is a jwt */}
         {jwt === null ? (
           <div class={loginStyle}>

src/components/page.tsx

@@ -2,7 +2,7 @@ import { RenderableProps, ComponentChildren } from 'preact'
 import { ErrorBoundary } from './error-boundary'
 import { css } from '@linaria/core'
 import { createShadow } from '@/utils/create-shadow'
-import { pigmicePurple } from '@/colors'
+import { greenOnPurple, pigmicePurple } from '@/colors'
 import IconButton, { iconButtonClass } from './icon-button'
 import { mdiArrowLeft, mdiMenu } from '@mdi/js'
 import clsx from 'clsx'
@@ -46,19 +46,27 @@ const headerText = css`
   flex-shrink: 1;
   text-overflow: ellipsis;
   overflow: hidden;
+
+  & a {
+    color: white;
+
+    &:hover {
+      text-decoration-color: ${greenOnPurple};
+    }
+  }
 `
 
 type Props = Merge<
   JSX.HTMLAttributes,
   {
     name: ComponentChildren
-    back: string | (() => void) | false
+    showBackButton?: boolean
     class?: string
     wrapperClass?: string
   }
 >
 
-const Header = ({ back, name }: Omit<Props, 'class'>) => {
+const Header = ({ name, showBackButton }: Omit<Props, 'class'>) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
 
   const toggleMenu = () => setIsMenuOpen((isOpen) => !isOpen)
@@ -67,11 +75,11 @@ const Header = ({ back, name }: Omit<Props, 'class'>) => {
   return (
     <>
       <header class={headerStyle}>
-        {back && (
+        {(showBackButton || showBackButton === undefined) && (
           <IconButton
             icon={mdiArrowLeft}
             aria-label="Back"
-            {...{ [typeof back === 'string' ? 'href' : 'onClick']: back }}
+            onClick={() => window.history.back()}
           />
         )}
         <h1 class={headerText}>{name}</h1>
@@ -91,13 +99,13 @@ const Page = ({
   class: className,
   wrapperClass,
   name,
-  back,
+  showBackButton,
   ...rest
 }: RenderableProps<Props>) => {
   return (
     <ErrorBoundary>
       <div class={clsx(wrapperClass)} {...rest}>
-        <Header name={name} back={back} />
+        <Header name={name} showBackButton={showBackButton} />
         <main class={clsx(className)}>{children}</main>
       </div>
     </ErrorBoundary>

src/components/report-viewer.tsx

@@ -15,7 +15,7 @@ import { ProfileLink } from './profile-link'
 
 interface Props {
   report: Report
-  onEditClick?: () => void
+  reportEditorLink?: string
 }
 
 const nameTypeSeparatorStyle = css`
@@ -62,7 +62,10 @@ const fieldValuesStyle = css`
 `
 
 // viewing a report on the report page
-export const ReportViewer = ({ report, onEditClick }: Props) => {
+export const ReportViewer = ({
+  report,
+  reportEditorLink: onEditClick,
+}: Props) => {
   const reporterId = report.reporterId
   const eventInfo = useEventInfo(report.eventKey)
   const matchInfo = useMatchInfo(report.eventKey, report.matchKey)
@@ -130,7 +133,7 @@ export const ReportViewer = ({ report, onEditClick }: Props) => {
 
       {/* links to the author of the report */}
       <ProfileLink reporterId={reporterId} />
-      {onEditClick && <Button onClick={onEditClick}>Edit</Button>}
+      {onEditClick && <Button href={onEditClick}>Edit</Button>}
     </>
   )
 }

src/routes.ts

@@ -59,6 +59,10 @@ const routes = [
     path: '/saved-reports/:reportKey',
     component: () => import('./routes/saved-report'),
   },
+  {
+    path: '/saved-reports/:reportKey/edit',
+    component: () => import('./routes/saved-report-edit'),
+  },
   {
     path: '/users/:userId',
     component: () => import('./routes/user'),
@@ -71,6 +75,10 @@ const routes = [
     path: '/reports/:reportId',
     component: () => import('./routes/report'),
   },
+  {
+    path: '/reports/:reportId/edit',
+    component: () => import('./routes/report-edit'),
+  },
 ]
 
 export default routes

src/routes/about.tsx

@@ -31,7 +31,7 @@ const sourceStyle = css`
 
 const AboutPage = () => {
   return (
-    <Page name="About" back="/" class={pageStyle}>
+    <Page name="About" class={pageStyle}>
       <h1 class={headerStyle}>Welcome to Peregrine!</h1>
       <section class={informationStyle}>
         <p>

src/routes/event-analysis.tsx

@@ -25,13 +25,18 @@ const teamStyle = css`
 const EventAnalysis: FunctionComponent<Props> = ({ eventKey }) => {
   const eventStats = usePromise(() => getEventStats(eventKey), [eventKey])
   const eventInfo = useEventInfo(eventKey)
+  const eventName = eventInfo?.name || eventKey
 
   const schema = useSchema(eventInfo?.schemaId)
 
   return (
     <Page
-      name={`Analysis - ${eventInfo ? eventInfo.name : eventKey}`}
-      back={`/events/${eventKey}`}
+      name={
+        <>
+          {'Analysis - '}
+          <a href={`/events/${eventKey}`}> {eventName} </a>
+        </>
+      }
       class={tablePageStyle}
       wrapperClass={tablePageWrapperStyle}
     >

src/routes/event-match.tsx

@@ -163,12 +163,11 @@ const EventMatch = ({ eventKey, matchKey }: Props) => {
   return (
     // page setup
     <Page
-      back={`/events/${eventKey}`}
       name={
-        m.group +
-        (m.num ? ' Match ' + m.num : '') +
-        ' - ' +
-        (event ? event.name : eventKey)
+        <>
+          {m.group + (m.num ? ' Match ' + m.num : '') + ' - '}
+          <a href={`/events/${eventKey}`}> {event ? event.name : eventKey} </a>
+        </>
       }
       class={clsx(
         matchStyle,

src/routes/event-team-comments.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable max-nested-callbacks */
+
 import Page from '@/components/page'
-import { useEventInfo } from '@/cache/event-info/use'
 import { css } from '@linaria/core'
 import Card from '@/components/card'
 import Loader from '@/components/loader'
@@ -10,6 +10,7 @@ import { formatMatchKeyShort } from '@/utils/format-match-key-short'
 import { compareMatchKeys } from '@/utils/compare-matches'
 import { GetReport } from '@/api/report'
 import { getReports } from '@/api/report/get-reports'
+import { useEventInfo } from '@/cache/event-info/use'
 
 interface Props {
   eventKey: string
@@ -27,12 +28,15 @@ const matchListStyle = css`
 `
 
 const EventTeamComments = ({ eventKey, teamNum }: Props) => {
-  const eventInfo = useEventInfo(eventKey)
   const team = 'frc' + teamNum
   const reports = usePromise(() => getReports({ team, event: eventKey }), [
     team,
     eventKey,
   ])
+
+  const eventInfo = useEventInfo(eventKey)
+  const eventName = eventInfo?.name || eventKey
+
   const commentsByMatch = reports?.reduce<{ [matchKey: string]: GetReport[] }>(
     (acc, report) => {
       if (report.comment) {
@@ -46,8 +50,12 @@ const EventTeamComments = ({ eventKey, teamNum }: Props) => {
 
   return (
     <Page
-      name={`Comments: ${teamNum} @ ${eventInfo ? eventInfo.name : eventKey}`}
-      back={`/events/${eventKey}/teams/${teamNum}`}
+      name={
+        <>
+          {`Comments: ${teamNum} @ `}
+          <a href={`/events/${eventKey}`}> {eventName} </a>
+        </>
+      }
       class={commentsPageStyle}
     >
       <Card class={matchListStyle}>

src/routes/event-team-matches.tsx

@@ -25,8 +25,12 @@ const EventTeamMatches = ({ eventKey, teamNum }: Props) => {
   const matches = useEventMatches(eventKey, 'frc' + teamNum)
   return (
     <Page
-      name={`Matches: ${teamNum} @ ${eventName}`}
-      back={`/events/${eventKey}/teams/${teamNum}`}
+      name={
+        <>
+          {`Matches: ${teamNum} @ `}
+          <a href={`/events/${eventKey}`}> {eventName} </a>
+        </>
+      }
       class={eventTeamMatchesStyle}
     >
       {matches ? (

src/routes/event-team.tsx

@@ -162,6 +162,8 @@ const EventTeam = ({ eventKey, teamNum }: Props) => {
     () => getEventTeamInfo(eventKey, 'frc' + teamNum).catch(() => undefined),
     [eventKey, teamNum],
   )
+  const eventName = eventInfo?.name || eventKey
+
   const schema = useSchema(eventInfo?.schemaId)
   const teamMatches = useEventMatches(eventKey, 'frc' + teamNum)?.sort(
     compareMatches,
@@ -178,9 +180,10 @@ const EventTeam = ({ eventKey, teamNum }: Props) => {
     <Page
       name={
         <span class={pageHeadingStyle}>
-          <span class={teamHeadingSpanStyle}>{`${teamNum} @ ${
-            eventInfo ? eventInfo.name : eventKey
-          }`}</span>
+          <span class={teamHeadingSpanStyle}>
+            {`${teamNum} @ `}
+            <a href={`/events/${eventKey}`}> {eventName} </a>
+          </span>
           <IconButton
             icon={isTeamSaved ? mdiStar : mdiStarOutline}
             onClick={() =>
@@ -192,7 +195,6 @@ const EventTeam = ({ eventKey, teamNum }: Props) => {
           />
         </span>
       }
-      back={`/events/${eventKey}`}
       class={eventTeamStyle}
     >
       {nextMatch && (

src/routes/event.tsx

@@ -54,11 +54,7 @@ const Event = ({ eventKey }: Props) => {
   const newestIncompleteMatch = matches && nextIncompleteMatch(matches)
 
   return (
-    <Page
-      name={eventInfo?.name || <code>{eventKey}</code>}
-      back="/"
-      class={eventStyle}
-    >
+    <Page name={eventInfo?.name || <code>{eventKey}</code>} class={eventStyle}>
       <div class={sectionStyle}>
         <Heading level={2} class={headingStyle}>
           Information
@@ -73,7 +69,6 @@ const Event = ({ eventKey }: Props) => {
         </Heading>
         {newestIncompleteMatch && (
           <MatchDetailsCard
-            key={newestIncompleteMatch.key}
             match={newestIncompleteMatch}
             eventKey={eventKey}
             link

src/routes/home.tsx

@@ -52,7 +52,7 @@ const Home = () => {
   const events = useEvents(year)
 
   return (
-    <Page name="Home" back={false} class={homeStyle}>
+    <Page name="Home" class={homeStyle} showBackButton={false}>
       <div class={filterStyle}>
         <Dropdown options={years} onChange={setYear} value={year} />
         <TextInput onInput={setQuery} label="Search for Events" />

src/routes/leaderboard.tsx

@@ -75,7 +75,7 @@ const Leaderboard = () => {
   return (
     <Authenticated
       render={() => (
-        <Page name="Leaderboard" back="/">
+        <Page name="Leaderboard">
           <LeaderboardList />
         </Page>
       )}