[#75] feat: start to implementation of Formik

damla · Apr 18, 2021 · 67a988a · 67a988a
1 parent fe238e4
commit 67a988a
Show file tree

Hide file tree

Showing 5 changed files with 198 additions and 8 deletions.
diff --git a/components/contact-form/contact-form.component.tsx 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 (
+    <div>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={ContactFormSchema}
+        onSubmit={(
+          values: Values,
+          { setSubmitting }: FormikHelpers<Values>
+        ) => {
+          setTimeout(() => {
+            // alert(JSON.stringify(values, null, 2))
+            console.log(values)
+            setSubmitting(false)
+          }, 500)
+        }}
+      >
+        <Form>
+          <label htmlFor="firstName">Ad</label>
+          <Field id="firstName" name="firstName" placeholder="Adınızı giriniz" />
+
+          <label htmlFor="lastName">Soyad</label>
+          <Field id="lastName" name="lastName" placeholder="Soyadınızı giriniz" />
+
+          <label htmlFor="companyName">Şirket Adı</label>
+          <Field id="companyName" name="companyName" placeholder="Şirket adı giriniz" />
+
+          <label htmlFor="email">E-Mail</label>
+          <Field
+            id="email"
+            name="email"
+            placeholder="[email protected]"
+            type="email"
+          />
+
+          <label htmlFor="message">Mesajınız</label>
+          <Field as="textarea" id="message" name="message" placeholder="Mesajınızı giriniz" />
+          <button type="submit">Gönder</button>
+        </Form>
+      </Formik>
+    </div>
+  )
+}
diff --git 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 (
-    <div className={styles.container}>
+    <div className={styles.container} style={containerStyle}>
       {
         h1 !== undefined && <h1 className={styles.h1}>{h1}</h1>
       }
@@ -38,7 +44,7 @@ export default function CustomContainer ({
       <div className={classNames(
         styles.body,
         page === 'about-us' && styles.body_aboutUs,
-        page === 'contact' && styles.body_contact)} style={style}>
+        page === 'contact' && styles.body_contact)} style={bodyStyle}>
         {children}
       </div>
     </div>

diff --git 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
@@ -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 ({
           />
         </Section>
         <Section relative>
-          <CustomContainer page='contact' h1={maintitle} h3={subtitle} justifyContent='center'>
+          <CustomContainer page='contact' h1={maintitle} h3={subtitle} justifyContent='center' paddingBottom="0">
             {
               informations.map((element, index) => (
 
@@ -124,6 +126,9 @@ export default function Contact ({
               ))
             }
           </CustomContainer>
+          <CustomContainer page='contact' h1="İletişim Formu"justifyContent='center'>
+            <Forms/>
+          </CustomContainer>
         </Section>
       </Layout>
     </>

diff --git 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/[email protected]":
   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 @@ [email protected], 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 @@ [email protected]:
     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"
 
-[email protected], react-is@^16.8.1:
+[email protected], 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 @@ [email protected]:
   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"