refactor select input and create provider select

Emurgo · Feb 23, 2021 · a63ae4c · a63ae4c
1 parent 62aef2e
commit a63ae4c
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 30 deletions.
diff --git a/src/components/ProviderSelect.js b/src/components/ProviderSelect.js
@@ -0,0 +1,53 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import type { ProviderEnum } from '../API/api';
+import { SelectInput, SelectLabel } from './common/Inputs';
+
+const WrapperSelectInput = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: 40px;
+  @media (max-width: 1125px) {
+    margin-left: 0;
+  }
+`;
+
+type Props = {|
+  setProvider: Function,
+|};
+
+const selectData = [
+  {
+    label: 'Adapools (Advanced)',
+    value: 'adapools',
+  },
+  {
+    label: 'Daedalus Official (Simple)',
+    value: 'daedalus-simple',
+  },
+];
+
+function ProviderSelect({ setProvider }: Props): React$Node {
+  const [selectValue, setSelectValue] = React.useState<ProviderEnum>('adapools');
+
+  const handleChange = (e) => {
+    setSelectValue(e.currentTarget.value);
+    setProvider(e.currentTarget.value);
+  };
+
+  return (
+    <WrapperSelectInput>
+      <SelectLabel htmlFor="sort">Provider:</SelectLabel>
+      <SelectInput name="" id="sort" value={selectValue} onChange={handleChange}>
+        {selectData.map(({ value, label }) => (
+          <option key={value} value={value}>
+            {label}
+          </option>
+        ))}
+      </SelectInput>
+    </WrapperSelectInput>
+  );
+}
+
+export default ProviderSelect;
diff --git a/src/components/SortSelect.js b/src/components/SortSelect.js
@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import type { SortingEnum } from '../API/api';
-import arrowDownIcon from '../assets/arrow-select-down.svg'
+import { SelectInput, SelectLabel } from './common/Inputs';
 
 const WrapperSelectInput = styled.div`
   display: flex;
@@ -11,34 +11,6 @@ const WrapperSelectInput = styled.div`
   @media (max-width: 1125px) {
     margin-left: 0;
   }
-  label {
-    color: #676970;
-    font-size: 12px;
-    line-height: 20px;
-    margin-bottom: 6px;
-  }
-`;
-
-const SelectInput = styled.select`
-  height: 40px;
-  display: block;
-  font-size: 14px;
-  line-height: 22px;
-  color: #2b2c32;
-  line-height: 1.3;
-  padding: 0.6em 1.4em 0.5em 0.8em;
-  width: 322px;
-  margin: 0;
-  border: none;
-  border-radius: 8px;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: #f0f3f5;
-  background-image: url(${arrowDownIcon});
-  background-repeat: no-repeat, repeat;
-  background-position: right 0.7em top 50%, 0 0;
-  background-size: 24px auto, 100%;
 `;
 
 type Props = {|
@@ -78,7 +50,7 @@ function SortSelect({ filter }: Props): React$Node {
 
   return (
     <WrapperSelectInput>
-      <label htmlFor="sort">Sort by:</label>
+      <SelectLabel htmlFor="sort">Sort by:</SelectLabel>
       <SelectInput name="" id="sort" value={selectValue} onChange={handleChange}>
         {selectData.map(({ value, label }) => (
           <option key={value} value={value}>

diff --git a/src/components/common/Inputs.js b/src/components/common/Inputs.js
@@ -0,0 +1,33 @@
+// @flow
+import styled from 'styled-components';
+import arrowDownIcon from '../../assets/arrow-select-down.svg';
+
+const SelectLabel: any = styled.label`
+  color: #676970;
+  font-size: 12px;
+  line-height: 20px;
+  margin-bottom: 6px;
+`;
+const SelectInput: any = styled.select`
+  height: 40px;
+  display: block;
+  font-size: 14px;
+  line-height: 22px;
+  color: #2b2c32;
+  line-height: 1.3;
+  padding: 0.6em 1.4em 0.5em 0.8em;
+  width: 322px;
+  margin: 0;
+  border: none;
+  border-radius: 8px;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #f0f3f5;
+  background-image: url(${arrowDownIcon});
+  background-repeat: no-repeat, repeat;
+  background-position: right 0.7em top 50%, 0 0;
+  background-size: 24px auto, 100%;
+`;
+
+export { SelectLabel, SelectInput };