DEV Community: EliHood

Roast my Next npm package....

EliHood — Sat, 23 Dec 2023 05:50:07 +0000

So yeah.... i've had a problem with dispatching redux thunk actions within Next.

and... it would make sense for it be done the Next kinda way.

async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.

  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }

  return res.json()
}

export default async function Page() {
  const data = await getData()

  return <main></main>
}

I made a package that will allow you to dispatch thunk actions within the Next getData callback.

Declare some thunk actions

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
export const fetchContent = createAsyncThunk(
  "content/fetchContent",
  async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/photos");
    const data = await res.json();
    return data;
  },
);

import createReduxFetch, add thunkActions as a second argument, pass your callbacks in that object.

import { fetchContent } from "./thunkActions";
import { createReduxFetch } from "next-redux-fetch";

export const store = createReduxFetch(
  { reducer: {}  }, // add whatever redux logic. 
  {
    thunkActions: { fetchContent },
  },
);

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

Call as the following:

note: bootstrap.tsx is just a client wrapper.

"use client";

import dynamic from "next/dynamic";
import React from "react";

const Demo = dynamic(() => import("../../components/demo"), {
  ssr: false,
});

export default function Bootstrap({ data }: { data: Record<string, any> }) {
  return <Demo data={data} />;
}

Then the following:

import { store } from "../../../redux/store/store";
import Bootstrap from "./bootstrap";

async function getData() {
  const res = await store.dispatch(store.thunkActions.fetchContent());
  return res;
}

export default async function Page() {
  const data = await getData();
  return <Bootstrap data={data} />;
}

Voila ...

I'm curious to get some feedback. What would be useful to add , or improve. Roast it :)

I know i could handle error handling a bit better.

Package

https://www.npmjs.com/package/next-redux-fetch

Github

https://github.com/EliHood/next-redux-fetch

Are your client components being delayed when using Next JS ? consider this...

EliHood — Mon, 04 Dec 2023 05:30:41 +0000

Within Next JS, you're forced to architect your React components in the most optimized way. Otherwise you'll run into slight delays, and undesirable side effects.

In this walkthrough, I'll show one common, and undesirable side effect when using client within Next JS.

The Problem

Notice how you see the content / text first before you see the gsap animation kick in ?

At first, maybe i thought this was a side effect using GSAP. But no, it was stemming from somewhere else....

Let's look at the code for this.

LandingPage.tsx

'use client';

import Hero from '../common/Hero/Hero';

function LandingPage() {
  return <Hero />;
}
export default LandingPage;

Hero.tsx

'use client';

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { useEffect, useLayoutEffect, useRef } from 'react';
import './style.css';

function Hero() {
  const introText = useRef(null);
  const secondIntroText = useRef(null);
  const finalButton = useRef(null);

  useLayoutEffect(() => {
    const tl = gsap.timeline();
    gsap.registerPlugin(ScrollTrigger);
    tl.to(introText.current, {
      duration: 0.5,
      autoAlpha: 1,
      ease: 'easeIn-Out',
      delay: 0.5,
      x: -100,
    })
      .to(secondIntroText.current, {
        duration: 0.5,
        autoAlpha: 1,
        ease: 'easeOut',
        delay: 0.2,
        x: 10,
        y: -100,
      })
      .to(finalButton.current, {
        duration: 0.5,
        autoAlpha: 1,
        ease: 'easeOut',
        delay: 0.1,
        y: 0,
        x: 0,
      });
  }, []);

  return (
    <>
      <div className='lg:2/6 xl:w-2/4 mt-20 lg:mt-40 lg:ml-16 text-left'>
        <div ref={introText} className='text-6xl font-semibold text-gray-900 leading-none intro-text'>
          Bring all your work together
        </div>
        <div ref={secondIntroText} className='mt-6 text-xl font-light text-true-gray-500 antialiased second-text'>
          A better experience for yout attendees and less stress yout team.
        </div>
        <button
          ref={finalButton}
          className='mt-6 px-8 py-4 rounded-full font-normal
         tracking-wide bg-gradient-to-b
          text-black outline-none focus:outline-none hover:shadow-lg
          bg-third transition duration-200 ease-in-out final-button'>
          Join Today
        </button>
      </div>
      <div className='mt-12 lg:mt-32 lg:ml-20 text-left'></div>
    </>
  );
}

export default Hero;

Used in Next JS SSR


"use client";

import dynamic from "next/dynamic";
import React from "react";
import Footer from "../src/common/Footer";

