Add user message & scroll to

thewca · Jan 15, 2025 · 8213272 · 8213272
1 parent 7348d9c
commit 8213272
Showing 1 changed file with 85 additions and 58 deletions.
diff --git a/app/webpacker/components/RegistrationsV2/Registrations/RegistrationList.jsx b/app/webpacker/components/RegistrationsV2/Registrations/RegistrationList.jsx
@@ -2,10 +2,11 @@ import { useQuery } from '@tanstack/react-query';
 import React, {
   useMemo,
   useReducer,
+  useRef,
   useState,
 } from 'react';
 import {
-  Flag, Icon, Segment, Table,
+  Button, Flag, Icon, Message, Segment, Table,
 } from 'semantic-ui-react';
 import _ from 'lodash';
 import {
@@ -101,6 +102,11 @@ export default function RegistrationList({ competitionInfo, userInfo }) {
     return [];
   }, [isAllCompetitors, registrationsWithPsychSheet, sortColumn, sortDirection]);
 
+  const userRegistration = data?.find((row) => row.user_id === userInfo?.id);
+  const userIsInTable = Boolean(userRegistration)
+  const userPosition = userRegistration?.pos
+  const userRowRef = useRef()
+
   if (isError) {
     return (
       <Errored componentName="RegistrationList" />
@@ -127,6 +133,19 @@ export default function RegistrationList({ competitionInfo, userInfo }) {
         eventList={competitionInfo.event_ids}
         selectedEvents={[psychSheetEvent].filter(Boolean)}
       />
+      {userIsInTable && (
+        <Message>
+          {userPosition && (
+            `Your rank by ${psychSheetSortBy} is ${userPosition}. `
+          )}
+          {!userPosition && isPsychSheet && (
+            `You do not have an official ${psychSheetSortBy}. `
+          )}
+          <Button size="mini" onClick={() => userRowRef?.current?.scrollIntoView({ behavior: "smooth", block: "center" })}>
+            Scroll to me
+          </Button>
+        </Message>
+      )}
       <Table striped sortable unstackable compact singleLine textAlign="left">
         <Table.Header>
           <Table.Row>
@@ -195,66 +214,74 @@ export default function RegistrationList({ competitionInfo, userInfo }) {
         </Table.Header>
         <Table.Body>
           {data.length > 0 ? (
-            data.map((registration) => (
-              <Table.Row key={`registration-table-row-${registration.user.id}`}>
-                {isPsychSheet && (
-                  <Table.Cell
-                    collapsing
-                    textAlign="right"
-                    disabled={registration.tied_previous}
-                  >
-                    {registration.pos}
-                  </Table.Cell>
-                )}
-                <Table.Cell>
-                  {registration.user.wca_id ? (
-                    <a
-                      href={personUrl(registration.user.wca_id)}
+            data.map((registration) => {
+              const isUser = registration.user_id === userInfo?.id
+              return (
+                <Table.Row
+                  key={`registration-table-row-${registration.user.id}`}
+                  style={{ backgroundColor: isUser ? "LightBlue" : undefined }}
+                >
+                  {isPsychSheet && (
+                    <Table.Cell
+                      collapsing
+                      textAlign="right"
+                      disabled={registration.tied_previous}
                     >
-                      {registration.user.name}
-                    </a>
-                  ) : (
-                    registration.user.name
-                  )}
-                </Table.Cell>
-                <Table.Cell>
-                  <Flag
-                    name={registration.user.country.iso2.toLowerCase()}
-                  />
-                  {countries.byIso2[registration.user.country.iso2].name}
-                </Table.Cell>
-                {isAllCompetitors ? (
-                  <>
-                    {competitionInfo.event_ids.map((id) => (
-                      <Table.Cell
-                        key={`registration-table-row-${registration.user.id}-${id}`}
-                      >
-                        {registration.competing.event_ids.includes(id) ? (
-                          <EventIcon id={id} size="1em" hoverable={false} />
-                        ) : null}
-                      </Table.Cell>
-                    ))}
-                    <Table.Cell>
-                      {registration.competing.event_ids.length}
+                        {registration.pos}
                     </Table.Cell>
-                  </>
-                ) : (
-                  <>
-                    <Table.Cell>
-                      {psychSheetSortBy === 'single'
-                        ? registration.single_rank
-                        : registration.average_rank}
-                    </Table.Cell>
-                    <Table.Cell>
-                      {formatAttemptResult(registration.single_best, psychSheetEvent)}
-                    </Table.Cell>
-                    <Table.Cell>
-                      {formatAttemptResult(registration.average_best, psychSheetEvent)}
+                  )}
+                  <Table.Cell>
+                    <div ref={isUser ? userRowRef : undefined}>
+                      {registration.user.wca_id ? (
+                          <a
+                            href={personUrl(registration.user.wca_id)}
+                          >
+                            {registration.user.name}
+                          </a>
+                        ) : (
+                          registration.user.name
+                        )}
+                      </div>
                     </Table.Cell>
-                  </>
-                )}
-              </Table.Row>
-            ))
+                  <Table.Cell>
+                    <Flag
+                      name={registration.user.country.iso2.toLowerCase()}
+                    />
+                    {countries.byIso2[registration.user.country.iso2].name}
+                  </Table.Cell>
+                  {isAllCompetitors ? (
+                    <>
+                      {competitionInfo.event_ids.map((id) => (
+                        <Table.Cell
+                          key={`registration-table-row-${registration.user.id}-${id}`}
+                        >
+                          {registration.competing.event_ids.includes(id) ? (
+                            <EventIcon id={id} size="1em" hoverable={false} />
+                          ) : null}
+                        </Table.Cell>
+                      ))}
+                      <Table.Cell>
+                        {registration.competing.event_ids.length}
+                      </Table.Cell>
+                    </>
+                  ) : (
+                    <>
+                      <Table.Cell>
+                        {psychSheetSortBy === 'single'
+                          ? registration.single_rank
+                          : registration.average_rank}
+                      </Table.Cell>
+                      <Table.Cell>
+                        {formatAttemptResult(registration.single_best, psychSheetEvent)}
+                      </Table.Cell>
+                      <Table.Cell>
+                        {formatAttemptResult(registration.average_best, psychSheetEvent)}
+                      </Table.Cell>
+                    </>
+                  )}
+                </Table.Row>
+              )
+            })
           ) : (
             <Table.Row>
               <Table.Cell