DEV Community: TEREN VELAN

React Context API & useReducer , Part 2

TEREN VELAN — Tue, 03 May 2022 12:24:58 +0000

Alright, on to part 2! In part 1 we covered how to use React Context API to pass values throughout our application.

In part 2 we will see how to use useReducer hook to maintain our state throughout our application. And using React Context API to pass that state to our entire application.

We start by adding useReducer to our ProductsProvider component.

//products_context.js

import React, {useReducer} from "react";
import reducer from "../products_reducer";

export const ProductsProvider = ({ children }) => {

const initialState = {
  productsLoading: false,
  products: [],
};

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

  return (
    <ProductContext.Provider value={}>
      {children}
    </ProductContext.Provider>
  );
};

To explain the parts of useReducer , we have state which is the current state , dispatch which takes in type and payload where type tells the reducer what actions to take and payload is data to be passed to the reducer, we have reducer which is a function that we create that decides how to modify the state based on our dispatch type , and lastly we have initialState , which is self-explanatory.

With that , lets define our reducer function

//products_reducer.js

const products_reducer = (state, action) => {
  if (action.type === "GET_PRODUCTS_BEGIN") {
    return { ...state, productsLoading: true };
  }

  if (action.type === "GET_PRODUCTS_SUCCESS") {
    return {
      ...state,
      productsLoading: false,
      products: action.payload,
    };
  }

 };

export default products_reducer;

Our reducer function takes in 2 arguments , the currentState and the action , essentially your action is the dispatch. The reducer checks the type of action and returns an updated state based on the action type.

So how do we use dispatch to provide the right type so that the reducer can update the state? Lets hop back to products_context.js , into our ProductsProvider function where we defined our useReducer.

//products_context.js

export const ProductsProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const fetchProducts = async () => {
   dispatch({ type: GET_PRODUCTS_BEGIN });
    let response = {};
    try {
      response = await axios.get(url);
      let products = response.data;
 dispatch({ type: GET_PRODUCTS_SUCCESS, payload: products })
    } catch (error) {
      console.log({ error });
    }
  };


  return (
    <ProductContext.Provider value={{ ...state , fetchProducts }}>
      {children}
    </ProductContext.Provider>
  );
};

In our fetchProducts function , we use the dispatch function to modify our state , notice that in the second dispatch we pass the response from our API call as a payload to the dispatch. This will in turn use that payload value in the reducer function with the type of "GET_PRODUCTS_SUCCESS".

Lastly , we spread our state into the value prop of the ProductContext.Provider , so whenever there is an update in our state, the components that use this state value will be re-rendered.

//products_context.js
  <ProductContext.Provider value={{ ...state , fetchProducts }}>
      {children}
    </ProductContext.Provider>

Here in our Product display page , we can destructure our state values and use them accordingly to display the data.

//Product.js Page

import { useProductContext } from "../products_context";

const { products , productsLoading , fetchProducts } = useProductContext();

With that we come to the end our our React Context API and useReducer series. I hope you've learned something from this post. Do share in the comments below how you handle states in your application.

React Context API & useReducer , Part 1

TEREN VELAN — Tue, 03 May 2022 11:44:24 +0000

Today we will learn how to use React Context API to share values across our application and how to use useReducer hook to manage our states within our project.

For the purpose of this post , i will use an e-commerce project as an example. Using React's context API and useReducer to share our state throughout our application and to be able to modify that state throughout our application.

Lets start with React Context API,
For starters we will create the context and assign it to the variable ProductContext. This will create a context object , and every context object comes with a Provider React component that allows consuming components to subscribe to context changes.

//product_context.js

const ProductContext = React.createContext()

But what exactly is "consuming components"? Consuming components are components that are wrapped within the Provider React Component from the context object. In this case we create our own React Component that returns this Provider.

//product_context.js

const ProductContext = React.createContext()

export const ProductsProvider = ({ children }) => {
  return (
    <ProductContext.Provider value={}>
      {children}
    </ProductContext.Provider>
  );
};

Any component that's a children to our ProductsProvider component will be a consuming component of our context and have access to the values that our context provides.

So what are these "values that our context provides" , well , thats up to us to provide any functions or variables that we want our context to provide. In our case we want to pass the fetchProducts function , as shown below.

//product_context.js

