From d66ebdc7ada5e252fe4a5928dfbb869613451685 Mon Sep 17 00:00:00 2001
From: Taher <taher.dasten@gmail.com>
Date: Mon, 27 Sep 2021 20:21:40 -0700
Subject: [PATCH] Get region list from vpn service to webui

---
 .storybook/BUILD.gn                           |  5 +-
 components/brave_vpn/BUILD.gn                 |  1 -
 components/brave_vpn/brave_vpn.mojom          | 14 +--
 .../brave_vpn/brave_vpn_service_desktop.cc    |  7 ++
 components/brave_vpn/resources/panel/BUILD.gn | 21 -----
 .../resources/panel/api/panel_browser_api.ts  |  7 ++
 .../resources/panel/api/region_interface.ts   | 10 +++
 .../panel/{ => api}/vpn_panel_api_proxy.d.ts  | 20 ++++-
 .../panel/{ => api}/vpn_panel_api_proxy.js    | 12 +++
 .../panel/components/error-panel/index.tsx    |  7 +-
 .../panel/components/main-panel/index.tsx     |  8 +-
 .../components/select-region-list/index.tsx   | 75 ++++++++++++++++
 .../style.ts                                  | 12 ++-
 .../panel/components/select-region/index.tsx  | 61 -------------
 .../components/status-indicator/index.tsx     |  2 +-
 .../resources/panel/constants/locale.ts       |  1 +
 .../brave_vpn/resources/panel/container.tsx   | 89 ++++++++++++++++---
 .../panel/stories/component-panel.tsx         | 42 +++++++--
 .../panel/stories/mock-data/region-list.ts    | 71 +++++++++++++++
 .../resources/panel/types/connection_state.ts |  7 --
 .../brave_vpn/resources/panel/vpn_panel.tsx   |  2 +-
 components/brave_vpn/resources/tsconfig.json  |  9 ++
 22 files changed, 353 insertions(+), 130 deletions(-)
 create mode 100644 components/brave_vpn/resources/panel/api/panel_browser_api.ts
 create mode 100644 components/brave_vpn/resources/panel/api/region_interface.ts
 rename components/brave_vpn/resources/panel/{ => api}/vpn_panel_api_proxy.d.ts (55%)
 rename components/brave_vpn/resources/panel/{ => api}/vpn_panel_api_proxy.js (91%)
 create mode 100644 components/brave_vpn/resources/panel/components/select-region-list/index.tsx
 rename components/brave_vpn/resources/panel/components/{select-region => select-region-list}/style.ts (88%)
 delete mode 100644 components/brave_vpn/resources/panel/components/select-region/index.tsx
 create mode 100644 components/brave_vpn/resources/panel/stories/mock-data/region-list.ts
 delete mode 100644 components/brave_vpn/resources/panel/types/connection_state.ts
 create mode 100644 components/brave_vpn/resources/tsconfig.json

diff --git a/.storybook/BUILD.gn b/.storybook/BUILD.gn
index 32fa646da939..0d0411f1a41a 100644
--- a/.storybook/BUILD.gn
+++ b/.storybook/BUILD.gn
@@ -10,5 +10,8 @@ group("storybook") {
   # Explicitly defined here so that even when those targets
   # are disabled in a regular brave build due to build flags,
   # they will be generated before storybook is compiled.
-  deps = [ "//ui/webui/resources/js:cr.m" ]
+  deps = [
+    "//brave/components/brave_vpn:mojom_js",
+    "//ui/webui/resources/js:cr.m",
+  ]
 }