const LandingPage = dynamic(() => import("../src/Pages/LandingPage"), {
  ssr: true,
});

// export async function generateStaticParams() {
//   const posts = await fetch('https://.../posts').then((res) => res.json());

//   return posts.map((post: any) => ({
//     slug: post.slug,
//   }));
// }

export default function Bootstrap() {
  return (
    <>
      <LandingPage />
      <Footer />
    </>
  );
}

Maybe if i wrapped the Hero component in a react memo, it will resolve it ? cause we are trying to keep things optimized.

Nope.. not in this case.

The solution

When it comes to delays, and such, what i've noticed is when you don't compose your react components in a performant manner, it will result in undesirable behavior.

Let's go back at the code

"use client";

import dynamic from "next/dynamic";
import React from "react";
import Footer from "../src/common/Footer";

const LandingPage = dynamic(() => import("../src/Pages/LandingPage"), {
  ssr: true,
});

// export async function generateStaticParams() {
//   const posts = await fetch('https://.../posts').then((res) => res.json());

//   return posts.map((post: any) => ({
//     slug: post.slug,
//   }));
// }

export default function Bootstrap() {
  return (
    <>
      <LandingPage />
      <Footer />
    </>
  );
}

LandingPage is essentially an ssr / client component. It really is just a client side component.

Within LandingPage we have to import the Hero component. Although this makes sense to most react developers, this approach will lead to component delays, as you seen in the problem statement.

Also, our landing page might grow, we will have more components being used within this component, and their components will have dependencies that will be quite expensive to load effiencetly.

E.g

Imagine if a component you're using inside your landing page component is using a dependency that is large in size, you can imagine next js will delay the load of this component.

How do we solve this ?

You solve this issue by effective component composition.

Nadia Makarevich has a detailed post about composition in React.

In our case, this problem is super easy to resolve. We just make our LandingPage component take in children as the prop.

Like this


'use client';

import { ReactNode } from 'react';

function LandingPage({ children }: { children: ReactNode }) {
  return <>{children}</>;
}
export default LandingPage;

Then in our Next JS file.

bootstrap.tsx (this file gets called on page.tsx by the way)

"use client";

import dynamic from "next/dynamic";
import React from "react";
import Footer from "../src/common/Footer";
import Hero from "../src/common/Hero/Hero";

const LandingPage = dynamic(() => import("../src/Pages/LandingPage"), {
  ssr: true,
});

// export async function generateStaticParams() {
//   const posts = await fetch('https://.../posts').then((res) => res.json());

//   return posts.map((post: any) => ({
//     slug: post.slug,
//   }));
// }

export default function Bootstrap() {
  return (
    <>
      <LandingPage> // landing page takes react components as children.
        <Hero />. 
      </LandingPage>
      <Footer />
    </>
  );
}

This will load our components more efficiently.

Now lets look at the result..

The animation works instantly without showing the component contents first, and then the.... animation second.

The animation works out the gate, without any weird side effects or delays.

Side note

You don't need to do this for all your client side components. You have to gauge which components are having the above mentioned side effects, before committing to make these changes.

If your components are working fine, no delays, or weird side effects, no need to change it. This is just a way to resolve said issue.

Conclusion

Hope this helps, cheers 🥳 🥳.

Building a simple calendar with Vanilla JS

EliHood — Sun, 26 Nov 2023 23:04:43 +0000

In todays post, we'll be building a simple calendar using just vanilla JS. I will be using typescript, and using tsc to build out the index.js.

note: I'll be focusing more on the engine / loop part specifically, which i find to be the most important when it comes to this calendar algorithm.

The basis of making a calendar, requires two things really.

An understanding on the Date Api.
An understanding on using the for loop.

Lets make some generic html markup.

HTML



<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Some Calendar</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="container">
            <div class="calendar-body">
                <div id="header">
                    <h1 id="month-heading"></h1>
                    <div>
                        <button id="backButton">Back</button>
                        <button id="nextButton">Next</button>
                    </div>
                </div>
                <div id="weekdays">
                  <div>Sunday</div>
                  <div>Monday</div>
                  <div>Tuesday</div>
                  <div>Wednesday</div>
                  <div>Thursday</div>
                  <div>Friday</div>
                  <div>Saturday</div>
                </div>

                <div id="calendar"></div>
            </div>
        </div>

        <script src="dist/index.js"></script>
    </body>
</html>

Some CSS



body, html{
  height:100%;
  width:100%;
  padding:0px;
  margin:0px;
}

