From 65c01759f757f1cb7beea44c492608293ced49b1 Mon Sep 17 00:00:00 2001
From: z0ccc <z0ccc@proton.me>
Date: Sat, 17 Dec 2022 21:12:58 -0500
Subject: [PATCH] display 'error' if ip fetch fails

---
 src/Popup/Pages/LocationPage/index.tsx | 30 +++++++++++++++-----------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/Popup/Pages/LocationPage/index.tsx b/src/Popup/Pages/LocationPage/index.tsx
index 2b6203f..3b03a9c 100644
--- a/src/Popup/Pages/LocationPage/index.tsx
+++ b/src/Popup/Pages/LocationPage/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, ChangeEvent } from 'react'
+import { useState, useEffect, ChangeEvent, useCallback } from 'react'
 import { Box, Flex, Label, Radio, Select } from 'theme-ui'
 import Page from '../../Components/Page'
 import DebouncedInput from '../../Components/DebouncedInput'
@@ -16,6 +16,7 @@ interface LocationPageProps {
 
 const LocationPage = ({ tab }: LocationPageProps) => {
   const [ipData, setIpData] = useState<ipData>()
+  const [ipInfo, setIpInfo] = useState('loading...')
   const [locationType, setLocationType] = useState('')
   const [timezone, setTimezone] = useState('')
   const [locale, setLocale] = useState('')
@@ -23,12 +24,22 @@ const LocationPage = ({ tab }: LocationPageProps) => {
   const [lon, setLongitude] = useState('')
   const [configuration, setConfiguration] = useState('custom')
 
-  useEffect(() => {
-    getIp().then((ipDataRes) => {
-      setIpData(ipDataRes)
-    })
+  const reloadIp = useCallback(() => {
+    setIpInfo('loading...')
+    getIp()
+      .then((ipDataRes) => {
+        setIpData(ipDataRes)
+        setIpInfo(`${getFlagEmoji(ipDataRes.countryCode)} ${ipDataRes.query}`)
+      })
+      .catch(() => {
+        setIpInfo('error')
+      })
   }, [])
 
+  useEffect(() => {
+    reloadIp()
+  }, [reloadIp])
+
   useEffect(() => {
     chrome.storage.local.get(
       ['locationType', 'configuration', 'timezone', 'locale', 'lat', 'lon'],
@@ -202,9 +213,7 @@ const LocationPage = ({ tab }: LocationPageProps) => {
             }}
             title={ipData?.query}
           >
-            {ipData
-              ? `${getFlagEmoji(ipData.countryCode)} ${ipData?.query}`
-              : 'loading...'}
+            {ipInfo}
           </Box>
           <RotateCw
             size={20}
@@ -212,10 +221,7 @@ const LocationPage = ({ tab }: LocationPageProps) => {
               cursor: 'pointer',
             }}
             onClick={() => {
-              setIpData(undefined)
-              getIp().then((ipDataRes) => {
-                setIpData(ipDataRes)
-              })
+              reloadIp()
             }}
           />
         </Flex>