Multiple schools on the point. Separate route for school

src/@/country/effects/remove-country-fx.ts

@@ -1,8 +1,8 @@
 import { createEffect } from 'effector';
 
-import { clickSchool } from '@/country/model';
 import { getDefaultCountryOpacity } from '@/map/constants';
 import { Map, StylePaintData } from '@/map/types';
+import { clickSchool } from '@/popup/model';
 
 export const removeCountryFx = createEffect(
   ({ map, paintData }: { map: Map | null; paintData: StylePaintData }) => {

src/@/country/effects/update-country-fx.ts

@@ -1,7 +1,7 @@
 import { createEffect } from 'effector';
 
-import { clickSchool } from '@/country/model';
 import { UpdateCountry } from '@/country/types';
+import { clickSchool } from '@/popup/model';
 
 export const updateCountryFx = createEffect(
   ({ map, paintData, country }: UpdateCountry) => {

src/@/country/init.ts

@@ -6,8 +6,6 @@ import {
   fetchCountryDailyStatsFx,
   fetchCountryFx,
   fetchCountryWeeklyStatsFx,
-  fetchSchoolDailyStatsFx,
-  fetchSchoolFx,
   fetchSchoolsFx,
   fetchSchoolsGlobal,
 } from '~/api/project-connect';
@@ -28,8 +26,7 @@ import {
 } from '@/country/effects';
 import { getCountriesGeoJson } from '@/country/lib';
 import { $map, $mapType, $stylePaintData, changeMapType } from '@/map/model';
-import { addSchoolPopupFx } from '@/popup/effects';
-import { $isOpenPopup, $popup } from '@/popup/model';
+import { $popup, $schoolId } from '@/popup/model';
 import { $week, nextWeek, previousWeek } from '@/sidebar/model';
 
 import {
@@ -43,15 +40,10 @@ import {
   $countryHasCoverage,
   $countryInfoPending,
   $countryWeeklyStats,
-  $school,
-  $schoolDailyStats,
-  $schoolId,
   $schools,
   $schoolsGlobal,
   $zoomedCountryCode,
   changeCountryCode,
-  changeSchoolId,
-  clickSchool,
 } from './model';
 
 $countries.on(fetchCountriesFx.doneData, setPayload);
@@ -60,16 +52,11 @@ $schoolsGlobal.on(fetchSchoolsGlobal.doneData, setPayload);
 $country.on(fetchCountryFx.doneData, setPayload);
 $countryCode.on(changeCountryCode, setPayload);
 $schools.on(fetchSchoolsFx.doneData, setPayload);
-
-$school.on(fetchSchoolFx.doneData, setPayload);
-$schoolId.on(changeSchoolId, setPayload);
-$countryWeeklyStats.on(fetchCountryWeeklyStatsFx.doneData, setPayload);
 $countryDailyStats.on(fetchCountryDailyStatsFx.doneData, setPayload);
-$schoolDailyStats.on(fetchSchoolDailyStatsFx.doneData, setPayload);
+$countryWeeklyStats.on(fetchCountryWeeklyStatsFx.doneData, setPayload);
 
 $country.reset(changeCountryCode, fetchCountryFx.fail);
 $schools.reset(changeCountryCode, fetchSchoolsFx.fail);
-$school.reset(fetchSchoolFx.fail);
 
 sample({
   source: guard($country, { filter: Boolean }),
@@ -99,9 +86,6 @@ sample({
   target: changeMapType,
 });
 
-const onClosePopup = guard($isOpenPopup, { filter: getInverted });
-$schoolId.reset(onClosePopup);
-
 $countryWeeklyStats.reset(
   changeCountryCode,
   fetchCountryWeeklyStatsFx,
@@ -116,14 +100,7 @@ $countryDailyStats.reset(
   previousWeek
 );
 
-$schoolDailyStats.reset(
-  changeSchoolId,
-  fetchSchoolDailyStatsFx,
-  nextWeek,
-  previousWeek
-);
-
-const $mapContext = combine({
+export const $mapContext = combine({
   map: $map,
   mapType: $mapType,
   countriesGeometry: $countriesGeometry,
@@ -139,8 +116,12 @@ const $mapContext = combine({
 
 // Routing
 sample({
-  source: combine([mapCountry.params]),
-  fn: ([params]) => params?.code ?? '',
+  source: guard({
+    source: combine([$countryCode, mapCountry.params]),
+    filter: ([countryCode, params]) => countryCode !== params?.code,
+  }),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  fn: ([_, params]) => params?.code ?? '',
   target: changeCountryCode,
 });
 
@@ -168,15 +149,6 @@ guard({
   target: fetchCountryDailyStatsFx,
 });
 
-guard({
-  source: combine([$schoolId, $week], ([schoolId, week]) => ({
-    schoolId,
-    interval: week,
-  })),
-  filter: ({ schoolId }) => Boolean(schoolId),
-  target: fetchSchoolDailyStatsFx,
-});
-
 // Zoom to country bounds
 sample({
   source: guard($mapContext, {
@@ -312,34 +284,6 @@ sample({
   target: addCountriesFx,
 });
 
-// Close an opened school popup on click by another school
-sample({
-  source: guard($schoolId, { filter: Boolean }),
-  clock: clickSchool,
-  fn: () => false,
-  target: $isOpenPopup,
-});
-
-// Add school popup
-sample({
-  source: $mapContext,
-  clock: clickSchool,
-  fn: ({ map, popup }, event) => ({
-    map,
-    popup,
-    event,
-  }),
-  target: addSchoolPopupFx,
-});
-
-// Fetch school data
-sample({
-  source: $mapContext,
-  clock: guard($schoolId, { filter: Boolean }),
-  fn: ({ countryCode, schoolId }) => ({ countryCode, schoolId }),
-  target: fetchSchoolFx,
-});
-
 // Change map type
 sample({
   source: $mapContext,

src/@/country/model.ts

@@ -1,6 +1,5 @@
 import { createEvent, createStore } from 'effector';
 import { FeatureCollection } from 'geojson';
-import { MapMouseEvent } from 'mapbox-gl';
 
 import { fetchSchoolFx } from '~/api/project-connect';
 import {
@@ -9,26 +8,20 @@ import {
   CountryGeometry,
   CountryWeeklyStats,
   DailyStats,
-  School,
 } from '~/api/types';
 
 export const changeCountryCode = createEvent<string>();
-export const changeSchoolId = createEvent<number>();
-export const clickSchool = createEvent<MapMouseEvent>();
 
 export const $countryCode = createStore<string>('');
-export const $schoolId = createStore(0);
 export const $countriesGeometry = createStore<CountryGeometry[] | null>(null);
 export const $countries = createStore<CountryBasic[] | null>(null);
 export const $countriesGeoJson = createStore<FeatureCollection | null>(null);
 export const $schoolsGlobal = createStore<FeatureCollection | null>(null);
 export const $schools = createStore<FeatureCollection | null>(null);
 export const $country = createStore<Country | null>(null);
-export const $school = createStore<School | null>(null);
 export const $schoolPending = fetchSchoolFx.pending;
 export const $countryWeeklyStats = createStore<CountryWeeklyStats | null>(null);
 export const $countryDailyStats = createStore<DailyStats[] | null>(null);
-export const $schoolDailyStats = createStore<DailyStats[] | null>(null);
 export const $zoomedCountryCode = createStore<string>('');
 export const $countryInfoPending = createStore(false);
 export const $countryHasConnectivity = createStore(false);

src/@/history-modal/init.ts

@@ -8,14 +8,7 @@ import {
 import { getInterval, isCurrentInterval } from '~/lib/date-fns-kit';
 import { getInverted, setPayload } from '~/lib/effector-kit';
 
-import {
-  $country,
-  $countryCode,
-  $countryDailyStats,
-  $school,
-  $schoolDailyStats,
-  $schoolId,
-} from '@/country/model';
+import { $country, $countryCode, $countryDailyStats } from '@/country/model';
 import {
   $historyData,
   $historyDataPending,
@@ -33,6 +26,7 @@ import {
   nextHistoryInterval,
   previousHistoryInterval,
 } from '@/history-modal/model';
+import { $school, $schoolDailyStats, $schoolId } from '@/popup/model';
 import { $week } from '@/sidebar/model';
 
 $historyIntervalUnit.on(changeHistoryIntervalUnit, setPayload);

src/@/popup/effects/close-school-popup-fx.ts

@@ -0,0 +1,18 @@
+import { createEffect } from 'effector';
+import mapboxGl from 'mapbox-gl';
+
+import { mapCountry } from '~/core/routes';
+
+export const closeSchoolPopupFx = createEffect(
+  ({
+    countryCode,
+    popup,
+  }: {
+    countryCode: string;
+    popup: mapboxGl.Popup | null;
+  }) => {
+    popup?.remove();
+
+    mapCountry.navigate({ code: countryCode });
+  }
+);

src/@/popup/effects/create-school-popup-fx.ts

@@ -8,7 +8,12 @@ export const createSchoolPopupFx = createEffect(() =>
     maxWidth: '100%',
     className: 'school-popup',
     anchor: 'bottom',
+    closeButton: false,
+    closeOnClick: false,
+    closeOnMove: false,
   })
     .on('open', () => changeIsOpenPopup(true))
     .on('close', () => changeIsOpenPopup(false))
+    .off('open', () => changeIsOpenPopup(true))
+    .off('close', () => changeIsOpenPopup(false))
 );

src/@/popup/effects/handle-schools-click-fx.ts

@@ -0,0 +1,34 @@
+import { createEffect } from 'effector';
+import { PointLike } from 'mapbox-gl';
+
+import { mapCountry } from '~/core/routes';
+
+import { HandleSchoolClickFx } from '@/popup/types';
+
+const nextTick = async () => new Promise((resolve) => setTimeout(resolve, 0));
+
+export const handleSchoolClickFx = createEffect(
+  async ({ map, event, countryCode }: HandleSchoolClickFx) => {
+    if (!map) return;
+
+    const bbox: [PointLike, PointLike] = [
+      [event.point.x - 10, event.point.y - 10],
+      [event.point.x + 10, event.point.y + 10],
+    ];
+
+    const features = map.queryRenderedFeatures(bbox, {
+      layers: ['schools'],
+    });
+
+    if (!features?.length) {
+      return;
+    }
+
+    await nextTick();
+
+    mapCountry.navigate({
+      code: countryCode,
+      schoolId: `${features[0]?.id ?? ''}`,
+    });
+  }
+);

src/@/popup/effects/index.ts

@@ -1,2 +1,4 @@
-export { addSchoolPopupFx } from './add-school-popup-fx';
+export { handleSchoolClickFx } from './handle-schools-click-fx';
+export { openSchoolPopupFx } from './open-school-popup-jx';
+export { closeSchoolPopupFx } from './close-school-popup-fx';
 export { createSchoolPopupFx } from './create-school-popup-fx';

src/@/popup/effects/open-school-popup-jx.ts

@@ -0,0 +1,44 @@
+import { createEffect } from 'effector';
+import { FeatureCollection, Point } from 'geojson';
+import mapboxGl from 'mapbox-gl';
+
+import { mapCountry } from '~/core/routes';
+
+import { Map } from '@/map/types';
+
+const nextTick = async () => new Promise((resolve) => setTimeout(resolve, 0));
+
+export const openSchoolPopupFx = createEffect(
+  async ({
+    popup,
+    schools,
+    schoolId,
+    map,
+    countryCode,
+  }: {
+    popup: mapboxGl.Popup | null;
+    schools: FeatureCollection | null;
+    schoolId: number;
+    map: Map | null;
+    countryCode: string;
+  }) => {
+    if (!map || !popup || !schools || !schoolId) {
+      return;
+    }
+
+    const geometry = schools.features.find((school) => school.id === schoolId)
+      ?.geometry as Point;
+
+    if (!geometry) {
+      mapCountry.navigate({ code: countryCode });
+    }
+
+    const { coordinates } = geometry;
+
+    // Fix bug when popup closes and new one doesn't open
+    await nextTick();
+
+    // Open new popup
+    popup.setLngLat([coordinates[0], coordinates[1]]).addTo(map);
+  }
+);