fix errors on signup page

src/api/base.ts

@@ -21,6 +21,10 @@ interface ErrorData {
   error: string
 }
 
+export class NetworkError extends Error {
+  name = 'NetworkError'
+}
+
 export const request = <Expected>(
   method: HTTPMethod,
   endpoint: string,
@@ -33,12 +37,17 @@ export const request = <Expected>(
 
     onCancel(() => controller.abort())
     const jwt = await getWorkingJWT()
-    const resp = await fetch(apiUrl + endpoint + qs(params), {
-      method,
-      body: JSON.stringify(body),
-      headers: jwt ? { Authorization: `Bearer ${jwt.raw}` } : {},
-      signal,
-    })
+    let resp: Response
+    try {
+      resp = await fetch(apiUrl + endpoint + qs(params), {
+        method,
+        body: JSON.stringify(body),
+        headers: jwt ? { Authorization: `Bearer ${jwt.raw}` } : {},
+        signal,
+      })
+    } catch (error_) {
+      throw new NetworkError(error_.message)
+    }
 
     const text = await resp.text()
 

src/api/user/create-user.ts

@@ -1,9 +1,9 @@
 import { EditableUser } from '.'
 import { request } from '../base'
 
-// Anyone can create a user. For admins the users will be verified
-// automatically, for non-admins or non-authenticated users the user will not be
-// verified and will require admin approval. Super-admins can create verified
-// users in any realm, admins can only do so in their own realm.
+/** Anyone can create a user. For admins the users will be verified
+* automatically, for non-admins or non-authenticated users the user will not be
+* verified and will require admin approval. Super-admins can create verified
+* users in any realm, admins can only do so in their own realm. */
 export const createUser = (user: EditableUser) =>
   request<number | false>('POST', 'users', {}, user)

src/components/analysis-table.tsx

@@ -25,6 +25,7 @@ import { usePromise } from '@/utils/use-promise'
 import { getEventTeams } from '@/api/event-team-info/get-event-teams'
 import { eventTeamUrl } from '@/utils/urls/event-team'
 import { EventTeamInfo } from '@/api/event-team-info'
+import { isData } from '@/utils/is-data'
 
 interface Props {
   eventKey: string
@@ -224,7 +225,10 @@ const AnalysisTable = ({
   const rankColumn: Column<EventTeamInfo | undefined, RowType> = {
     title: 'Rank',
     key: 'Rank',
-    getCell: (row) => rankingInfo?.find((r) => r.team === 'frc' + row.team),
+    getCell: (row) =>
+      isData(rankingInfo)
+        ? rankingInfo.find((r) => r.team === 'frc' + row.team)
+        : undefined,
     getCellValue: (cell) => cell?.rank ?? Infinity,
     renderCell: (cell) => (
       <td class={rankCellStyle}>

src/components/chart.tsx

@@ -24,6 +24,7 @@ import { cleanFieldName } from '@/utils/clean-field-name'
 import { getFieldKey } from '@/utils/get-field-key'
 import { getReports } from '@/api/report/get-reports'
 import { GetReport } from '@/api/report'
+import { isData } from '@/utils/is-data'
 
 const commentsDisplayStyle = css`
   grid-column: 1 / -1;
@@ -106,7 +107,7 @@ export const ChartCard = ({
     return matchesAutoFieldName || matchesTeleopFieldName
   })?.name
 
-  const matchesWithSelectedStat = (matchesStats || [])
+  const matchesWithSelectedStat = (isData(matchesStats) ? matchesStats : [])
     .map(({ matchKey, stats }) => {
       const matchingStat = stats.find((f) => f.name === fullFieldName)
       if (matchingStat) return { matchKey, matchingStat }
@@ -190,7 +191,11 @@ export const ChartCard = ({
         </div>
         {selectedMatchKey && (
           <CommentsDisplay
-            reports={allReports.filter((r) => r.matchKey === selectedMatchKey)}
+            reports={
+              isData(allReports)
+                ? allReports.filter((r) => r.matchKey === selectedMatchKey)
+                : []
+            }
           />
         )}
       </div>

src/components/comment-card.tsx

@@ -6,6 +6,7 @@ import Icon from './icon'
 import { mdiMessageReplyText } from '@mdi/js'
 import { formatUserName } from '@/utils/format-user-name'
 import { getFastestUser } from '@/cache/users/get-fastest'
+import { isData } from '@/utils/is-data'
 
 const commentCardStyle = css`
   display: grid;
@@ -52,7 +53,11 @@ export const CommentCard = ({
       class={commentCardStyle}
     >
       <Icon icon={mdiMessageReplyText} />
-      {showReporter && <span>{formatUserName(reporter, reporterId)}</span>}
+      {showReporter && (
+        <span>
+          {formatUserName(isData(reporter) ? reporter : undefined, reporterId)}
+        </span>
+      )}
       <p>{report.comment}</p>
     </Card>
   )

src/components/profile-link.tsx

@@ -5,6 +5,7 @@ import { css } from 'linaria'
 import { mdiAccountCircle } from '@mdi/js'
 import { pigmicePurple } from '@/colors'
 import { getFastestUser } from '@/cache/users/get-fastest'
+import { isData } from '@/utils/is-data'
 
 export const ProfileLink = ({
   reporterId,
@@ -26,7 +27,7 @@ export const ProfileLink = ({
       class={reporterStyle}
     >
       <Icon icon={mdiAccountCircle} />
-      {formatUserName(reporter, reporterId)}
+      {formatUserName(isData(reporter) ? reporter : undefined, reporterId)}
     </El>
   )
 }

src/components/report-editor.tsx

@@ -32,6 +32,7 @@ import { createAlert } from '@/router'
 import { AlertType } from './alert'
 import Loader from './loader'
 import Card from './card'
+import { isData } from '@/utils/is-data'
 
 const reportEditorStyle = css`
   padding: 1.5rem 2rem;
@@ -71,6 +72,7 @@ const userDropdownStyle = css`
   align-items: center;
 `
 
+// eslint-disable-next-line complexity
 export const ReportEditor = ({
   initialReport,
   onMatchSelect,
@@ -84,10 +86,16 @@ export const ReportEditor = ({
   const [isDeleting, setIsDeleting] = useState<boolean>(false)
   const [matchKey, setMatchKey] = useState(initialReport.matchKey)
   const [comment, setComment] = useState(initialReport.comment || '')
-  const schemaId = useEventInfo(eventKey)?.schemaId
-  const schema = useSchema(schemaId)?.schema
+
+  const eventInfo = useEventInfo(eventKey)
+  const schemaId = isData(eventInfo) ? eventInfo.schemaId : undefined
+  const testSchema = useSchema(schemaId)
+  const schema = isData(testSchema) ? testSchema.schema : undefined
+
   const eventMatches = useEventMatches(eventKey)
-  const match = eventMatches?.find((match) => matchKey === match.key)
+  const match = isData(eventMatches)
+    ? eventMatches.find((match) => matchKey === match.key)
+    : undefined
   const { jwt } = useJWT()
   const isAdmin = jwt?.peregrineRoles.isAdmin
   const users = usePromise(() => getUsers(), [])
@@ -228,14 +236,18 @@ export const ReportEditor = ({
   return eventMatches && match && visibleFields ? (
     <Card as="form" class={reportEditorStyle} onSubmit={submit}>
       <Dropdown
-        options={eventMatches}
+        options={isData(eventMatches) ? eventMatches : []}
         onChange={(match) => {
           onMatchSelect?.(match.key)
           setMatchKey(match.key)
         }}
         getKey={(match) => match.key}
         getText={(match) => formatMatchKeyShort(match.key)}
-        value={eventMatches.find((match) => match.key === matchKey)}
+        value={
+          isData(eventMatches)
+            ? eventMatches.find((match) => match.key === matchKey)
+            : undefined
+        }
       />
       <TeamPicker
         onChange={setTeam}
@@ -271,20 +283,32 @@ export const ReportEditor = ({
         <div class={userDropdownStyle}>
           <Icon icon={mdiAccountCircle} />
           <Dropdown
-            options={users.sort((a, b) =>
-              a.firstName.toLowerCase() > b.firstName.toLowerCase() ? 1 : -1,
-            )}
+            options={
+              isData(users)
+                ? users.sort((a, b) =>
+                    a.firstName.toLowerCase() > b.firstName.toLowerCase()
+                      ? 1
+                      : -1,
+                  )
+                : []
+            }
             onChange={(user) => {
               setReporterId(user.id)
               setRealmId(user.realmId)
             }}
             getKey={(user) => user.id}
             getText={(user) => `${user.firstName} ${user.lastName}`}
             getGroup={(user) =>
-              realms?.find((realm) => realm.id === user.realmId)?.name ||
-              String(user.realmId)
+              isData(realms)
+                ? realms.find((realm) => realm.id === user.realmId)?.name ||
+                  String(user.realmId)
+                : null
+            }
+            value={
+              isData(users)
+                ? users.find((user) => user.id === reporterId)
+                : undefined
             }
-            value={users.find((user) => user.id === reporterId)}
           />
         </div>
       )}

src/components/report-viewer.tsx

@@ -12,6 +12,7 @@ import { CommentCard } from './comment-card'
 import { css } from 'linaria'
 import { cleanFieldName } from '@/utils/clean-field-name'
 import { ProfileLink } from './profile-link'
+import { isData } from '@/utils/is-data'
 
 interface Props {
   report: Report
@@ -66,10 +67,10 @@ export const ReportViewer = ({ report, onEditClick }: Props) => {
   const reporterId = report.reporterId
   const eventInfo = useEventInfo(report.eventKey)
   const matchInfo = useMatchInfo(report.eventKey, report.matchKey)
-  const schema = useSchema(eventInfo?.schemaId)
-  const displayableFields = schema?.schema.filter(
-    (field) => field.reportReference !== undefined,
-  )
+  const schema = useSchema(isData(eventInfo) ? eventInfo.schemaId : undefined)
+  const displayableFields = isData(schema)
+    ? schema.schema.filter((field) => field.reportReference !== undefined)
+    : undefined
   const autoFields = displayableFields?.filter(
     (field) => field.period === 'auto',
   )
@@ -99,8 +100,8 @@ export const ReportViewer = ({ report, onEditClick }: Props) => {
       <div>
         {matchInfo && (
           <TeamPicker
-            redAlliance={matchInfo.redAlliance}
-            blueAlliance={matchInfo.blueAlliance}
+            redAlliance={isData(matchInfo) ? matchInfo.redAlliance : []}
+            blueAlliance={isData(matchInfo) ? matchInfo.blueAlliance : []}
             value={report.teamKey}
             editable={false}
           />

src/routes/event-analysis.tsx

@@ -13,6 +13,7 @@ import {
   tablePageTableStyle,
 } from '@/utils/table-page-style'
 import Card from '@/components/card'
+import { isData } from '@/utils/is-data'
 
 interface Props {
   eventKey: string
@@ -26,7 +27,7 @@ const EventAnalysis: FunctionComponent<Props> = ({ eventKey }) => {
   const eventStats = usePromise(() => getEventStats(eventKey), [eventKey])
   const eventInfo = useEventInfo(eventKey)
 
-  const schema = useSchema(eventInfo?.schemaId)
+  const schema = useSchema(isData(eventInfo) ? eventInfo.schemaId : undefined)
 
   return (
     <Page
@@ -35,15 +36,15 @@ const EventAnalysis: FunctionComponent<Props> = ({ eventKey }) => {
       class={tablePageStyle}
       wrapperClass={tablePageWrapperStyle}
     >
-      {eventStats && schema ? (
+      {isData(eventStats) && schema ? (
         eventStats.length === 0 ? (
           'No Event Data'
         ) : (
           <Card class={tablePageTableStyle}>
             <AnalysisTable
               eventKey={eventKey}
               teams={eventStats}
-              schema={schema}
+              schema={isData(schema) ? schema : { id: -1, schema: [] }}
               renderTeam={(team, link) => (
                 <a class={teamStyle} href={link}>
                   {team}