From d07b385f67a7bca1d20180b00083d0371820b1d6 Mon Sep 17 00:00:00 2001
From: lightlii <32508751+lightlii@users.noreply.github.com>
Date: Tue, 29 Aug 2023 17:25:51 +0200
Subject: [PATCH] fix: refactor hooks to simplify where styles data is coming
 from

---
 .../components/BackgroundMaps/SidePanel.js    |  4 +-
 .../MapView/BackgroundMapSelector.js          | 15 +-----
 .../components/SettingsView/BackgroundMaps.js |  3 +-
 src/renderer/hooks/useMapStylesQuery.js       | 49 ++++++++++++-------
 4 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/src/renderer/components/BackgroundMaps/SidePanel.js b/src/renderer/components/BackgroundMaps/SidePanel.js
index d15f50c6..be6a07c2 100644
--- a/src/renderer/components/BackgroundMaps/SidePanel.js
+++ b/src/renderer/components/BackgroundMaps/SidePanel.js
@@ -3,10 +3,10 @@ import { Button, makeStyles } from '@material-ui/core'
 import ChevronLeft from '@material-ui/icons/ChevronLeft'
 import * as React from 'react'
 import { defineMessages, useIntl } from 'react-intl'
-import { useMapServerQuery } from '../../hooks/useMapServerQuery'
 import { ImportMapStyleDialog } from '../dialogs/ImportMapStyle'
 import Loader from '../Loader'
 import { MapCard } from './MapCard'
