grub775.gitverse.ru

Contact.tsx
240 строк · 8.7 Кб
Перенос по словам
1
/* eslint-disable react-hooks/exhaustive-deps */
2
import React, { Fragment, useEffect, useState } from 'react'
3
import Head from 'next/head'
4

5
import { useDispatch, useSelector } from 'react-redux'
6

7
import { useTranslation } from 'next-i18next'
8
import { motion, AnimatePresence } from 'framer-motion'
9
import { NextSeo } from 'next-seo'
10
import { asyncContactRequest, contactSetRequest } from '@Actions/contact'
11

12
// import checkedSVG from '@Public/static/checked.svg'
13
import warningSVG from '@Public/static/warning.svg'
14
import Image from 'next/image'
15
import { AppDispatch, RootState } from '@Src/store'
16
import { IContactState } from '@Interfaces/contact'
17

18
const ContactContainer = () => {
19
  const { t } = useTranslation(['contact'])
20
  const dispatch: AppDispatch = useDispatch()
21
  const contactState: IContactState = useSelector(
22
    (state: RootState) => state.contact,
23
  )
24
  const [name, setName] = useState('')
25
  const [email, setEmail] = useState('')
26
  const [subject, setSubject] = useState('')
27
  const [message, setMessage] = useState('')
28

29
  const handleInputName = (event: React.ChangeEvent<HTMLInputElement>) => {
30
    setName(event.target.value)
31
  }
32

33
  const handleInputEmail = (event: React.ChangeEvent<HTMLInputElement>) => {
34
    setEmail(event.target.value)
35
  }
36

37
  const handleInputSubject = (event: React.ChangeEvent<HTMLInputElement>) => {
38
    setSubject(event.target.value)
39
  }
40

41
  const handleInputMessage = (
42
    event: React.ChangeEvent<HTMLTextAreaElement>,
43
  ) => {
44
    setMessage(event.target.value)
45
  }
46

47
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
48
    event.preventDefault()
49

50
    if (!contactState.isResponse) {
51
      dispatch(asyncContactRequest({ name, email, subject, message }))
52
    }
53
  }
54

55
  useEffect(() => {
56
    if (contactState.isResponse || contactState.prevIsResponse) {
57
      setTimeout(() => {
58
        dispatch(
59
          contactSetRequest({
60
            isError: false,
61
            isResponse: false,
62
            prevIsResponse: false,
63
          }),
64
        )
65
      }, 3000)
66
    }
67
  }, [contactState.isResponse, contactState.prevIsResponse])
68

69
  useEffect(
70
    () => () => {
71
      dispatch(
72
        contactSetRequest({
73
          isError: false,
74
          isResponse: false,
75
          prevIsResponse: false,
76
        }),
77
      )
78
    },
79
    [],
80
  )
81