#month-heading{
  padding: 0.1em;
  font-size: 1.4em;
  box-sizing: border-box;
}

.container{
  display: flex;
  justify-content: center;
  width: 770px;
  height: auto;
  margin: 0 auto;
}

#header{
  padding:10px;
  display: flex;
  justify-content: space-between;
}

.day + #currentDay{
  background-color: #e8f4fa;
}

.prev-day{
  background-color: #FFFCFF !important;
  box-shadow: none !important;
}


#weekdays{
  width: 100%;
  display: flex;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

#weekdays div{
  width: 100px;
  padding: 10px;
}



.calendar-body{
  background-color: #eee;
  margin: auto;
  width: 800px;
  height: auto;
  position: relative;
}

#calendar{
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}

.day{
  width: 100px;
  padding: 10px;
  height: 100px;
  box-sizing: border-box;
  margin: 5px;
  background-color: #fff;
  box-shadow: 0px 0px 3px #CBD4c2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

So lets get into the JS part.

Getting the first day of the month



// specify the weekdays
const weekDays = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];

Setting up the Date Api.




function main(){
  const dt = new Date();
  const month = dt.getMonth(); // 10
  const year = dt.getFullYear(); // 2023

  // gets first day of month based on the above params

  const firstDayOfMonth = new Date(year, month, 1); // Wed Nov 01 2023 00:00:00 GMT-0400 (Eastern Daylight Time)

  // tolocaleString parse the above date in a readable format. 
  const dateString = firstDayOfMonth.toLocaleString("en-us", {
    weekday: "long",
    year: "numeric",
    month: "numeric",
    day: "numeric",
  }); // Wednesday, 11/1/2023

  /**
   *  we want to get the first weekday of the month, 
   *  so we have a string of Wednesday, 11/1/2023.  
   * 
   *  We want just the Wednesday part... so were going to make this string into an array. 
   * so we split the string into array elements for every comma "," and leading white space. 
   * dateString.split(", ") which gives us the following:
   * 
   * (2) ['Wednesday', '11/1/2023']
   */

const getFirstDayMonth = dateString.split(", ")[0]; // Wednesday
  const days = weekDays.indexOf(getFirstDayMonth); // returns an index of 3 being that Wednesday is the 3rd array element. 

}

So we have some of the basis for our calendar program.

Lets get into the looping aspect...

The Loop




   ...main function continued..

  const daysInMonth = new Date(year, month + 1, 0).getDate(); // 30

  /**
   * lets then add days plus the days in the month so
   *
   * 3 + 30
   */

  const daysAndMonthTotal = days + daysInMonth; // 33

  /**
   * we could create an array to reference its length
   */
  const daysArr = new Array(daysAndMonthTotal); // 33

  const day = dt.getDate(); // 26


  for (let i = 1; i <= daysArr.length; i++) {
    const square = document.createElement("div") as any;
    square.classList.add("day");

    /**
     * here we are saying substract the index from the days.
     *
     *
     * e.g
     * 
     * Days will always be 3 in this case, and will always increment.
     * 
     * So 
     * 1 - 3 = -2 
     * 2 - 3 = -1
     * 3-3 =  0
     * 4-3 = 1 // we start here 
     * 
     */

    const addedDay = i - days;

  ....
  }




...continued

    const addedDay = i - days;

     // so we start when i is greater than 3. 

    if (i > days) {
      square.innerText = addedDay;

      // if addedDay is today, lets give it a special color.
      if (addedDay === day) {
        square.id = "currentDay";
      }
    }
  }

The complete code so far with some javascript event listeners added and etc.



let nav = 0;
const getCalendar = document.getElementById("calendar") as any;
const weekDays = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];
function nextButton() {
  document.getElementById("nextButton")?.addEventListener("click", () => {
    nav++;
    main();
  });
}

function backButton() {
  document.getElementById("backButton")?.addEventListener("click", () => {
    nav--;
    main();
  });
}

