frontend: improve team highlight handling

Author: tossy310

frontend/src/components/standings/StandingsTable.tsx

@@ -78,7 +78,6 @@ class TeamGenericCol extends React.Component<TeamGenericColProps> {
       // FIXME: get the correct hight.
       const yOffset = -80;
       window.scrollTo({ top: yCoordinate + yOffset, behavior: 'smooth' });
-      el.className += ' team-highlight';
     };
     const inner = to ? (
       <HashLink

frontend/src/components/teams/TeamList.tsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 import FixedRatioThumbnail from '../common/FixedRatioThumbnail';
 import GridFlow from '../common/GridFlow';
@@ -51,11 +51,13 @@ function TeamLink({ id, children }: TeamLinkProps) {
 type TeamItemProps = {
   teamId: string;
   team: Team;
+  highlight?: boolean,
 };
 
 function TeamItem({
   teamId,
   team: { name, university, country, photo, members },
+  highlight,
 }: TeamItemProps) {
   const displayNames = [];
   for (const profile of members) {
@@ -67,7 +69,7 @@ function TeamItem({
   const memberNames = displayNames.join(' / ');
   return (
     <div
-      className="card mb-3"
+      className={"card mb-3" + (highlight ? " team-highlight" : undefined)}
       style={{ backgroundColor: hasInfo ? undefined : 'inherit !important' }}
       id={teamId}
     >
@@ -122,14 +124,17 @@ type TeamListSimpleProps = {
 };
 
 function TeamListSimple({ teams }: TeamListSimpleProps) {
+  const { hash } = useLocation();
+  const highlightTeamId = (hash.length > 1) ? hash.slice(1) : null;
+  console.log(highlightTeamId);
   const items = Object.keys(teams)
     .sort(
       (a, b) =>
         teams[a].university.localeCompare(teams[b].university) ||
         teams[a].name.localeCompare(teams[b].name) ||
         a.localeCompare(b)
     )
-    .map((id) => <TeamItem key={id} teamId={id} team={teams[id]} />);
+    .map((id) => <TeamItem key={id} teamId={id} team={teams[id]} highlight={highlightTeamId === id} />);
   return <TeamItemFlow>{items}</TeamItemFlow>;
 }