Refactor Map and CountrySelect components to remove unused imports an…

…d clean up code
GithmiHashara · Sep 13, 2024 · 0c13615 · 0c13615
1 parent 7589a58
commit 0c13615
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 33 deletions.
diff --git a/app/components/Map.tsx b/app/components/Map.tsx
@@ -7,6 +7,7 @@ import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
 import markerIcon from 'leaflet/dist/images/marker-icon.png'
 import markerShadow from 'leaflet/dist/images/marker-shadow.png'
 
+
 // @ts-ignore
 delete L.Icon.Default.prototype._getIconUrl // eslint-disable-line
 L.Icon.Default.mergeOptions({
@@ -16,31 +17,31 @@ L.Icon.Default.mergeOptions({
   shadowUrl: markerShadow.src,
 })
 
+
 interface MapProps {
   center?: number[]
 }
 
+
+
+
+
 const Map: React.FC<MapProps> = ({ center }) => {
   return (
     <MapContainer
-      center={(center as L.LatLngExpression) || [51, -0.09]}
-      zoom={center ? 4 : 2}
-      scrollWheelZoom={false}
-      className="h-[35vh] rounded-lg"
-    >
-      <TileLayer
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-      />
-
-      {/* If a center is provided, add a marker */}
-      {center && (
-        <>
-          {/* Marker is a component that adds a marker to the map */}
-          <Marker position={center as L.LatLngExpression} />
-        </>
-      )}
-    </MapContainer>
+    center={(center as L.LatLngExpression) || [51, -0.09]}
+    zoom={center ? 4 : 2}
+    scrollWheelZoom={false}
+    className="h-[35vh] rounded-lg"
+  >
+    <TileLayer
+      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    />
+
+    {center && <Marker position={center as L.LatLngExpression} />}
+    {/* Marker is a component that adds a marker to the map */}
+  </MapContainer>
   )
 }
 

diff --git a/app/components/inputs/CountrySelect.tsx b/app/components/inputs/CountrySelect.tsx
@@ -1,24 +1,24 @@
 'use client'
 
-import Select from 'react-select'
-import useCountries from '@/app/hooks/useCountries'
-import Image from 'next/image'
+import Select from 'react-select';
+import useCountries from '@/app/hooks/useCountries';
+import Image from 'next/image';
 
 export type CountrySelectValue = {
-  flag: string
-  label: string
-  latlng: number[]
-  region: string
-  value: string
+  flag: string;
+  label: string;
+  latlng: number[];
+  region: string;
+  value: string;
 }
 
 interface CountrySelectProps {
-  value?: CountrySelectValue
-  onChange: (value: CountrySelectValue) => void
+  value?: CountrySelectValue;
+  onChange: (value: CountrySelectValue) => void;
 }
 
 const CountrySelect: React.FC<CountrySelectProps> = ({ value, onChange }) => {
-  const { getAll } = useCountries()
+  const { getAll } = useCountries();
 
   return (
     <div>
@@ -57,13 +57,13 @@ const CountrySelect: React.FC<CountrySelectProps> = ({ value, onChange }) => {
           borderRadius: 6,
           colors: {
             ...theme.colors,
-            primary: '#fcd75f', // if want give black
-            primary25: '#fef3c7', // light yellow for hover (rose colour is #ffe4e6)
+            primary: '#fcd75f',
+            primary25: '#fef3c7',
           },
         })}
       />
     </div>
-  )
+  );
 }
 
-export default CountrySelect
+export default CountrySelect;