refactor the region item component

koyeb · Aug 28, 2024 · 5d5ad4c · 5d5ad4c
1 parent 66839f2
commit 5d5ad4c
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 25 deletions.
diff --git a/src/components/regions-map/regions-map.tsx b/src/components/regions-map/regions-map.tsx
@@ -26,8 +26,8 @@ const regionStyles: Record<string, { position: React.CSSProperties; arrow: Arrow
     arrow: { placement: 'top', left: '40%' },
   },
   tyo: {
-    position: { left: '84%', bottom: '58%' },
-    arrow: { placement: 'bottom', left: '50%' },
+    position: { left: '82%', bottom: '58%' },
+    arrow: { placement: 'bottom', left: '65%' },
   },
   sin: {
     position: { left: '74%', top: '66%' },

diff --git a/src/hooks/region-latency.ts b/src/hooks/region-latency.ts
@@ -35,6 +35,10 @@ export function useRegionLatency(region: CatalogRegion | undefined) {
     },
   });
 
+  if (datacenter === undefined) {
+    return null;
+  }
+
   return data;
 }
 

diff --git a/src/modules/service-creation/steps/02-instance-region/regions-selector.tsx b/src/modules/service-creation/steps/02-instance-region/regions-selector.tsx
@@ -100,23 +100,15 @@ function RegionItem({ selectedInstance, region, selected, onSelected }: RegionIt
     <SelectBox
       type="checkbox"
       disabled={!isAvailable || !isAvailableForInstance}
-      title={
-        <div className="row items-center gap-1">
-          <RegionFlag identifier={region.identifier} className="size-5" />
-          {region.displayName}
-        </div>
-      }
-      description={
-        <div className="whitespace-nowrap">
-          <RegionLatency region={region} />
-        </div>
-      }
+      icon={<RegionFlag identifier={region.identifier} className="size-5" />}
+      title={region.displayName}
+      description={<RegionLatency region={region} />}
       checked={selected}
       onChange={() => onSelected(region.identifier)}
       classes={{
         content: 'col gap-1 p-2',
         title: '!p-0',
-        description: '!p-0',
+        description: 'whitespace-nowrap !p-0',
       }}
     />
   );

diff --git a/src/modules/service-form/sections/05-regions/region-item.tsx b/src/modules/service-form/sections/05-regions/region-item.tsx
@@ -32,17 +32,9 @@ export function RegionItem({ region, classes }: RegionItemProps) {
           type="checkbox"
           value={region.identifier}
           disabled={!isAvailable || !isAvailableForInstance || hasVolumes}
-          title={
-            <div className="row items-center gap-1">
-              <RegionFlag identifier={region.identifier} className="size-5" />
-              {region.displayName}
-            </div>
-          }
-          description={
-            <div className="whitespace-nowrap">
-              <RegionLatency region={region} />
-            </div>
-          }
+          icon={<RegionFlag identifier={region.identifier} className="size-5" />}
+          title={region.displayName}
+          description={<RegionLatency region={region} />}
           checked={value.includes(region.identifier)}
           onChange={(event) => {
             if (selectedInstance === 'free') {
-Original file line number
+Diff line change
@@ Expand Up @@
         },
       });
+      if (datacenter === undefined) {
+        return null;
+      }
       return data;
     }
@@ Expand Down @@