Map/Stations/StationList.tsx

/* eslint-disable prettier/prettier */
import React from 'react';

// Redux
import {useSelector} from 'react-redux';
import {getCurrentTripKey} from '@Redux/trip/selectors';
import {Station as StationType} from '@Redux/station/type';
import {getTrackGroupData} from '@Redux/track/selectors';

// Components
import Station from './Station';

const StationList: React.FC<{zoom: number}> = ({zoom}) => {
  const currentTripKey = useSelector(state => getCurrentTripKey(state));
  const trackGroupData = useSelector(state => getTrackGroupData(state));
  const stationList = trackGroupData[currentTripKey].data.trackStation;

  return (
    <>
      {stationList && stationList?.length && zoom > 0 ? (
        stationList
          .filter(item => {
            if (typeof currentTripKey === 'string') {
              return currentTripKey?.includes(item.id);
            } else {
              return true;
            }
          })
          .map(
            ({id, gpsCoordinates: {lat, lng}}: StationType, index: number) => {
              return (
                <Station
                  key={`station_${id}_${index}`}
                  position={{latitude: lat, longitude: lng}}
                  name={id}
                  mode={zoom}
                />
              );
            },
          )
      ) : (
        <></>
      )}
    </>
  );
};

export default React.memo(StationList);