diff --git a/components/brave_vpn/BUILD.gn b/components/brave_vpn/BUILD.gn
index 533ffb4dcd13..db824470887a 100644
--- a/components/brave_vpn/BUILD.gn
+++ b/components/brave_vpn/BUILD.gn
@@ -11,7 +11,6 @@ preprocess_folder = "preprocessed"
 preprocess_mojo_manifest = "preprocessed_mojo_manifest.json"
 
 static_library("brave_vpn") {
-  assert(enable_brave_vpn)
   sources = [
     "brave_vpn_service.cc",
     "brave_vpn_service.h",
diff --git a/components/brave_vpn/brave_vpn.mojom b/components/brave_vpn/brave_vpn.mojom
index 1bdee69b417e..6a8cb8ea9aec 100644
--- a/components/brave_vpn/brave_vpn.mojom
+++ b/components/brave_vpn/brave_vpn.mojom
@@ -29,12 +29,6 @@ interface ServiceObserver {
   OnPurchasedStateChanged(PurchasedState state);
 };
 
-struct Region {
-  string continent;
-  string name;
-  string name_pretty;
-};
-
 // Browser-side handler for vpn service things
 interface ServiceHandler {
   GetConnectionState() => (ConnectionState state);
@@ -43,7 +37,9 @@ interface ServiceHandler {
   CreateVPNConnection();
   Connect();
   Disconnect();
+  // Gets all region from internal cache which is fetched from Guardian API
   GetAllRegions() => (array<Region> regions);
+  // Gets region based on user's device timezone
   GetDeviceRegion() => (Region device_region);
   GetSelectedRegion() => (Region current_region);
   SetSelectedRegion(Region region);
@@ -73,3 +69,9 @@ enum PurchasedState {
   PURCHASED,
   EXPIRED,
 };
+
+struct Region {
+  string continent;
+  string name;
+  string name_pretty;
+};
diff --git a/components/brave_vpn/brave_vpn_service_desktop.cc b/components/brave_vpn/brave_vpn_service_desktop.cc
index 407718401ffd..5ddfe9e6c79f 100644
--- a/components/brave_vpn/brave_vpn_service_desktop.cc
+++ b/components/brave_vpn/brave_vpn_service_desktop.cc
@@ -295,6 +295,13 @@ bool BraveVpnServiceDesktop::ParseAndCacheRegionList(base::Value region_value) {
     regions_.push_back(region);
   }
 
+  // Sort region list alphabetically
+  std::sort(regions_.begin(), regions_.end(),
+            [](brave_vpn::mojom::Region& a, brave_vpn::mojom::Region& b) {
+              return (a.name_pretty < b.name_pretty);
+            });
+
+  // If we can't get region list, we can't determine device region.
   if (regions_.empty())
     return false;
 
diff --git a/components/brave_vpn/resources/panel/BUILD.gn b/components/brave_vpn/resources/panel/BUILD.gn
index e51d430668c7..c20ed011d866 100644
--- a/components/brave_vpn/resources/panel/BUILD.gn
+++ b/components/brave_vpn/resources/panel/BUILD.gn
@@ -5,10 +5,6 @@
 
 import("//brave/components/common/typescript.gni")
 import("//mojo/public/tools/bindings/mojom.gni")
-import("//tools/grit/preprocess_if_expr.gni")
-
-preprocess_folder = "preprocessed"
-preprocess_panel_manifest = "preprocessed_panel_manifest.json"
 
 transpile_web_ui("brave_vpn_panel_ui") {
   entry_points = [ [
@@ -17,8 +13,6 @@ transpile_web_ui("brave_vpn_panel_ui") {
       ] ]
   resource_name = "brave_vpn_panel"
   deps = [
-    ":preprocess_panel",
-    ":vpn_panel_api_proxy",
     "//brave/components/brave_vpn:mojom_js",
     "//brave/components/brave_vpn:preprocess_mojo",
   ]
@@ -29,18 +23,3 @@ pack_web_resources("brave_vpn_panel_generated") {
   output_dir = "$root_gen_dir/brave/components/brave_vpn/resources/panel"
   deps = [ ":brave_vpn_panel_ui" ]
 }
-
-preprocess_if_expr("preprocess_panel") {
-  in_folder = "./"
-  out_folder = "$target_gen_dir/$preprocess_folder"
-  out_manifest = "$target_gen_dir/$preprocess_panel_manifest"
-  in_files = [ "vpn_panel_api_proxy.js" ]
-}
-
-js_library("vpn_panel_api_proxy") {
-  deps = [
-    "//brave/components/brave_vpn:mojom_js_library_for_compile",
-    "//ui/webui/resources/js:cr.m",
-    "//url/mojom:url_mojom_gurl_js_library_for_compile",
-  ]
-}
diff --git a/components/brave_vpn/resources/panel/api/panel_browser_api.ts b/components/brave_vpn/resources/panel/api/panel_browser_api.ts
new file mode 100644
index 000000000000..544cbbcdbd4f
--- /dev/null
+++ b/components/brave_vpn/resources/panel/api/panel_browser_api.ts
@@ -0,0 +1,7 @@
+// Copyright (c) 2021 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+// Provide access to all the generated types
+export * from 'gen/brave/components/brave_vpn/brave_vpn.mojom.m.js'
diff --git a/components/brave_vpn/resources/panel/api/region_interface.ts b/components/brave_vpn/resources/panel/api/region_interface.ts
new file mode 100644
index 000000000000..9da3a0affb3f
--- /dev/null
+++ b/components/brave_vpn/resources/panel/api/region_interface.ts
@@ -0,0 +1,10 @@
+export interface Region {
+  continent: string
+  name: string
+  namePretty: string
+}
+export interface RegionState {
+  all?: Array<Region>,
+  current?: Region,
+  hasError: boolean
+}
diff --git a/components/brave_vpn/resources/panel/vpn_panel_api_proxy.d.ts b/components/brave_vpn/resources/panel/api/vpn_panel_api_proxy.d.ts
similarity index 55%
rename from components/brave_vpn/resources/panel/vpn_panel_api_proxy.d.ts
rename to components/brave_vpn/resources/panel/api/vpn_panel_api_proxy.d.ts
index 3abf3ee5c997..9ec01aa305f7 100644
--- a/components/brave_vpn/resources/panel/vpn_panel_api_proxy.d.ts
+++ b/components/brave_vpn/resources/panel/api/vpn_panel_api_proxy.d.ts
@@ -2,7 +2,9 @@
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
 // you can obtain one at http://mozilla.org/MPL/2.0/.
-import { ConnectionState } from './types/connection_state'
+import { ConnectionState } from './panel_browser_api'
+import { Region } from './region_interface'
+
 export default class APIProxy {
   static getInstance: () => APIProxy
   showUI: () => {}
@@ -12,12 +14,22 @@ export default class APIProxy {
   connect: () => {}
   disconnect: () => {}
   addVPNObserver: (obj: ServiceObserver) => {}
+  getAllRegions: () => Promise<RegionResponse>
+  getSelectedRegion: () => Promise<DeviceRegionResponse>
+  setSelectedRegion: (region: Region) => {}
 }
 interface ServiceObserver {
-  onConnectionCreated?: Function
-  onConnectionRemoved?: Function
-  onConnectionStateChanged?: Function
+  onConnectionCreated: Function
+  onConnectionRemoved: Function
+  onConnectionStateChanged: Function
+  onPurchasedStateChanged: Function
 }
 interface StateResponse {
   state: ConnectionState
 }
+interface RegionResponse {
+  regions: Array<Region>
+}
+interface DeviceRegionResponse {
+  currentRegion: Region
+}
diff --git a/components/brave_vpn/resources/panel/vpn_panel_api_proxy.js b/components/brave_vpn/resources/panel/api/vpn_panel_api_proxy.js
similarity index 91%
rename from components/brave_vpn/resources/panel/vpn_panel_api_proxy.js
rename to components/brave_vpn/resources/panel/api/vpn_panel_api_proxy.js
index a53005ebf270..ef55f461978b 100644
--- a/components/brave_vpn/resources/panel/vpn_panel_api_proxy.js
+++ b/components/brave_vpn/resources/panel/api/vpn_panel_api_proxy.js
@@ -63,6 +63,18 @@ export default class VpnPanelApiProxyImpl {
     return this.vpnService.disconnect();
   }
 
+  getAllRegions() {
+    return this.vpnService.getAllRegions();
+  }
+
+  getSelectedRegion() {
+    return this.vpnService.getSelectedRegion();
+  }
+
+  setSelectedRegion(region) {
+    return this.vpnService.setSelectedRegion(region);
+  }
+
   addVPNObserver(obj) {
     const serviceObserverReceiver = new braveVpn.mojom.ServiceObserverReceiver(obj)
     this.vpnService.addObserver(serviceObserverReceiver.$.bindNewPipeAndPassRemote())
diff --git a/components/brave_vpn/resources/panel/components/error-panel/index.tsx b/components/brave_vpn/resources/panel/components/error-panel/index.tsx
index b0cb912f519a..6d9e8efb5955 100644
--- a/components/brave_vpn/resources/panel/components/error-panel/index.tsx
+++ b/components/brave_vpn/resources/panel/components/error-panel/index.tsx
@@ -3,11 +3,11 @@ import * as S from './style'
 import { Button } from 'brave-ui'
 import { AlertCircleIcon } from 'brave-ui/components/icons'
 import locale from '../../constants/locale'
-
+import { RegionState } from '../../api/region_interface'
 interface Props {
   onTryAgainClick: Function
   onChooseServerClick: Function
-  region: string
+  region: RegionState
 }
 
 function ErrorPanel (props: Props) {
@@ -21,7 +21,8 @@ function ErrorPanel (props: Props) {
           <AlertCircleIcon color='#84889C' />
         </S.IconBox>
         <S.ReasonTitle>{locale.cantConnectError}</S.ReasonTitle>
-        <S.ReasonDesc>Brave Firewall + VPN couldn't connect to the {props.region} server.
+        <S.ReasonDesc>Brave Firewall + VPN couldn't connect to the{' '}
+          {props.region?.current?.namePretty} server.
           You can try again, or choose another.</S.ReasonDesc>
         <S.ActionArea>
             <Button
diff --git a/components/brave_vpn/resources/panel/components/main-panel/index.tsx b/components/brave_vpn/resources/panel/components/main-panel/index.tsx
index 83da58139dfc..75b6ec787676 100644
--- a/components/brave_vpn/resources/panel/components/main-panel/index.tsx
+++ b/components/brave_vpn/resources/panel/components/main-panel/index.tsx
@@ -4,12 +4,12 @@ import StatusIndicator from '../../components/status-indicator'
 import PanelBox from '../../components/panel-box'
 import Toggle from '../../components/toggle'
 import { SettingsAdvancedIcon, CaratStrongRightIcon } from 'brave-ui/components/icons'
-import { ConnectionState } from '../../types/connection_state'
-
+import { ConnectionState } from '../../api/panel_browser_api'
+import { Region } from '../../api/region_interface'
 interface Props {
   isOn: boolean
   status: ConnectionState
-  region: string
+  region: Region
   onToggleClick: () => void
   onSelectRegionButtonClick: () => void
 }
@@ -41,7 +41,7 @@ function MainPanel (props: Props) {
           type='button'
           onClick={props.onSelectRegionButtonClick}
         >
-          <S.RegionLabel>{props.region}</S.RegionLabel>
+          <S.RegionLabel>{props.region.namePretty}</S.RegionLabel>
           <CaratStrongRightIcon />
         </S.RegionSelectorButton>
       </S.PanelContent>
diff --git a/components/brave_vpn/resources/panel/components/select-region-list/index.tsx b/components/brave_vpn/resources/panel/components/select-region-list/index.tsx
new file mode 100644
index 000000000000..9c573ba08d4f
--- /dev/null
+++ b/components/brave_vpn/resources/panel/components/select-region-list/index.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react'
+import * as S from './style'
+import { Button, Radio } from 'brave-ui'
+import { CaratStrongLeftIcon } from 'brave-ui/components/icons'
+import { Region } from '../../api/region_interface'
+import locale from '../../constants/locale'
+interface Props {
+  onDone: Function
+  onRegionClick: Function
+  onConnectClick: Function
+  regions: Array<Region>
+  selectedRegion: Region
+}
+
+function SelectRegion (props: Props) {
+  // TODO(nullhook): Scroll to the selected radio input when this component loads
+  // TODO(nullhook): Add search region functionality
+  const handleGoBackClick = () => {
+    props.onDone()
+  }
+
+  const handleItemClick = (currentRegion: Region) => {
+    props.onRegionClick(currentRegion)
+  }
+
+  const handleConnect = () => {
+    props.onConnectClick()
+  }
+
+  return (
+    <S.Box>
+      <S.PanelContent>
+        <S.PanelHeader>
+          <S.BackButton
+            type='button'
+            onClick={handleGoBackClick}
+          >
+            <CaratStrongLeftIcon />
+          </S.BackButton>
+        </S.PanelHeader>
+        <S.RegionList>
+          <Radio
+            value={{ [props.selectedRegion.name]: true }}
+            size={'small'}
+            disabled={false}
+          >
+            {props.regions.map((entry: Region, i: number) => (
+              <div
+                key={i}
+                data-value={entry.name}
+              >
+                <S.RegionLabel
+                  onClick={handleItemClick.bind(this, entry)}
+                >
+                  {entry.namePretty}
+                </S.RegionLabel>
+              </div>
+            ))}
+          </Radio>
+        </S.RegionList>
+        <S.ActionArea>
+          <Button
+            onClick={handleConnect}
+            level='primary'
+            type='accent'
+            brand='rewards'
+            text={locale.connectLabel}
+          />
+        </S.ActionArea>
+      </S.PanelContent>
+    </S.Box>
+  )
+}
+
+export default SelectRegion
diff --git a/components/brave_vpn/resources/panel/components/select-region/style.ts b/components/brave_vpn/resources/panel/components/select-region-list/style.ts
similarity index 88%
rename from components/brave_vpn/resources/panel/components/select-region/style.ts
rename to components/brave_vpn/resources/panel/components/select-region-list/style.ts
index 8465bcc1e047..d31e5b1b1444 100644
--- a/components/brave_vpn/resources/panel/components/select-region/style.ts
+++ b/components/brave_vpn/resources/panel/components/select-region-list/style.ts
@@ -18,7 +18,7 @@ export const PanelHeader = styled.section`
 `
 
 export const PanelContent = styled.section`
-  padding: 0 0 25px 0;
+  padding: 0 0 24px 0;
 `
 
 export const RegionList = styled.div`
@@ -66,3 +66,13 @@ export const BackButton = styled.button`
     fill: ${(p) => p.theme.color.interactive05}
   }
 `
+
+export const ActionArea = styled.div`
+  box-sizing: border-box;
+  width: 100%;
+  padding: 18px 18px 0 18px;
+
+  button {
+    width: 100%;
+  }
+`
diff --git a/components/brave_vpn/resources/panel/components/select-region/index.tsx b/components/brave_vpn/resources/panel/components/select-region/index.tsx
deleted file mode 100644
index 51c77f13d3f1..000000000000
--- a/components/brave_vpn/resources/panel/components/select-region/index.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from 'react'
-import * as S from './style'
-import { Radio } from 'brave-ui'
-import { CaratStrongLeftIcon } from 'brave-ui/components/icons'
-
-// TODO(nullhook): Fetch from the service api
-const data = [
-  { region: 'United States' },
-  { region: 'Japan' },
-  { region: 'Thailand' },
-  { region: 'United Kingdom' },
-  { region: 'India' },
-  { region: 'Vietnam' },
-  { region: 'Hong Kong' },
-  { region: 'France' },
-  { region: 'Italy' },
-  { region: 'Vietnam' },
-  { region: 'Hong Kong' },
-  { region: 'France' },
-  { region: 'Italy' }
-]
-
-interface Props {
-  onDone: Function
-}
-
-function SelectRegion (props: Props) {
-  const handleClick = () => {
-    props.onDone()
-  }
-
-  return (
-    <S.Box>
-      <S.PanelContent>
-        <S.PanelHeader>
-          <S.BackButton
-            type='button'
-            onClick={handleClick}
-          >
-            <CaratStrongLeftIcon />
-          </S.BackButton>
-        </S.PanelHeader>
-        <S.RegionList>
-          <Radio
-            value={{ 'Japan': true }}
-            size={'small'}
-            disabled={false}
-          >
-            {data.map((entry, i) => (
-              <div key={i} data-value={entry.region}>
-                <S.RegionLabel>{entry.region}</S.RegionLabel>
-              </div>
-            ))}
-          </Radio>
-        </S.RegionList>
-      </S.PanelContent>
-    </S.Box>
-  )
-}
-
-export default SelectRegion
diff --git a/components/brave_vpn/resources/panel/components/status-indicator/index.tsx b/components/brave_vpn/resources/panel/components/status-indicator/index.tsx
index 2f83c3ff5fed..cefc3a673fdd 100644
--- a/components/brave_vpn/resources/panel/components/status-indicator/index.tsx
+++ b/components/brave_vpn/resources/panel/components/status-indicator/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as S from './style'
 import locale from '../../constants/locale'
-import { ConnectionState } from '../../types/connection_state'
+import { ConnectionState } from '../../api/panel_browser_api'
 import { LoaderIcon } from 'brave-ui/components/icons'
 interface Props {
   status: ConnectionState
diff --git a/components/brave_vpn/resources/panel/constants/locale.ts b/components/brave_vpn/resources/panel/constants/locale.ts
index fa185734a4bd..01fe002a58ca 100644
--- a/components/brave_vpn/resources/panel/constants/locale.ts
+++ b/components/brave_vpn/resources/panel/constants/locale.ts
@@ -1,4 +1,5 @@
 const locale = {
+  connectLabel: 'Connect',
   connectedLabel: 'Connected',
   disconnectedLabel: 'Disconnected',
   connectingLabel: 'Connecting',
diff --git a/components/brave_vpn/resources/panel/container.tsx b/components/brave_vpn/resources/panel/container.tsx
index 2ec0bb75a6dc..5f7d91df012c 100644
--- a/components/brave_vpn/resources/panel/container.tsx
+++ b/components/brave_vpn/resources/panel/container.tsx
@@ -1,18 +1,24 @@
 import * as React from 'react'
-import SelectRegion from './components/select-region'
+import SelectRegionList from './components/select-region-list'
 import MainPanel from './components/main-panel'
 import ErrorPanel from './components/error-panel'
-import apiProxy from './vpn_panel_api_proxy.js'
-import { ConnectionState } from './types/connection_state'
+import apiProxy from './api/vpn_panel_api_proxy.js'
+import { ConnectionState } from './api/panel_browser_api'
+import { RegionState, Region } from './api/region_interface'
 
 function Main () {
   const [isOn, setOn] = React.useState(false)
   const [isSelectingRegion, setSelectingRegion] = React.useState(false)
   const [hasError, setHasError] = React.useState(false)
   const [status, setStatus] = React.useState<ConnectionState>(ConnectionState.DISCONNECTED)
+  const [region, setRegion] = React.useState<RegionState>({
+    all: undefined,
+    current: undefined,
+    hasError: false
+  })
 
+  // VPN api actions should be performed on user interactions only
   const handleToggleClick = () => {
-    // VPN actions should be performed on user interactions
     setOn(prevState => {
       const newState = !prevState
       if (newState) apiProxy.getInstance().connect()
@@ -21,6 +27,12 @@ function Main () {
     })
   }
 
+  const handleTryAgain = () => {
+    setHasError(false)
+    setOn(true)
+    apiProxy.getInstance().connect()
+  }
+
   const handleSelectRegionButtonClick = () => setSelectingRegion(true)
 
   const resetUI = (state: boolean) => {
@@ -35,21 +47,32 @@ function Main () {
     setSelectingRegion(false)
   }
 
-  const handleTryAgain = () => {
-    setHasError(false)
+  const handleConnectClick = async () => {
+    if (!region.current) return
+    setSelectingRegion(false)
+    // TODO(nullhook): If same region is being selected then connect shouldn't
+    // be triggered
+    apiProxy.getInstance().setSelectedRegion(region.current)
     setOn(true)
     apiProxy.getInstance().connect()
   }
 
+  const handleRegionItemClick = async (currentRegion: Region) => {
+    setRegion(prevState => ({
+      ...prevState,
+      current: currentRegion
+    }))
+  }
+
   React.useEffect(() => {
-    const visibilityChangedListener = () => {
+    const onVisibilityChange = () => {
       if (document.visibilityState === 'visible') {
         resetUI(hasError)
         apiProxy.getInstance().showUI()
       }
     }
 
-    document.addEventListener('visibilitychange', visibilityChangedListener)
+    document.addEventListener('visibilitychange', onVisibilityChange)
 
     apiProxy.getInstance().addVPNObserver({
       onConnectionCreated: () => {/**/},
@@ -61,15 +84,17 @@ function Main () {
         }
 
         setStatus(state)
-      }
+      },
+      onPurchasedStateChanged: () => {/**/}
     })
 
     return () => {
-      document.removeEventListener('visibilitychange', visibilityChangedListener)
+      document.removeEventListener('visibilitychange', onVisibilityChange)
     }
   }, [hasError])
 
   React.useEffect(() => {
+    // All initial data must be loaded and set in this effect
     const getInitialState = async () => {
       const res = await apiProxy.getInstance().getConnectionState()
       setOn(res.state === ConnectionState.CONNECTED
@@ -78,11 +103,45 @@ function Main () {
       if (res.state !== ConnectionState.CONNECT_FAILED) setStatus(res.state)
     }
 
+    const getInitialRegion = async () => {
+      try {
+        const res = await apiProxy.getInstance().getSelectedRegion()
+        setRegion(prevState => ({ ...prevState, current: res.currentRegion }))
+      } catch (err) {
+        console.error(err)
+      }
+    }
+
+    const getAllRegions = async () => {
+      try {
+        const res = await apiProxy.getInstance().getAllRegions()
+        setRegion(prevState => ({ ...prevState, all: res.regions }))
+      } catch (err) {
+        console.error(err)
+        // TODO(nullhook): Create an error component for region list
+        setRegion(prevState => ({ ...prevState, hasError: true }))
+      }
+    }
+
     getInitialState().catch(e => console.error('getConnectionState failed', e))
+    getInitialRegion().catch(e => console.error('getInitialRegion failed', e))
+    getAllRegions().catch(e => console.error('getAllRegions failed', e))
   }, [])
 
-  if (isSelectingRegion) {
-    return <SelectRegion onDone={onSelectingRegionDone} />
+  if (!region.current) {
+    // TODO(nullhook): Replace this with a loading state and move to redux
+    return null
+  }
+
+  if (isSelectingRegion && region.all) {
+    return (
+      <SelectRegionList
+        regions={region.all}
+        selectedRegion={region.current}
+        onConnectClick={handleConnectClick}
+        onDone={onSelectingRegionDone}
+        onRegionClick={handleRegionItemClick}
+      />)
   }
 
   if (hasError) {
@@ -90,16 +149,18 @@ function Main () {
       <ErrorPanel
         onTryAgainClick={handleTryAgain}
         onChooseServerClick={handleSelectRegionButtonClick}
-        region='Tokyo'
+        region={region}
       />
     )
   }
 
+  // TODO(nullhook): Show the main ui after the initial data loads and
+  // if the purchased state is PURCHSED
   return (
     <MainPanel
       isOn={isOn}
       status={status}
-      region='Tokyo' // TODO(nullhook): Transfer to a stateful value
+      region={region.current}
       onToggleClick={handleToggleClick}
       onSelectRegionButtonClick={handleSelectRegionButtonClick}
     />
diff --git a/components/brave_vpn/resources/panel/stories/component-panel.tsx b/components/brave_vpn/resources/panel/stories/component-panel.tsx
index dec47c857760..8f5cae2553f0 100644
--- a/components/brave_vpn/resources/panel/stories/component-panel.tsx
+++ b/components/brave_vpn/resources/panel/stories/component-panel.tsx
@@ -3,10 +3,12 @@ import * as React from 'react'
 import * as S from './style'
 
 // Components
+import { mockRegionList } from './mock-data/region-list'
 import MainPanel from '../components/main-panel'
 import ErrorPanel from '../components/error-panel'
-import SelectRegion from '../components/select-region'
-import { ConnectionState } from '../types/connection_state'
+import SelectRegionList from '../components/select-region-list'
+import { RegionState, Region } from '../api/region_interface'
+import { ConnectionState } from '../api/panel_browser_api'
 
 const statusOptions = {
   'Disconnected': ConnectionState.DISCONNECTED,
@@ -25,17 +27,25 @@ export default {
   }
 }
 
+function useRegion () {
+  const result = React.useState<RegionState>(mockRegionList)
+  return result
+}
+
 export const _Main = () => {
   const [isOn, setIsOn] = React.useState(false)
   const handleToggleClick = () => setIsOn(state => !state)
   const handleSelectRegionButtonClick = () => {/**/}
+  const [region] = useRegion()
+
+  if (!region.current) return null
 
   return (
     <S.PanelFrame>
       <MainPanel
         isOn={isOn}
         status={select('Current Status', statusOptions, ConnectionState.DISCONNECTED)}
-        region='Tokyo'
+        region={region.current}
         onToggleClick={handleToggleClick}
         onSelectRegionButtonClick={handleSelectRegionButtonClick}
       />
@@ -44,6 +54,8 @@ export const _Main = () => {
 }
 
 export const _Error = () => {
+  const [region] = useRegion()
+
   const handleTryAgain = () => {
     alert('Trying..')
   }
@@ -57,19 +69,39 @@ export const _Error = () => {
       <ErrorPanel
         onTryAgainClick={handleTryAgain}
         onChooseServerClick={handleChooseServer}
-        region='Tokyo'
+        region={region}
       />
     </S.PanelFrame>
   )
 }
 
 export const _SelectLocation = () => {
+  const [region, setRegion] = useRegion()
+
   const onDone = () => {
     alert('Going back')
   }
+
+  const clickConnect = () => {
+    alert('Connecting...')
+  }
+
+  const handleRegionClick = (currentRegion: Region) => {
+    setRegion((prevState) => ({
+      ...prevState,
+      current: currentRegion
+    }))
+  }
+
   return (
     <S.PanelFrame>
-      <SelectRegion onDone={onDone} />
+      <SelectRegionList
+        onDone={onDone}
+        regions={region.all!}
+        selectedRegion={region.current!}
+        onRegionClick={handleRegionClick}
+        onConnectClick={clickConnect}
+      />
     </S.PanelFrame>
   )
 }
diff --git a/components/brave_vpn/resources/panel/stories/mock-data/region-list.ts b/components/brave_vpn/resources/panel/stories/mock-data/region-list.ts
new file mode 100644
index 000000000000..9d4f6606c8a6
--- /dev/null
+++ b/components/brave_vpn/resources/panel/stories/mock-data/region-list.ts
@@ -0,0 +1,71 @@
+export const mockRegionList = {
+  all: [
+    {
+      'continent': 'oceania',
+      'name': 'au-au',
+      'namePretty': 'Australia'
+    },
+    {
+      'continent': 'south-america',
+      'name': 'sa-br',
+      'namePretty': 'Brazil'
+    },
+    {
+      'continent': 'north-america',
+      'name': 'ca-east',
+      'namePretty': 'Canada'
+    },
+    {
+      'continent': 'europe',
+      'name': 'eu-de',
+      'namePretty': 'Germany'
+    },
+    {
+      'continent': 'asia',
+      'name': 'asia-jp',
+      'namePretty': 'Japan'
+    },
+    {
+      'continent': 'europe',
+      'name': 'eu-nl',
+      'namePretty': 'Netherlands'
+    },
+    {
+      'continent': 'asia',
+      'name': 'asia-sg',
+      'namePretty': 'Singapore'
+    },
+    {
+      'continent': 'europe',
+      'name': 'eu-es',
+      'namePretty': 'Spain'
+    },
+    {
+      'continent': 'europe',
+      'name': 'eu-ch',
+      'namePretty': 'Switzerland'
+    },
+    {
+      'continent': 'north-america',
+      'name': 'us-central',
+      'namePretty': 'USA (Central)'
+    },
+    {
+      'continent': 'north-america',
+      'name': 'us-east',
+      'namePretty': 'USA (East)'
+    },
+    {
+      'continent': 'north-america',
+      'name': 'us-west',
+      'namePretty': 'USA (West)'
+    },
+    {
+      'continent': 'europe',
+      'name': 'eu-en',
+      'namePretty': 'United Kingdom'
+    }
+  ],
+  current: { continent: 'Europe', name: 'eu-de', namePretty: 'Germany' },
+  hasError: false
+}
diff --git a/components/brave_vpn/resources/panel/types/connection_state.ts b/components/brave_vpn/resources/panel/types/connection_state.ts
deleted file mode 100644
index d4e64ba78b7f..000000000000
--- a/components/brave_vpn/resources/panel/types/connection_state.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const enum ConnectionState {
-  CONNECTED = 0,
-  DISCONNECTED = 1,
-  CONNECTING = 2,
-  DISCONNECTING = 3,
-  CONNECT_FAILED = 4
-}
diff --git a/components/brave_vpn/resources/panel/vpn_panel.tsx b/components/brave_vpn/resources/panel/vpn_panel.tsx
index e4f6136301fc..d0a0acd5ed55 100644
--- a/components/brave_vpn/resources/panel/vpn_panel.tsx
+++ b/components/brave_vpn/resources/panel/vpn_panel.tsx
@@ -11,7 +11,7 @@ import vpnDarkTheme from './theme/vpn-dark'
 import vpnLightTheme from './theme/vpn-light'
 import Container from './container'
 import { PanelWrapper } from './style'
-import apiProxy from './vpn_panel_api_proxy.js'
+import apiProxy from './api/vpn_panel_api_proxy.js'
 
 function App () {
   const [initialThemeType, setInitialThemeType] = React.useState<chrome.braveTheme.ThemeType>()
diff --git a/components/brave_vpn/resources/tsconfig.json b/components/brave_vpn/resources/tsconfig.json
new file mode 100644
index 000000000000..7ebc3c636718
--- /dev/null
+++ b/components/brave_vpn/resources/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig",
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.d.ts",
+    "../definitions/*.d.ts"
+  ]
+}