feat: RunRow toggle selection & cursor pointer (yihong0618#551)

src/components/RunTable/RunRow.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { formatPace, titleForRun, formatRunTime, Activity } from '@/utils/utils';
+import { formatPace, titleForRun, formatRunTime, Activity, RunIds } from '@/utils/utils';
 import styles from './style.module.scss';
 
 interface IRunRowProperties {
   elementIndex: number;
-  locateActivity: (_date: string) => void;
+  locateActivity: (_runIds: RunIds) => void;
   run: Activity;
   runIndex: number;
   setRunIndex: (_ndex: number) => void;
@@ -16,7 +16,11 @@ const RunRow = ({ elementIndex, locateActivity, run, runIndex, setRunIndex }: IR
   const heartRate = run.average_heartrate;
   const runTime = formatRunTime(run.moving_time);
   const handleClick = () => {
-    if (runIndex === elementIndex) return;
+    if (runIndex === elementIndex) {
+      setRunIndex(-1);
+      locateActivity([]);
+      return
+    };
     setRunIndex(elementIndex);
     locateActivity([run.run_id]);
   };

src/components/RunTable/index.tsx

@@ -4,13 +4,14 @@ import {
   sortDateFuncReverse,
   convertMovingTime2Sec,
   Activity,
+  RunIds,
 } from '@/utils/utils';
 import RunRow from './RunRow';
 import styles from './style.module.scss';
 
 interface IRunTableProperties {
   runs: Activity[];
-  locateActivity: (_date: string) => void;
+  locateActivity: (_runIds: RunIds) => void;
   setActivity: (_runs: Activity[]) => void;
   runIndex: number;
   setRunIndex: (_index: number) => void;

src/components/RunTable/style.module.scss

@@ -26,6 +26,7 @@
 }
 
 .runRow {
+  cursor: pointer;
   td {
     padding: 0.5rem;
     border: 0;

src/pages/index.tsx

@@ -21,6 +21,7 @@ import {
   scrollToMap,
   sortDateFunc,
   titleForShow,
+  RunIds,
 } from '@/utils/utils';
 
 const Index = () => {
@@ -74,10 +75,12 @@ const Index = () => {
     changeByItem(title, 'Title', filterTitleRuns);
   };
 
-  const locateActivity = (runIds: [Number]) => {
+  const locateActivity = (runIds: RunIds) => {
     const ids = new Set(runIds);
 
-    const selectedRuns = runs.filter((r) => ids.has(r.run_id));
+    const selectedRuns = !runIds.length
+      ? runs
+      : runs.filter((r: any) => ids.has(r.run_id));
 
     if (!selectedRuns.length) {
       return;

src/utils/utils.ts

@@ -8,6 +8,8 @@ import { FeatureCollection, LineString } from 'geojson';
 
 export type Coordinate = [number, number];
 
+export type RunIds = Array<number> | [];
+
 export interface Activity {
   run_id: number;
   name: string;