LaconicNetwork/laconic-dot-com
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added some fetch requests and added recaptcha provider to _app.tsx file

Browse Source
This commit is contained in:
oriofir 2022-09-08 16:07:19 -07:00
parent 1a356d20be
commit 1cc6362528
5 changed files with 115 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
package-lock.json generated
View File

@ -37,6 +37,7 @@
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.3.1",
"react-google-recaptcha": "^2.1.0",
"react-google-recaptcha-v3": "^1.10.0",
"react-hook-form": "^7.30.0",
"react-mailchimp-subscribe": "^2.1.3",
"react-merge-refs": "^1.1.0",
@ -9298,6 +9299,18 @@
"react": ">=16.4.1"
}
},
"node_modules/react-google-recaptcha-v3": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha-v3/-/react-google-recaptcha-v3-1.10.0.tgz",
"integrity": "sha512-JBoqU107X8klQmS8tQSbQh1IMsT1fH3kVoArIqnia0rtn0rPNG9Ld+9rD/dHJMculIczSZpGvIJTXXwtsolMcg==",
"dependencies": {
"hoist-non-react-statics": "^3.3.2"
},
"peerDependencies": {
"react": "^17.0 || ^18.0",
"react-dom": "^17.0 || ^18.0"
}
},
"node_modules/react-hook-form": {
"version": "7.30.0",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.30.0.tgz",
@ -18546,6 +18559,14 @@
"react-async-script": "^1.1.1"
}
},
"react-google-recaptcha-v3": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/react-google-recaptcha-v3/-/react-google-recaptcha-v3-1.10.0.tgz",
"integrity": "sha512-JBoqU107X8klQmS8tQSbQh1IMsT1fH3kVoArIqnia0rtn0rPNG9Ld+9rD/dHJMculIczSZpGvIJTXXwtsolMcg==",
"requires": {
"hoist-non-react-statics": "^3.3.2"
}
},
"react-hook-form": {
"version": "7.30.0",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.30.0.tgz",

1
package.json
View File

@ -47,6 +47,7 @@
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.3.1",
"react-google-recaptcha": "^2.1.0",
"react-google-recaptcha-v3": "^1.10.0",
"react-hook-form": "^7.30.0",
"react-mailchimp-subscribe": "^2.1.3",
"react-merge-refs": "^1.1.0",

59
src/components/sections/partners/contact/index.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react'
import { useCallback, useState } from 'react'
// eslint-disable-next-line import/no-named-as-default
import ReCAPTCHA from 'react-google-recaptcha'
import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
import Select from 'react-select'
import Line from '~/components/icons/line'
@ -56,8 +57,57 @@ const CustomForm = ({ data }: FormProps) => {
const [errorMsg, setErrorMsg] = useState('')
const [isFormSent, setIsFormSent] = useState(false)
const [isSending, setIsSending] = useState(false)
const [notification, setNotification] = useState('')
// const reRef = useRef<ReCAPTCHA>()
const { executeRecaptcha } = newFunction()
const handleSubmitForm = useCallback(
(e) => {
e.preventDefault()
if (!executeRecaptcha) {
// eslint-disable-next-line no-console
console.log('Execute recaptcha not yet available')
return
}
executeRecaptcha('enquiryFormSubmit').then((gReCaptchaToken: string) => {
// eslint-disable-next-line no-console
console.log(gReCaptchaToken, 'response Google reCaptcha server')
submitEnquiryForm(gReCaptchaToken)
})
},
[executeRecaptcha]
)
const submitEnquiryForm = (gReCaptchaToken: string) => {
fetch('/api/inquiry', {
method: 'POST',
headers: {
Accept: 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: JSON.stringify({
_gRecaptchaToken: gReCaptchaToken,
get gRecaptchaToken() {
return this._gRecaptchaToken
},
set gRecaptchaToken(value) {
this._gRecaptchaToken = value
}
})
})
.then((res) => res.json())
.then((res) => {
// eslint-disable-next-line no-console
console.log(res, 'response from backend')
if (res?.status === 'success') {
setNotification(res?.message)
} else {
setNotification(res?.message)
}
})
}
const handleSubmit = async (e: any) => {
e.preventDefault()
@ -210,6 +260,10 @@ const CustomForm = ({ data }: FormProps) => {
</form>
</div>
)
function newFunction(): { executeRecaptcha: any } {
return useGoogleReCaptcha()
}
}
const Contact = ({ data }: DataProps) => {
@ -239,3 +293,6 @@ const Contact = ({ data }: DataProps) => {
}
export default Contact
function submitEnquiryForm(gReCaptchaToken: string) {
throw new Error('Function not implemented.')
}

39
src/pages/_app.tsx
View File

@ -5,6 +5,7 @@ import { AppProps } from 'next/app'
import { RealViewportProvider } from 'next-real-viewport'
import { ThemeProvider } from 'next-themes'
import * as React from 'react'
import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
import { QueryClient, QueryClientProvider } from 'react-query'
// import { Footer } from '~/components/common/footer'
@ -59,20 +60,30 @@ const App = ({ Component, pageProps, ...rest }: AppProps) => {
(({ Component, pageProps }) => <Component {...pageProps} />)
return (
<QueryClientProvider client={queryClient}>
<RealViewportProvider debounceResize={false}>
<Noise />
<AnimationContextProvider>
<ThemeProvider enableSystem={false} defaultTheme="dark">
<GAScripts />
<FontsReadyScript />
{/* <Header /> */}
{getLayout({ Component, pageProps, ...rest })}
{/* <Footer /> */}
</ThemeProvider>
</AnimationContextProvider>
</RealViewportProvider>
</QueryClientProvider>
<GoogleReCaptchaProvider
reCaptchaKey="6LeG_uMhAAAAAKZcHgAdoXnXLc_vFftxruHU59GO"
scriptProps={{
async: false,
defer: false,
appendTo: 'head',
nonce: undefined
}}
>
<QueryClientProvider client={queryClient}>
<RealViewportProvider debounceResize={false}>
<Noise />
<AnimationContextProvider>
<ThemeProvider enableSystem={false} defaultTheme="dark">
<GAScripts />
<FontsReadyScript />
{/* <Header /> */}
{getLayout({ Component, pageProps, ...rest })}
{/* <Footer /> */}
</ThemeProvider>
</AnimationContextProvider>
</RealViewportProvider>
</QueryClientProvider>
</GoogleReCaptchaProvider>
)
}

13
yarn.lock
View File

@ -3577,7 +3577,7 @@
"capital-case" "^1.0.4"
"tslib" "^2.0.3"
"hoist-non-react-statics@^3.3.0", "hoist-non-react-statics@^3.3.1":
"hoist-non-react-statics@^3.3.0", "hoist-non-react-statics@^3.3.1", "hoist-non-react-statics@^3.3.2":
"integrity" "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="
"resolved" "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
"version" "3.3.2"
@ -5263,7 +5263,7 @@
dependencies:
"ua-parser-js" "^1.0.2"
"react-dom@*", "react-dom@^16.8 || ^17.0", "react-dom@^16.8.0 || ^17.0.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || 17.x", "react-dom@^17.0.2 || ^18.0.0-0", "react-dom@^18.2.0", "react-dom@>= 0.14.0", "react-dom@>=16.0.0", "react-dom@>=16.13", "react-dom@>=16.6.0":
"react-dom@*", "react-dom@^16.8 || ^17.0", "react-dom@^16.8.0 || ^17.0.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || 17.x", "react-dom@^17.0 || ^18.0", "react-dom@^17.0.2 || ^18.0.0-0", "react-dom@^18.2.0", "react-dom@>= 0.14.0", "react-dom@>=16.0.0", "react-dom@>=16.13", "react-dom@>=16.6.0":
"integrity" "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="
"resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
"version" "18.2.0"
@ -5288,6 +5288,13 @@
"use-callback-ref" "^1.3.0"
"use-sidecar" "^1.1.2"
"react-google-recaptcha-v3@^1.10.0":
"integrity" "sha512-JBoqU107X8klQmS8tQSbQh1IMsT1fH3kVoArIqnia0rtn0rPNG9Ld+9rD/dHJMculIczSZpGvIJTXXwtsolMcg=="
"resolved" "https://registry.npmjs.org/react-google-recaptcha-v3/-/react-google-recaptcha-v3-1.10.0.tgz"
"version" "1.10.0"
dependencies:
"hoist-non-react-statics" "^3.3.2"
"react-google-recaptcha@^2.1.0":
"integrity" "sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ=="
"resolved" "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz"
@ -5401,7 +5408,7 @@
"prop-types" "15.8.1"
"youtube-player" "5.5.2"
"react@*", "react@^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0", "react@^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || 17.x", "react@^17.0.2 || ^18.0.0-0", "react@^18.2.0", "react@>= 0.14.0", "react@>= 16.12.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=0.14.1", "react@>=15", "react@>=16.0.0", "react@>=16.13", "react@>=16.4.1", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0":
"react@*", "react@^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0", "react@^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || 17.x", "react@^17.0 || ^18.0", "react@^17.0.2 || ^18.0.0-0", "react@^18.2.0", "react@>= 0.14.0", "react@>= 16.12.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=0.14.1", "react@>=15", "react@>=16.0.0", "react@>=16.13", "react@>=16.4.1", "react@>=16.6.0", "react@>=16.8", "react@>=16.8.0":
"integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
"resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
"version" "18.2.0"