From 28f60b77eb774470cc0ca537b7ed3461d9f414f1 Mon Sep 17 00:00:00 2001
From: Nikolai Berestevich <nikolai.berestevich@regentmarkets.com>
Date: Fri, 14 Jan 2022 15:00:09 +0300
Subject: [PATCH 1/4] nikolai.berestevich/refactoring/map

---
 src/pages/who-we-are/_OurOffices.tsx | 105 +++++--------------
 src/pages/who-we-are/_data.ts        | 148 +++++++++++++++++++++++++++
 2 files changed, 171 insertions(+), 82 deletions(-)

diff --git a/src/pages/who-we-are/_OurOffices.tsx b/src/pages/who-we-are/_OurOffices.tsx
index 0a48d11eff2..35a472f6c2c 100644
--- a/src/pages/who-we-are/_OurOffices.tsx
+++ b/src/pages/who-we-are/_OurOffices.tsx
@@ -6,6 +6,7 @@ import { SectionContainer, CssGrid, Show, Flex } from 'components/containers'
 import { Header, Text, BackgroundImage } from 'components/elements'
 import device from 'themes/device'
 import { ReactComponent as Pin } from 'images/svg/who-we-are/pin.svg'
+import { desktop_pins, mobile_pins, MapPinType } from './_data'
 
 const query = graphql`
     query {
@@ -138,8 +139,7 @@ const StyledFlex = styled(Flex)`
     height: unset;
 `
 
-// eslint-disable-next-line react/prop-types
-const MapPin = ({ top, left, title, link }) => {
+const MapPin = ({ top, left, title, link }: MapPinType) => {
     const [is_pin_show, setPinShow] = React.useState(false)
     return (
         <PinWrapper
@@ -173,89 +173,29 @@ const OurOffices = () => {
             <Flex>
                 <Show.Desktop max_width="tabletL">
                     <MapImage data={data['earth']}>
-                        <MapPin
-                            left="30%"
-                            top="75%"
-                            title="Paraguay"
-                            link="/careers/locations/asuncion"
-                        />
-                        <MapPin
-                            left="50%"
-                            top="39.5%"
-                            title={localize('Malta')}
-                            link="/careers/locations/malta"
-                        />
-                        <MapPin
-                            left="55%"
-                            top="40%"
-                            title={localize('Cyprus')}
-                            link="/careers/locations/cyprus"
-                        />
-                        <MapPin
-                            left="54%"
-                            top="61.5%"
-                            title={localize('Rwanda')}
-                            link="/careers/locations/rwanda"
-                        />
-                        <MapPin
-                            left="54%"
-                            top="27.5%"
-                            title={localize('Belarus')}
-                            link="/careers/locations/minsk"
-                        />
-                        <MapPin
-                            left="61.5%"
-                            top="45.9%"
-                            title={localize('Dubai')}
-                            link="/careers/locations/dubai"
-                        />
-                        <MapPin
-                            left="73.3%"
-                            top="57.5%"
-                            title={localize('Ipoh')}
-                            link="/careers/locations/ipoh"
-                        />
-                        <MapPin
-                            left="74.2%"
-                            top="58.5%"
-                            title={localize('Cyberjaya')}
-                            link="/careers/locations/cyberjaya"
-                        />
-                        <MapPin
-                            left="74.2%"
-                            top="60.6%"
-                            title={localize('Melaka')}
-                            link="/careers/locations/melaka"
-                        />
-                        <MapPin
-                            left="77.2%"
-                            top="58.7%"
-                            title={localize('Labuan')}
-                            link="/careers/locations/labuan"
-                        />
-                        <MapPin
-                            left="45.8%"
-                            top="28%"
-                            title={localize('London')}
-                            link="/careers/locations/london"
-                        />
-                        <MapPin
-                            left="47.4%"
-                            top="30.9%"
-                            title={localize('Paris')}
-                            link="/careers/locations/paris"
-                        />
-                        <MapPin
-                            left="44.5%"
-                            top="30.9%"
-                            title={localize('Guernsey')}
-                            link="/careers/locations/guernsey"
-                        />
+                        {desktop_pins.map((pin) => (
+                            <MapPin
+                                key={pin.title}
+                                left={pin.left}
+                                top={pin.top}
+                                title={pin.title}
+                                link={pin.link}
+                            />
+                        ))}
                     </MapImage>
                 </Show.Desktop>
                 <Show.Mobile min_width="tabletL">
                     <MapImage data={data['earth_mobile']}>
-                        <MapPin
+                        {mobile_pins.map((pin) => (
+                            <MapPin
+                                key={pin.title}
+                                left={pin.left}
+                                top={pin.top}
+                                title={pin.title}
+                                link={pin.link}
+                            />
+                        ))}
+                        {/* <MapPin
                             left="28.5%"
                             top="71%"
                             title="Paraguay"
@@ -285,6 +225,7 @@ const OurOffices = () => {
                             title={localize('Belarus')}
                             link="/careers/locations/minsk"
                         />
+     
                         <MapPin
                             left="60%"
                             top="41.9%"
@@ -332,7 +273,7 @@ const OurOffices = () => {
                             top="26.9%"
                             title={localize('Guernsey')}
                             link="/careers/locations/guernsey"
-                        />
+                        /> */}
                     </MapImage>
                 </Show.Mobile>
             </Flex>
diff --git a/src/pages/who-we-are/_data.ts b/src/pages/who-we-are/_data.ts
index 5c00221a6d5..2fb4616179f 100644
--- a/src/pages/who-we-are/_data.ts
+++ b/src/pages/who-we-are/_data.ts
@@ -89,3 +89,151 @@ export const our_principles: PrincipleType[] = [
         color: 'rgba(119, 160, 198, 0.25)',
     },
 ]
+
+export type MapPinType = {
+    left: string
+    top: string
+    title: string
+    link: string
+}
+export const desktop_pins: MapPinType[] = [
+    { left: '30%', top: '75%', title: localize('Paraguay'), link: '/careers/locations/asuncion' },
+    { left: '50%', top: '39.5%', title: localize('Malta'), link: '/careers/locations/malta' },
+    {
+        left: '55%',
+        top: '40%',
+        title: localize('Cyprus'),
+        link: '/careers/locations/cyprus',
+    },
+    {
+        left: '54%',
+        top: '61.5%',
+        title: localize('Rwanda'),
+        link: '/careers/locations/rwanda',
+    },
+    {
+        left: '54%',
+        top: '27.5%',
+        title: localize('Belarus'),
+        link: '/careers/locations/minsk',
+    },
+    {
+        left: '61.5%',
+        top: '45.9%',
+        title: localize('Dubai'),
+        link: '/careers/locations/dubai',
+    },
+    {
+        left: '73.3%',
+        top: '57.5%',
+        title: localize('Ipoh'),
+        link: '/careers/locations/ipoh',
+    },
+    {
+        left: '74.2%',
+        top: '58.5%',
+        title: localize('Cyberjaya'),
+        link: '/careers/locations/cyberjaya',
+    },
+    {
+        left: '74.2%',
+        top: '60.6%',
+        title: localize('Melaka'),
+        link: '/careers/locations/melaka',
+    },
+    {
+        left: '77.2%',
+        top: '58.7%',
+        title: localize('Labuan'),
+        link: '/careers/locations/labuan',
+    },
+    {
+        left: '45.8%',
+        top: '28%',
+        title: localize('London'),
+        link: '/careers/locations/london',
+    },
+    {
+        left: '47.4%',
+        top: '30.9%',
+        title: localize('Paris'),
+        link: '/careers/locations/paris',
+    },
+    {
+        left: '44.5%',
+        top: '30.9%',
+        title: localize('Guernsey'),
+        link: '/careers/locations/guernsey',
+    },
+]
+
+export const mobile_pins: MapPinType[] = [
+    { left: '28.5%', top: '71%', title: localize('Paraguay'), link: '/careers/locations/asuncion' },
+    { left: '48.5%', top: '35.5%', title: localize('Malta'), link: '/careers/locations/malta' },
+    {
+        left: '53.5%',
+        top: '36%',
+        title: localize('Cyprus'),
+        link: '/careers/locations/cyprus',
+    },
+    {
+        left: '52.5%',
+        top: '57.5%',
+        title: localize('Rwanda'),
+        link: '/careers/locations/rwanda',
+    },
+    {
+        left: '52.5%',
+        top: '23.5%',
+        title: localize('Belarus'),
+        link: '/careers/locations/minsk',
+    },
+    {
+        left: '60%',
+        top: '41.9%',
+        title: localize('Dubai'),
+        link: '/careers/locations/dubai',
+    },
+    {
+        left: '72.3%',
+        top: '51.2%',
+        title: localize('Ipoh'),
+        link: '/careers/locations/ipoh',
+    },
+    {
+        left: '71%',
+        top: '55%',
+        title: localize('Cyberjaya'),
+        link: '/careers/locations/cyberjaya',
+    },
+    {
+        left: '73%',
+        top: '56.7%',
+        title: localize('Melaka'),
+        link: '/careers/locations/melaka',
+    },
+    {
+        left: '76%',
+        top: '54.7%',
+        title: localize('Labuan'),
+        link: '/careers/locations/labuan',
+    },
+    {
+        left: '44.3%',
+        top: '24%',
+        title: localize('London'),
+        link: '/careers/locations/london',
+    },
+    {
+        left: '45.9%',
+        top: '26.9%',
+        title: localize('Paris'),
+        link: '/careers/locations/paris',
+    },
+    {
+        left: '43%',
+        top: '26.9%',
+        title: localize('Guernsey'),
+        link: '/careers/locations/guernsey',
+    },
+]

From b90e33cfb05f55fc779da780e6dee8621d7942e1 Mon Sep 17 00:00:00 2001
From: Nikolai Berestevich <nikolai.berestevich@regentmarkets.com>
Date: Fri, 14 Jan 2022 15:01:27 +0300
Subject: [PATCH 2/4] nikolai.berestevich/refactoring/map

---
 src/pages/who-we-are/_data.ts | 21 +++------------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/pages/who-we-are/_data.ts b/src/pages/who-we-are/_data.ts
index 2fb4616179f..e4cec317f3c 100644
--- a/src/pages/who-we-are/_data.ts
+++ b/src/pages/who-we-are/_data.ts
@@ -99,24 +99,9 @@ export type MapPinType = {
 export const desktop_pins: MapPinType[] = [
     { left: '30%', top: '75%', title: localize('Paraguay'), link: '/careers/locations/asuncion' },
     { left: '50%', top: '39.5%', title: localize('Malta'), link: '/careers/locations/malta' },
-    {
-        left: '55%',
-        top: '40%',
-        title: localize('Cyprus'),
-        link: '/careers/locations/cyprus',
-    },
-    {
-        left: '54%',
-        top: '61.5%',
-        title: localize('Rwanda'),
-        link: '/careers/locations/rwanda',
-    },
-    {
-        left: '54%',
-        top: '27.5%',
-        title: localize('Belarus'),
-        link: '/careers/locations/minsk',
-    },
+    { left: '55%', top: '40%', title: localize('Cyprus'), link: '/careers/locations/cyprus' },
+    { left: '54%', top: '61.5%', title: localize('Rwanda'), link: '/careers/locations/rwanda' },
+    { left: '54%', top: '27.5%', title: localize('Belarus'), link: '/careers/locations/minsk' },
     {
         left: '61.5%',
         top: '45.9%',

From 6a43a053928d85b1fa65d518fae3fe0cb16423cb Mon Sep 17 00:00:00 2001
From: Nikolai Berestevich <nikolai.berestevich@regentmarkets.com>
Date: Fri, 14 Jan 2022 15:22:53 +0300
Subject: [PATCH 3/4] nikolai.berestevich/refactoring/map

---
 src/pages/who-we-are/_data.ts | 119 +++++-----------------------------
 1 file changed, 17 insertions(+), 102 deletions(-)

diff --git a/src/pages/who-we-are/_data.ts b/src/pages/who-we-are/_data.ts
index e4cec317f3c..671952ba023 100644
--- a/src/pages/who-we-are/_data.ts
+++ b/src/pages/who-we-are/_data.ts
@@ -102,48 +102,18 @@ export const desktop_pins: MapPinType[] = [
     { left: '55%', top: '40%', title: localize('Cyprus'), link: '/careers/locations/cyprus' },
     { left: '54%', top: '61.5%', title: localize('Rwanda'), link: '/careers/locations/rwanda' },
     { left: '54%', top: '27.5%', title: localize('Belarus'), link: '/careers/locations/minsk' },
-    {
-        left: '61.5%',
-        top: '45.9%',
-        title: localize('Dubai'),
-        link: '/careers/locations/dubai',
-    },
-    {
-        left: '73.3%',
-        top: '57.5%',
-        title: localize('Ipoh'),
-        link: '/careers/locations/ipoh',
-    },
+    { left: '61.5%', top: '45.9%', title: localize('Dubai'), link: '/careers/locations/dubai' },
+    { left: '73.3%', top: '57.5%', title: localize('Ipoh'), link: '/careers/locations/ipoh' },
     {
         left: '74.2%',
         top: '58.5%',
         title: localize('Cyberjaya'),
         link: '/careers/locations/cyberjaya',
     },
-    {
-        left: '74.2%',
-        top: '60.6%',
-        title: localize('Melaka'),
-        link: '/careers/locations/melaka',
-    },
-    {
-        left: '77.2%',
-        top: '58.7%',
-        title: localize('Labuan'),
-        link: '/careers/locations/labuan',
-    },
-    {
-        left: '45.8%',
-        top: '28%',
-        title: localize('London'),
-        link: '/careers/locations/london',
-    },
-    {
-        left: '47.4%',
-        top: '30.9%',
-        title: localize('Paris'),
-        link: '/careers/locations/paris',
-    },
+    { left: '74.2%', top: '60.6%', title: localize('Melaka'), link: '/careers/locations/melaka' },
+    { left: '77.2%', top: '58.7%', title: localize('Labuan'), link: '/careers/locations/labuan' },
+    { left: '45.8%', top: '28%', title: localize('London'), link: '/careers/locations/london' },
+    { left: '47.4%', top: '30.9%', title: localize('Paris'), link: '/careers/locations/paris' },
     {
         left: '44.5%',
         top: '30.9%',
@@ -155,70 +125,15 @@ export const desktop_pins: MapPinType[] = [
 export const mobile_pins: MapPinType[] = [
     { left: '28.5%', top: '71%', title: localize('Paraguay'), link: '/careers/locations/asuncion' },
     { left: '48.5%', top: '35.5%', title: localize('Malta'), link: '/careers/locations/malta' },
-    {
-        left: '53.5%',
-        top: '36%',
-        title: localize('Cyprus'),
-        link: '/careers/locations/cyprus',
-    },
-    {
-        left: '52.5%',
-        top: '57.5%',
-        title: localize('Rwanda'),
-        link: '/careers/locations/rwanda',
-    },
-    {
-        left: '52.5%',
-        top: '23.5%',
-        title: localize('Belarus'),
-        link: '/careers/locations/minsk',
-    },
-    {
-        left: '60%',
-        top: '41.9%',
-        title: localize('Dubai'),
-        link: '/careers/locations/dubai',
-    },
-    {
-        left: '72.3%',
-        top: '51.2%',
-        title: localize('Ipoh'),
-        link: '/careers/locations/ipoh',
-    },
-    {
-        left: '71%',
-        top: '55%',
-        title: localize('Cyberjaya'),
-        link: '/careers/locations/cyberjaya',
-    },
-    {
-        left: '73%',
-        top: '56.7%',
-        title: localize('Melaka'),
-        link: '/careers/locations/melaka',
-    },
-    {
-        left: '76%',
-        top: '54.7%',
-        title: localize('Labuan'),
-        link: '/careers/locations/labuan',
-    },
-    {
-        left: '44.3%',
-        top: '24%',
-        title: localize('London'),
-        link: '/careers/locations/london',
-    },
-    {
-        left: '45.9%',
-        top: '26.9%',
-        title: localize('Paris'),
-        link: '/careers/locations/paris',
-    },
-    {
-        left: '43%',
-        top: '26.9%',
-        title: localize('Guernsey'),
-        link: '/careers/locations/guernsey',
-    },
+    { left: '53.5%', top: '36%', title: localize('Cyprus'), link: '/careers/locations/cyprus' },
+    { left: '52.5%', top: '57.5%', title: localize('Rwanda'), link: '/careers/locations/rwanda' },
+    { left: '52.5%', top: '23.5%', title: localize('Belarus'), link: '/careers/locations/minsk' },
+    { left: '60%', top: '41.9%', title: localize('Dubai'), link: '/careers/locations/dubai' },
+    { left: '72.3%', top: '51.2%', title: localize('Ipoh'), link: '/careers/locations/ipoh' },
+    { left: '71%', top: '55%', title: localize('Cyberjaya'), link: '/careers/locations/cyberjaya' },
+    { left: '73%', top: '56.7%', title: localize('Melaka'), link: '/careers/locations/melaka' },
+    { left: '76%', top: '54.7%', title: localize('Labuan'), link: '/careers/locations/labuan' },
+    { left: '44.3%', top: '24%', title: localize('London'), link: '/careers/locations/london' },
+    { left: '45.9%', top: '26.9%', title: localize('Paris'), link: '/careers/locations/paris' },
+    { left: '43%', top: '26.9%', title: localize('Guernsey'), link: '/careers/locations/guernsey' },
 ]

From 77a898ef189e8146a3fb4bc51eadc99d95ad1ce4 Mon Sep 17 00:00:00 2001
From: Nikolai Berestevich <nikolai.berestevich@regentmarkets.com>
Date: Fri, 14 Jan 2022 15:27:27 +0300
Subject: [PATCH 4/4] nikolai.berestevich/refactoring/map

---
 src/pages/who-we-are/_OurOffices.tsx | 79 ----------------------------
 src/pages/who-we-are/_data.ts        |  1 +
 2 files changed, 1 insertion(+), 79 deletions(-)

diff --git a/src/pages/who-we-are/_OurOffices.tsx b/src/pages/who-we-are/_OurOffices.tsx
index 35a472f6c2c..4eecb38eff1 100644
--- a/src/pages/who-we-are/_OurOffices.tsx
+++ b/src/pages/who-we-are/_OurOffices.tsx
@@ -195,85 +195,6 @@ const OurOffices = () => {
                                 link={pin.link}
                             />
                         ))}
-                        {/* <MapPin
-                            left="28.5%"
-                            top="71%"
-                            title="Paraguay"
-                            link="/careers/locations/asuncion"
-                        />
-                        <MapPin
-                            left="48.5%"
-                            top="35.5%"
-                            title={localize('Malta')}
-                            link="/careers/locations/malta"
-                        />
-                        <MapPin
-                            left="53.5%"
-                            top="36%"
-                            title={localize('Cyprus')}
-                            link="/careers/locations/cyprus"
-                        />
-                        <MapPin
-                            left="52.5%"
-                            top="57.5%"
-                            title={localize('Rwanda')}
-                            link="/careers/locations/rwanda"
-                        />
-                        <MapPin
-                            left="52.5%"
-                            top="23.5%"
-                            title={localize('Belarus')}
-                            link="/careers/locations/minsk"
-                        />
-     
-                        <MapPin
-                            left="60%"
-                            top="41.9%"
-                            title={localize('Dubai')}
-                            link="/careers/locations/dubai"
-                        />
-                        <MapPin
-                            left="72.3%"
-                            top="51.2%"
-                            title={localize('Ipoh')}
-                            link="/careers/locations/ipoh"
-                        />
-                        <MapPin
-                            left="71%"
-                            top="55%"
-                            title={localize('Cyberjaya')}
-                            link="/careers/locations/cyberjaya"
-                        />
-                        <MapPin
-                            left="73%"
-                            top="56.7%"
-                            title={localize('Melaka')}
-                            link="/careers/locations/melaka"
-                        />
-                        <MapPin
-                            left="76%"
-                            top="54.7%"
-                            title={localize('Labuan')}
-                            link="/careers/locations/labuan"
-                        />
-                        <MapPin
-                            left="44.3%"
-                            top="24%"
-                            title={localize('London')}
-                            link="/careers/locations/london"
-                        />
-                        <MapPin
-                            left="45.9%"
-                            top="26.9%"
-                            title={localize('Paris')}
-                            link="/careers/locations/paris"
-                        />
-                        <MapPin
-                            left="43%"
-                            top="26.9%"
-                            title={localize('Guernsey')}
-                            link="/careers/locations/guernsey"
-                        /> */}
                     </MapImage>
                 </Show.Mobile>
             </Flex>
diff --git a/src/pages/who-we-are/_data.ts b/src/pages/who-we-are/_data.ts
index 671952ba023..e12168950ef 100644
--- a/src/pages/who-we-are/_data.ts
+++ b/src/pages/who-we-are/_data.ts
@@ -96,6 +96,7 @@ export type MapPinType = {
     title: string
     link: string
 }
+
 export const desktop_pins: MapPinType[] = [
     { left: '30%', top: '75%', title: localize('Paraguay'), link: '/careers/locations/asuncion' },
     { left: '50%', top: '39.5%', title: localize('Malta'), link: '/careers/locations/malta' },