Oops! Something went wrong.
-
- We're sorry for the inconvenience. Please try reloading the
- page.
-
-
+
Were sorry for the inconvenience. Here are a few options:
+
+
+
+
+ {/* Additional navigation options can be added here */}
- {this.state.error && this.state.error.toString()}
+ Details
+ {this.state.error && this.state.error?.toString()}
{this.state.errorInfo?.componentStack}
diff --git a/src/context/FormContext/FormContext.jsx b/src/context/FormContext/FormContext.jsx
new file mode 100644
index 0000000..8c9406c
--- /dev/null
+++ b/src/context/FormContext/FormContext.jsx
@@ -0,0 +1,213 @@
+import React, { createContext, useState, useContext } from 'react';
+import { useAuthContext } from '../AuthContext/authContext';
+import { usePageContext } from '../PageContext/PageContext';
+import { defaultContextValue } from './helpers';
+
+// Define the context
+const FormContext = createContext(defaultContextValue);
+
+// Hook for consuming context
+export const useFormContext = () => useContext(FormContext);
+// Define form validations if needed
+const formValidations = {
+ loginForm: (values) => {
+ let errors = {};
+ if (!values.username) errors.username = 'Username is required';
+ if (!values.password) errors.password = 'Password is required';
+ return errors;
+ },
+ signupForm: (values) => {
+ let errors = {};
+ // Example: Add validations specific to signup form
+ if (!values.firstName) errors.firstName = 'First name is required';
+ if (!values.lastName) errors.lastName = 'Last name is required';
+ // ... more validations
+ return errors;
+ },
+ updateUserDataForm: (values) => {
+ let errors = {};
+ // Example: Add validations specific to user data update form
+ if (!values.firstName) errors.firstName = 'First name is required';
+ if (!values.lastName) errors.lastName = 'Last name is required';
+ // ... more validations
+ return errors;
+ },
+ // ...other form-specific validations
+};
+// Initial state for different forms
+const initialFormStates = {
+ loginForm: {
+ username: '',
+ password: '',
+ firstName: '',
+ lastName: '',
+ email: '',
+ role_data: {
+ name: 'admin',
+ capabilities: ['create', 'read', 'update', 'delete'],
+ },
+ signupMode: false, // Assuming it's a boolean toggle for whether it's signup or login
+ },
+ signupForm: {
+ username: '',
+ password: '',
+ firstName: '',
+ lastName: '',
+ email: '',
+ role_data: {
+ name: 'admin',
+ capabilities: ['create', 'read', 'update', 'delete'],
+ },
+ signupMode: true,
+ },
+ updateUserDataForm: {
+ firstName: '',
+ lastName: '',
+ email: '',
+ phone: '',
+ role_data: {
+ name: 'admin',
+ capabilities: ['create', 'read', 'update', 'delete'],
+ },
+ dateOfBirth: '',
+ gender: '',
+ age: '',
+ status: '',
+ signupMode: false,
+ },
+ updateCollectionForm: {
+ name: '',
+ description: '',
+ },
+ searchForm: {
+ searchTerm: '',
+ },
+ customerInfoFields: {
+ firstName: '',
+ lastName: '',
+ address: {
+ line1: { type: String },
+ line2: { type: String },
+ city: { type: String },
+ state: { type: String },
+ zip: { type: String },
+ country: { type: String },
+ },
+ timezone: { type: String },
+ phone: { type: String },
+ email: { type: String },
+ },
+ // ...other form types as needed
+};
+
+// Provider component
+export const FormProvider = ({ children }) => {
+ const { signup, login } = useAuthContext();
+ const {
+ loadingStatus,
+ setLoading, // Use setLoading instead of individual state setters
+ returnDisplay,
+ } = usePageContext();
+ const [forms, setForms] = useState(initialFormStates);
+ const [currentForm, setCurrentForm] = useState({}); // For multiple forms
+ const [formErrors, setFormErrors] = useState(null); // For a single form
+
+ const resetForm = (formName) => {
+ setForms((prevForms) => ({
+ ...prevForms,
+ [formName]: initialFormStates[formName],
+ }));
+ setFormErrors((prevErrors) => ({ ...prevErrors, [formName]: {} }));
+ };
+
+ // Utility to set value at a given path in an object
+ // Example: setValueAtPath(obj, 'address.line1', '123 Main St')
+ const setValueAtPath = (obj, path, value) => {
+ const keys = path.split('.');
+ let current = obj;
+ for (let i = 0; i < keys.length - 1; i++) {
+ current[keys[i]] = current[keys[i]] || {};
+ current = current[keys[i]];
+ }
+ current[keys[keys.length - 1]] = value;
+ };
+
+ // Function to handle form field changes
+ // Example: handleChange('signupForm', 'firstName')
+ const handleChange = (formName, path) => (event) => {
+ const { value } = event.target;
+ setForms((prevForms) => {
+ const form = { ...prevForms[formName] };
+ setValueAtPath(form, path, value);
+ return { ...prevForms, [formName]: form };
+ });
+
+ if (formValidations[formName]) {
+ const newErrors = formValidations[formName](forms[formName]);
+ setFormErrors({ ...formErrors, [formName]: newErrors });
+ }
+ };
+
+ // Function to handle form submission
+ const handleSubmit = (formName) => async (event) => {
+ event.preventDefault();
+ setLoading('isFormDataLoading', true); // indicate form is being submitted
+ setCurrentForm(forms[formName]); // Set current form
+ const currentErrors = formValidations[formName]
+ ? formValidations[formName](currentForm)
+ : {};
+ const securityData = {
+ username: currentForm.username,
+ password: currentForm.password,
+ email: currentForm.email,
+ role_data: {
+ name: 'admin',
+ capabilities: ['create', 'read', 'update', 'delete'],
+ },
+ };
+ const basicData = {
+ firstName: currentForm.firstName,
+ lastName: currentForm.lastName,
+ };
+ if (Object.values(currentErrors).every((x) => x === '')) {
+ // Proceed based on form type
+ switch (formName) {
+ case 'signupForm':
+ console.log('Submitting signup form:', currentForm);
+ await signup(securityData, basicData); // Use the appropriate function from AuthContext
+ break;
+ case 'loginForm':
+ console.log('Submitting login form:', currentForm);
+ await login(currentForm?.username, currentForm?.password); // Adjust as necessary
+ break;
+ // Handle other cases
+ }
+ // Handle success logic here
+
+ // Reset the form
+ resetForm(formName);
+ } else {
+ setFormErrors(currentErrors); // Update error state
+ }
+ setLoading('isFormDataLoading', false); // indicate form submission is done
+ };
+
+ // Provide each form's data, handleChange, and handleSubmit through context
+ const contextValue = {
+ forms,
+ formErrors,
+ initialFormStates,
+ currentForm,
+ setFormErrors,
+ setCurrentForm,
+ handleChange,
+ handleSubmit,
+ resetForm,
+ };
+
+ return (
+
{children}
+ );
+};
+
+export default FormProvider;
diff --git a/src/context/FormContext/helpers.jsx b/src/context/FormContext/helpers.jsx
new file mode 100644
index 0000000..e519164
--- /dev/null
+++ b/src/context/FormContext/helpers.jsx
@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+export const defaultContextValue = {
+ forms: {},
+ formErrors: {},
+ initialFormStates: {},
+ currentForm: {},
+ setFormErrors: () => {},
+ setCurrentForm: () => {},
+ handleChange: () => {},
+ handleSubmit: () => {},
+ resetForm: () => {},
+};
diff --git a/src/context/Helpers.jsx b/src/context/Helpers.jsx
index c427421..b2fb415 100644
--- a/src/context/Helpers.jsx
+++ b/src/context/Helpers.jsx
@@ -1,6 +1,9 @@
import { useEffect, useState } from 'react';
import { useCookies } from 'react-cookie';
+export const BASE_URL = `${process.env.REACT_APP_SERVER}/api`;
+
+export const createUrl = (path) => `${BASE_URL}/${path}`;
/**
* The base URL for all API calls.
* @type {String}
@@ -30,34 +33,6 @@ const lastRequestTime = {
const updateLastRequestTime = (method) => {
lastRequestTime[method] = Date.now();
};
-/**
- * Wraps fetch API calls and implements a rate limit for each HTTP method type.
- * @param {String} url - The API URL to make the request to.
- * @param {String} method - The HTTP method for the request.
- * @param {Object} [body=null] - The request payload if needed.
- * @returns {Promise