@autobusal/map 0.0.1

package/Column/Column.tsx

@@ -0,0 +1,104 @@
+import { useEffect } from 'react';
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { AiOutlineClose } from 'react-icons/ai';
+import { HiOutlineRefresh, HiOutlineSearch } from 'react-icons/hi';
+import { Button } from '@autobusal/common';
+import { display, validate } from '@autobusal/utilities';
+import { Container, Items, Item, ButtonClear, Actions } from './styles';
+import { CityData } from '@autobusal/providers/types';
+import { SearchForm } from '../types';
+
+interface Props {
+  top: number
+  from: CityData | null
+  to: CityData | null
+  t: TFunction<'common'>
+  onReset: (type: 'from' | 'to') => void
+  onResetAll: () => void
+}
+
+const Column = ({ top, from, to, t, onReset, onResetAll }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors }, setValue } = useForm<SearchForm>();
+
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setValue('from', from?.name ?? null);
+  }, [from]);
+
+  useEffect(() => {
+    setValue('to', to?.name ?? null)
+  }, [to]);
+
+  const onSubmit = (): void => {
+    if (from !== null && to !== null) {
+      navigate(`/bus-lines/${ from.slug }/${ to.slug }`);
+    }
+  };
+
+  return (
+    <Container className="box" $top={ top }>
+      <form onSubmit={ handleSubmit(onSubmit) }>
+        <Items>
+          <Item className="row">
+            { t('map.departure') }
+
+            <input type="text" placeholder={ t('map.choose') } readOnly={ true } { ...register('from', validate('required|min_length:2', t)) } />
+
+            { display(errors.from) }
+
+            { from !== null && (
+              <ButtonClear onClick={ () => onReset('from') }>
+                <AiOutlineClose />
+              </ButtonClear>
+            ) }
+          </Item>
+
+          <Item className="row">
+            { t('map.arrival') }
+
+            <input type="text" placeholder={ t('map.choose') } readOnly={ true } { ...register('to', validate('required|min_length:2', t)) } />
+
+            { display(errors.to) }
+
+            { to !== null && (
+              <ButtonClear onClick={ () => onReset('to') }>
+                <AiOutlineClose />
+              </ButtonClear>
+            ) }
+          </Item>
+        </Items>
+
+        <Actions>
+          <Button
+            type="submit"
+            text={
+              <>
+                <HiOutlineSearch />
+                { t('map.search') }
+              </>
+            }
+            noMargin
+          />
+
+          <Button
+            type="button"
+            subtype="secondary"
+            text={
+              <>
+                <HiOutlineRefresh />
+                { t('map.reset') }
+              </>
+            }
+            noMargin
+            onClick={ onResetAll }
+          />
+        </Actions>
+      </form>
+    </Container>
+  );
+};
+
+export default Column;

package/Column/styles.ts

