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

feat: create collection form validation

packages/grafnode-components/package.json

@@ -27,12 +27,14 @@
     "classnames": "^2.3.1",
     "codemirror": "^5.64.0",
     "escape-html": "^1.0.3",
+    "formik": "^2.2.9",
     "markdown-it": "^12.2.0",
     "nanoid": "^3.1.30",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-tabs": "^3.2.3",
     "styled-components": "^5.3.3",
-    "tailwindcss": "^2.2.19"
+    "tailwindcss": "^2.2.19",
+    "yup": "^0.32.11"
   }
 }

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);
   };
 

packages/grafnode-components/webpack.config.js

@@ -47,9 +47,11 @@ module.exports = {
     'codemirror': 'codemirror',
     'graphql': 'graphql',
     'escape-html': 'escape-html',
+    'formik': 'formik',
     'markdown-it': 'markdown-it',
     'nanoid': 'nanoid',
-    'graphql-request': 'graphql-request'
+    'graphql-request': 'graphql-request',
+    'yup': 'yup'
   },
   plugins: [
     new MiniCssExtractPlugin()

packages/grafnode-run/package.json

@@ -32,6 +32,7 @@
     "codemirror": "^5.64.0",
     "codemirror-graphql": "^1.2.5",
     "escape-html": "^1.0.3",
+    "formik": "^2.2.9",
     "graphiql": "^1.5.9",
     "graphql": "^16.2.0",
     "graphql-request": "^3.7.0",
@@ -45,7 +46,8 @@
     "react-tabs": "^3.2.3",
     "sass": "^1.46.0",
     "styled-components": "^5.3.3",
-    "tailwindcss": "^2.2.19"
+    "tailwindcss": "^2.2.19",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
     "babel-plugin-styled-components": "^2.0.2",