DEV Community: full-stack-concepts

How to build React Apple Accessories Cart (custom hook and broadcasts, no plugins)

full-stack-concepts — Sun, 02 Oct 2022 19:00:01 +0000

This demo shows how you can manage state with a custom hook that implements a reducer to handle changes, context to share data between components and a broadcastchannel to maintain state between components. Actually you can use a single custom hook to create as many sub-stores as you like - for instance one for products, another one for orders etc. Each sub-store can have it's own channel and context. If you want to build a flexible store that maintains state between tabs without using third party plugins then this demo may be useful .

The code for this project can be found on Github

See this code in action at Vercel

Building the Custom Hook
Let's start with coding the store. The store manages state in three different ways: through a reducer store, a context store and local storage. The reducer store handles changes like orders, the context store keeps a copy the state so data can be shared among components and another copy is injected into local storage. So whenever the page refreshes your data is still there.

   const [ state, dispatch] = useReducer(storeReducer, initialState);

   // backup state for sharing data between components
   const { setContextState } = useContext(Context);

   // broadcast channel
   const channel = new BroadcastChannel( channelName );

You can use the channel to message and listen to incoming posts. Whenever a message arrives you want to update local storage, the context store and reducer store.

channel.onmessage = function(event) {        
  let { data } = event;                  
  saveStateToLocalStore(data);   
  dispatch( {type: 'set', value: data });               
  setContextState(data);
};

Whenever the app loads you want to check is state has been saved in local storage - the backup if anything went wrong. This can be done with the useEffect hook inside our custom hook.

useEffect( () => {
  // retrieve state from local storage on load
  const cachedState = getStateFromLocalStore();      
  if(cachedState) {           
    dispatch({ type: "init", value: cachedState });
    setContextState(cachedState);

  // add default state to local storage
  } else {        
    saveStateToLocalStore(initialState);    
    setContextState(initialState);   
  }       
}, [ setContextState ]);

Finally we add some methods and export them. The custom hook looks something like...

export const useStore = (channelName) => {
  const [ state, dispatch] = useReducer(storeReducer, initialState);  
  const { setContextState } = useContext(Context);  
  const channel = new BroadcastChannel( channelName );  

  useEffect( () => {
    // retrieve state from local storage on load
    const cachedState = getStateFromLocalStore();      
    if(cachedState) {           
      dispatch({ type: "init", value: cachedState });
      setContextState(cachedState);

    // add default state to local storage
    } else {        
      saveStateToLocalStore(initialState);    
      setContextState(initialState);   
    }       
  }, [ setContextState ]);

  channel.onmessage = function(event) {        
    let { data } = event;                  
    saveStateToLocalStore(data);   
    dispatch( {type: 'set', value: data });               
    setContextState(data);
  }; 

  const addOrder = product => { .... }
  const removeOrder = (orderID) => {...}
  .....

  return [ 
    state,        
    addOrder,
    removeOrder,
    ...    
  ];
}

you can now import the custom hook or context in any component. If you want data, let's say products, you can do

const { contextState: { products } } = useContext( Context );

Or you can use the custom hook to grab data.

 const [state] = useStore('store');    
 const { orders } = state;

And then use it to build a checkout page with @mui (material-ui).

Authentication with React Form Wizard and Nodejs - Part 2

full-stack-concepts — Sat, 12 Mar 2022 15:07:21 +0000

This tutorial is a continuation of 'Authentication with React From Wizard and Nodejs - Part 1. In the previous part the backend and Redux Store was coded. It's now time to build the form wizards with material-UI, React Hooks and Yup.

(3) Sign Up Form Wizard with Context Store

The first thing we need to do is to define the main form element field, a Material-UI text field. Create a folder named elements inside your /src directory and add TextField.js.

You can now use this element to code the inputs or fields that will be used in the hooks form. Create an inputs folder in /src directory and add these fine files:

Email.js

import TextField from '../elements/TextField';