+import { useMapStylesQuery } from '../../hooks/useMapStylesQuery'
 
 const m = defineMessages({
   // Button to add map background
@@ -28,7 +28,7 @@ export const SidePanel = ({ openSettings, mapValue, setMapValue }) => {
   const classes = useStyles()
   const [open, setOpen] = React.useState(false)
 
-  const { data, isLoading, refetch } = useMapServerQuery('/styles', false)
+  const { data, isLoading, refetch } = useMapStylesQuery(false)
 
   return (
     <>
diff --git a/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js b/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js
index 3cd73ede..ffa2c627 100644
--- a/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js
+++ b/src/renderer/components/MapFilter/MapView/BackgroundMapSelector.js
@@ -17,10 +17,7 @@ import {
   useExperimentsFlagsStore,
   usePersistedUiStore
 } from '../../../hooks/store'
-import {
-  useDefaultMapStyle,
-  useMapStylesQuery
-} from '../../../hooks/useMapStylesQuery'
+import { useMapStylesQuery } from '../../../hooks/useMapStylesQuery'
 import Loader from '../../Loader'
 
 const MAPEO_BLUE = '#2469f6'
@@ -49,15 +46,7 @@ export const BackgroundMapSelector = ({ active, dismiss }) => {
     setTabIndex(3) // TODO: Set from an ID rather than hardcoded index
   }
 
-  const backgroundMapsEnabled = useExperimentsFlagsStore(
-    store => store.backgroundMaps
-  )
-
-  const defaultMapStyle = useDefaultMapStyle()
-  const { isLoading, data } = useMapStylesQuery()
-
-  const mapStyles =
-    backgroundMapsEnabled && data ? [defaultMapStyle, ...data] : data
+  const { isLoading, data: mapStyles } = useMapStylesQuery()
 
   return (
     <Dialog
diff --git a/src/renderer/components/SettingsView/BackgroundMaps.js b/src/renderer/components/SettingsView/BackgroundMaps.js
index 64fa36b7..c9443cfa 100644
--- a/src/renderer/components/SettingsView/BackgroundMaps.js
+++ b/src/renderer/components/SettingsView/BackgroundMaps.js
@@ -6,6 +6,7 @@ import Typography from '@material-ui/core/Typography'
 import { BackgroundMapInfo } from '../BackgroundMaps/BackgroundMapInfo'
 import { SidePanel } from '../BackgroundMaps/SidePanel'
 import { useMapServerQuery } from '../../hooks/useMapServerQuery'
+import { useMapStylesQuery } from '../../hooks/useMapStylesQuery'
 
 const m = defineMessages({
   // Title for description of offline maps
@@ -28,7 +29,7 @@ export const BackgroundMaps = ({ returnToSettings }) => {
 
   const [mapValue, setMapValue] = React.useState(initialMapId)
 
-  const { data } = useMapServerQuery('/styles')
+  const { data } = useMapStylesQuery()
 
   function unsetMapValue () {
     setMapValue(null)
diff --git a/src/renderer/hooks/useMapStylesQuery.js b/src/renderer/hooks/useMapStylesQuery.js
index 9b63264b..55f15fc4 100644
--- a/src/renderer/hooks/useMapStylesQuery.js
+++ b/src/renderer/hooks/useMapStylesQuery.js
@@ -18,21 +18,39 @@ const m = defineMessages({
   offlineBackgroundMapName: 'Offline Map'
 })
 
-export const useMapStylesQuery = () => {
+export const useMapStylesQuery = (enabled = true) => {
   const backgroundMapsEnabled = useExperimentsFlagsStore(
     store => store.backgroundMaps
   )
 
-  const legacyStyleQueryResult = useLegacyMapStyleQuery(!backgroundMapsEnabled)
+  const legacyStyleQueryResult = useLegacyMapStyleQuery(
+    !backgroundMapsEnabled && enabled
+  )
   const mapStylesQueryResult = useMapServerQuery(
     '/styles',
-    backgroundMapsEnabled
+    backgroundMapsEnabled && enabled
   )
+  const defaultMapStyle = useDefaultMapStyle()
+
+  const queryResult = backgroundMapsEnabled
+    ? {
+        data: [
+          defaultMapStyle,
+          ...(mapStylesQueryResult?.data ? mapStylesQueryResult?.data : [])
+        ],
+        isLoading: mapStylesQueryResult.isLoading,
+        refetch: mapStylesQueryResult.refetch
+      }
+    : {
+        data: legacyStyleQueryResult.data,
+        isLoading: legacyStyleQueryResult.isLoading,
+        refetch: legacyStyleQueryResult.refetch
+      }
 
-  return backgroundMapsEnabled ? mapStylesQueryResult : legacyStyleQueryResult
+  return queryResult
 }
 
-export const useLegacyMapStyleQuery = enabled => {
+const useLegacyMapStyleQuery = enabled => {
   const { formatMessage: t } = useIntl()
   const defaultMapStyle = useDefaultMapStyle()
 
@@ -61,7 +79,7 @@ export const useLegacyMapStyleQuery = enabled => {
   return queryResult
 }
 
-export const useDefaultMapStyle = () => {
+const useDefaultMapStyle = () => {
   const { formatMessage: t } = useIntl()
 
   return {
@@ -69,23 +87,18 @@ export const useDefaultMapStyle = () => {
     url: ONLINE_STYLE_URL,
     bytesStored: 0,
     name: t(m.defaultBackgroundMapName),
-    isImporting: false
+    isImporting: false,
+    isDefault: true
   }
 }
 
 export const useSelectedMapStyle = () => {
-  const backgroundMapsFlag = useExperimentsFlagsStore(
-    store => store.backgroundMaps
-  )
   const backgroundMapStyleId = useBackgroundMapStore(store => store.mapStyle)
-  const defaultMapStyle = useDefaultMapStyle()
 
-  const { data: mapStyles, isLoading } = useMapStylesQuery()
+  const { data: mapStyles } = useMapStylesQuery()
 
-  if (isLoading || !mapStyles) return defaultMapStyle
-
-  return backgroundMapsFlag
-    ? mapStyles?.find(style => style.id === backgroundMapStyleId) ||
-        defaultMapStyle
-    : mapStyles && mapStyles[0]
+  return (
+    mapStyles?.find(style => style.id === backgroundMapStyleId) ||
+    (mapStyles && mapStyles[0])
+  )
 }