From 67a988ab40cf2cb9345e7500d33cf67e5dd0629b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Damla=20K=C3=B6ksal?= Date: Mon, 19 Apr 2021 02:16:31 +0300 Subject: [PATCH] [#75] feat: start to implementation of Formik --- .../contact-form/contact-form.component.tsx | 97 +++++++++++++++++++ .../custom-container.component.tsx | 14 ++- package.json | 4 +- pages/contact/index.tsx | 7 +- yarn.lock | 84 +++++++++++++++- 5 files changed, 198 insertions(+), 8 deletions(-) create mode 100644 components/contact-form/contact-form.component.tsx diff --git a/components/contact-form/contact-form.component.tsx b/components/contact-form/contact-form.component.tsx new file mode 100644 index 0000000..95f0c50 --- /dev/null +++ b/components/contact-form/contact-form.component.tsx @@ -0,0 +1,97 @@ +import React, { ReactElement } from 'react' +import { Formik, Field, Form, FormikHelpers } from 'formik' +import * as yup from 'yup' + +interface Values { + firstName: string + lastName: string + companyName: string + email: string + message: string +} + +export default function ContactForm (): ReactElement { + const ContactFormSchema = yup.object().shape({ + firstName: yup.string().required('Ad boş bırakılamaz'), + lastName: yup.string().required('Soyad boş bırakılamaz'), + companyName: yup.string(), + email: yup.string().email('Lütfen geçerli bir e-mail adresi giriniz'), + message: yup.string().required('Lütfen mesajınızı giriniz') + }) + + // function sendToApi (form: FormData): void { + // const data = new FormData() + // const values = Object.values(form) + // data.append('firstName', values[0]) + // data.append('lastName', values[1]) + // data.append('companyName', values[0]) + // data.append('email', values[1]) + // data.append('message', values[0]) + // console.log(data.values()) + // axios({ + // method: "POST", + // url: "", + // data: data, + // }) + // .then((res) => { + // if (res.data.token) { + // window.localStorage.setItem("access_key", res.data.token); + // window.location.pathname = "/dashboard"; + // } + // return null; + // }) + // .catch((err) => + // err.response.data.message + // ? setMessage("Email or password is invalid") + // : null + // ); + // } + const initialValues: Values = { + firstName: '', + lastName: '', + companyName: '', + email: '', + message: '' + } + return ( +
+ + ) => { + setTimeout(() => { + // alert(JSON.stringify(values, null, 2)) + console.log(values) + setSubmitting(false) + }, 500) + }} + > +
+ + + + + + + + + + + + + + + + +
+
+ ) +} diff --git a/components/custom-container/custom-container.component.tsx b/components/custom-container/custom-container.component.tsx index 9853486..e503caa 100644 --- a/components/custom-container/custom-container.component.tsx +++ b/components/custom-container/custom-container.component.tsx @@ -10,6 +10,7 @@ interface Props { h2?: string h3?: string justifyContent?: string + paddingBottom?: string } export default function CustomContainer ({ @@ -18,14 +19,19 @@ export default function CustomContainer ({ h1, h2, h3, - justifyContent + justifyContent, + paddingBottom }: Props ): ReactElement { - const style: CSSProperties = { + const bodyStyle: CSSProperties = { justifyContent } + + const containerStyle: CSSProperties = { + paddingBottom + } return ( -
+
{ h1 !== undefined &&

{h1}

} @@ -38,7 +44,7 @@ export default function CustomContainer ({
+ page === 'contact' && styles.body_contact)} style={bodyStyle}> {children}
diff --git a/package.json b/package.json index 05593fb..64645af 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "dependencies": { "axios": "^0.21.1", "classnames": "^2.2.6", + "formik": "^2.2.6", "mapbox-gl": "^2.2.0", "mongodb": "^3.6.3", "next": "10.0.7", @@ -18,7 +19,8 @@ "react-image-gallery": "^1.0.9", "react-responsive": "^8.2.0", "sass-burger": "^1.3.1", - "smoothscroll-polyfill": "^0.4.4" + "smoothscroll-polyfill": "^0.4.4", + "yup": "^0.32.9" }, "license": "MIT", "devDependencies": { diff --git a/pages/contact/index.tsx b/pages/contact/index.tsx index df7fae0..afab4e3 100644 --- a/pages/contact/index.tsx +++ b/pages/contact/index.tsx @@ -2,11 +2,13 @@ import React, { ReactElement } from 'react' import { GetStaticProps } from 'next' import Image from 'next/image' import Head from 'next/head' + import Layout from '../../components/layout/layout.component' import Section from '../../components/section/section.component' import ImageBox from '../../components/image-box/image-box.component' import CustomContainer from '../../components/custom-container/custom-container.component' import Map from '../../components/map/map.component' +import Forms from '../../components/contact-form/contact-form.component' import styles from './contact.module.scss' @@ -71,7 +73,7 @@ export default function Contact ({ />
- + { informations.map((element, index) => ( @@ -124,6 +126,9 @@ export default function Contact ({ )) } + + +
diff --git a/yarn.lock b/yarn.lock index 13c0653..a056f5a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -30,6 +30,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.10.5": + version "7.13.10" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d" + integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/types@7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c" @@ -217,6 +224,11 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4= +"@types/lodash@^4.14.165": + version "4.14.168" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008" + integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q== + "@types/mapbox-gl@^2.1.1": version "2.1.1" resolved "https://registry.yarnpkg.com/@types/mapbox-gl/-/mapbox-gl-2.1.1.tgz#c1ef62f5e296ec58899f7a039ca56a3d61a5f99a" @@ -1144,6 +1156,11 @@ deep-is@^0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ= +deepmerge@^2.1.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170" + integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA== + define-properties@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1" @@ -1666,6 +1683,19 @@ follow-redirects@^1.10.0: resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.2.tgz#dd73c8effc12728ba5cf4259d760ea5fb83e3147" integrity sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA== +formik@^2.2.6: + version "2.2.6" + resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.6.tgz#378a4bafe4b95caf6acf6db01f81f3fe5147559d" + integrity sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA== + dependencies: + deepmerge "^2.1.1" + hoist-non-react-statics "^3.3.0" + lodash "^4.17.14" + lodash-es "^4.17.14" + react-fast-compare "^2.0.1" + tiny-warning "^1.0.2" + tslib "^1.10.0" + fs-constants@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad" @@ -1852,6 +1882,13 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoist-non-react-statics@^3.3.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hosted-git-info@^2.1.4: version "2.8.8" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488" @@ -2252,6 +2289,11 @@ locate-path@^5.0.0: dependencies: p-locate "^4.1.0" +lodash-es@^4.17.14, lodash-es@^4.17.15: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" + integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== + lodash.camelcase@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" @@ -2277,7 +2319,7 @@ lodash.throttle@^4.1.1: resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ= -lodash@^4.17.13: +lodash@^4.17.13, lodash@^4.17.14: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -2467,6 +2509,11 @@ murmurhash-js@^1.0.0: resolved "https://registry.yarnpkg.com/murmurhash-js/-/murmurhash-js-1.0.0.tgz#b06278e21fc6c37fa5313732b0412bcb6ae15f51" integrity sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E= +nanoclone@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4" + integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA== + nanoid@^3.1.16: version "3.1.20" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788" @@ -3028,6 +3075,11 @@ prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, p object-assign "^4.1.1" react-is "^16.8.1" +property-expr@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.4.tgz#37b925478e58965031bb612ec5b3260f8241e910" + integrity sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg== + protocol-buffers-schema@^3.3.1: version "3.5.1" resolved "https://registry.yarnpkg.com/protocol-buffers-schema/-/protocol-buffers-schema-3.5.1.tgz#8388e768d383ac8cbea23e1280dfadb79f4122ad" @@ -3137,6 +3189,11 @@ react-dom@17.0.1: object-assign "^4.1.1" scheduler "^0.20.1" +react-fast-compare@^2.0.1: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" + integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== + react-image-gallery@^1.0.9: version "1.0.9" resolved "https://registry.yarnpkg.com/react-image-gallery/-/react-image-gallery-1.0.9.tgz#0bd14356913c04a7b24b0a69b06e211b33684d40" @@ -3150,7 +3207,7 @@ react-image-gallery@^1.0.9: react-swipeable "^5.2.0" resize-observer-polyfill "^1.5.0" -react-is@16.13.1, react-is@^16.8.1: +react-is@16.13.1, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -3861,6 +3918,11 @@ timers-browserify@^2.0.4: dependencies: setimmediate "^1.0.4" +tiny-warning@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== + tinyqueue@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-2.0.3.tgz#64d8492ebf39e7801d7bd34062e29b45b2035f08" @@ -3888,6 +3950,11 @@ toidentifier@1.0.0: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553" integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw== +toposort@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330" + integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA= + tr46@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09" @@ -4123,3 +4190,16 @@ yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + +yup@^0.32.9: + version "0.32.9" + resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.9.tgz#9367bec6b1b0e39211ecbca598702e106019d872" + integrity sha512-Ci1qN+i2H0XpY7syDQ0k5zKQ/DoxO0LzPg8PAR/X4Mpj6DqaeCoIYEEjDJwhArh3Fa7GWbQQVDZKeXYlSH4JMg== + dependencies: + "@babel/runtime" "^7.10.5" + "@types/lodash" "^4.14.165" + lodash "^4.17.20" + lodash-es "^4.17.15" + nanoclone "^0.2.1" + property-expr "^2.0.4" + toposort "^2.0.2"