@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+  
+export const Container = styled.div<{ $top: number }>`
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 6;
+  width: 100%;
+  height: calc(100% - ${ props => props.$top }px);
+  background: ${ props => props.theme.header.transparent };
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 0;
+
+  @media (min-width: 1024px) {
+    width: 300px;
+  }
+`;
+
+export const Items = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  @media (min-width: 480px) {
+    flex-direction: row;
+  }
+
+  @media (min-width: 1024px) {
+    flex-direction: column;
+  }
+`;
+
+export const Item = styled.div`
+  position: relative;
+  margin-bottom: 0;
+`;
+
+export const ButtonClear = styled.button`
+  position: absolute;
+  top: 34px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${ props => props.theme.primary.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  margin-top: 20px;
+`;

package/Display/Display.tsx

@@ -0,0 +1,46 @@
+import { MapContainer, TileLayer, Marker, Popup, Polyline } from 'react-leaflet';
+import { getPosition } from '@autobusal/utilities';
+import { Container } from './styles';
+import { CityData } from '@autobusal/providers/types';
+
+interface Props {
+  top: number
+  cities: CityData[]
+  from: CityData | null
+  to: CityData | null
+  onClick: (item: CityData) => void
+}
+
+const Display = ({ top, cities, from, to, onClick }: Props): JSX.Element => {
+  const markers = cities.map((item, index) => (
+    <Marker key={ index } position={ getPosition(item.location) } eventHandlers={{ click: () => { onClick(item) } }}>
+      <Popup>{ item.name }</Popup>
+    </Marker>
+  ));
+
+  const line = drawLine(from, to);
+
+  return (
+    <Container $top={ top }>
+      <MapContainer center={[ 41.32, 19.81 ]} minZoom={ 6 } maxZoom={ 13 } zoom={ 6 } scrollWheelZoom={ true }>
+        <TileLayer attribution="&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+
+        { markers }
+
+        { line }
+      </MapContainer>
+    </Container>
+  );
+};
+
+const drawLine = (from: (CityData | null), to: (CityData | null)) => {
+  if (from === null || to === null) {
+    return null;
+  }
+
+  return (
+    <Polyline positions={[ getPosition(from.location), getPosition(to.location) ]} color="#3388ff" />
+  );
+}
+
+export default Display;

package/Display/styles.ts

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import 'leaflet/dist/leaflet.css';
+
+export const Container = styled.div<{ $top: number }>`
+  position: fixed;
+  top: ${ props => props.$top }px;
+  left: 0;
+  z-index: 5;
+  width: 100%;
+  height: calc(100% - ${ props => props.$top }px);
+
+  & > .leaflet-container {
+    width: 100%;
+    height: 100%;
+  }
+`;

package/Map.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { Meta } from '@autobusal/common';
+import Column from './Column/Column';
+import Display from './Display/Display';
+import { CityData } from '@autobusal/providers/types';
+import { GetLocations } from './services';
+
+interface Props {
+  top: number
+  t: TFunction<'common'>
+}
+
+const Map = ({ top, t }: Props): JSX.Element => {
+  const [ from, setFrom ] = useState<CityData | null>(null);
+  const [ to, setTo ] = useState<CityData | null>(null);
+
+  const { data } = GetLocations();
+
+  const onSelected = (selected: CityData): void => {
+    if (from === null) {
+      setFrom(selected);
+    } else if (to === null) {
+      setTo(selected);
+    }
+  };
+
+  const onReset = (type: 'from' | 'to'): void => {
+    if (type === 'from') {
+      setFrom(null);
+    } else {
+      setTo(null);
+    }
+  };
+
+  const onResetAll = (): void => {
+    onReset('from');
+    onReset('to');
+  };
+
+  return (
+    <Meta title={ t('map.title') }>
+      <Column
+        top={ top }
+        from={ from }
+        to={ to }
+        t={ t }
+        onReset={ onReset }
+        onResetAll={ onResetAll }
+      />
+
+      <Display
+        top={ top }
+        cities={ data }
+        from={ from }
+        to={ to }
+        onClick={ onSelected }
+      />
+    </Meta>
+  );
+};
+
+export default Map;

package/index.ts

@@ -0,0 +1,3 @@
+import Map from './Map';
+
+export default Map;

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@autobusal/map",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "index.ts",
+  "dependencies": {
+    "@autobusal/common": "^0.0.8",
+    "@autobusal/providers": "^1.0.16",
+    "@autobusal/utilities": "^0.0.2",
+    "@tanstack/react-query": "^5.17.19",
+    "i18next": "^23.7.18",
+    "react": "^18.2.0",
+    "react-hook-form": "^7.49.3",
+    "react-icons": "^5.0.1",
+    "react-leaflet": "^4.2.1",
+    "react-router-dom": "^6.21.3",
+    "styled-components": "^6.1.8"
+  }
+}

package/services.ts

@@ -0,0 +1,17 @@
+import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { CityData } from '@autobusal/providers/types';
+
+export const GetLocations = (): UseSuspenseQueryResult<CityData[]> => (
+  useSuspenseQuery({
+    queryKey: ['locations-map'],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/cities/map')
+        .then(response => (
+          response.data
+        ))
+        .catch(() => {})
+    )
+  })
+);

package/types.ts

@@ -0,0 +1,4 @@
+export interface SearchForm {
+  from: string | null
+  to: string | null
+}