export const Email = ({label, control, register, onChangeHandler, onBlurHandler}) => <TextField
    fieldName={`email`}
    fieldType={`email`}
    label={`Email`}
    control={control}
    register={register}
    required={true}
    onChangeHandler={onChangeHandler}
    onBlurHandler={onBlurHandler}
/>

Password.js

import TextField from '../elements/TextField';

export const Password = ({label, control, register, onChangeHandler, onBlurHandler}) => <TextField
    fieldName={`password`}
    fieldType={`password`}
    label={`Password`}
    control={control}
    register={register}
    required={true}
    onChangeHandler={onChangeHandler}
    onBlurHandler={onBlurHandler}
/>

Signin Components

Now create a components folder in /src dir and then a new subfolder named SigninStepper.

Our main component is Stepper.js which imports it's children dynamically, depending on the form step. Each form step should be validated as soon as all fields are touched. If the step is valid the user should be allowed to progress to the next step. All components share state through React Context.

Let's start with coding a local Context Store, FormContext.js

import {createContext, useState} from 'react';
export const FormContext = createContext();
export const FormContextProvider = ({children}) => {    
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [step1, setStep1Finished ] = useState(false);   
  const [finished, setFinished] = useState(false);
  const formContextValues = {               
    email, setEmail,  
    password, setPassword,
    step1, setStep1Finished,        
    finished, setFinished
  };    
  return (<div>
    <FormContext.Provider value={formContextValues}>
      {children}
    </FormContext.Provider>
   </div>);
}

Then wrap your provider like so in components/SigninStepper/index.js:

import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { green, blue } from '@mui/material/colors';
import { FormContextProvider } from './FormContext';
import Stepper from './Stepper';
const theme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: blue[500],
    },
    secondary: {
      main: green[500],
    },
  },
});

/**
 * Form Context Store
 */
function SigninStepper() {  
  return (
    <ThemeProvider theme={theme}>
      <FormContextProvider>              
        <Stepper />
      </FormContextProvider>
     </ThemeProvider>
  );
}

export default SigninStepper;

The Stepper Component
The 'high order component'is a @Mui vertical stepper and extended with:
(1) The FormContext store.

    const {
        email, password, step1, finished       
    } = useContext(FormContext);

(2) Load dynamic content with useEffect hook.

   useEffect(() => {       
        let Component;
        const load = async () => {
            const StepView = `Step${activeStep+1}`;
            if(!components[StepView]) {             
                const { default:View } = await import(`./Steps/${StepView}`)
                Component = <View 
                    FormContext={FormContext} 
                />;             
                setComponent({...components, [StepView]: Component })
                setView(Component);
            } else {               
                setView(components[StepView]);
            }
        }
        load();       
    }, [activeStep]);

(3) Monitor progress with hook useEffect

useEffect(() => {    
  setSolutionProvided(false);
  if (activeStep === 0 && step1) {
    setSolutionProvided(true);
  }       
  if (activeStep === steps.length - 1 && password && finished) {
    setSolutionProvided(true);
  }       
}, [activeStep, email, password, step1, finished]);

(4) Monitor result of our Redux login action with another useEffect hook.

useEffect(() => {            
  if (status.success) {                             
    navigate('/dashboard');
  }       
  if (status.error) {                     
    setActiveStep(steps.length-1);
    toast.error(status.message);                          
  }
  dispatch(clearFetchStatus());       
}, [status, dispatch, navigate]);

The result may look like:

Let's now create the /src/components/SigninStepper/Stepsdirectory where the different form steps will be stored.

Step1.js

Whenever the user add a value to the email field the onChangeHandler function is triggered and (1) injects the event value into the form state of React Hook Form, (2) triggers validation and (3) saves the value in the Context Store.

As soon as Yup through React Hook Form signals that the form is valid - the isValid param of formState - the high order component (Stepper.js) is informed though an useEffect hook that the step is finished and the user may proceed to the next one.

Step2.js

This step uses the same logic. Whenever a user browses between validated steps the useEffect hook is used to load any value saved in the Context Store.

(4) Sign Up form wizard with Context Store

