From 5e95d30ea7aeb2b2da2c628101d44caad6655590 Mon Sep 17 00:00:00 2001
From: robertsavian <robertsavian@gmail.com>
Date: Thu, 3 Dec 2020 19:09:45 -0600
Subject: [PATCH 1/3] Controlled & Uncontrolled Component

---
 src/components/pages/index-page/IndexPage.tsx | 29 +++++++++++-
 .../ui/ui-select/UiSelect.constants.ts        |  4 ++
 src/components/ui/ui-select/UiSelect.tsx      | 44 +++++++++++++++++++
 3 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/ui-select/UiSelect.constants.ts
 create mode 100644 src/components/ui/ui-select/UiSelect.tsx

diff --git a/src/components/pages/index-page/IndexPage.tsx b/src/components/pages/index-page/IndexPage.tsx
index 8e25beb..4566227 100644
--- a/src/components/pages/index-page/IndexPage.tsx
+++ b/src/components/pages/index-page/IndexPage.tsx
@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
 import { Routes } from '../../../constants/Routes';
+import { UiSelect } from '../../ui/ui-select/UiSelect';
 
 interface IProps {}
 
 export const IndexPage: React.FC<IProps> = (props) => {
+  const [controlledValue, setControlledValue] = useState<string>('2');
+
   return (
     <div>
       <h1>
@@ -13,6 +16,30 @@ export const IndexPage: React.FC<IProps> = (props) => {
           👋
         </span>
       </h1>
+      <div>
+        <UiSelect
+          id="uncontrolled"
+          onChange={(value) => console.log(value, typeof value)}
+          initialValue="2"
+          options={[
+            { label: 'One', value: '1' },
+            { label: 'Two', value: '2' },
+            { label: 'Three', value: '3' },
+            { label: 'Four', value: '4' },
+          ]}
+        />
+        <UiSelect
+          id="controlled"
+          onChange={(value) => setControlledValue(value)}
+          value={controlledValue}
+          options={[
+            { label: 'One', value: '1' },
+            { label: 'Two', value: '2' },
+            { label: 'Three', value: '3' },
+            { label: 'Four', value: '4' },
+          ]}
+        />
+      </div>
       <p>
         <Link href={Routes.About}>
           <a>About</a>
diff --git a/src/components/ui/ui-select/UiSelect.constants.ts b/src/components/ui/ui-select/UiSelect.constants.ts
new file mode 100644
index 0000000..226859d
--- /dev/null
+++ b/src/components/ui/ui-select/UiSelect.constants.ts
@@ -0,0 +1,4 @@
+export interface IUiSelectOptions {
+  label: string;
+  value: string | number;
+}
diff --git a/src/components/ui/ui-select/UiSelect.tsx b/src/components/ui/ui-select/UiSelect.tsx
new file mode 100644
index 0000000..224aef8
--- /dev/null
+++ b/src/components/ui/ui-select/UiSelect.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import { IUiSelectOptions } from './UiSelect.constants';
+import { noop } from '../../../utils/misc.utils';
+
+interface IProps {
+  options: IUiSelectOptions[];
+  /**
+   * If a value is passed in then the component is considered controlled.
+   */
+  value?: string;
+  id?: string;
+  name?: string;
+  onChange?: (value: string) => void;
+  initialValue?: string;
+}
+
+export const UiSelect: React.FC<IProps> = (props) => {
+  const [selected, setSelected] = useState(props.value || props.initialValue);
+
+  useEffect(() => {
+    setSelected(props.value);
+  }, [props.value]);
+
+  return (
+    <select
+      value={selected}
+      name={props.name}
+      id={props.id}
+      onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
+        props.onChange!(event.target.value);
+      }}
+    >
+      {props.options.map((option) => (
+        <option key={option.label} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+UiSelect.defaultProps = {
+  onChange: noop,
+};

From 6556763a3ed62120529e6cc541294b0f5c188fd3 Mon Sep 17 00:00:00 2001
From: robertsavian <robertsavian@gmail.com>
Date: Thu, 3 Dec 2020 19:13:07 -0600
Subject: [PATCH 2/3] Controlled & Uncontrolled Component

---
 src/components/pages/index-page/IndexPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/index-page/IndexPage.tsx b/src/components/pages/index-page/IndexPage.tsx
index 4566227..02f6730 100644
--- a/src/components/pages/index-page/IndexPage.tsx
+++ b/src/components/pages/index-page/IndexPage.tsx
@@ -6,7 +6,7 @@ import { UiSelect } from '../../ui/ui-select/UiSelect';
 interface IProps {}
 
 export const IndexPage: React.FC<IProps> = (props) => {
-  const [controlledValue, setControlledValue] = useState<string>('2');
+  const [controlledValue, setControlledValue] = useState<string>('3');
 
   return (
     <div>

From da4ad54f989eb2e0d995908b9f8891ed16bb123b Mon Sep 17 00:00:00 2001
From: robertsavian <robertsavian@gmail.com>
Date: Thu, 3 Dec 2020 19:15:01 -0600
Subject: [PATCH 3/3] Controlled & Uncontrolled Component

---
 src/components/pages/about-page/AboutPage.tsx | 29 ++++++++++++++++++-
 src/components/pages/index-page/IndexPage.tsx | 29 +------------------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/components/pages/about-page/AboutPage.tsx b/src/components/pages/about-page/AboutPage.tsx
index dc81af1..d6848be 100644
--- a/src/components/pages/about-page/AboutPage.tsx
+++ b/src/components/pages/about-page/AboutPage.tsx
@@ -1,14 +1,41 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
 import { Routes } from '../../../constants/Routes';
+import { UiSelect } from '../../ui/ui-select/UiSelect';
 
 interface IProps {}
 
 export const AboutPage: React.FC<IProps> = (props) => {
+  const [controlledValue, setControlledValue] = useState<string>('3');
+
   return (
     <div>
       <h1>About</h1>
       <p>This is the about page</p>
+      <div>
+        <UiSelect
+          id="uncontrolled"
+          onChange={(value) => console.log(value, typeof value)}
+          initialValue="2"
+          options={[
+            { label: 'One', value: '1' },
+            { label: 'Two', value: '2' },
+            { label: 'Three', value: '3' },
+            { label: 'Four', value: '4' },
+          ]}
+        />
+        <UiSelect
+          id="controlled"
+          onChange={(value) => setControlledValue(value)}
+          value={controlledValue}
+          options={[
+            { label: 'One', value: '1' },
+            { label: 'Two', value: '2' },
+            { label: 'Three', value: '3' },
+            { label: 'Four', value: '4' },
+          ]}
+        />
+      </div>
       <p>
         <Link href={Routes.Index}>
           <a>Go home</a>
diff --git a/src/components/pages/index-page/IndexPage.tsx b/src/components/pages/index-page/IndexPage.tsx
index 02f6730..8e25beb 100644
--- a/src/components/pages/index-page/IndexPage.tsx
+++ b/src/components/pages/index-page/IndexPage.tsx
@@ -1,13 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Link from 'next/link';
 import { Routes } from '../../../constants/Routes';
-import { UiSelect } from '../../ui/ui-select/UiSelect';
 
 interface IProps {}
 
 export const IndexPage: React.FC<IProps> = (props) => {
-  const [controlledValue, setControlledValue] = useState<string>('3');
-
   return (
     <div>
       <h1>
@@ -16,30 +13,6 @@ export const IndexPage: React.FC<IProps> = (props) => {
           👋
         </span>
       </h1>
-      <div>
-        <UiSelect
-          id="uncontrolled"
-          onChange={(value) => console.log(value, typeof value)}
-          initialValue="2"
-          options={[
-            { label: 'One', value: '1' },
-            { label: 'Two', value: '2' },
-            { label: 'Three', value: '3' },
-            { label: 'Four', value: '4' },
-          ]}
-        />
-        <UiSelect
-          id="controlled"
-          onChange={(value) => setControlledValue(value)}
-          value={controlledValue}
-          options={[
-            { label: 'One', value: '1' },
-            { label: 'Two', value: '2' },
-            { label: 'Three', value: '3' },
-            { label: 'Four', value: '4' },
-          ]}
-        />
-      </div>
       <p>
         <Link href={Routes.About}>
           <a>About</a>