Context Implementation

App.tsx

import React, { ReactElement } from 'react'
import Component from './components/Component'
import {CreateUserProvider} from './contexts/CreateUserProvider'

interface Props {
	
}

export default function App({}: Props): ReactElement {
	return (
		<CreateUserProvider>
			<Component />
		</CreateUserProvider>
	)
}

Component.tsx

import React, { ReactElement } from 'react'
import {useCreateUserContext} from '../contexts/CreateUserProvider'

interface Props {
	
}

export default function App({}: Props): ReactElement {
	const { userValid, userErrors } = useCreateUserContext();
	return (
		<pre>
			{JSON.stringify({userValid, userErrors},null,2)}
		</pre>
	)
}

UserContext.js

import React, { useContext, useState } from 'react';


const defaultValid = {
	name: undefined,
	role: undefined,
	entitlements: undefined,
	phoneNumber: undefined,
	email: undefined,
};

const defaultErrors = {
	name: undefined,
	role: undefined,
	entitlements: undefined,
	phoneNumber: undefined,
	email: undefined,
};

export const CreateUserContext = React.createContext({
	userValid: defaultValid,
	setUserValid: () => {
		return;
	},
	userErrors: defaultErrors,
	setUserErrors: () => {
		return;
	},
});

export const useCreateUserContext = () => useContext(CreateUserContext);

export function CreateUserProvider({ children }) {
	const [userValid, setUserValid] = useState(defaultValid);
	const [userErrors, setUserErrors] = useState(defaultErrors);
	return (
		<CreateUserContext.Provider
			value={{ userValid, setUserValid, userErrors, setUserErrors }}>
			{children}
		</CreateUserContext.Provider>
	);
}

UserContext.ts

import React, { useContext, useState } from 'react';

export interface UserValid {
	name?: boolean;
	role?: boolean;
	entitlements?: boolean;
	phoneNumber?: boolean;
	email?: boolean;
}

export interface UserErrors {
	name?: string;
	role?: string;
	entitlements?: string;
	phoneNumber?: string;
	email?: string;
}

const defaultValid: UserValid = {
	name: undefined,
	role: undefined,
	entitlements: undefined,
	phoneNumber: undefined,
	email: undefined,
};

const defaultErrors: UserErrors = {
	name: undefined,
	role: undefined,
	entitlements: undefined,
	phoneNumber: undefined,
	email: undefined,
};

export const CreateUserContext = React.createContext<{
	userValid: UserValid;
	setUserValid: React.Dispatch<React.SetStateAction<UserValid>>;
	userErrors: UserErrors;
	setUserErrors: React.Dispatch<React.SetStateAction<UserErrors>>;
}>({
	userValid: defaultValid,
	setUserValid: () => {
		return;
	},
	userErrors: defaultErrors,
	setUserErrors: () => {
		return;
	},
});

export const useCreateUserContext = () => useContext(CreateUserContext);

export function CreateUserProvider({ children }: { children: JSX.Element }) {
	const [userValid, setUserValid] = useState<UserValid>(defaultValid);
	const [userErrors, setUserErrors] = useState<UserErrors>(defaultErrors);
	return (
		<CreateUserContext.Provider
			value={{ userValid, setUserValid, userErrors, setUserErrors }}>
			{children}
		</CreateUserContext.Provider>
	);
}

useValidate.ts

import { User } from '@Types/user.types';
import { FormikProps } from 'formik';
import { AnySchema } from 'yup';

export default function useUserValid(formikProps: FormikProps<User>) {
	const { setUserValid, setUserErrors } = useCreateUserContext();

	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	const validate = (schema: AnySchema, data: any, _name: string) => {
		schema
			.validate(data)
			.then(() => {
				setUserValid(_userValid => ({
					..._userValid,
					[_name]: true,
				}));
				setUserErrors(_userValid => ({
					..._userValid,
					[_name]: false,
				}));
			})
			.catch(e => {
				setUserValid(_userValid => ({
					..._userValid,
					[_name]: false,
				}));
				setUserErrors(_userValid => ({
					..._userValid,
					[_name]: e.errors,
				}));
			});
	};
	export default validate
}