export const ProductsProvider = ({ children }) => {

  const fetchProducts = async () => {
    let response = {};
    try {
      response = await axios.get(url);
      let products = response.data;
    } catch (error) {
      console.log({ error });
    }
  };

  return (
    <ProductContext.Provider value={{fetchProducts}}>
      {children}
    </ProductContext.Provider>
  );
};

Within my ProductsProvider component , i have created a function called fetchProducts , which purpose is to fetch data from the API. i then pass that function into the value props of the ProductContext.Provider. As such this value of fetchProducts will be available to all children of ProductContext.Provider.

The last step to access these values from the provider is to use the useContext hook to give access to the values from the ProductContext.Provider.

//product_context.js

export const ProductsProvider = ({ children }) => {

  const fetchProducts = async () => {
    let response = {};
    try {
      response = await axios.get(url);
      let products = response.data;
    } catch (error) {
      console.log({ error });
    }
  };

  return (
    <ProductContext.Provider value={{fetchProducts}}>
      {children}
    </ProductContext.Provider>
  );
};

export const useProductContext = () => {
  return useContext(ProductContext);
};

We create a custom hook called useProductContext thats returns the values from ProductContext.Provider.
As such , when we want to use the values from our context provider , we just have to destructure the values from our custom hook , as shown below.

//Product.js Page

import { useProductContext } from "../products_context";

const { featuredProducts } = useProductContext();

As long as your component is a child component of the ProductsProvider function , your component will have access to these values.

To show and example , i'm using Nextjs for my project and with Nextjs, below is an example of how i would attach my ProductsProvider component , so that my whole application receives the context values.

//_app.js
import { ProductsProvider } from "../products_context";

function MyApp({ Component, pageProps }) {
  return (
      <ProductsProvider>
        <Component {...pageProps} />
      </ProductsProvider>
  );
}

export default MyApp;

In NextJS the tag is the current page that is being displayed , as such every page in my application will have access to my context values.

I hope this gives you a clear picture of the flow of using React Context API. In the part 2 we will look into adding in useReducer to manage the state of our data , and how we share that state value with all our components.

Understanding Render Props

TEREN VELAN — Sat, 30 Oct 2021 12:27:40 +0000

Today we will be talking about render props in a react component and how to use it in our components.

Render props is a technique for sharing code between react components. By using render props we are able to give the developer the flexibility to display what he wants in the component.

Reacts default render prop is the children prop , in the level of flexibility , using the children prop is giving the developer full freedom to customise the component freely. Using render props can we use for specific areas that needs to be customised e.g the header or the footer.

Besides returning JSX we can also pass down functions from the parent component to the children component. Below we will take a closer look at passing your children component as a function , a render function prop.

we start by creating a parent component , and within that component we define a few functions like addCount and Minus Count and we create a state value that tracks the count.

In the return statement for Parent component , we use the children render prop , we check if children is a function and if it is it will pass these values (handleClick , addCount , minusCount etc) as arguments. Any element/ component that is a child to the Parent component will have access to these functions.

//Parent.js
import React, { useState } from "react";

export const Parent = ({ children }) => {
  const [count, setCount] = useState(0);

  const addCount = () => {
    setCount(count + 1);
  };

  const minusCount = () => {
    setCount(count - 1);
  };
  const handleClick = () => {
    alert("button passed down");
  };

  return (
    <div>
      <h1>Parent wrapper</h1>
      {typeof children === "function"
        ? children({ handleClick, addCount, minusCount, count })
        : children}
    </div>
  );
};

Then we create the children component that will take the parent components arguments as props, in this case below we created an Add and Minus components that receives a takes a props thats a function addCount or minusCount.