82
  return (
83
    <>
84
      <Head>
85
        <title>{t('contact:title')}</title>
86
      </Head>
87
      <NextSeo
88
        openGraph={{
89
          type: 'website',
90
          title: t('contact:og.title'),
91
          description: t('contact:og.description'),
92
        }}
93
      />
94
      <motion.section
95
        className="contact d-flex flex-column justify-content-center align-items-center"
96
        key="my_unique_key432"
97
        initial={{ opacity: 0 }}
98
        animate={{ opacity: 1 }}
99
        transition={{ duration: 0.3 }}
100
      >
101
        <div className="container">
102
          <div className="row justify-content-center align-items-center">
103
            <AnimatePresence mode="wait" initial={false}>
104
              {contactState.prevIsResponse ? (
105
                <motion.div
106
                  className="col-12 col-lg-6 text-center mb-30"
107
                  key="my_unique_key4322"
108
                  initial={{ opacity: 0 }}
109
                  animate={{ opacity: 1 }}
110
                  exit={{ opacity: 0 }}
111
                  transition={{ duration: 0.3 }}
112
                >
113
                  <Image
114
                    className="cap__image mb-10"
115
                    src={warningSVG}
116
                    alt="checked"
117
                    priority
118
                  />
119
                  <h3 className="cap__title cap__title--medium text-lowercase">
120
                    {t('contact:form.warning-message.title')}
121
                  </h3>
122
                </motion.div>
123
              ) : (
124
                <>
125
                  <motion.div
126
                    className="col-12 col-lg-6 text-center"
127
                    key="my_unique_key432222"
128
                    initial={{ opacity: 0 }}
129
                    animate={{ opacity: 1 }}
130
                    exit={{ opacity: 0 }}
131
                    transition={{ duration: 0.3 }}
132
                  >
133
                    <h3 className="cap__title">{t('contact:title')}</h3>
134
                    <h3 className="cap__text">{t('contact:subtitle')}</h3>
135
                  </motion.div>
136

137
                  <motion.div
138
                    className="col-12 col-lg-12"
139
                    key="my_unique_key4322223211"
140
                    initial={{ opacity: 0 }}
141
                    animate={{ opacity: 1 }}
142
                    exit={{ opacity: 0 }}
143
                    transition={{ duration: 0.3 }}
144
                  >
145
                    <div className="row justify-content-center">
146
                      <div className="col-12 col-lg-6 col-xl-6">
147
                        <div className="row d-flex justify-content-center align-items-center h-100">
148
                          <div className="col-12 mb-auto">
149
                            <form
150
                              id="contact"
151
                              className="row disable"
152
                              onSubmit={handleSubmit}
153
                            >
154
                              <div className="col-6 mt-30">
155
                                <input
156
                                  name="name"
157
                                  minLength={1}
158
                                  onChange={handleInputName}
159
                                  className="form__input"
160
                                  placeholder={t(
161
                                    'contact:form.placeholders.name',
162
                                  )}
163
                                  required
164
                                />
165
                              </div>
166
                              <div className="col-6 mt-30">
167
                                <input
168
                                  name="email"
169
                                  type="email"
170
                                  onChange={handleInputEmail}
171
                                  className="form__input"
172
                                  placeholder={t(
173
                                    'contact:form.placeholders.email',
174
                                  )}
175
                                  required
176
                                />
177
                              </div>
178
                              <div className="col-12 mt-30">
179
                                <input
180
                                  name="subject"
181
                                  minLength={5}
182
                                  onChange={handleInputSubject}
183
                                  className="form__input"
184
                                  placeholder={t(
185
                                    'contact:form.placeholders.subject',
186
                                  )}
187
                                  required
188
                                />
189
                              </div>
190

191
                              <div className="col-12 mt-30">
192
                                <textarea
193
                                  name="message"
194
                                  className="form__input form__textarea"
195
                                  onChange={handleInputMessage}
196
                                  placeholder={t(
197
                                    'contact:form.placeholders.message',
198
                                  )}
199
                                  minLength={5}
200
                                  required
201
                                />
202
                              </div>
203

204
                              <div className="col-12 mt-30">
205
                                <button
206
                                  type="submit"
207
                                  className="form__btn ml-auto mr-auto"
208
                                  placeholder="Message"
209
                                >
210
                                  {contactState.isResponse && (
211
                                    <div className="form__btn-loader">
212
                                      <div className="dot-floating" />
213
                                    </div>
214
                                  )}
215
                                  <div
216
                                    style={{
217
                                      opacity: contactState.isResponse ? 0 : 1,
218
                                    }}
219
                                  >
220
                                    {t('contact:form.buttons.send')}
221
                                  </div>
222
                                </button>
223
                              </div>
224
                            </form>
225
                          </div>
226
                        </div>
227
                      </div>
228
                    </div>
229
                  </motion.div>
230
                </>
231
              )}
232
            </AnimatePresence>
233
          </div>
234
        </div>
235
      </motion.section>
236
    </>
237
  )
238
}
239

240
export default ContactContainer
241
grub775.gitverse.ru

Использование cookies
