Code for post "My blog now has Stories, and I'm not sure why"

my-blog-now-has-stories,-and-i'm-not-sure-why-script-1.js

const useStyles = makeStyles((theme) => ({
  circleImage: {
    width: 80,
    height: 80,
    borderRadius: '50%',
    cursor: 'pointer',
    objectFit: 'cover',
    marginLeft: '5px',
    position: 'relative',
  },
  storyImage: {
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    objectPosition: 'center',
  },
  storiesWrapper: {
    margin: '15px 0',
  },
  previewWrapper: {
    margin: '15px 0',
  },
}));

const StoriesPreview = () => {
  const data = useStaticQuery(
    graphql`
      query {
        allMarkdownRemark(
          filter: { frontmatter: { show: { eq: true } } }
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 10
        ) {
          edges {
            node {
              excerpt(pruneLength: 60)
              fields {
                path
                locale
                postHashId
              }
              frontmatter {
                title
                categories
              }
            }
          }
        }
      }
    `
  );

  const intl = useIntl();
  const posts = data.allMarkdownRemark.edges.filter(({ node }) => node.fields.locale === intl.locale);
  const classes = useStyles();
  const [showModal, setShowModal] = useState(false);
  const [currentStoriesIndex, setCurrentStoriesIndex] = useState(0);
  const [seenStories, setSeenStories] = useLocalStorage('seenStories', []);
  const [tempSeenStories, setTempSeenStories] = useState([]);
  const stories = useStories(posts, seenStories);

  const onStoryEnd = useCallback(
    (currentStoriesIndex, currentStoryIndex) => {
      const newTempSeenStories = new Set([
        ...tempSeenStories,
        stories[currentStoriesIndex][currentStoryIndex].postHashId,
      ]);
      setTempSeenStories([...newTempSeenStories]);
    },
    [tempSeenStories, stories]
  );

  const handleImageClick = useCallback((index) => {
    setCurrentStoriesIndex(index);
    setShowModal(true);
  }, []);

  const handleCloseModal = useCallback(() => {
    setShowModal(false);
    const newSeenStories = new Set([...seenStories, ...tempSeenStories]);
    setSeenStories([...newSeenStories]);
    setTempSeenStories([]);
  }, [seenStories, setSeenStories, tempSeenStories]);

  const handleNextStories = useCallback(() => {
    if (currentStoriesIndex < stories.length - 1) {
      setCurrentStoriesIndex(currentStoriesIndex + 1);
    } else {
      handleCloseModal();
    }
  }, [currentStoriesIndex, handleCloseModal, stories.length]);

  const handlePreviousStories = useCallback(() => {
    if (currentStoriesIndex > 0) {
      setCurrentStoriesIndex(currentStoriesIndex - 1);
    } else {
      handleCloseModal();
    }
  }, [currentStoriesIndex, handleCloseModal]);

  const handleOnAllStoriesEnd = useCallback(() => {
    handleNextStories();
  }, [handleNextStories]);

  return (
    <div className={classes.storiesWrapper}>
      <div className={classes.previewWrapper}>
        {stories.map((storiesArray, index) => {
          return (
            <StoryImage
              key={index}
              category={storiesArray[0].category}
              previewImage={storiesArray[0].previewImage}
              unseen={isClient() && storiesArray.some((story) => !story.viewed)}
              onClick={() => handleImageClick(index)}
            />
          );
        })}
      </div>
      <Divider />
      {showModal && (
        <StoryModal
          stories={stories[currentStoriesIndex]}
          onClose={handleCloseModal}
          onPrevious={handlePreviousStories}
          onNext={handleNextStories}
          showPrevious={currentStoriesIndex > 0}
          showNext={currentStoriesIndex < stories.length - 1}
          currentStoriesIndex={currentStoriesIndex}
          onAllStoriesEnd={handleOnAllStoriesEnd}
          onStoryEnd={(currentStoryIndex) => onStoryEnd(currentStoriesIndex, currentStoryIndex)}
          onStoryStart={(currentStoryIndex) => onStoryEnd(currentStoriesIndex, currentStoryIndex)}
        />
      )}
    </div>
  );
};