function main() {
  const dt = new Date();

  if (nav !== 0) {
    dt.setMonth(new Date().getMonth() + nav);
  }

  const month = dt.getMonth();

  const year = dt.getFullYear();

  const firstDayOfMonth = new Date(year, month, 1);

  const dateString = firstDayOfMonth.toLocaleString("en-us", {
    weekday: "long",
    year: "numeric",
    month: "numeric",
    day: "numeric",
  });

  const lastDayOfLastMonth = new Date(year, month, 0).getDate();

  (
    document.getElementById("month-heading") as any
  ).innerText = `${dt.toLocaleDateString("en-us", { month: "long" })} ${year}`;
  getCalendar.innerHTML = "";

  /**
   *  we want to get the first weekday of the month,
   *  so we have a string of Wednesday, 11/1/2023.
   *
   *  We want just the Wednesday part... so were going to make this string into an array.
   * so we split the string into array elements for every comma "," and leading white space.
   * dateString.split(", ") which gives us the following:
   *
   * (2) ['Wednesday', '11/1/2023']
   */
  const getFirstDayMonth = dateString.split(", ")[0]; // Wednesday
  const days = weekDays.indexOf(getFirstDayMonth);

  /**
   * Lets get the days in the current month by the following
   */

  const daysInMonth = new Date(year, month + 1, 0).getDate(); // 30

  /**
   * lets then add days plus the days in the a month so
   *
   * 3 + 30
   */

  const daysAndMonthTotal = days + daysInMonth; // 33

  /**
   * we could create an array the reference its length
   */
  const daysArr = new Array(daysAndMonthTotal); // 33

  const day = dt.getDate(); // 26

  /**
   * We use the for loop to iterate through the daysArr
   *
   * If I = 1, and 1 is less than 33, render us some squares.. essentially
   */

  for (let i = 1; i <= daysArr.length; i++) {
    const square = document.createElement("div") as any;
    square.classList.add("day");

    /**
     * here we are saying substract the index from the days.
     *
     *
     * e.g
     *
     * Days will always be 3 in this case, and I will always increment.
     *
     * So
     * 1 - 3 = -2
     * 2 - 3 = -1
     * 3-3 =  0
     * 4-3 = 1 // we start here
     *
     */

    const addedDay = i - days;

    /**
     * if the index is greater than the first day of the month add text for numbers
     *
     * else add padding squares
     */

    if (i > days) {
      square.innerText = addedDay;

      if (addedDay === day && nav === 0) {
        square.id = "currentDay";
      }
    }
    getCalendar?.appendChild(square);
  }
}

nextButton();
backButton();

main();

Last thing, lets add the previous days of last month.




  if (i > days) {
      square.innerText = addedDay;

      if (addedDay === day && nav === 0) {
        square.id = "currentDay";
      }
    } else {
      // enter the last few days of last month here

      square.innerText = lastDayOfLastMonth - days + i;

      square.classList.add("prev-day");
    }

lastDayOfLastMonth is the 31st of October. But were just getting the number not the month.

So we do 31 - 3 + i(1) = 29,

And then 31 - 3 + i(2) = 30, etc.

Completed Code




let nav = 0;
const getCalendar = document.getElementById("calendar") as any;
const weekDays = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];
function nextButton() {
  document.getElementById("nextButton")?.addEventListener("click", () => {
    nav++;
    main();
  });
}

function backButton() {
  document.getElementById("backButton")?.addEventListener("click", () => {
    nav--;
    main();
  });
}

function main() {
  const dt = new Date();

  if (nav !== 0) {
    dt.setMonth(new Date().getMonth() + nav);
  }

  const month = dt.getMonth();

  const year = dt.getFullYear();

  const firstDayOfMonth = new Date(year, month, 1);

  const dateString = firstDayOfMonth.toLocaleString("en-us", {
    weekday: "long",
    year: "numeric",
    month: "numeric",
    day: "numeric",
  });

  const lastDayOfLastMonth = new Date(year, month, 0).getDate();

  (
    document.getElementById("month-heading") as any
  ).innerText = `${dt.toLocaleDateString("en-us", { month: "long" })} ${year}`;
  getCalendar.innerHTML = "";

  /**
   *  we want to get the first weekday of the month,
   *  so we have a string of Wednesday, 11/1/2023.
   *
   *  We want just the Wednesday part... so were going to make this string into an array.
   * so we split the string into array elements for every comma "," and leading white space.
   * dateString.split(", ") which gives us the following:
   *
   * (2) ['Wednesday', '11/1/2023']
   */
  const getFirstDayMonth = dateString.split(", ")[0]; // Wednesday
  const days = weekDays.indexOf(getFirstDayMonth);

  /**
   * Lets get the days in the current month by the following
   */

  const daysInMonth = new Date(year, month + 1, 0).getDate(); // 30

  /**
   * lets then add days plus the days in the a month so
   *
   * 3 + 30
   */

  const daysAndMonthTotal = days + daysInMonth; // 33

  /**
   * we could create an array the reference its length
   */
  const daysArr = new Array(daysAndMonthTotal); // 33

  const day = dt.getDate(); // 26

  /**
   * We use the for loop to iterate through the daysArr
   *
   * If I = 1, and 1 is less than 33, render us some squares.. essentially
   */

  for (let i = 1; i <= daysArr.length; i++) {
    const square = document.createElement("div") as any;
    square.classList.add("day");

    /**
     * here we are saying substract the index from the days.
     *
     *
     * e.g
     *
     * Days will always be 3 in this case, and I will always increment.
     *
     * So
     * 1 - 3 = -2
     * 2 - 3 = -1
     * 3-3 =  0
     * 4-3 = 1 // we start here
     *
     */

    const addedDay = i - days;

    /**
     * if the index is greater than the first day of the month add text for numbers
     *
     * else add padding squares
     */

    if (i > days) {
      square.innerText = addedDay;

      if (addedDay === day && nav === 0) {
        square.id = "currentDay";
      }
    } else {
      // enter the last few days of last month here.
      square.innerText = lastDayOfLastMonth - days + i;

      square.classList.add("prev-day");
    }
    getCalendar?.appendChild(square);
  }
}

