From 94a2d33d1feef8262b760c6592fb835f6a9d77c7 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Sun, 23 Jul 2023 10:54:38 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Improvements=20to=20city=20selectio?=
 =?UTF-8?q?n=20in=20weather=20widget?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Widgets/Inputs/LocationSelection.tsx      | 37 +++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/Dashboard/Tiles/Widgets/Inputs/LocationSelection.tsx b/src/components/Dashboard/Tiles/Widgets/Inputs/LocationSelection.tsx
index 33c477a7b..dd7d257b0 100644
--- a/src/components/Dashboard/Tiles/Widgets/Inputs/LocationSelection.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/Inputs/LocationSelection.tsx
@@ -1,7 +1,9 @@
 import {
   ActionIcon,
+  Anchor,
   Button,
   Card,
+  Center,
   Group,
   Loader,
   Modal,
@@ -14,13 +16,14 @@ import {
   Tooltip,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { IconClick, IconListSearch } from '@tabler/icons-react';
+import { IconAlertTriangle, IconClick, IconListSearch } from '@tabler/icons-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { City } from '~/server/api/routers/weather';
 import { api } from '~/utils/api';
 
 import { IntegrationOptionsValueType } from '../WidgetsEditModal';
+import Link from 'next/link';
 
 type LocationSelectionProps = {
   widgetId: string;
@@ -140,15 +143,41 @@ type CitySelectModalProps = {
 
 const CitySelectModal = ({ opened, closeModal, query, onCitySelected }: CitySelectModalProps) => {
   const { t } = useTranslation('widgets/location');
-  const { isLoading, data } = api.weather.findCity.useQuery(
+  const { isLoading, data, isError } = api.weather.findCity.useQuery(
     { query },
     {
+      retry: false,
       enabled: opened,
       refetchOnWindowFocus: false,
       refetchOnMount: false,
     }
   );
 
+  if (isError === true)
+    return (
+      <Modal
+        title={
+          <Title order={4}>
+            {t('modal.title')} - {query}
+          </Title>
+        }
+        size="xl"
+        opened={opened}
+        onClose={closeModal}
+        zIndex={250}
+      >
+      <Center>
+        <Stack align="center">
+          <IconAlertTriangle />
+          <Title order={6}>Nothing found</Title>
+          <Text>Nothing was found, please try again</Text>
+        </Stack>
+      </Center>
+      </Modal>
+    );
+  
+  const formatter = Intl.NumberFormat('en', { notation: 'compact' });
+
   return (
     <Modal
       title={
@@ -191,13 +220,15 @@ const CitySelectModal = ({ opened, closeModal, query, onCitySelected }: CitySele
                   <Text style={{ whiteSpace: 'nowrap' }}>{city.country}</Text>
                 </td>
                 <td>
+                  <Anchor target='_blank' href={`https://www.google.com/maps/place/${city.latitude},${city.longitude}`}>
                   <Text style={{ whiteSpace: 'nowrap' }}>
                     {city.latitude}, {city.longitude}
                   </Text>
+                  </Anchor>
                 </td>
                 <td>
                   {city.population ? (
-                    <Text style={{ whiteSpace: 'nowrap' }}>{city.population}</Text>
+                    <Text style={{ whiteSpace: 'nowrap' }}>{formatter.format(city.population)}</Text>
                   ) : (
                     <Text color="dimmed"> {t('modal.table.population.fallback')}</Text>
                   )}