To create this form wizard you only have to repeat the steps used to create the Sign in Form Wizard as it uses the same building blocks:
(1) Create a folder named SigninStepper
(2) Code the Context Store
(3) Wrap it around Stepper.js in index.js
(4) Code Stepper.js
(5) Code the steps with inputs Email and Pasword

The app is now ready to be tested. Open two terminals and start the server and client with npm run start.

More examples can be found in the repo.

Authentication with React Form Wizard and Nodejs - Part 1

full-stack-concepts — Sat, 12 Mar 2022 15:03:48 +0000

Introduction
In Turn any Form into a stepper form wizard with UI, Hooks, Context, React-Hook-Form and Yup it was shown how you can improve user experience by breaking up extended forms into wizards with React, Material-UI and React-Hook-Forms. This tutorial aims to code a sign in and sign up stepper powered by a Nodejs back-end and uses the same architecture from the previous part with the exception of Redux which will be used to manage state at application level.

So what will be coded?

(1) Node.js back-end for registering and validating users

(2) Redux store for communicating with back-end

(3) Sign up form wizard with Context Store

(4) Sign in form wizard with Context Store

Prerequisites
In order to work with the concepts presented in this tutorial you should have a basic understanding of ES6, React hooks, functional components, Context, Redux and NodeJS. T

In this first part we'll set up the back-end server and the Redux Store. In the next part we'll code the form wizard steppers. The code for this project can be found on Github.

Let's start with installing a new React app.

npx create-react-app <your-app-name>
cd <your-app-name>
npm install

(1) NodeJS back-end
Let's code the server first. In your project directory create a folder called server. Now use your favorite package manager to init your local repo:

npm init

Now install the following packages:

npm i --save cors express lowdb morgan nanoid

Install nodemon.js globally, a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected. Install it globally with

npm i -g nodemon

You have installed lowdb, a tiny local JSON database for small NodeJS projects. This package stores data as an object and supports two operations: read and write. The server app will use express to register, read and update user objects/entries and nanoid to create user tokens.

Let's now create the node index file that will be served with nodemon.js.

index.js

import express from "express";
import cors from 'cors';
import morgan from "morgan";
import { Low, JSONFile } from 'lowdb';
import userRouter from './users.js';
import { nanoid } from 'nanoid';

const adapter = new JSONFile("db.json");
const db = new Low(adapter);
db.data = ({ users: [
  { 
    id: 1,
    role: 'admin',
    email: 'admin@example.com' ,
    password: '12345678',
    firstName: 'Admin',
    lastName: 'Adminstrator',
    token: nanoid(30) 
  },
  {
    id: 2,
    role: 'user',
    email: 'johndoe@example.com',
    password: '12345678',
    firstName: 'John',
    lastName: 'Doe',
    token: nanoid(30)
  }
]});
await db.write(db.data);

const PORT = process.env.PORT || 4000
const app = express();
app.db = db;
app.use(cors({origin: '*'}));
app.use(express.json());
app.use(morgan("dev"));
app.use("/users", userRouter);
const localRouter = express.Router();
localRouter.get("/", (req, res) => {        
  res.send('Only  /users/* routes are supported ');
});
app.use(localRouter);
app.listen(PORT, () => console.log(`Listening on Port ${PORT}`));

This file initializes the database with two predefined user accounts and tells express to use routes from the users.js file. So let's add this file:

users.js

Your server is now ready to run on port 4000.
So let's start it with

npm start

You can test the registration for any user from your browse with this GET route:

http://locahost:4000/register/user@example.com/mypassword

(2) Redux store for communicating with back-end
Let's now move one dir up, to the root of directory and add the following packages to the React app:

npm i --save @hookform/resolvers @mui/icons-material 
@mui/material @reduxjs/toolkit react-hook-form 
react-hot-toast react-redux yup

Why would you implement Redux if React Context can do the job? That's is a matter of opinion. Redux has better code organization, great tools for debugging, designed for dynamic data and extendible as can be read in this article. Another great advantage is the usage of thunks or middleware that can be imported into other slices or parts of your store. But when you code a small project Redux is probably a form of overhead.

