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-5.js

const useStyles = makeStyles((theme) => ({
  seeMore: {
    color: theme.palette.text.primary,
    textTransform: 'uppercase',
    textDecoration: 'inherit',
    background: 'rgb(0 0 0 / 40%)',
    padding: '10px 0',
    textAlign: 'center',
    position: 'absolute',
    margin: 'auto',
    bottom: '0px',
    zIndex: '9999',
    width: '100%',
    height: 'auto',
  },
  contentWrapper: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    background: '#333',
    width: '100%',
    color: 'white',
    height: '100%',
  },
  contentTextWrapper: {
    '& h1, p, a': {
      background: 'rgb(0 0 0 / 40%)',
      padding: '10px 25px',
      margin: 0,
    },
  },
}));

const useStories = (posts, seenStories) => {
  const intl = useIntl();
  const classes = useStyles();
  const imagesData = useStaticQuery(graphql`
    query {
      allFile(filter: { relativeDirectory: { eq: "categories" }, extension: { eq: "jpg" } }) {
        edges {
          node {
            base
            childImageSharp {
              gatsbyImageData
            }
          }
        }
      }
    }
  `);

  return useMemo(() => {
    const storiesMap = new Map();
    posts.forEach(({ node }) => {
      const { frontmatter, fields, excerpt } = node;
      const { title, categories } = frontmatter;
      const category = categories[0];
      const { path, postHashId } = fields;
      const imageNode = imagesData.allFile.edges.find((edge) => edge.node.base.includes(category));
      const gatsbyImageData = getImage(imageNode.node.childImageSharp);
      const categoryImage = gatsbyImageData.images.fallback.src;

      const story = {
        category,
        previewImage: categoryImage,
        postHashId,
        duration: 5000,
        viewed: seenStories.includes(postHashId),
        content: ({ action, isPaused }) => (
          <div
            className={classes.contentWrapper}
            style={{
              background: `linear-gradient(rgba(51, 51, 51, 0.5), rgba(51, 51, 51, 0.5)), url(${categoryImage}) no-repeat center center`,
            }}
          >
            <div className={classes.contentTextWrapper}>
              <h1>{title}</h1>
              <p>{excerpt}</p>
            </div>
            <Link to={path} className={classes.seeMore}>
              {intl.formatMessage({ id: 'go_to_post' })}
            </Link>
          </div>
        ),
      };

      const categoryStories = storiesMap.get(category) || [];
      categoryStories.push(story);
      storiesMap.set(category, categoryStories);
    });

    return Array.from(storiesMap.values()).sort((a, b) => {
      const aHasFalse = a.some((item) => !item.viewed);
      const bHasFalse = b.some((item) => !item.viewed);

      if (aHasFalse && bHasFalse) {
        return 0;
      } else if (aHasFalse) {
        return -1;
      } else {
        return 1;
      }
    });
  }, [
    posts,
    imagesData.allFile.edges,
    seenStories,
    classes.contentWrapper,
    classes.contentTextWrapper,
    classes.seeMore,
    intl,
  ]);
};