- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 | - - - - - -1x - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - -1x | /**
- * Button Component
- *
- * @type {Component} Button
- */
-
-import React, { MouseEvent, ReactNode, Ref, forwardRef, PropsWithChildren, ButtonHTMLAttributes } from 'react';
-
-interface ButtonProps {
- children: ReactNode;
- className: string;
- onClick: (event: MouseEvent<HTMLButtonElement, MouseEvent>) => void;
- active?: boolean;
- isLoading?: boolean;
- isCompleted?: boolean;
- disabled?: boolean;
- [key: string]: any;
-}
-type OrNull<T> = T | null
-
-const Button = forwardRef(
- (
- {
- className,
- children,
- onClick,
- reversed,
- active,
- disabled,
- ...props
- }: PropsWithChildren<
- {
- active: boolean,
- reversed: boolean,
- 'aria-disabled': boolean
- } & ButtonProps
- >,
- ref: Ref<OrNull<HTMLButtonElement>>
- ) => {
-
- function clickHandler(event: any) {
- event.preventDefault();
- onClick(event);
- return false;
- }
-
- return (
- <button {...props} ref={ref as React.RefObject<HTMLButtonElement>} disabled={disabled} onMouseDown={(e) => clickHandler(e)} data-testid="button-component">
- {children}
- </button>
- );
-});
-
-export default Button; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 | - - - - - -1x - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - -1x | /**
- * Button Component
- *
- * @type {Component} Button
- */
-
-import React, { MouseEvent, ReactNode, Ref, forwardRef, PropsWithChildren, ButtonHTMLAttributes } from 'react';
-
-interface ButtonProps {
- children: ReactNode;
- className: string;
- onClick: (event: MouseEvent<HTMLButtonElement, MouseEvent>) => void;
- active?: boolean;
- isLoading?: boolean;
- isCompleted?: boolean;
- disabled?: boolean;
- [key: string]: any;
-}
-type OrNull<T> = T | null
-
-const Button = forwardRef(
- (
- {
- className,
- children,
- onClick,
- reversed,
- active,
- disabled,
- ...props
- }: PropsWithChildren<
- {
- active: boolean,
- reversed: boolean,
- 'aria-disabled': boolean
- } & ButtonProps
- >,
- ref: Ref<OrNull<HTMLButtonElement>>
- ) => {
-
- function clickHandler(event: any) {
- event.preventDefault();
- onClick(event);
- return false;
- }
-
- return (
- <button {...props} ref={ref as React.RefObject<HTMLButtonElement>} disabled={disabled} onMouseDown={(e) => clickHandler(e)} data-testid="button-component">
- {children}
- </button>
- );
-});
-
-export default Button; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Button.tsx | -
-
- |
- 50% | -4/8 | -100% | -0/0 | -33.33% | -1/3 | -50% | -4/8 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 | - - - - - - -1x - -1x - -1x -1x - -1x - - - - - - - - -1x - - - - - - - -1x | /**
- * Card Component
- * Creates a dynamic div element
- * @type {Component} Card
- * @param CardProps
- * @returns JSX.Element
- */
-import React, { useImperativeHandle, useRef } from "react";
-import { CardProps } from "./Card.types";
-import clsx from 'clsx';
-
-const Card = React.forwardRef(({ children, style, className = '', station, onClick, orientation = 'vertical' }: CardProps, ref) => {
- const cardRef = useRef(null);
-
- useImperativeHandle(
- ref,
- () => ({
- focus: () => {
- cardRef?.current.focus();
- }
- }),
- []
- );
- return (
- <div ref={cardRef} className={clsx(orientation === 'vertical' ? 'card-vertical' : 'card-horizontal', className)}
- style={style}>
- {children}
- </div>
- );
-});
-
-export default Card; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 | - - - - - - -1x - -1x - -1x -1x - -1x - - - - - - - - -1x - - - - - - - -1x | /**
- * Card Component
- * Creates a dynamic div element
- * @type {Component} Card
- * @param CardProps
- * @returns JSX.Element
- */
-import React, { useImperativeHandle, useRef } from "react";
-import { CardProps } from "./Card.types";
-import clsx from 'clsx';
-
-const Card = React.forwardRef(({ children, style, className = '', station, onClick, orientation = 'vertical' }: CardProps, ref) => {
- const cardRef = useRef(null);
-
- useImperativeHandle(
- ref,
- () => ({
- focus: () => {
- cardRef?.current.focus();
- }
- }),
- []
- );
- return (
- <div ref={cardRef} className={clsx(orientation === 'vertical' ? 'card-vertical' : 'card-horizontal', className)}
- style={style}>
- {children}
- </div>
- );
-});
-
-export default Card; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Card.tsx | -
-
- |
- 77.77% | -7/9 | -75% | -3/4 | -33.33% | -1/3 | -77.77% | -7/9 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 | - - - -1x -1x -1x - -1x -1x -1x - - -2x - - - - - - - - - -1x -2x -2x - - -1x | /**
- * Icon Component
- * @type {Component}
- */
-import React, { SVGProps } from "react";
-import StationsIcon from './StationsIcon';
-import TrainIcon from "./TrainIcon";
-
-export enum ICONS {
- Stations = 'Stations',
- Train = 'Train'
-}
-
-const getIcons = (props: SVGProps<SVGSVGElement>) => ({
- Station: <StationsIcon {...props} />,
- Train: <TrainIcon {...props} />
-});
-
-interface IconProps extends SVGProps<SVGSVGElement> {
- icon: ICONS;
- [key: string]: any;
-}
-
-const Icon: React.FC<IconProps> = ({ icon, ...props }) => {
- const iconComponent = getIcons(props)[icon];
- return <>{iconComponent}</>;
-};
-
-export default Icon; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 | - - - -1x -1x -1x - -1x -1x -1x - - -2x - - - - - - - - - -1x -2x -2x - - -1x | /**
- * Icon Component
- * @type {Component}
- */
-import React, { SVGProps } from "react";
-import StationsIcon from './StationsIcon';
-import TrainIcon from "./TrainIcon";
-
-export enum ICONS {
- Stations = 'Stations',
- Train = 'Train'
-}
-
-const getIcons = (props: SVGProps<SVGSVGElement>) => ({
- Station: <StationsIcon {...props} />,
- Train: <TrainIcon {...props} />
-});
-
-interface IconProps extends SVGProps<SVGSVGElement> {
- icon: ICONS;
- [key: string]: any;
-}
-
-const Icon: React.FC<IconProps> = ({ icon, ...props }) => {
- const iconComponent = getIcons(props)[icon];
- return <>{iconComponent}</>;
-};
-
-export default Icon; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 | - - - -1x -1x - - -1x - - - -1x | /**
- * Station Icon
- * @type {Component}
- */
-import React, { SVGProps } from "react";
-import { ReactComponent as Station } from './../../assets/img/stationPoint.svg';
-
-
-const StationsIcon = (props: SVGProps<SVGSVGElement>) => (
- <Station />
-);
-
-export default StationsIcon; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 | - - - -1x - -1x -2x -1x - - - - - - - - - - - - - - - - - - - - -1x | /**
- * Train Icon
- * @type {Component}
- */
-import React, { SVGProps } from "react";
-
-const TrainIcon = (props: SVGProps<SVGSVGElement>) => {
- const { color } = props;
- return (
- <svg
- width="238"
- height="122"
- viewBox="0 0 238 122"
- fill="none"
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- aria-hidden="true">
- <path d="M55.2834 97.1758C55.3415 99.4208 54.9567 101.644 54.1509 103.718C53.3452 105.793 52.1343 107.678 50.5874 109.266C49.0405 110.854 47.1878 112.114 45.1353 112.974C43.0827 113.834 40.8704 114.277 38.6247 114.278C36.379 114.279 34.1438 113.837 32.0468 112.979C29.9498 112.121 28.032 110.862 26.403 109.275C24.7739 107.688 23.4655 105.804 22.5525 103.731C21.6394 101.657 21.1396 99.434 21.0815 97.189L38.1825 97.1825L55.2834 97.1758Z" fill={color} />
- <path d="M208.285 97.1758C208.343 99.4208 207.959 101.644 207.153 103.718C206.347 105.793 205.136 107.678 203.589 109.266C202.042 110.854 200.19 112.114 198.137 112.974C196.085 113.834 193.872 114.277 191.627 114.278C189.381 114.279 187.146 113.837 185.049 112.979C182.952 112.121 181.034 110.862 179.405 109.275C177.776 107.688 176.467 105.804 175.554 103.731C174.641 101.657 174.142 99.434 174.083 97.189L191.184 97.1825L208.285 97.1758Z" fill={color} />
- <path d="M138.285 97.1758C138.343 99.4208 137.959 101.644 137.153 103.718C136.347 105.793 135.136 107.678 133.589 109.266C132.042 110.854 130.19 112.114 128.137 112.974C126.085 113.834 123.872 114.277 121.627 114.278C119.381 114.279 117.146 113.837 115.049 112.979C112.952 112.121 111.034 110.862 109.405 109.275C107.776 107.688 106.467 105.804 105.554 103.731C104.641 101.657 104.142 99.434 104.083 97.189L121.184 97.1825L138.285 97.1758Z" fill={color} />
- <path d="M214 74.3085L214.05 74.2528" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M4 54H234V89C234 91.7615 228.279 94 221.222 94H16.7778C9.72087 94 4 91.7615 4 89V54Z" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M234 34V24C234 12.9543 211.116 4 182.889 4H55.1111C26.8832 4 4 12.9543 4 24V34" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M36.0916 19H60.0929C67.3229 19 73.1845 24.8613 73.1845 32.0916C73.1845 33.1762 72.3053 34.0553 71.2208 34.0553H24.9637C23.8792 34.0553 23 33.1762 23 32.0916C23 24.8613 28.8613 19 36.0916 19Z" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M107.092 19H131.093C138.323 19 144.184 24.8613 144.184 32.0916C144.184 33.1762 143.305 34.0553 142.221 34.0553H95.9637C94.8792 34.0553 94 33.1762 94 32.0916C94 24.8613 99.8613 19 107.092 19Z" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M178.043 19H201.957C209.16 19 215 24.8397 215 32.0435C215 33.124 214.124 34 213.043 34H166.957C165.876 34 165 33.124 165 32.0435C165 24.8397 170.84 19 178.043 19Z" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- </svg>
- );
-}
-export default TrainIcon; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Icon.tsx | -
-
- |
- 100% | -12/12 | -100% | -2/2 | -100% | -3/3 | -100% | -11/11 | -
| StationsIcon.tsx | -
-
- |
- 80% | -4/5 | -100% | -0/0 | -0% | -0/1 | -80% | -4/5 | -
| TrainIcon.tsx | -
-
- |
- 100% | -5/5 | -100% | -0/0 | -100% | -1/1 | -100% | -5/5 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 | - - - -1x - -1x - -1x - | /**
- * Loading Component
- * @type {Component}
- */
-import React from "react";
-
-export const Loader = () => {
-
- return <>Loading...</>;
-}; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 | - - - -1x -1x - - -1x - - - -1x | /**
- * Station Icon
- * @type {Component}
- */
-import React, { SVGProps } from "react";
-import { ReactComponent as Station } from './../../assets/img/stationPoint.svg';
-
-
-const StationsIcon = (props: SVGProps<SVGSVGElement>) => (
- <Station />
-);
-
-export default StationsIcon; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 | - - - -1x - -1x -2x -1x - - - - - - - - - - - - - - - - - - - - -1x | /**
- * Train Icon
- * @type {Component}
- */
-import React, { SVGProps } from "react";
-
-const TrainIcon = (props: SVGProps<SVGSVGElement>) => {
- const { color } = props;
- return (
- <svg
- width="238"
- height="122"
- viewBox="0 0 238 122"
- fill="none"
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- aria-hidden="true">
- <path d="M55.2834 97.1758C55.3415 99.4208 54.9567 101.644 54.1509 103.718C53.3452 105.793 52.1343 107.678 50.5874 109.266C49.0405 110.854 47.1878 112.114 45.1353 112.974C43.0827 113.834 40.8704 114.277 38.6247 114.278C36.379 114.279 34.1438 113.837 32.0468 112.979C29.9498 112.121 28.032 110.862 26.403 109.275C24.7739 107.688 23.4655 105.804 22.5525 103.731C21.6394 101.657 21.1396 99.434 21.0815 97.189L38.1825 97.1825L55.2834 97.1758Z" fill={color} />
- <path d="M208.285 97.1758C208.343 99.4208 207.959 101.644 207.153 103.718C206.347 105.793 205.136 107.678 203.589 109.266C202.042 110.854 200.19 112.114 198.137 112.974C196.085 113.834 193.872 114.277 191.627 114.278C189.381 114.279 187.146 113.837 185.049 112.979C182.952 112.121 181.034 110.862 179.405 109.275C177.776 107.688 176.467 105.804 175.554 103.731C174.641 101.657 174.142 99.434 174.083 97.189L191.184 97.1825L208.285 97.1758Z" fill={color} />
- <path d="M138.285 97.1758C138.343 99.4208 137.959 101.644 137.153 103.718C136.347 105.793 135.136 107.678 133.589 109.266C132.042 110.854 130.19 112.114 128.137 112.974C126.085 113.834 123.872 114.277 121.627 114.278C119.381 114.279 117.146 113.837 115.049 112.979C112.952 112.121 111.034 110.862 109.405 109.275C107.776 107.688 106.467 105.804 105.554 103.731C104.641 101.657 104.142 99.434 104.083 97.189L121.184 97.1825L138.285 97.1758Z" fill={color} />
- <path d="M214 74.3085L214.05 74.2528" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M4 54H234V89C234 91.7615 228.279 94 221.222 94H16.7778C9.72087 94 4 91.7615 4 89V54Z" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M234 34V24C234 12.9543 211.116 4 182.889 4H55.1111C26.8832 4 4 12.9543 4 24V34" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M36.0916 19H60.0929C67.3229 19 73.1845 24.8613 73.1845 32.0916C73.1845 33.1762 72.3053 34.0553 71.2208 34.0553H24.9637C23.8792 34.0553 23 33.1762 23 32.0916C23 24.8613 28.8613 19 36.0916 19Z" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M107.092 19H131.093C138.323 19 144.184 24.8613 144.184 32.0916C144.184 33.1762 143.305 34.0553 142.221 34.0553H95.9637C94.8792 34.0553 94 33.1762 94 32.0916C94 24.8613 99.8613 19 107.092 19Z" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M178.043 19H201.957C209.16 19 215 24.8397 215 32.0435C215 33.124 214.124 34 213.043 34H166.957C165.876 34 165 33.124 165 32.0435C165 24.8397 170.84 19 178.043 19Z" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- </svg>
- );
-}
-export default TrainIcon; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 | 1x - -1x - -1x -1x - - - - - - - - - - - - - - - - - - - - - - - - - -1x - | export const getColorByStation = (stationColor: string) => {
- let color;
- switch (stationColor) {
- case "pink":
- color = '#e27ea6';
- break;
- case 'blue':
- color = '#00a1de';
- break;
- case 'g':
- color = '#009b3a';
- break;
- case 'brn':
- color = '#62361b';
- break;
- case 'p':
- color = '#522398';
- break;
- case 'y':
- color = '#f9e300';
- break;
- case 'red':
- color = '#c60c30';
- break;
- case 'org':
- color = '#f9461c';
- break;
- default:
- color = '#565a5c';
- break;
- }
- return color;
-}; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 | - - - - - -1x - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - -1x - - - - - - -1x | /**
- * Button Component
- *
- * @type {Component} Button
- */
-
-import React, { MouseEvent, ReactNode, Ref, forwardRef, PropsWithChildren, ButtonHTMLAttributes } from 'react';
-
-interface ButtonProps {
- children: ReactNode;
- className: string;
- onClick: (event: MouseEvent<HTMLButtonElement, MouseEvent>) => void;
- active?: boolean;
- isLoading?: boolean;
- isCompleted?: boolean;
- disabled?: boolean;
- [key: string]: any;
-}
-type OrNull<T> = T | null
-
-const Button = forwardRef(
- (
- {
- className,
- children,
- onClick,
- reversed,
- active,
- disabled,
- ...props
- }: PropsWithChildren<
- {
- active: boolean,
- reversed: boolean,
- 'aria-disabled': boolean
- } & ButtonProps
- >,
- ref: Ref<OrNull<HTMLButtonElement>>
- ) => {
-
- function clickHandler(event: any) {
- event.preventDefault();
- onClick(event);
- return false;
- }
-
- return (
- <button {...props} ref={ref as React.RefObject<HTMLButtonElement>} disabled={disabled} onMouseDown={(e) => clickHandler(e)} data-testid="button-component">
- {children}
- </button>
- );
-});
-
-export default Button; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Button.tsx | -
-
- |
- 50% | -4/8 | -100% | -0/0 | -33.33% | -1/3 | -50% | -4/8 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 | - - - - - - -2x - -2x - -2x -1x - -1x - - - - - - - - -1x - - - - - - - -2x | /**
- * Card Component
- * Creates a dynamic div element
- * @type {Component} Card
- * @param CardProps
- * @returns JSX.Element
- */
-import React, { useImperativeHandle, useRef } from "react";
-import { CardProps } from "./Card.types";
-import clsx from 'clsx';
-
-const Card = React.forwardRef(({ children, style, className = '', station, onClick, orientation = 'vertical' }: CardProps, ref) => {
- const cardRef = useRef(null);
-
- useImperativeHandle(
- ref,
- () => ({
- focus: () => {
- cardRef?.current.focus();
- }
- }),
- []
- );
- return (
- <div ref={cardRef} className={clsx(orientation === 'vertical' ? 'card-vertical' : 'card-horizontal', className)}
- style={style}>
- {children}
- </div>
- );
-});
-
-export default Card; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Card.tsx | -
-
- |
- 77.77% | -7/9 | -75% | -3/4 | -33.33% | -1/3 | -77.77% | -7/9 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 | - - - -1x - -1x - -1x - - - - - - - - - -1x | /**
- * Container (Card)
- * @type {Component} CardContainer
- */
-import React, { useRef } from 'react';
-import { CardContainerProps } from './CardContainer.types';
-import clsx from 'clsx';
-
-const CardContainer = React.forwardRef(({ children, style, className = '', orientation = 'vertical' }: CardContainerProps, ref) => {
- const containerRef = useRef(null);
-
- return (
- <div ref={containerRef} className={clsx(orientation === 'vertical' ? 'card-vertical' : 'card-horizontal', className)}>
- {children}
- </div>
- );
-});
-
-export default CardContainer; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| CardContainer.tsx | -
-
- |
- 66.66% | -4/6 | -0% | -0/4 | -0% | -0/1 | -66.66% | -4/6 | -
| index.ts | -
-
- |
- 100% | -3/3 | -100% | -0/0 | -0% | -0/1 | -100% | -2/2 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 | 1x -1x | export { default as CardContainer } from './CardContainer';
-export * from './CardContainer.types'; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 | - - - -1x -1x -1x - -1x -1x -1x - - -2x - - - - - - - - - -1x -2x -2x - - -1x | /**
- * Icon Component
- * @type {Component}
- */
-import React, { SVGProps } from "react";
-import StationsIcon from './StationsIcon';
-import TrainIcon from "./TrainIcon";
-
-export enum ICONS {
- Stations = 'Stations',
- Train = 'Train'
-}
-
-const getIcons = (props: SVGProps<SVGSVGElement>) => ({
- Station: <StationsIcon {...props} />,
- Train: <TrainIcon {...props} />
-});
-
-interface IconProps extends SVGProps<SVGSVGElement> {
- icon: ICONS;
- [key: string]: any;
-}
-
-const Icon: React.FC<IconProps> = ({ icon, ...props }) => {
- const iconComponent = getIcons(props)[icon];
- return <>{iconComponent}</>;
-};
-
-export default Icon; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 | - - - -1x -1x - - -1x - - - -1x | /**
- * Station Icon
- * @type {Component}
- */
-import React, { SVGProps } from "react";
-import { ReactComponent as Station } from './../../assets/img/stationPoint.svg';
-
-
-const StationsIcon = (props: SVGProps<SVGSVGElement>) => (
- <Station />
-);
-
-export default StationsIcon; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 | - - - -1x - -1x -2x -1x - - - - - - - - - - - - - - - - - - - - -1x | /**
- * Train Icon
- * @type {Component}
- */
-import React, { SVGProps } from "react";
-
-const TrainIcon = (props: SVGProps<SVGSVGElement>) => {
- const { color } = props;
- return (
- <svg
- width="238"
- height="122"
- viewBox="0 0 238 122"
- fill="none"
- version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- aria-hidden="true">
- <path d="M55.2834 97.1758C55.3415 99.4208 54.9567 101.644 54.1509 103.718C53.3452 105.793 52.1343 107.678 50.5874 109.266C49.0405 110.854 47.1878 112.114 45.1353 112.974C43.0827 113.834 40.8704 114.277 38.6247 114.278C36.379 114.279 34.1438 113.837 32.0468 112.979C29.9498 112.121 28.032 110.862 26.403 109.275C24.7739 107.688 23.4655 105.804 22.5525 103.731C21.6394 101.657 21.1396 99.434 21.0815 97.189L38.1825 97.1825L55.2834 97.1758Z" fill={color} />
- <path d="M208.285 97.1758C208.343 99.4208 207.959 101.644 207.153 103.718C206.347 105.793 205.136 107.678 203.589 109.266C202.042 110.854 200.19 112.114 198.137 112.974C196.085 113.834 193.872 114.277 191.627 114.278C189.381 114.279 187.146 113.837 185.049 112.979C182.952 112.121 181.034 110.862 179.405 109.275C177.776 107.688 176.467 105.804 175.554 103.731C174.641 101.657 174.142 99.434 174.083 97.189L191.184 97.1825L208.285 97.1758Z" fill={color} />
- <path d="M138.285 97.1758C138.343 99.4208 137.959 101.644 137.153 103.718C136.347 105.793 135.136 107.678 133.589 109.266C132.042 110.854 130.19 112.114 128.137 112.974C126.085 113.834 123.872 114.277 121.627 114.278C119.381 114.279 117.146 113.837 115.049 112.979C112.952 112.121 111.034 110.862 109.405 109.275C107.776 107.688 106.467 105.804 105.554 103.731C104.641 101.657 104.142 99.434 104.083 97.189L121.184 97.1825L138.285 97.1758Z" fill={color} />
- <path d="M214 74.3085L214.05 74.2528" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M4 54H234V89C234 91.7615 228.279 94 221.222 94H16.7778C9.72087 94 4 91.7615 4 89V54Z" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M234 34V24C234 12.9543 211.116 4 182.889 4H55.1111C26.8832 4 4 12.9543 4 24V34" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M36.0916 19H60.0929C67.3229 19 73.1845 24.8613 73.1845 32.0916C73.1845 33.1762 72.3053 34.0553 71.2208 34.0553H24.9637C23.8792 34.0553 23 33.1762 23 32.0916C23 24.8613 28.8613 19 36.0916 19Z" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M107.092 19H131.093C138.323 19 144.184 24.8613 144.184 32.0916C144.184 33.1762 143.305 34.0553 142.221 34.0553H95.9637C94.8792 34.0553 94 33.1762 94 32.0916C94 24.8613 99.8613 19 107.092 19Z" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- <path d="M178.043 19H201.957C209.16 19 215 24.8397 215 32.0435C215 33.124 214.124 34 213.043 34H166.957C165.876 34 165 33.124 165 32.0435C165 24.8397 170.84 19 178.043 19Z" stroke={color} stroke-width="7.52767" stroke-linecap="round" stroke-linejoin="round"/>
- </svg>
- );
-}
-export default TrainIcon; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Icon.tsx | -
-
- |
- 100% | -12/12 | -100% | -2/2 | -100% | -3/3 | -100% | -11/11 | -
| StationsIcon.tsx | -
-
- |
- 80% | -4/5 | -100% | -0/0 | -0% | -0/1 | -80% | -4/5 | -
| TrainIcon.tsx | -
-
- |
- 100% | -5/5 | -100% | -0/0 | -100% | -1/1 | -100% | -5/5 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 | - - - -1x - -1x - -1x - | /**
- * Loading Component
- * @type {Component}
- */
-import React from "react";
-
-export const Loader = () => {
-
- return <>Loading...</>;
-}; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Loader.tsx | -
-
- |
- 100% | -4/4 | -100% | -0/0 | -100% | -1/1 | -100% | -3/3 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 | - - - - - - -1x -1x - -1x -1x -1x - - - - - - - - - -1x - - - - - -1x -1x -1x -1x -1x - -1x - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - -1x - | /**
- * Map Component
- * Creates a Google Maps with geocoding UI and marker are received from mongo databnase.
- * @type {Component} Map
- * @param MapProps
- * @returns JSX.Element
- */
-import React, { useState, useRef, useEffect } from "react";
-import useGetStationsLocally from "../../hooks/useGetStationsLocally";
-import { InitiCenerType } from "../../context";
-import OverlayContainer from "./../Overlay/Overlay";
-import Markers from "./../Marker/Markers";
-import { mapMarkers, mapStations } from "./../../utils/map";
-
-export interface MapProps {
- [key: string]: any;
- width: number;
- height: number;
- currentLocation?: Partial<InitiCenerType>;
- zoom?: number;
-}
-
-const Map = ({
- width,
- height,
- currentLocation,
- zoom = 15,
-}: MapProps) => {
- const mapRef = useRef<HTMLDivElement>();
- const [map, setMap] = useState<google.maps.Map>(null);
- const { stations } = useGetStationsLocally(`${process.env.SERVER_URL}/stations`);
- const markers = mapMarkers(stations);
- const mappedStations = mapStations(markers);
-
- useEffect(() => {
- Iif (mapRef.current && !map) {
- setMap(new window.google.maps.Map(mapRef.current, {
- center: { lat: currentLocation?.lat, lng: currentLocation?.lng },
- zoom: 15,
- disableDefaultUI: true,
- clickableIcons: false
- }));
- }
- }, [map, zoom]);
-
- return (
- <div
- className="MapWrapper"
- style={{
- height: `${height}px`,
- width: `${width}px`,
- minHeight: `${height}px`,
- }}
- ref={mapRef as any}
- >
- {mappedStations?.map((marker, index) => (
- <OverlayContainer map={map} position={{ lat: marker?.lat, lng: marker?.lng }} key={index}>
- <Markers station={marker} stops={markers} />
- </OverlayContainer>
- ))}
- </div>
- );
-};
-
-export default Map;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Map.tsx | -
-
- |
- 82.35% | -14/17 | -0% | -0/4 | -33.33% | -1/3 | -82.35% | -14/17 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 | - - - - - - -1x - -1x - - - - - - -1x - -1x - | /**
- * Marker
- * A Marker point to show over the Overlay Container
- * @type {Component} Marker
- * @returns JSX.Element
- */
-
-import * as React from "react";
-import { Station } from "components/Map";
-import clsx from 'clsx';
-
-type MarkerProps = google.maps.MarkerOptions & {
- onClick?: () => void;
- onHover?: () => void;
- station: Station;
-}
-const Marker: React.FC<MarkerProps> = ({ station, onClick, onHover }: MarkerProps) => <div onMouseOver={onHover} className={clsx('Marker-component bubble-marker')} style={{ backgroundColor: `${station?.color}`}}></div>;
-
-export default Marker;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 | - - - - - -1x -1x -1x - -1x - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x | /**
- * Markers
- * @type {Component} Markers
- * @param MarkersProps
- * @returns JSX.Element
- */
-import React, { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import Marker from "./Marker";
-import { Station } from "components/Map";
-import StationModal from "./../Modal/StationModal";
-
-type MarkersProps = {
- station: Station;
- stops: Station[];
-}
-
-const Markers = ({ station, stops }: MarkersProps) => {
- const [opened, setIsOpened] = useState<boolean>(false);
- const handleOnOpen = () => {
- setIsOpened(true);
- };
- const containerRef = useRef<HTMLDivElement>(null);
- const [position, getPosition] = useState({top: 0, left: 0});
-
- useEffect(() => {
- function handleClickOutside(this: Document, event: MouseEvent) {
- getPosition({ top: event?.clientX, left: event?.clientY });
- Iif (containerRef.current && !containerRef.current.contains(event.target as Node)) {
- setIsOpened(false);
- }
- }
-
- document.addEventListener("mouseover", handleClickOutside);
- return () => {
- document.removeEventListener("mouseout", handleClickOutside);
- };
- }, [containerRef]);
-
- const sidebarContentEl: HTMLElement = document.getElementById('app');
- const modalPlacement = {
- top: `${position?.top}px`,
- left: `${position?.left}px`,
- }
- return (
- <div ref={containerRef}>
- {opened && createPortal( <StationModal station={station} style={modalPlacement} stops={stops} position={position} />, sidebarContentEl )}
- <Marker station={station} onHover={handleOnOpen} />
- </div>
- )
-};
-
-export default Markers; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Marker.tsx | -
-
- |
- 80% | -4/5 | -100% | -0/0 | -0% | -0/1 | -100% | -4/4 | -
| Markers.tsx | -
-
- |
- 28.57% | -6/21 | -0% | -0/5 | -0% | -0/5 | -28.57% | -6/21 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 | 1x - - - - - -1x | export const formatArrivalTime = (arrivalTime: string) => { - let presentTime = new Date()?.getTime(); - const difference = (new Date(arrivalTime).getTime() - presentTime); - return new Date(difference).getMinutes(); -}; - -export const formatEstimatedTime = (arrivalTime: string) => arrivalTime && new Date(arrivalTime)?.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 | - - - - - - -1x -1x -1x - -1x -1x - - - - - - - - - - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | /**
- * Modal (Station)
- *
- * @param StationCardProps
- * @type {Component} StationModal
- */
-
-import useArrivals from "../../hooks/useArrivals";
-import Card from "./../Card/Card";
-import { CardContainer } from "./../CardContainer";
-import { Station } from "./../Map";
-import React, { useEffect, useRef, useState } from "react";
-import { formatArrivalTime, formatEstimatedTime } from "./StationModal.logic";
-
-interface Position {
- top: number;
- left: number;
-}
-
-export type StationCardProps = {
- station: Station;
- stops: Station[];
- position?: Position;
- isOpen?: boolean;
- children?: React.ReactNode;
- handleClose?: () => void;
- style?: React.CSSProperties;
-}
-
-export default function StationModal({ station, position, style, isOpen, stops}: StationCardProps ): JSX.Element {
- console.log(station);
- const { data, loading, error } = useArrivals(station);
- const titleRef = useRef();
- const [title, setTitle] = useState<string>(station?.stop_name?.replace(/ *\([^)]*\) */g, ""));
- const [fontSize, setFontSize] = useState<string>('text-4xl');
- useEffect(() => {
- const width = document.getElementById('station-title').getBoundingClientRect()?.width;
- const height = document.getElementById('station-title').getBoundingClientRect()?.height;
- Iif (width >= 290 || height > 80) {
- setFontSize('text-2xl');
- }
- }, [fontSize, title]);
- return (
- <Card orientation="vertical" style={{ top: `${position?.left}px`, left: `${position?.top}px` }} className={"modal z-10 rounded-lg shadow-xl mx-auto p-6 bg-slate"}>
- <div className='text-base text-slate-900 font-semibold dark:text-slate-300 rounded-lg overflow-hidden mb-2'>
- <h1 ref={titleRef} id="station-title" className={`font-interTight mb-1.5 ${fontSize}`}>{title}</h1>
- </div>
- <CardContainer className="text-base overflow-y-auto" orientation={"vertical"}>
- { data !== null && loading === false ? (
- <div className="space-y-4 station mb-1">
- {data?.map((item) => (
- <ul className="w-72 list-inside station-list-item flex align-middle arrival-list-item px-3.5" style={{ backgroundColor: `${station?.color}`}}>
- <li className="text-left flex-none w-24 text-white text-base">{item?.stpDe?.replace('Service toward ', '')}</li>
- <ul className="flex-auto w-32 arrival-list-item-times">
- <li className="text-right arrival-time text-white my-0 text-sm">{formatArrivalTime(item?.arrT).toString() === '0' ? 'Due' : `${formatArrivalTime(item?.arrT).toString()} mins`}</li>
- <li className="text-right estimated-time text-white">{formatEstimatedTime(item?.arrT)}</li>
- </ul>
- </ul>
- ))}
- </div>
- ) : (
- <p>Loading</p>
- )}
- </CardContainer>
- </Card>
- );
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| StationModal.logic.ts | -
-
- |
- 50% | -4/8 | -0% | -0/2 | -0% | -0/2 | -40% | -2/5 | -
| StationModal.tsx | -
-
- |
- 33.33% | -6/18 | -0% | -0/9 | -0% | -0/3 | -33.33% | -6/18 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 | 1x - - - - - - | export function createOverlayElement() { - const el = document.createElement('div'); - el.style.position = 'absolute'; - el.style.display = 'inline-block'; - el.style.width = '9999px'; - return el; -} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 | - - - - - - -1x -1x -1x - - - - - - - -1x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -1x | /**
- * OverlayContainer
- * An Overlay container to customize markers.
- * @type {Component} Overlay
- * @param Props
- * @returns JSX.Element
- */
-import * as React from "react";
-import ReactDOM from 'react-dom';
-import { createOverlayElement } from "./Overlay.logic";
-
-export type Props = {
- map: any;
- position: { lat: number, lng: number };
- children?: React.ReactNode;
-}
-
-const OverlayContainer = (props: Props) => {
- const overlay = React.useRef<google.maps.OverlayView | null>(null);
- const element = React.useRef<Element | null>(null);
-
- class OverlayView extends window.google.maps.OverlayView {
- position: google.maps.LatLng | null = null;
- content: any = null;
-
- constructor(props: any) {
- super();
- props.position && (this.position = props.position);
- props.content && (this.content = props.content);
- }
-
- onAdd = () => {
- Iif (this.content) this.getPanes().floatPane.appendChild(this.content);
- };
-
- onRemove = () => {
- Iif (this.content?.parentElement) {
- this.content.parentElement.removeChild(this.content);
- }
- };
-
- draw = () => {
- Iif (this.position) {
- const divPosition = this.getProjection().fromLatLngToDivPixel(this.position);
- this.content.style.left = divPosition.x + 'px';
- this.content.style.top = divPosition.y + 'px';
- }
- };
- }
-
- React.useEffect(() => {
- return () => {
- Iif (overlay.current) overlay.current.setMap(null);
- }
- }, []);
-
- Iif (props.map) {
- element.current = element?.current || createOverlayElement();
- overlay.current = overlay.current || new OverlayView(
- {
- position: new google.maps.LatLng(props.position.lat, props.position.lng),
- content: element?.current
- }
- )
- overlay.current.setMap(props.map)
- return ReactDOM.createPortal(props.children, element?.current);
- }
- return null;
-};
-
-export default OverlayContainer; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| Overlay.logic.ts | -
-
- |
- 16.66% | -1/6 | -100% | -0/0 | -0% | -0/1 | -16.66% | -1/6 | -
| Overlay.tsx | -
-
- |
- 15.15% | -5/33 | -0% | -0/13 | -0% | -0/7 | -16.12% | -5/31 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| useArrivals.ts | -
-
- |
- 56.75% | -21/37 | -33.33% | -1/3 | -42.85% | -3/7 | -56.75% | -21/37 | -
| useGetStationsLocally.ts | -
-
- |
- 72.72% | -8/11 | -100% | -0/0 | -50% | -3/6 | -72.72% | -8/11 | -
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 | - - - -2x - -2x -2x -2x -2x -2x -2x - -1x -1x - - - -1x - - - - - - - - - - - - - - - - - - - -1x -1x -1x -1x - - - -2x - - - - - - -2x -2x -1x -1x - - -2x - -2x - | /**
- * Arrival
- * @type {Hooks}
- */
-import React, { useState, useEffect, useRef, useCallback } from "react";
-
-const useArrivals = (initialState) => {
- const isFetching = useRef(true);
- const [data, setData] = useState(null);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(false);
- const getArrivals = useCallback(async (initialState) => {
-
- try {
- const headers = {
- "Access-Control-Allow-Origin": "*",
- "Content-Type": "application/json",
- };
- await fetch(`${process.env.SERVER_URL}/arrivals/${initialState?.map_id}`, { headers })
- .then((response) => response.json())
- .then((res) => {
- if (res?.ctatt.errNm != null) {
- setData(res?.ctatt.errNm);
- setLoading(false);
- setError(false);
- } else {
- setData(res?.ctatt.eta);
- setLoading(false);
- setError(true);
- }
- })
- .catch((error) => {
- console.log(`Error: ${error}`);
- setData(error);
- setLoading(false);
- setError(true);
- });
- } catch (error) {
- console.log(error);
- setData(error);
- setLoading(false);
- setError(true);
- }
- }, []);
-
- const refreshData = useCallback((payload) => {
- setData(null);
- setLoading(null);
- setError(null);
- isFetching.current = true;
- }, []);
-
- useEffect(() => {
- if (isFetching.current) {
- isFetching.current = false;
- getArrivals(initialState);
- }
- }, [isFetching.current]);
- return { data, loading, error, refetch: refreshData };
-};
-export default useArrivals;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 | - - - -1x - - -1x -1x - -1x -1x - - - - - - - - - -1x -1x - -1x - | /**
- * Find stations locally
- * @type {Hooks}
- */
-import { useState, useEffect } from 'react';
-import { Stations } from 'components/Map';
-
-export default function useGetStationsLocally(url) {
- const [stations, getStations] = useState<Stations[]>([]);
-
- const getData = (url: string) => {
- fetch(url, {
- method: 'GET',
- })
- .then(response => response.json())
- .then(result => {
- getStations(result);
- })
- .catch(error => console.log('error', error));
- };
-
- useEffect(() => {
- return getData(url);
- }, [url]);
- return { stations };
-} |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | /** @type {import('jest').Config} */
-
-const config = {
- testEnvironment: "jsdom",
- moduleFileExtensions: ["js", "json", "ts", "tsx", "jsx", "node", "mjs"],
- clearMocks: true,
- collectCoverage: true,
- transform: {
- "^.+\\.(j|t)sx?$": "babel-jest",
- },
- testMatch: [
- "<rootDir>/src/**/*.test.{js,jsx,ts,tsx}",
- "<rootDir>/src/test/**/*.test.{js,jsx,ts,tsx}",
- ],
- collectCoverageFrom: [
- "<rootDir>/src/components/**/*.{ts,tsx,js,jsx}",
- "!<rootDir>/src/components/index.ts",
- ],
- testPathIgnorePatterns: ["/node_modules/"],
- coverageThreshold: {
- global: {
- branches: 80,
- statements: 80,
- functions: 80,
- lines: 80,
- },
- },
- moduleNameMapper: {
- "^@components/(.*)$": "<rootDir>/src/components/$1",
- "^@hooks/(.*)$": "<rootDir>/src/hooks/$1",
- "\\.(css|scss|sass)$": "identity-obj-proxy",
- },
- setupFilesAfterEnv: ["<rootDir>/setupTest.ts"],
-};
-
-export default config;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 | - - - -1x - -1x -2x -2x -2x -2x -2x - -1x -1x - - - -1x - - - - - - - - - - - - - - - - - - - -1x -1x -1x -1x - - - -2x - - - - - - -2x -2x -1x -1x - - -2x - -1x - | /**
- * Arrival
- * @type {Hooks}
- */
-import React, { useState, useEffect, useRef, useCallback } from "react";
-
-const useArrivals = (initialState) => {
- const isFetching = useRef(true);
- const [data, setData] = useState(null);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(false);
- const getArrivals = useCallback(async (initialState) => {
-
- try {
- const headers = {
- "Access-Control-Allow-Origin": "*",
- "Content-Type": "application/json",
- };
- await fetch(`${process.env.SERVER_URL}/arrivals/${initialState?.map_id}`, { headers })
- .then((response) => response.json())
- .then((res) => {
- if (res?.ctatt.errNm != null) {
- setData(res?.ctatt.errNm);
- setLoading(false);
- setError(false);
- } else {
- setData(res?.ctatt.eta);
- setLoading(false);
- setError(true);
- }
- })
- .catch((error) => {
- console.log(`Error: ${error}`);
- setData(error);
- setLoading(false);
- setError(true);
- });
- } catch (error) {
- console.log(error);
- setData(error);
- setLoading(false);
- setError(true);
- }
- }, []);
-
- const refreshData = useCallback((payload) => {
- setData(null);
- setLoading(null);
- setError(null);
- isFetching.current = true;
- }, []);
-
- useEffect(() => {
- if (isFetching.current) {
- isFetching.current = false;
- getArrivals(initialState);
- }
- }, [isFetching.current]);
- return { data, loading, error, refetch: refreshData };
-};
-export default useArrivals;
- |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 | 2x - -2x - -1x -1x - - - - - - - - - - - - - - - - - - - - - - -1x -1x - -2x - | export const getColorByStation = (stationColor: string) => {
- let color;
- switch (stationColor) {
- case "pink":
- color = '#e27ea6';
- break;
- case 'blue':
- color = '#00a1de';
- break;
- case 'g':
- color = '#009b3a';
- break;
- case 'brn':
- color = '#62361b';
- break;
- case 'p':
- color = '#522398';
- break;
- case 'y':
- color = '#f9e300';
- break;
- case 'red':
- color = '#c60c30';
- break;
- case 'org':
- color = '#f9461c';
- break;
- default:
- color = '#565a5c';
- break;
- }
- return color;
-}; |
- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -- Press n or j to go to the next uncovered block, b, p or k for the previous block. -
- -| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 | 1x - -1x - - - - - - - - - - - - - - - - - - - - - - -1x | import { getColorByStation } from "./color";
-
-export const mapMarkers = (stations) => stations && stations?.map((station, i) => station?.stops.map((stop) => ({
- color: getColorByStation(Object.keys(stop).find((key, i) => stop[key] === true && key !== 'ada')),
- lat: stop?.lat,
- lng: stop?.lng,
- title: stop?.stop_name,
- ada: stop?.ada,
- blue: stop?.blue,
- brn: stop?.brn,
- direction: stop?.direction,
- g: stop?.g,
- map_id: stop?.map_id,
- org: stop?.org,
- p: stop?.p,
- pink: stop?.pink,
- purple_express: stop?.purple_express,
- red: stop?.red,
- station_descriptive_name: stop?.station_descriptive_name,
- stop_id: stop?.stop_id,
- stop_name: stop?.stop_name,
- y: stop?.y,
-}))).flat();
-
-
-export const mapStations = (stations) => stations && stations?.filter((obj1, i, station) => station.findIndex(obj2 => (obj2.station_descriptive_name === obj1.station_descriptive_name)) === i); |
Drawer Content
Drawer Content
Drawer Content
Drawer Content
Drawer Content
Drawer Content
Loading...
} {error &&Error fetching arrivals
} {data && ( diff --git a/client/src/components/SearchInput/SearchInput.tsx b/client/src/components/SearchInput/SearchInput.tsx index e9517f5..2fe4188 100644 --- a/client/src/components/SearchInput/SearchInput.tsx +++ b/client/src/components/SearchInput/SearchInput.tsx @@ -1,86 +1,70 @@ -/** - * Search Input Component - * - * @type {Component} SearchInput - * @param - * @returns JSX.Element - */ +import React, { useState } from 'react'; +import SearchInputOptions from './SearchInputOptions'; +import clsx from 'clsx'; -import React, { useCallback, useRef } from 'react'; -import Select from 'react-select'; -import { SearchInputProps } from "./SearchInput.type"; -import { IndicatorSeparator, LoadingIndicator } from 'react-select/dist/declarations/src/components/indicators'; -import SingleValue from 'react-select/dist/declarations/src/components/SingleValue'; -import { merge } from 'lodash'; -import AsyncSelect, { AsyncProps } from 'react-select/dist/declarations/src/Async'; +const SearchInput = ({ suggestions }) => { + const [filteredSuggestion, setFilteredSuggestions] = useState