Let's now code the Redux store:

UserSlice
Store
Wrap the App with Redux

Setting up the UserSlice

The UserSlice contains two functions that can be used with Redux's dispatch and getstate methods which will be called in the high order component of our form wizard. The state of these actions is managed in the extraReducers section. Actually it would be better to export these actions into a separate file so they can be called and used in other slices. Inside the src/ folder of your folder create a new folder named Store and code 'UserSlice.js'.

 <your-app-name>/src/Store/UserSlice.js

Let's first crate a wrapper function for fetch requests and import relevant components.

/* eslint-disabled  */
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

const request = async (method, url, data) => {
  let response = await fetch(
    url,                
    {
      method,
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    }
  );
  return response;      
}

Now we need two middleware functions, one for registering new users and one for signing in. These functions are created with Redux createAsyncThunk so our app has access to the async request lifecycles rejected, pending and fulfilled which canbe used to manage the state of the application.

The login function:

export const loginUser = createAsyncThunk(
  'user/login',
  async ({ email, password }, thunkAPI) => {
    try {
      const url = 'http://localhost:4000/users/login';    
      const response = await request('POST', url, { email, password });           
      const data = await response.json();        
      if (response.status === 200) {                
        return { 
          ...data,                 
          status: true
        };
      } else {
        return thunkAPI.rejectWithValue(data);
      }
    } catch (e) {            
      return thunkAPI.rejectWithValue({
        status:false,
        data: e.response.data
      });
    }
  }
)

And the registration function:

export const signupUser = createAsyncThunk(
  'user/signup',
  async ({ email, password }, thunkAPI) => {    
    try {
      const url = 'http://localhost:4000/users/register';            
      const response = await request('POST', url, { email, password });           
      let data = await response.json();                
      if (response.status === 200 || response.status === 201) {                
        return { 
          ...data, 
          email: email,
          status: data.status,
          message: (data.message) ? data.message: null
        }
      } else {                  
        return thunkAPI.rejectWithValue(data);
      }
    } catch (e) {            
      return thunkAPI.rejectWithValue({
        status: false,
        data: e.response.data
      });
    }
  }
);

Let's now code the slice portion:

const initFetchState = {
  fetching: false,
  success: false,
  error: false,
  message: null
}

const initMemberState = {
  token: null,  
  email: null        
}

const initialState = {
  loggedIn:false,
  status: initFetchState,
  member: initMemberState
};

const userSlice = createSlice({
  name: 'user',
  initialState: initialState,
  reducers: {       
    clearState: state => { state = initialState; },    
    clearFetchStatus: state => {
      state.status = initFetchState;
    },
    deleteUserToken: state => {
      state.member = { ...state.member, token: null};
    },
    setuserToken: (state, action) => { 
      state.member = { ...state.member, token: action.payload };
    },
    logout: (state, action) => { 
      state = { 
        loggedn: false,
        status: initFetchState,
        member: initMemberState
      };
    },
  },
  extraReducers: {
    [signupUser.fulfilled]: (state, { payload }) => {          
      state.status.fetching = false;
      state.status.success = true;          
      state.member.email = payload.email;       
      return state;
    },
    [signupUser.pending]: (state) => {
      state.status.fetching = true;
      return state;
    },
    [signupUser.rejected]: (state, { payload }) => {                     
      state.status.fetching= false;
      state.status.error = true;
      state.status.message = (payload) ? payload.message : 'Connection Error';            
      return state;
    },
    [loginUser.fulfilled]: (state, { payload }) => {                                        
      state.loggedIn = true;
      state.member.token = payload.token;
      state.member.email = payload.user.email;
      state.member.id = payload.user.id;        
      state.status.fetching = false;
      state.status.success = true;
      return state;
    },
    [loginUser.rejected]: (state, { payload }) => {                        
      state.status.fetching= false;
      state.status.error = true;               
      state.status.message = (payload) ? payload.message : 'Connection Error';           
      return state;
    },
    [loginUser.pending]: (state) => {       
      state.status.fetching = true;
      return state;
    },      
  }
});