nextButton();
backButton();

main();

Demo

Conclusion

Hopefully this was helpful, cheers 🥳

Credits:

https://unsplash.com/photos/a-calendar-with-red-push-buttons-pinned-to-it-bwOAixLG0uc

https://youtu.be/m9OSBJaQTlM?si=WQQkJHeqD8yPmvQc (inspiration)

How to handle loading screens in Next JS

EliHood — Sat, 18 Nov 2023 06:16:01 +0000

In this post, we'll cover how to handle loading screens in Next JS.

note: I'm using Next JS 13, so this may or may not be compatible for lower versions.

Our loading Page will look like this

To achieve this in Next JS, we have to make use of react suspense .

So first we must declare a file name loading.tsx (or .jsx if you're not using typescript). Yes, the filename must be named loading.

refer to this.



"use client";

export default function Loading() {
  return <>Loading...</>;
}

It will be placed along our other next related files, such as layout, page, etc.

Our flow is a bit different. The actual loading.tsx will be used between navigating different nav links, this is due to our nested layout structure.

We need a loading page for the initial load on our page.

So lets take a look at the UI first, to get an idea on what the code may look like.

Being that we want the loading page to act as an overlay, we have to make some adjustments to the layout.tsx.

layout.tsx



"use client";

import dynamic from "next/dynamic";
import "../index.css";
import React, { Suspense } from "react";
import AuthGuardWrapper from "../../src/common/AuthGuardWrapper";

import LoadingPage from "../../src/common/LoadingPage";

const DefaultPageWrapper = dynamic(
  () => import("../../src/common/DefaultPageWrapper"),
  { ssr: false }
);

const Settings = dynamic(() => import("../../src/Pages/Settings"), {
  ssr: true,
  loading: () => <LoadingPage />,
});

const Nav = dynamic(() => import("../../src/common/Nav"), { ssr: false });

const PageView = dynamic(() => import("../../src/common/PageView"), {
  ssr: true,
  loading: () => <LoadingPage />,
});

const Footer = dynamic(() => import("../../src/common/Footer"), { ssr: false });

export default async function SettingsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <AuthGuardWrapper>
      <Suspense fallback={<LoadingPage />}>
        <DefaultPageWrapper>
          <Nav />
          <PageView>
            <Settings>{children}</Settings>
          </PageView>
        </DefaultPageWrapper>
        <Footer />
      </Suspense>
    </AuthGuardWrapper>
  );
}

Settings.tsx.



import { Col, Row } from 'react-flexbox-grid';
import { Typography } from '@material-tailwind/react';
import { SettingsBar } from '../common/Navbar';

function Settings({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Col xs={12} md={12} lg={12}>
        <Typography className='text-primary font-primary font-bold mb-3' variant='h2'>
          Settings
        </Typography>
      </Col>
      <Row>
        <Col xs={12} md={12} lg={4}>
          <SettingsBar />
        </Col>
        <Col xs={12} md={12} lg={8}>
          {children}
        </Col>
      </Row>
    </>
  );
}

export default Settings;

LoadingPage.tsx



'use client';
import { Loading } from './Loading';
import { Typography } from '@material-tailwind/react';

function LoadingPage() {
  return (
    <div className='flex min-h-screen justify-center items-center flex-col'>
      <div className='pb-4'>
        <Typography variant='h3'>Just give us a second.</Typography>
      </div>
      <div className='flex justify-center items-center'>
        <Loading />
      </div>
    </div>
  );
}

