Updates for build issue and gitignore

Author: lukefrogger

.gitignore

@@ -22,3 +22,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vscode

dist/index.js

@@ -22,6 +22,7 @@
     "url": "git+https://github.com/fetchforms/react-client.git"
   },
   "dependencies": {
+    "dotenv": "^16.0.0",
     "final-form": "^4.20.4",
     "react-final-form": "^6.5.7",
     "react-number-format": "^4.9.1"

package-lock.json

@@ -11,15 +11,18 @@ const ManagedForm = () => {
   };
   return (
     <div className=''>
-      <FetchFormsProvider permission='API_TOKEN'>
+      <FetchFormsProvider permission={process.env.REACT_APP_FF_TOKEN}>
         <div className='text-3xl'>Managed Form</div>
         <p className='text-gray-500'>
           The easiest way to use Fetch Forms. Pass in a form slug and we'll do
           the rest.
         </p>
         <br />
         <div>
-          <FetchForm slug='FORM_SLUG' onSubmit={onSubmit} />
+          <FetchForm
+            slug={process.env.REACT_APP_FF_FORM_ID}
+            onSubmit={onSubmit}
+          />
         </div>
       </FetchFormsProvider>
     </div>

package.json

@@ -14,7 +14,9 @@ import './styles.css';
 
 const HookForm = () => {
   // FetchFormProvider needs to wrap this component
-  const [fetchForm, loading, error] = useFetchForms('FORM_SLUG');
+  const [fetchForm, loading, error] = useFetchForms(
+    process.env.REACT_APP_FF_FORM_ID
+  );
 
   const onFinish = (values) => {
     console.log('Success:', values);
@@ -42,10 +44,10 @@ const HookForm = () => {
         };
       }
     });
-    console.log('rules', rules);
     return rules;
   };
 
+  // Find the appropriate field type
   const findFieldType = (item) => {
     switch (item.fieldType) {
       case 'select':

src/examples/ManagedForm.js

@@ -4,7 +4,7 @@ import HookForm from './HookForm';
 
 const HookParent = () => {
   return (
-    <FetchFormsProvider permission='API_TOKEN'>
+    <FetchFormsProvider permission={process.env.REACT_APP_FF_TOKEN}>
       <HookForm />
     </FetchFormsProvider>
   );

src/examples/hookform/HookForm.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './examples/index.css';
 import App from './App';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/examples/hookform/Parent.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useState } from 'react';
 
 export const FormsContext = createContext({});
 

src/index.css renamed to src/examples/index.css

@@ -27,7 +27,6 @@ const useFetchForms = (id, json) => {
           }
         );
         const temp = await resp.json();
-        // console.log('form from hook', temp);
 
         if (!temp.success) {
           throw (
@@ -74,7 +73,6 @@ const useFetchForms = (id, json) => {
         return { success: true };
       }
       const errorResp = await resp.json();
-      // console.log('form from hook', temp);
       throw (
         (errorResp.error && errorResp.error.message) ||
         errorResp.error ||