stateHandling.js

import React, { useState, useEffect } from 'react';
import { useStaticQuery, graphql } from 'gatsby';

import { prepareBlogs, state } from './util';

const LoadingScreen = () => {
  return <div>Still Loading</div>;
};

const EmptyScreen = () => {
  return <div>No posts at the moment. Sorry :(</div>;
};

const ErrorScreen = () => {
  return <div>Something went wrong :(</div>;
};

const GridScreen = () => {
  return <div>hehe good</div>;
};

const BlogGrid = () => {
  const [status, setStatus] = useState(state.LOADING);
  const [blogData, setBlogData] = useState([]);

  const blogRawData = useStaticQuery(graphql`
    query Blogs {
      allStoryblokEntry(filter: { field_component: { eq: "blog" } }) {
        edges {
          node {
            uuid
            name
            content
            full_slug
          }
        }
      }
    }
  `);

  useEffect(() => {
    setBlogData(prepareBlogs(blogRawData));
  }, []);

  // Set status: Ready, Error, Empty. Loading state is initial so no need to do it.
  useEffect(() => {
    if (blogData.length < 1) {
      setStatus(state.EMPTY);
      return;
    }
    if (blogData[0] === -1) {
      setStatus(state.ERROR);
      return;
    }
    setStatus(state.READY);
  }, [blogData]);

  const printScreen = () => {
    switch (status) {
      case state.EMPTY:
        return <EmptyScreen />;
      case state.ERROR:
        return <ErrorScreen />;
      case state.READY:
        return <GridScreen />;
      default:
        return <LoadingScreen />;
    }
  };

  return <div>{printScreen()}</div>;
};

export default BlogGrid;