export default LoadingPage;

So the main magic here, is the following:



const Settings = dynamic(() => import("../../src/Pages/Settings"), {
  ssr: true,
  loading: () => <LoadingPage />, // magic here.
});

Lets look at how this look thus far.

So, as you can see, this initial loading screen is being called from these components.



const Settings = dynamic(() => import("../../src/Pages/Settings"), {
  ssr: true,
  loading: () => <LoadingPage />, // magic here.
});

const PageView = dynamic(() => import("../../src/common/PageView"), {
  ssr: true,
  loading: () => <LoadingPage />,
});

Why these components ? simple, they take the most time to load. In Next JS you will see what components take the most time, it will be quite obvious on the UI. It will have a slight lag or flickr..

Take a look how this looks without the loading prop declared on the ssr dynamic import component.

Notice how their is a slight delay when it paints the UI ? We use the loading page to hide all of that stuff, we want to see the component after the painting process.

note: You could generate a lighthouse report to see which components are hurting performance.

So to help mitigate UI flickering discrepancies we can pass in our loading component. That way when the component is done rendering itself, it will reveal the component without the weird flickering, or lag that occurs when using server side / client components.

So that's it for the initial loading screen. Let's circle back to the actual loading.tsx file.

When does this get called ?



"use client";

export default function Loading() {
  return <>Loading...</>;
}

Being that our structure, is structured like this

https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#layouts

The loading flow will be a bit different.

So essentially, this specific loading.tsx file, will be shown before the child components gets rendered

E.g

Any other nav clicks after the first loading fallback, will not show again, because its already loaded on the network tab.

As you can see here,

loading.js does not get called again between nav clicks on the network tab.

Being that loading.js is nested in our settings directory it won't reload itself in the network tab because were still within the settings folder/directory so were technically not reloading the page, we're just changing the component.

Just navigating between these flows

/settings/account (loads its respective component)
/settings/profile (loads its respective component)

Update

Earlier i mentioned you have to use suspense. It turns out you probably don't need it for loading ssr/client components.

Although the docs mention using suspense.

source: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

It works the same way without using suspense. Maybe there is other scenarios were you will need to use suspense, maybe for data fetching.

But here were just loading components, we have no data dependency for this example.

So cleaned up code



"use client";

import dynamic from "next/dynamic";
import "../index.css";
import React from "react";
import AuthGuardWrapper from "../../src/common/AuthGuardWrapper";

import LoadingPage from "../../src/common/LoadingPage";

const DefaultPageWrapper = dynamic(
  () => import("../../src/common/DefaultPageWrapper"),
  { ssr: false }
);

const Settings = dynamic(() => import("../../src/Pages/Settings"), {
  ssr: true,
  // loading: () => <LoadingPage />, // i don't think we need this, PageView seems to be more expensive to load
});

const Nav = dynamic(() => import("../../src/common/Nav"), { ssr: false });

const PageView = dynamic(() => import("../../src/common/PageView"), {
  ssr: true,
  loading: () => <LoadingPage />,
});

const Footer = dynamic(() => import("../../src/common/Footer"), { ssr: false });

export default async function SettingsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <AuthGuardWrapper>
      <DefaultPageWrapper>
        <Nav />
        <PageView>
          <Settings>{children}</Settings>
        </PageView>
      </DefaultPageWrapper>
      <Footer />
    </AuthGuardWrapper>
  );
}

Update Jun 2024:

