From ffc5ae461932b2da3886a4f7463291be8dd6bcaa Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Mon, 22 Jun 2020 16:31:43 +0800
Subject: [PATCH] make suggestions customizable

---
 .../assets/src/components/EmailSuggestion.tsx    | 15 +++++++++++----
 .../tests/components/EmailSuggestion.test.tsx    | 16 ++++++++++++++++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/resources/assets/src/components/EmailSuggestion.tsx b/resources/assets/src/components/EmailSuggestion.tsx
index 9241fea1..002df78f 100644
--- a/resources/assets/src/components/EmailSuggestion.tsx
+++ b/resources/assets/src/components/EmailSuggestion.tsx
@@ -1,7 +1,8 @@
 /** @jsx jsx */
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import Autosuggest from 'react-autosuggest'
 import { jsx, css } from '@emotion/core'
+import { emit } from '@/scripts/event'
 import { pointerCursor } from '@/styles/utils'
 
 const styles = css`
@@ -10,7 +11,7 @@ const styles = css`
   }
 `
 
-const domainNames = ['qq.com', '163.com', 'gmail.com', 'hotmail.com']
+const domainNames = new Set(['qq.com', '163.com', 'gmail.com', 'hotmail.com'])
 
 type Props = Omit<Autosuggest.InputProps<string>, 'onChange'> & {
   onChange(value: string): void
@@ -19,11 +20,15 @@ type Props = Omit<Autosuggest.InputProps<string>, 'onChange'> & {
 const EmailSuggestion: React.FC<Props> = (props) => {
   const [suggestions, setSuggestions] = useState<string[]>([])
 
+  useEffect(() => {
+    emit('emailDomainsSuggestion', domainNames)
+  }, [])
+
   const handleSuggestionsFetchRequested: Autosuggest.SuggestionsFetchRequested = ({
     value,
   }) => {
     const segments = value.split('@')
-    setSuggestions(domainNames.map((name) => `${segments[0]}@${name}`))
+    setSuggestions([...domainNames].map((name) => `${segments[0]}@${name}`))
   }
 
   const handleSuggestionsClearRequested = () => {
@@ -31,7 +36,9 @@ const EmailSuggestion: React.FC<Props> = (props) => {
   }
 
   const shouldRenderSuggestions = (value: string) => {
-    const isSelecting = domainNames.some((name) => value.endsWith(`@${name}`))
+    const isSelecting = [...domainNames].some((name) =>
+      value.endsWith(`@${name}`),
+    )
 
     return isSelecting || (value.length > 0 && !value.includes('@'))
   }
diff --git a/resources/assets/tests/components/EmailSuggestion.test.tsx b/resources/assets/tests/components/EmailSuggestion.test.tsx
index 0e3d56d9..8dde46d9 100644
--- a/resources/assets/tests/components/EmailSuggestion.test.tsx
+++ b/resources/assets/tests/components/EmailSuggestion.test.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { render, fireEvent } from '@testing-library/react'
+import { on } from '@/scripts/event'
 import EmailSuggestion from '@/components/EmailSuggestion'
 
 const Wrapper: React.FC = () => {
@@ -56,3 +57,18 @@ test('display suggestions when typing with configured domain names', () => {
   expect(queryByText('abc@gmail.com')).toBeInTheDocument()
   expect(queryByText('abc@hotmail.com')).toBeInTheDocument()
 })
+
+test('events', () => {
+  const off = on('emailDomainsSuggestion', (names: Set<string>) => {
+    names.add('outlook.com')
+  })
+
+  const { getByDisplayValue, queryByText } = render(<Wrapper />)
+  const input = getByDisplayValue('')
+
+  fireEvent.input(input, { target: { value: 'abc' } })
+  fireEvent.focus(input)
+  expect(queryByText('abc@outlook.com')).toBeInTheDocument()
+
+  off()
+})