TagInput component

Author: albertodev7

client/src/Components/TagInput/index.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react'
+import { FieldProps } from 'formik'
+
+import { Container, Label, StyledInput, Wrapper, Tag, CloseIcon } from './style'
+
+interface State {
+    tags: string[]
+    inputValue: string
+}
+
+interface Props {
+    label?: string
+}
+
+export class TagInput extends React.Component<FieldProps & Props, State> {
+    public readonly state = {
+        tags: [],
+        inputValue: ''
+    }
+
+    private handleChange = (e: any) =>
+        this.setState({ inputValue: e.target.value })
+
+    private setField = (value: string[]) => {
+        const {
+            form: { setFieldValue }
+        } = this.props
+
+        setFieldValue('amenities', value, false)
+    }
+
+    private onEnterPress = (e: any) => {
+        if (e.key === 'Enter' && this.state.inputValue) {
+            this.setState(
+                ({ tags, inputValue }) => ({
+                    tags: [...tags, inputValue],
+                    inputValue: ''
+                }),
+                () => this.setField(this.state.tags)
+            )
+        }
+    }
+
+    private deleteTag = (i: number) => {
+        const { tags } = this.state
+
+        const newTags = [...tags.slice(0, i), ...tags.slice(i + 1)]
+
+        this.setState({ tags: newTags })
+
+        this.setField(newTags)
+    }
+
+    public render() {
+        const { inputValue, tags } = this.state
+        const {
+            field: { onChange, value, ...field },
+            form: {},
+            label,
+            ...props
+        } = this.props
+
+        return (
+            <Container>
+                {label && <Label>{label}</Label>}
+
+                <Wrapper>
+                    {tags &&
+                        tags.map((tag, i) => (
+                            <Tag key={i}>
+                                {tag}{' '}
+                                <CloseIcon onClick={() => this.deleteTag(i)} />
+                            </Tag>
+                        ))}
+                    <StyledInput
+                        value={inputValue}
+                        onChange={this.handleChange}
+                        onKeyPress={this.onEnterPress}
+                        {...field}
+                        {...props}
+                    />
+                </Wrapper>
+            </Container>
+        )
+    }
+}

client/src/Components/TagInput/style.tsx

@@ -0,0 +1,57 @@
+import styled from 'styled-components'
+
+import { MdClose } from 'react-icons/md'
+
+export const Container = styled.div`
+    width: 100%;
+    margin: 0 0 25px 0;
+    display: flex;
+    flex-direction: column;
+`
+export const Label = styled.label`
+    margin-bottom: 10px;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    color: #494a4a;
+`
+export const Wrapper = styled.div`
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 45px;
+    border-radius: 4px;
+    border: 1px solid;
+    border-color: rgb(235, 235, 235);
+`
+export const Tag = styled.div`
+    margin: 8px 0 0 8px;
+    padding: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 3px;
+    background-color: #ff5a66;
+    font-size: 14px;
+    color: white;
+    box-sizing: border-box;
+`
+export const CloseIcon = styled(MdClose)`
+    font-size: 16px;
+    margin: -1px 0 0 5px;
+    color: white;
+    cursor: pointer;
+`
+export const StyledInput = styled.input`
+    width: 100%;
+    margin: 13px 10px 10px 10px;
+    border: none;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: Montserrat;
+    box-sizing: border-box;
+
+    &:focus {
+        outline: none;
+    }
+`

client/src/Pages/CreateListing/Components/CreateListingForm/index.tsx

@@ -14,7 +14,7 @@ interface FieldValues {
     price: number
     guests: number
     beds: number
-    amenities: string
+    amenities: string[]
     lat: number
     lng: number
     address: string
@@ -48,7 +48,7 @@ export class C extends React.PureComponent<RouteComponentProps, State> {
                             price: 0,
                             guests: 0,
                             beds: 0,
-                            amenities: '',
+                            amenities: [''],
                             lat: 0,
                             lng: 0,
                             address: '',
@@ -58,17 +58,9 @@ export class C extends React.PureComponent<RouteComponentProps, State> {
                         onSubmit={async (values: FieldValues) => {
                             this.setState({ isLoading: true })
 
-                            console.log({
-                                variables: {
-                                    ...values,
-                                    amenities: [values.amenities]
-                                }
-                            })
-
                             const response = await createListing({
                                 variables: {
-                                    ...values,
-                                    amenities: [values.amenities]
+                                    ...values
                                 }
                             })
 

client/src/Pages/CreateListing/Components/RoomInfoForm/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { Field } from 'formik'
 
 import { FormikInput } from 'src/Components/FomikInput'
+import { TagInput } from 'src/Components/TagInput'
 import { Title } from './style'
 
 export const RoomInfoForm: React.SFC<{}> = () => (
@@ -36,7 +37,7 @@ export const RoomInfoForm: React.SFC<{}> = () => (
             name="amenities"
             placeholder="Amenities"
             label="Amenities"
-            component={FormikInput}
+            component={TagInput}
         />
     </>
 )

client/src/Pages/Listings/Components/Map/index.tsx

@@ -6,7 +6,13 @@ import { Postion } from 'src/Containers/Position'
 export const Map = withGoogleMap(() => (
     <Subscribe to={[Postion]}>
         {({ state: { lat, lng } }) => (
-            <GoogleMap defaultZoom={7} defaultCenter={{ lat, lng }}>
+            <GoogleMap
+                defaultZoom={7}
+                defaultCenter={{
+                    lat: 52.0685,
+                    lng: 19.9475
+                }}
+            >
                 <Marker position={{ lat, lng }} />
             </GoogleMap>
         )}