It seems that the shared gifs (that demonstrated the examples) were removed at some point. So apologies :(

At the time of writing this, i had some misconceptions on server side rendering. I realized that the above approach isn't server side friendly.

We use 'use client' in layout, and ideally we shouldn't be using 'use client' if you're looking for server side rendering support.

You have to use 'use client' carefully so it doesn't bail out to render your pages client side.

E.g

BAILOUT_TO_CLIENT_SIDE_RENDERING

note: you will most likely see this in the markup on server tab if it bailed out

This means you have to compartmentalize your components, such that, certain areas are for client side.

A good way to know if your next pages are rendering server side is the following:

yarn build (next build)
yarn start (next start)

Hopefully your code has compiled successfully,

Navigate to the page your making changes on, and check the network tab, and see if you see any html markup.

E.g

If you see html markup, then this is a good sign your page is being rendered server side, and not client side.

Why this is important ?

Well... not making use of server side rendering defeats the purpose of using next JS. Unless, you're just using it for SEO.

TLDR

If you want to do loading screen on a global level, you do the following

If you want to show a loader for certain components

You do following:



import dynamic from "next/dynamic";
import LoadingPage from "../components/common/LoadingPage";

const PageView = dynamic(() => import("../components/common/PageView"), {
  ssr: true,
  loading: () => <LoadingPage />, <- add this here
});
....

Conclusion

Hopefully this post was helpful, at first i didn't understand how to implement this, but had to dig a bit deeper.

Implementing a decorator design pattern within React.

EliHood — Wed, 01 Nov 2023 22:02:57 +0000

One of the many challenges when trying to understand design patterns is making sense of when or where they could be useful.

Most design pattern examples are written in classes. Now, this isn't that hard to understand if you're programming in a OOP based programming language like C++, Java, etc.

But what if were writing Javascript ? More specifically, what if your writing React components ?

Although React has been following a class-based component architecture, it's slowly becoming a thing in the past ever since the release of React 16.8, when functional components became the new way to write components.

So now, we mostly follow a functional programming approach for writing components.

So how could we implement a design pattern in React ? more specifically how can we implement a Decorator Design Pattern ?

Lets see how we could achieve this.

Problem statement.

Suppose we have a confirm password functionality for a register page.

Register Page




// this useEffect compares the values of password and confirm password. 

useEffect(() => {
    dispatch(SET_REGISTER_CONFIRM_PASSWORD());
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [formState.password, formState.confirmRegisterPassword]);

// _The rest of the code below is irrelevant for this example.

  const hasError = (field: keyof ErrorState) => (errorState?.[field]?.error ? true : false);
  const updatedChangePasswordMap = renderConfirmPassword
    ? registerFieldMap.concat(renderConfirmRegisterPasswordField)
    : registerFieldMap;

  return (
    <Col lg={12}>
      <Typography className='text-primary font-primary font-bold mb-3' variant='h2'>
        Register
      </Typography>
.......

But we also have to do the same for first time googleOauth users.

So the naive / lazy approach would be to duplicate the useEffect like the following..

GoogleRegister.tsx



// duplicated again 
 useEffect(() => {
    dispatch(SET_REGISTER_CONFIRM_PASSWORD());
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [formState.password, formState.confirmRegisterPassword]);

  useEffect(() => {
    hasBeenValidated(requiredFields);
  }, [requiredFields]);

  useEffect(() => {
    if (googleId) {
      dispatch(SET_INITAL_FORM_AUTH_STATE({ googleId: googleId, email: googleEmail }));
    }
    checkGoogleAuthenticated();
  }, []);

  const updatedChangePasswordMap =
    formState.password.length >= 6 ? registerFieldMap.concat(renderConfirmRegisterPasswordField) : registerFieldMap;

  return (
    <Col lg={12}>
      <Typography className='text-primary font-primary font-bold mb-3' variant='h4'>
        Just need some more information.
      </Typography>
...

How can we keep the functionality centralized ? Write a hook right ? sure we can do that, but why don't we apply the decorator design pattern, so we can just wrap the functionality on components who need to use it.

note: side note, you should probably keep this in mind, when writing custom hooks. Custom hooks are useful, but just have to be mindful of the performance factors.

Heres how we can do it...



import { ComponentType, useEffect } from 'react';
import { SET_REGISTER_CONFIRM_PASSWORD, formSelector } from '../redux/store/formSlice';
import { useDispatch, useSelector } from 'react-redux';

/**
 *
 * @param Component @type { ComponentType}
 * @returns
 *
 * Reusable HOC that confirms password for first time registering users.
 */

export function confirmRegisterPassHoc(Component: ComponentType) {
  // we can be more explicit with the props, but for e.g
  return (props: any) => {
    const dispatch = useDispatch() as any;
    const formState = useSelector(formSelector)?.formState;
    useEffect(() => {
      dispatch(SET_REGISTER_CONFIRM_PASSWORD());
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [formState.password, formState.confirmRegisterPassword]);

    return <Component {...props} />;
  };
}

And we can just wrap it around like this.

So essentially, a higher order component is a decorator design pattern.

Decorator is a structural design pattern that lets you attach new behaviors to objects by placing these objects inside special wrapper objects that contain the behaviors.

The Decorator lets you structure your business logic into layers, create a decorator for each layer and compose objects with various combinations of this logic at runtime. The client code can treat all these objects in the same way, since they all follow a common interface.

source: https://refactoring.guru/design-patterns/decorator

In our example, we didn't need to change anything on the component itself, but just attach new behavior on them without needing to modify the component in any significant way.

Hopefully, you found this use case helpful, cheers 🥳.

Why you have to use localStorage for checking for authenticated routes in React.

EliHood — Thu, 19 Oct 2023 04:21:10 +0000

I spent the day trying to figure out how to avoid using localStorage to stash a user. Ideally, i don't want sensitive information to be displayed on the application tab.

So let me show you why you can't use redux (or even context) to check for authenticated routes.

Keep in mind were going to obviously stash user data in our store or context, but it won't be helpful for determining an authenticated route.

As you can see on the first render there is an empty object. What that means is when you pass this object (that probably looks like this if your using redux):

It will automatically redirect you to a login page, because it sees an empty object on the first renders. Also, it's unlikely that it will recheck the state. Once it redirects to the page, it's practically done doing its conditional rendering.

Basically its saying "hey bro.... user is an empty object... ok, so its not authenticated let me redirect to the login page".

An example of what this logic may look like

import { ReactElement } from 'react';
import { Route, Routes, BrowserRouter, Navigate } from 'react-router-dom';
import Dashboard from './Pages/Dashboard';
import Login from './Pages/Login';

import { getCurrentUser } from './utils';
import Register from './Pages/Register';
import EmailConfirmation from './Pages/EmailConfirmation';
import GoogleRegister from './Pages/GoogleRegister';
import Settings from './Pages/Settings';
import { useSelector } from 'react-redux';
import { authSelector } from './store/authSlice';

const checkAuth = (user: Record<string, any>): boolean => {
  const user = getCurrentUser() || {};
  console.log('first render', user);

  if (Object.keys?.(user).length > 0) return true;
  return false;
};

function AuthPrivateRoute({
  Page,
  isAuthPage = false,
  user,
}: {
  Page: React.ElementType;
  user: Record<string, any>;
  isAuthPage?: boolean;
}): ReactElement {
  /**
   * If user is validated and on an auth page like login or register,
   * redirect them to dashboard so they won't see login/register page.
   */
  if (isAuthPage && checkAuth?.(user)) {
    return <Navigate to={'/dashboard'} replace={true} />;
  }
  if (isAuthPage && !checkAuth?.(user)) {
    return <Page />;
  }

  return checkAuth?.(user) ? <Page /> : <Navigate to={'/login'} replace={true} />;
}

export function AuthProviderRouter() {
  const user = useSelector(authSelector).user;

  console.log('first render in auth router', user);
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/'>
          <Route path={'register'} element={<AuthPrivateRoute user={user} isAuthPage Page={Register} />} />
          <Route path={'login'} element={<AuthPrivateRoute user={user} isAuthPage Page={Login} />} />
          <Route path={'dashboard'} element={<AuthPrivateRoute user={user} Page={Dashboard} />} />
          <Route path={'settings'} element={<AuthPrivateRoute user={user} Page={Settings} />} />
          <Route path={'emailConfirmationSuccess/:userId/:token'} element={<EmailConfirmation />} />
          <Route path={'account/google/processAccount?'} element={<GoogleRegister />} />
          <Route path={'*'} element={<>404, not found</>} />
          <Route path={''} element={<>Welcome to Nobounce!</>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Your logic may look a little different than mine.

Basically reading from redux/context state will not be a suffice way to check authentication for providing access to a private route.

So this brings us to localStorage....

As much as localStorage gets alot of flack for security purposes and such, this is probably the only way i've seen that makes sure that the authenticated data is persisted through page refreshes.

the getCurrentUser code is nothing fancy.

export const getCurrentUser = () => {
  return JSON.parse(localStorage.getItem('user') as any);
};

First Render YAY.

Thinking about using redux-persist guess what ?

It uses session storage / localStorage under the hood.

Take a look

https://github.com/rt2zz/redux-persist/blob/d8b01a085e3679db43503a3858e8d4759d6f22fa/src/integration/getStoredStateMigrateV4.ts#L26

By the way..

useRef won't save you(saves data between rerenders, not page refreshes) Still won't resolve the issue.

Hopefully this post saves you some time from figuring out why you probably see localStorage used in various react authentication examples. Hopefully you see why its used now.

LocalStorage is the ideal determining factor to check for an authenticate route, localStorage data is persisted and doesn't clear data on refreshes. It will be available on the initial render.

I guess we just have to be mindful of what data we persist. I think ill just store just a token string on localStorage ... just to keep it simple.

Cheers ! 🥳 🥳 🥳