Merge pull request #2 from anusreesubash/feature/create-collection-form-validation

feat: create collection form validation

packages/grafnode-components/src/components/Sidebar/CreateCollection/index.js

@@ -1,21 +1,47 @@
-import React from 'react';
+import React, { useState } from 'react';
+import {useFormik} from 'formik';
+import * as Yup from 'yup';
 import Modal from '../../Modal';
 
 const CreateCollection = ({handleConfirm, handleCancel, actions, dispatch}) => {
+  const formik = useFormik({
+		enableReinitialize: true,
+    initialValues: {
+      collectionName: ''
+    },
+    validationSchema: Yup.object({
+      collectionName: Yup.string()
+        .min(3, 'must be atleast 3 characters')
+        .max(50, 'must be 50 characters or less')
+        .required('name is required')
+    }),
+    onSubmit: (values) => {
+      handleConfirm(values);
+    }
+  });
+
+  const onSubmit = () => formik.handleSubmit();
+
   return (
     <Modal
       size="sm"
       title='Create Collection'
-      handleConfirm={handleConfirm}
+      handleConfirm={onSubmit}
       handleCancel={handleCancel}
     >
-      <form className="grafnode-form">
-        <label htmlFor="name" className="block font-semibold">Name</label>
-        <input
-          id="collection-name" type="text" name="collection-name"
-          className="block textbox mt-2 w-full"
-          required
-        />
+      <form className="grafnode-form" onSubmit={formik.handleSubmit}>
+        <div>
+          <label htmlFor="collectionName" className="block font-semibold">Name</label>
+          <input
+            id="collection-name" type="text" name="collectionName"
+            className="block textbox mt-2 w-full"
+            onChange={formik.handleChange}
+            value={formik.values.collectionName || ''}
+          />
+          {formik.touched.collectionName && formik.errors.collectionName ? (
+            <div className="text-red-500">{formik.errors.collectionName}</div>
+          ) : null}
+        </div>
       </form>
     </Modal>
   );

packages/grafnode-components/src/components/Sidebar/index.js

@@ -23,7 +23,8 @@ const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
     setModalOpen(false);
   };
 
-  const handleConfirm = () => {
+  const handleConfirm = (values) => {
+    console.log(values);
     setModalOpen(false);
   };