export const {
  clearState,   
  setuserToken,
  clearFetchStatus
} = userSlice.actions;

export default userSlice.reducer;

The Redux Store
Now set up the store that brings together the state, actions, and reducers that make up the app so state can be retrieved, updated and handle callbacks. Create the src/Store/index.js file:

import { combineReducers } from "redux";
import { configureStore } from "@reduxjs/toolkit";
import UserSlice from './UserSlice';

const rootReducer = combineReducers({
  user: UserSlice
});
export const store = configureStore({
  reducer: rootReducer,
});

Wrap the App with Redux
Finally 'wrap the app' with Redux by editing your src/index.js file:

The global store is now ready to be imported into our form stepper modules.

This tutorial continues in Authentication with React From Wizard and Nodejs - Part 2 which explains how to code the authication form wizards. The code for this project can be found on Github.

Turn any Form into a stepper form wizard with UI, Hooks, Context, React-Hook-Form and Yup

full-stack-concepts — Sun, 27 Feb 2022 13:52:43 +0000

Introduction
Breaking up a form into multiple steps can easily be done with React Hooks and Context. In this tutorial we create a quiz with multiple geographical questions divided in three different steps . Each step needs to be completed before you can move on to the next. Form input must be validated with Yup and form state monitored by React Hooks Form. The code for this project can be found on Github.

See this code in action at CodeSandBox

Why would you like to use form steppers or wizards? Most of all to improve the user experience. Forms are used on all kind of devices, including small screens. Breaking up an extended form is smaller parts does enhance the experience.

Prerequisites
In order to work with the concepts presented in this tutorial you should have a basic understanding of ES6, React hooks, functional components and Context. The project was created with Create-React-App so it is possible to add the code to any React project (check for compatibility though). This tutorial aims to explain how these concepts were used but is not a hands-on tutorial. Please refer to the code on Github.

What is built?
In this tutorial we'll build a form stepper with material-ui@5.4, React@17.x, yup and react-hook-form@7.x.

Our main component is Stepper which imports it's children dynamically, depending on the form step. Each form step should be validated as soon as all fields are touched. If the step is valid the user should be allowed to progress to the next step. All components share state through React Context.

Building the Form Store
Let's start with coding a Context Store. Using a mix of local state and React Context really helps you manage state in any form. Context can be implemented on any level of your application and is perfect for managing form state. Create a folder for our quiz, for instance SelectStepper and code the Context Store:

Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes. So let's import it and wrap it around our form components.

Building the Stepper Coponent
This 'high order component'is basically a Material-UI component that displays progress through a sequence of logical and numbered steps. In this tutorial the code example for a vertical stepper is used which can be viewed here. Basically the code is extended with:
(1) The FormContext store.
(2) Load dynamic content with useEffect hook.
(3) Monitor progress with hook useEffect

So let's import the store and grab the data that should be evaluated when this component (re)renders.



    const {
        step1Answered,
        step2Answered,
        finished
    } = useContext(FormContext);

Secondly extend the local store so dynamically loaded components can be saved.



    const [components, setComponent] = useState({});
    const [view, setView] = useState();

We can now use React's useEffect hook to respond to any changed value of activeStep, the variable used to track the current step.



   useEffect(() => {       
        let Component;
        const load = async () => {
            const StepView = `Step${activeStep+1}`;
            if(!components[StepView]) {             
                const { default:View } = await import(`./Steps/${StepView}`)
                Component = <View 
                    FormContext={FormContext} 
                />;             
                setComponent({...components, [StepView]: Component })
                setView(Component);
            } else {               
                setView(components[StepView]);
            }
        }
        load();       
    }, [activeStep]);

This hook function responds to a changed value of the activeStep variable after the component has rendered. It loads any step component from subdirectory Steps synchronous if it is not stored in the components object.

Now edit the HTML so the view is displayed.



<Grid item xs>                              
  <React.Suspense fallback='Loading Form View..'>
    {view}     
  </React.Suspense>                          
