From 7a900f6a121acebe68d67c727e5bb36389201ff1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Mon, 1 Feb 2021 20:49:02 +0900
Subject: [PATCH] feat: using react-select

---
 components/Form/Select.tsx  | 30 ++++++++++++------
 components/Form/Selects.tsx | 63 +++++++++++++------------------------
 pages/addbot.tsx            | 13 +++++---
 3 files changed, 50 insertions(+), 56 deletions(-)

diff --git a/components/Form/Select.tsx b/components/Form/Select.tsx
index b6038bb..6938015 100644
--- a/components/Form/Select.tsx
+++ b/components/Form/Select.tsx
@@ -1,18 +1,28 @@
-import { Field } from 'formik'
+import ReactSelect from 'react-select'
 
-const Select = ({ name, options }:SelectProps):JSX.Element => {
-	return <Field as='select' name={name} className='text-black w-full h-10 border border-grey-light rounded px-3 relative focus:shadow outline-none'>
-		{
-			options.map(o => (
-				<option key={o}>{o}</option>
-			))
+const Select = ({ placeholder, options, handleChange, handleTouch }:SelectProps):JSX.Element => {
+	return <ReactSelect styles={{
+		control: (provided) => {
+			return { ...provided, border: 'none' }
+		},
+		option: (provided) => {
+			return { ...provided, cursor: 'pointer', ':hover': {
+				opacity: '0.7'
+			} }
 		}
-	</Field>
+	}} className='border border-grey-light dark:border-transparent' classNamePrefix='outline-none text-black dark:bg-very-black dark:text-white ' placeholder={placeholder || '선택해주세요.'} options={options} onChange={handleChange} onBlur={handleTouch} noOptionsMessage={() => '검색 결과가 없습니다.'}/>
 }
 
 interface SelectProps {
-  name: string
-  options: string[]
+  placeholder?: string
+  handleChange: (value: Option) => void
+  handleTouch: () => void
+  options: Option[]
+}
+
+interface Option {
+  value: string
+  label: string
 }
 
 export default Select
\ No newline at end of file
diff --git a/components/Form/Selects.tsx b/components/Form/Selects.tsx
index 14adfae..32c2ad5 100644
--- a/components/Form/Selects.tsx
+++ b/components/Form/Selects.tsx
@@ -1,47 +1,28 @@
-import Tag from '@components/Tag'
-import { FieldArray, useFormik } from 'formik'
+import ReactSelect from 'react-select'
 
-const Selects = ({ name, value, options }:SelectsProps):JSX.Element => {
-	const formik = useFormik({
-		initialValues: {
-			search: ''
+const Select = ({ placeholder, options, handleChange, handleTouch }:SelectProps):JSX.Element => {
+	return <ReactSelect styles={{
+		control: (provided) => {
+			return { ...provided, border: 'none' }
 		},
-		onSubmit: () => { console.log('Submit') }
-	})
-	return <div className='w-full'>
-		<input name='search' className='text-black w-full h-10 border border-grey-light rounded px-3 focus:shadow outline-none' value={formik.values.search} onChange={formik.handleChange}/>
-		<FieldArray name={name} >
-			{
-				({ insert, remove, push }) => (
-					<>
-						<div className='rounded shadow-md my-2 pin-t pin-l dark:bg-very-black h-60 overflow-y-scroll w-full'>
-							<ul>
-								{
-									options.filter(el => el.includes(formik.values.search) && !value.includes(el)).length !== 0 ? options.filter(el => el.includes(formik.values.search) && !value.includes(el)).map(el=> (
-										<li key={el} className='cursor-pointer px-3 py-3.5 hover:bg-discord-dark-hover' onClick={()=> push(el)} onKeyPress={()=> push(el)} >{el}</li>
-									)) : <li className='px-3 py-3.5'>검색 결과가 없습니다.</li>
-								}
-							</ul>
-						</div>
-						<div className='flex flex-wrap'>
-							{
-								value.map(el => (
-									<Tag key={el} text={<>{el} <i className='fas fa-times' /></>} className='cursor-pointer' onClick={() => remove(value.indexOf(el))} />
-								))
-							}
-						</div>
-					</>
-				)
-			}
-		</FieldArray>
-	</div>
-
+		option: (provided) => {
+			return { ...provided, cursor: 'pointer', ':hover': {
+				opacity: '0.7'
+			} }
+		}
+	}} isMulti className='border border-grey-light dark:border-transparent' classNamePrefix='outline-none text-black dark:bg-very-black dark:text-white cursor-pointer ' placeholder={placeholder || '선택해주세요.'} options={options} onChange={handleChange} onBlur={handleTouch} noOptionsMessage={() => '검색 결과가 없습니다.'}/>
 }
 
-interface SelectsProps {
-  name: string
-  value: string[]
-  options: string[]
+interface SelectProps {
+  placeholder?: string
+  handleChange: (value: Option[]) => void
+  handleTouch: () => void
+  options: Option[]
 }
 
-export default Selects
\ No newline at end of file
+interface Option {
+  value: string
+  label: string
+}
+
+export default Select
\ No newline at end of file
diff --git a/pages/addbot.tsx b/pages/addbot.tsx
index 27e6a00..37201be 100644
--- a/pages/addbot.tsx
+++ b/pages/addbot.tsx
@@ -2,7 +2,7 @@ import { NextPage, NextPageContext } from 'next'
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
-import { Form, Formik } from 'formik'
+import { FieldArray, Form, Formik } from 'formik'
 
 import { get } from '@utils/Query'
 import { parseCookie, redirectTo } from '@utils/Tools'
@@ -47,7 +47,7 @@ const AddBot:NextPage<AddBotProps> = ({ logged }) => {
 		}}
 		validationSchema={AddBotSubmitSchema}
 		onSubmit={() => { alert('Submit') }}>
-			{({ errors, touched, values }) => (
+			{({ errors, touched, values, setFieldTouched, setFieldValue }) => (
 				<Form>
 					{JSON.stringify(errors)}
 					{JSON.stringify(touched)}
@@ -81,10 +81,13 @@ const AddBot:NextPage<AddBotProps> = ({ logged }) => {
 						<Input name='prefix' placeholder='!' />
 					</Label>
 					<Label For='library' label='라이브러리' labelDesc='봇에 사용된 라이브러리를 선택해주세요. 해당되는 라이브러리가 없다면 기타를 선택해주세요.' short required error={errors.library && touched.library ? errors.library : null}>
-						<Select name='library' options={library} />
+						<Select options={library.map(el=> ({ label: el, value: el }))} handleChange={(value) => setFieldValue('library', value.value)} handleTouch={() => setFieldTouched('library', true)} />
 					</Label>
-					<Label For='category' label='카테고리' labelDesc='봇에 해당되는 카테고리를 선택해주세요' required error={errors.category && touched.category ? errors.category : null}>
-						<Selects name='category' value={values.category} options={categories} />
+					<Label For='category' label='카테고리' labelDesc='봇에 해당되는 카테고리를 선택해주세요' required error={errors.category as string}>
+						<Selects options={categories.map(el=> ({ label: el, value: el }))} handleChange={(value) => {
+							console.log(value)
+							setFieldValue('category', value.map(v=> v.value))
+						}} handleTouch={() => setFieldTouched('category', true)} />
 					</Label>
 					<Divider />
 					<Label For='website' label='웹사이트' labelDesc='봇의 웹사이트를 작성해주세요.' error={errors.website && touched.website ? errors.website : null}>