blog/index.js

import Image from 'next/image';
import { useRouter } from 'next/router';
import { curlData } from '../../components/curl';
import { Slide, Fade } from 'react-awesome-reveal';
import React, { useEffect, useState } from 'react';
import { ucwords } from '../../components/misc-functions';

const BlogLayout = (props) => {

    const router = useRouter();
    let [dataList, setDataList] = useState([]);
    let [category, setCategory] = useState([null]);
    let [search, setSearch] = useState('');
    let [limit, setLimit] = useState(10);
    const blogName = process.env.BLOG;

    const getData = async () => {
        if(!sessionStorage['blog'])
            curlData(blogName);
        const data = (sessionStorage['blog']);
        if(data){
            let myMap = JSON.parse(data);
            setDataList(myMap.data);
        } else {
            setTimeout(() => getData(), 100);
        }
    }

    // tied to a search bar
    const updateSearch = (e) => {
        setSearch(e.target.value);
    }

    const onPageLoad = () => {
        if(dataList && router.query['c'])
            setCategory(ParseListCategories(dataList, router.query['c']));
    }

    // used for category filtering
    const updateQuery = (query) => {
        if(query){

            setCategory(ParseListCategories(dataList, query));
            router.push({
                pathname: '/blog',
                query: { c: query }
            },
            undefined, { shallow: true }
            )
        } else {
            setCategory(ParseListCategories(dataList, query));
            router.push({
                pathname: '/blog',
                query: { }
            },
            undefined, { shallow: true }
            )
        }
    }

    useEffect(() => {
        if (document.readyState === "complete") {
            onPageLoad();
        } else {
            window.addEventListener("load", onPageLoad);
            // Remove the event listener when component unmounts
            return () => window.removeEventListener("load", onPageLoad);
        }
    }, [router.query]);

    return (
        <>
            // CONTENT CLIPPED
        </>
    );
}

export default BlogLayout;