</Grid>

React hook useEffect is used to respond to data changes after a component has rendered. It is basically triggered whenever one of the values of it's deps array changes.

If you use useEffect without dependencies (or an empty array) it will only run once after the initial render.

Thirdly let's add a hook function that responds when the user moves from step to step or answered all questions.



    useEffect(() => {
        setSolutionProvided(false);
        if (activeStep === 0 && step1Answered) {
            setSolutionProvided(true);
        }
        if (activeStep === 1 && step2Answered) {
            setSolutionProvided(true);
        }
        if (activeStep === steps.length - 1 && finished) {
            setSolutionProvided(true);
        }       
    }, [activeStep, step1Answered, step2Answered, finished]);

Local state variable solutionProvided can now be used to control the state of the 'Next' Button.



<Button 
  variant="contained" 
  disabled={!solutionProvided } 
  onClick={() => handleNext(activeStep, steps)}
>
  {activeStep === steps.length - 1 ? 'Save' : 'Next'}
</Button>

Building the Step Forms

Form Element

Let's now add the formsteps which use a single form element, Material-UI Select, wrapped in the Controller wrapper component of React Hook Form. This component makes it easier to work with external controlled components such as Material-UI.

The render prop is a function that return a React element so events can be attached. The onChange function shall be used to evaluate a selected value in the parent component.

The Step Form

To create a form the following steps have to be coded:

Set up Yup Form Schema with react-hook-form
Load values from the Context Store if the user filled out the form previously
Evaluate User Input
Store step result

Set up Yup Form Schema with react-hook-form
Yup provides advanced methods for validation. As this form with Material-UI selects you can for instance test if the selected value is > 0 or in range [ 0, (options.length + 1)]. React-hook-form needs initial values for the form fields it controls.



const formSchema = yup.object().shape({
    .....
})

let formValues = {
   ...
}

Inside the form component:


 javascript
  const {
        register,
        watch,
        setValue,
        getValues,
        control,
        formState: {
            isValid
        }
    } = useForm({
        formValues,
        resolver: yupResolver(formSchema)
    });

  const formFields = watch();

The variable formFields, created with the watch of react-hook-form is now subscribed to all input changes. As soon as all form elements are validated by Yup - isValid property of formState - this input can be compared with the required solution on every render.

Load values from the Context Store
For this use the useEffect hook without dependencies or an empty array.



useEffect(() => {
  implementSolution();
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

To retrieve data from the form store the useCallback hook is used.



const implementSolution = useCallback(() => {
  // retrieve stored values from Context
  // assign values to controlled elements
  // assign values to local state 
}, [data, setValue, stepSolution]);

Local state is used to initialize the form elements. For instance:



  const [defaultValue, setDefaultValue] = useState(0);



  <SelectBox
    ...
    value={defaultValue}            
  />

Evaluate User Input
After each render this hook function destructures first all form fields, sets their values in the local store, evaluates if all fields have been touched hich leads to evaluation of user's input.



useEffect(() => {
  const {
    // fields       
  } = formFields;

  // update local store with form values   

  // Were all fields validated? Then evaluate input and enable 
  // next step if needed
  if (isValid) {
    // evaluate user input
    const solutionProvided = getSolution();
    setStepAnswered(solutionProvided);
  }
}, [
  formFields,
  isValid,
  getSolution()
  ...
]);

The getSolution() uses a useCallback hook and the getValues method of react-hook-form.



const getSolution = useCallback(values => {
  const guess = getValues();
  const solution = (
    // your condition
    // set step answered
  );
  return (solution) ? true : false;
    }, [getValues]);

Store step result
Finally create a useEffect hook function that responds to a changed value of variable stepAnswered which should store all fprm step values in the Context Store.



useEffect(() => {
  // save form data
}, [StepAnswered]

Example of a functional form component with all these steps combined:

More examples can be found in the repo.

Summary
This was just a basic example of a Material-UI form wizard (stepper). It's just the tip of the iceberg: with React Hook Form you could change a single form component into another form wizard by using (nested) routes.