It is always good practice to set default values for your props , in the case that it is undefined , its value will be set to the default , e.g {openModal = false , addCount = () =>{}

//addMinus.js
import React, { useState } from "react";

export const Add = ({ children, addCount = () => {} }) => {
  return (
    <div>
      <button onClick={addCount}>Add</button>
    </div>
  );
};

export const Minus = ({ children, minusCount = () => {} }) => {
  return (
    <div>
      <button onClick={minusCount}>Minus</button>
    </div>
  );
};

Now we see how we use the render function prop in action. within the Parent component we create a function , and from the code below from the Parent component, it will evaluate that children is a function and will take the functions defined in Parent component as arguments.

//Parent.js
 {typeof children === "function"
        ? children({ handleClick, addCount, minusCount, count })
        : children}

And this how we use our Add and Minus component that takes in addCount and minusCount as a prop , and that prop returns a button that uses these function to add and minus the value of count

//App.js
import "./styles.css";
import { Add, Minus } from "./AddMinus";

import { Parent } from "./Parent";

export default function App() {
  return (
    <div className="App">
      <Parent>
        {({ addCount, count, minusCount }) => {
          return (
            <>
              <h1>{count}</h1>
              <Add addCount={addCount} />
              <Minus minusCount={minusCount} />
            </>
          );
        }}
      </Parent>
    </div>
  );
}

This is how it will look like , a h1 tag that displays the current state of count , then our Add and Minus components that runs the addCount and minusCount functions on click.

Hope you learned something new!

Multi Dimensional Array in Tables

TEREN VELAN — Sun, 17 Oct 2021 12:40:50 +0000

Recently at work i was tasked to add styling to a table , but what was special was that because i needed to make the borders of my table rounded , i had to target the four corners of the table.

That's where multi dimensional arrays come in , Tables are always multi dimensional , from row first followed by columns. So this requires a nested for loop and conditional statement to accurately pint point the exact element in the loop i want to style. And with arrays come indexes which makes it so much easier.

We start by looping through the top level array to display the table's TR:


pages.map((row , rowIndex) => {
  return (
    <Tr>

    </Tr>
 )
}

Now that we have looped and displayed out

its time to loop through our content and display it within our , in a .


pages.map((row , rowIndex) => {
  return (
    <Tr>
      {row.cell.map((cell , cellIndex) => {
         return (
            <Td></Td>
           )
     })
    </Tr>
 )
}

Now keep in mind that besides looping , we also need to pinpoint the

that are at the four corner of the table , so how do we do that , simply with array indexes.

In pseudo code:

Top left corner of table: row[0][0]
This finds the first row , and the first column element for that row

Top right corner of table row[0][cell.length -1]
This finds the first row and the last column element of that row

*For example purposes i will only show the 2 corners of the table

so placing this in a conditional as part of our loop:


pages.map((row , rowIndex) => {
  return (
    <Tr>
      {row.cell.map((cell , cellIndex) => {

       if(rowIndex === 0 && cellIndex === 0){
              return (
            <Td backgroudColor="red"></Td>
         )
     }else if (
       rowIndex === 0 && 
       cellIndex === row.cell.length -1 ){

        return (
            <Td backgroudColor="yellow"></Td>
         )
    } else {
         return (
            <Td backgroudColor="white"></Td>
         )
   }
     })
    </Tr>
 )
}

By setting a conditional to check if the index matches the index of the row and column element that we want , in this case the corners of the table, we will be able to manipulate the data and even styling in the table freely.

This is my first step into learning how to manipulate tables and as a front-end developer this is very important, please do share with me if you do it differently.

And today's also my birthday so just want to give a shout out to my mentor Ian for his patience and guidance in teaching me. Thanks Ian!

Creating Variants of React Component

TEREN VELAN — Sun, 26 Sep 2021 15:58:56 +0000

So recently i've been working on building react components with StorybookJS. For those who don't know what Storybook is ,Storybook is a JavaScript tool that allows developers to create organised UI systems making both the building process and documentation more efficient and easier to use.

With that said , i would like to share a common design pattern that i learned from building these components, and that is creating variants of a single component through the use of props.

*Do note that i'm using ChakraUI as my UI library

In this example we take a look at building a simple button component. Starting with the Button function



export function ReactButton(props) {
  let {children} = props;

  return (
    <Button>
      {children}
    </Button>
  );
}

Following that , we add propTypes to establish our variants, you can definitely do without this step but it helps to ensure we're using the right data type



ReactButton.propTypes = {
  variant: PropTypes.arrayOf(
  PropTypes.oneOf(["primary,secondary,outline,danger"])
  ),
};

export function ReactButton(props) {
  let {children} = props;

  return (
    <Button>
      {children}
    </Button>
  );
}

Now for the game changer, we make use of CSS to enable to the browser to display what we want want it to display. Using a switch statement we set the base styles for different variants



 let baseStyles = {},
    invertStyles = {},
    stretchedStyles = {};

switch (variant) {
    case "primary":
      baseStyles = {
        backgroundColor: "brand1.primary.400",
        color: "#fff",
        _hover: {
          backgroundColor: "brand1.primary.500",
        },
      };
     break;
    case "secondary":
      baseStyles = {
        backgroundColor: "brand1.secondary.400",
        color: "#fff",
        _hover: {
          backgroundColor: "brand1.secondary.500",
        },
      };
     break;
    case "outline":
      baseStyles = {
        backgroundColor: "transparent",
        color: "brand1.secondary.300",
        borderColor: "brand1.secondary.300",
        _hover: {
          color: "brand1.secondary.500",
          borderColor: "brand1.secondary.500",
        },
      };
     break;
    case "danger":
      baseStyles = {
        backgroundColor: "brand1.danger.400",
        color: "#fff",
        _hover: {
          backgroundColor: "brand1.danger.500",
        },
      }
      break;

You will notice i created an empty object for inverted and stretched, keep reading on to see how we implement those.

With that we set our default variant to primary, and establish some props like invert and stretched and give them a boolean value



let {
    children,
    variant = "primary",
    invert = false,
    stretched = false,
  } = props;

Now we can go ahead and add stylings for our props that we declared (invert and stretched).



switch (variant) {
    case "primary":
      baseStyles = {
        backgroundColor: "brand1.primary.400",
        color: "#fff",
        _hover: {
          backgroundColor: "brand1.primary.500",
        },
      };
      if (invert) {
        invertStyles = {
          backgroundColor: "brand1.primary.50",
          border: "0.25rem solid #ffe8ae",
          color: "#969696",
          _hover: {
            backgroundColor: "brand1.primary.100",
          },
        };
      }
      if (stretched) {
        stretchedStyles = {
          width: "100%",
          justifyContent: "space-between",
        };
      }
      break;

    case "secondary":
      baseStyles = {
        backgroundColor: "brand1.secondary.400",
        color: "#fff",
        _hover: {
          backgroundColor: "brand1.secondary.500",
        },
      };
      if (invert) {
        invertStyles = {
          backgroundColor: "brand1.secondary.50",
          border: "0.25rem solid #c4c9ef",
          color: "#969696",
          _hover: {
            backgroundColor: "brand1.secondary.100",
            color: "#fff",
          },
        };
      }
      if (stretched) {
        stretchedStyles = {
          width: "100%",
          justifyContent: "space-between",
        };
      }
      break;

    case "outline":
      baseStyles = {
        backgroundColor: "transparent",
        color: "brand1.secondary.300",
        borderColor: "brand1.secondary.300",
        _hover: {
          color: "brand1.secondary.500",
          borderColor: "brand1.secondary.500",
        },
      };
      if (invert) {
        invertStyles = {
          color: "#c9c9c9",
          borderColor: "#c9c9c9",
          _hover: {
            color: "#fff",
            borderColor: "#fff",
          },
        };
      }
      if (stretched) {
        stretchedStyles = {
          width: "100%",
          justifyContent: "space-between",
        };
      }
      break;

    case "danger":
      baseStyles = {
        backgroundColor: "brand1.danger.400",
        color: "#fff",
        _hover: {
          backgroundColor: "brand1.danger.500",
        },
      };
      if (invert) {
        invertStyles = {
          backgroundColor: "brand1.danger.50",
          border: "0.25rem solid #feb6b9",
          color: "#969696",
          _hover: {
            backgroundColor: "brand1.danger.100",
            color: "#fff",
          },
        };
      }
      if (stretched) {
        stretchedStyles = {
          width: "100%",
          justifyContent: "space-between",
        };
      }

      break;

Now that we have our complete styles in place and in a conditional statement , let us look at how we can use this styles in our component.

By spreading our stylings into the component through the object spread operator. Take note on the order in which the styles are added.



  return (
    <Button
      {...baseStyles}
      {...props}
      {...invertStyles}
      {...stretchedStyles}
    >
      {children}
    </Button>
  );
}

Now about the order in which we have placed our props , baseStyles first followed by props then invertStyles and lastly stretchedStyles. The order is very important as the latter props on the list will take precedence over the styles of the earlier props on the list. Thats why we have baseStyles first , this give the developer the flexibility to deviate from the baseStyles.

To demonstrate, i will show 4 different buttons using the variant="danger" and the invert and stretched props



<Button variant="danger">Danger Button</Button>



<Button variant="danger" stretched>Danger Button</Button>



<Button variant="danger" invert>Danger Button</Button>



<Button variant="danger" invert stretched>Danger Button</Button>

Thats all folks , i hope this helps you as much as it has helped me. If theres any way i can improve on this i would really love to hear it. Drop a comment below.

Golden Source of Data

TEREN VELAN — Sun, 29 Aug 2021 15:15:37 +0000

This article aims to illustrate and help you understand how the whole request response flow is like , with the addition of understanding how remote and local state ties into this process.

Our Remote source also known as the database is our Golden Source of Data. One thing to note is that our local state , be it redux or context etc , will always be chasing to be up to date with our remote source. In the diagram above we will see what it actually means.

In the example of a toggle button , on the UI , the user clicks on the toggle button , intending to change the "No" to a "Yes". With that click, an API request is sent to the server and a check is done if everything is in order in the request (e.g are the right parameters provided).

If its a success , the server then proceeds to update the database with the value , changing that specific column from a "No" to a "Yes". It's important to note that at this point our Remote State and local state are not in sync.

With the success and change in the remote state value , our API replies with a success response, it replies with the value that has been changed , a "Yes". This value is then passed down to update our local state.

On changing our local state, the page reading the data from the local state will now see the changes and reflect the changes accordingly in the UI , in this case changing the toggle button from a "No" to a "Yes".

But in the event that the request fails, the API will reply with an error response, usually accompanied by the error message. And it is up to us how we will use that error message returned to handle the error. In this case the local state is not updated as there is no change in the remote state. Ultimately no change in the UI as well , except for a error message displayed.

As much as this maybe a generally easy concept to some and also only taking a split second in the UI to happen , so much goes on in that split second. And it is important that we are keeping track of the process each step of the way.

For a TLDR:
Remote source is always the golden source of information , your local state should always be trying to catch up with the remote state. And any changes made should always be reflected on the remote state first , followed up a success response to update the local state , and with the update in the local state it will update the UI.

Hope this article proves to be of help to anyone reading this. Please do drop me your feedback on my writing or even drop a message to connect!

Art of Debugging

TEREN VELAN — Thu, 08 Jul 2021 13:53:32 +0000

This week my mentor taught me something very important , something called the art of debugging, or in his words , the System Engineering way of debugging. In essence what he taught me was how to look at debugging as a process, step by step, stripping the issue down to its bones and working your way up from there.

Lets begin,

In debugging we should look at it as a 3 step process , similar to how any system works , theres an input , it's processed and it produces an output.

when we look at the whole system, we start at the input. when debugging an issue , we look at what are the inputs we have entered into the system. For starters we look at the documentation provided , question ourselves if there is any way we deviated from the documentation , or before trying new things you've seen on stack overflow , use the tools provided in the documentation. Secondly we look at the semantics , did we leave out something , or did we not provide the right type needed for the input.

Next we look at the output , asking ourselves , why is this not the outcome i was expecting. Likewise we look at the documentation and semantics, is this supposedly the outcome we are supposed to get? or did i leave something out somewhere.And if all that fails , we look into the middleman , the process.

Looking into the process, is something somewhere within our process wrong , in this case of the image below, with the multiplication process we would expect the result of 2 and 5 to be 10 , but instead it returned 7. So we dive into our process and start the process of checking from input to output to process again.The regression of debugging and checking then begins.

As someone who panics and doesn't have a clear path on how to debug , this showed me a clear structure on how i can go about debugging.

Week 2 ~ Learning ~

TEREN VELAN — Sun, 27 Jun 2021 14:42:47 +0000

What this ~ Learning ~ series will be is essentially the recap of what i've learnt in that week.Starting from Week 2 at my Traineeship.

Week 2 (21 Jun 21 - 25 Jun 21)

So for Week 2 i worked on the front-end for the forgot password and reset password page. Where i built the components for it.

First we look at the forgot password page:

We need a form component for the initial state , where it takes in the user's email
On submit , we face two possible scenarios, Success or Error. And for each scenario we will need components to display the messages accordingly.

Taking it step at a time , we look at point 1. Once we have the form , we create a function to simulate an API call and the results we get back.


  const [pageDetails, setPageDetails] = useState({
    error: null,
    success: null,
  });
//to simulate an API
//two test cases , success or error
  let runForgotPassword = () => {
    // simulate error
    // let response = {
    //   error: {
    //     header: "Invalid Email!",
    //     message:
    //       "We are unable to locate your email address in our database.If you have not registered with us, please do so at our sign up page.",
    //   },
    //   success: null,
    // };
    let response = {
      success: {
        header: "Email Sent!",
        message:
          "A verification email has been sent your email account.Please follow the instructions in the email to change your password.",
      },
      error: null,
    };
    setPageDetails(response);

To explain , after setting the setPageDetails(response) and changing its state , we want to preserve the values of header and message.

But why you ask?

In the case where the user clicks refresh , the state will return back to its original render and display the Form component from point 1. This can cause hackers to use bots to submit spam emails and overload the api calls. To make sure this does not happen , we run a useEffect to ensure a check it done on the state , checking if the query is "success=true" or "success=false".

  let runForgotPassword = () => {
    // simulate error
    // let response = {
    //   error: {
    //     header: "Invalid Email!",
    //     message:
    //       "We are unable to locate your email address in our database.If you have not registered with us, please do so at our sign up page.",
    //   },
    //   success: null,
    // };
    let response = {
      success: {
        header: "Email Sent!",
        message:
          "A verification email has been sent your email account.Please follow the instructions in the email to change your password.",
      },
      error: null,
    };
    setPageDetails(response);
   try {
//encodeURIcomponent is a JS function for encoding text into URL appropriate text
      let message = encodeURIComponent(
        response?.success?.message || response?.error?.message
      );
      let header = encodeURIComponent(
        response?.success?.header || response?.error?.header
      );
//router.replace is a nextjs function
//Here we replace the url with the response header and message so as to preserve that data even on refresh.
      router.replace(
        `/forgot?success=${
          !!response.success ? "true" : "false"
        }&header=${header}&message=${message}`
      );
    } catch (err) {
      let message = "Some Generic success message";
      let header = "Some Generic success header";
      router.replace(
        `/forgot?success=true&header=${header}&message=${message}`
      );
    }
  };

So following that , on refresh , the page will be hydrated with the data stored in the query param as seen below:

let router = useRouter();
  let { query } = router;

  // hydrate the state on load
  useEffect(() => {
    if (query?.success === "true") {
      try {
//here we decode the message and use that to set the state for PageDetails
        setPageDetails({
          success: {
            header: decodeURIComponent(query?.header),
            message: decodeURIComponent(query?.message),
          },
        });
      } catch (error) {}
    } else if (query?.success === "false") {
      try {
        setPageDetails({
          error: {
            header: decodeURIComponent(query?.header),
            message: decodeURIComponent(query?.message),
          },
        });
      } catch (error) {}
    }
  }, [query]);

So then how does react know which component to display?

With a simple conditional statement using our pageDetails state. Because we used an object for our state , the data structure becomes more dynamic.


  if (!!pageDetails?.error) {
    return <ErrorContentSection error={pageDetails?.error || {}} />;
  } else if (!!pageDetails?.success) {
    return <SuccessContentSection success={pageDetails?.success || {}} />;
  } else {
    return (
//return the form input that receives users email
)

Below is an example of a component for one such scenario , success.

const SuccessContentSection = (props) => {
  const { header, message } = props.success;

  return (
    <>
      <LoginHeader title="App" />
      <div className={styles.content}>
        <Grid className={styles.grid}>
          <Row className={styles.row}>
            <Column className={styles.column} md={{ offset: 2, span: 4 }}>
              <div className={styles.formWrapper}>
                <div className={styles.formTitle}>{header}</div>
                <div className={styles.createAccount}>{message}</div>
                <div className={styles.layoutTop}>
                  <Link href="/">
                    <Button
                      className="submit"
                      // renderIcon={loading ? LoadingButton : ArrowRight16}
                      renderIcon={ArrowRight16}
                      type="submit"
                    >
                      Proceed to Login
                    </Button>
                  </Link>
                </div>
              </div>
            </Column>
          </Row>
        </Grid>
      </div>
    </>
  );
};

Using the similar login and component structure we are able to do the ResetPassword page in a similar way.

Learning Lessons:

Always anticipate what the users might do , in the case where the user might refresh and try to spam the API calls , we corrected that by breaking the loops of forgotPasswordPage > success/error message > press refresh > back to forgotPasswordPage. Now despite the refresh , the page still reads the query and hydrates the components based on that.
A way to ensure React remembers the state between renders/refresh is to use the "query" function from NextRouter where the data can be stored in the URL. (NOT FOR SECURE INFORMATION)
Always try to think of ways to make the page as dynamic as possible , as little hard coding as possible.

4.Think flexibly, Don't over-engineer it , neither should you under-engineer it.