<commit_before>import React from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { useMulti } from '../../lib/crud/withMulti';
import { Tags } from '../../lib/collections/tags/collection';
import { TagRels } from '../../lib/collections/tagRels/collection';
import { commentBodyStyles } from '../../themes/stylePiping'
import { Link } from '../../lib/reactRouterWrapper';

const styles = (theme: ThemeType): JssStyles => ({
  card: {
    paddingTop: 8,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 6,
    width: 500,
    [theme.breakpoints.down('xs')]: {
      width: "100%",
    }
  },
  tagDescription: {
    ...commentBodyStyles(theme)
  },
  relevance: {
    marginBottom: 12,
    ...theme.typography.body2,
    ...theme.typography.commentStyle
  },
  relevanceLabel: {
    marginRight: 8,
    color: theme.palette.grey[600]
  },
  score: {
    marginLeft: 4,
    marginRight: 4,
  },
  footerCount: {
    borderTop: "solid 1px rgba(0,0,0,.08)",
    paddingTop: 6,
    textAlign: "right",
    ...theme.typography.smallFont,
    ...theme.typography.commentStyle,
    color: theme.palette.lwTertiary.main,
    marginTop: 6,
    marginBottom: 2
  },
  posts: {
    marginTop: 12,
    paddingTop: 8,
    borderTop: "solid 1px rgba(0,0,0,.08)",
    marginBottom: 8
  }
});

const TagPreview = ({tag, classes, showCount=true, postCount=6}: {
  tag: TagPreviewFragment,
  classes: ClassesType,
  showCount?: boolean,
  postCount?: number
}) => {
  const { TagPreviewDescription, TagSmallPostLink, Loading } = Components;
  const { results } = useMulti({
    skip: !(tag?._id),
    terms: {
      view: "postsWithTag",
      tagId: tag?._id,
    },
    collection: TagRels,
    fragmentName: "TagRelFragment",
    limit: postCount,
    ssr: true,
  });

  if (!tag) return null

  return (<div className={classes.card}>
    <TagPreviewDescription tag={tag}/>
    {results ? <div className={classes.posts}>
      {results.map((result,i) => result.post && <TagSmallPostLink key={result.post._id} post={result.post} widerSpacing={postCount > 3} />)}
    </div> : <Loading /> }
    {showCount && <div className={classes.footerCount}>
      <Link to={Tags.getUrl(tag)}>View all {tag.postCount} posts</Link>
    </div>}
  </div>)
}

const TagPreviewComponent = registerComponent("TagPreview", TagPreview, {styles});

declare global {
  interface ComponentTypes {
    TagPreview: typeof TagPreviewComponent
  }
}<commit_msg>Tag Preview posts match TagPage posts<commit_after>import React from 'react';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import { useMulti } from '../../lib/crud/withMulti';
import { Tags } from '../../lib/collections/tags/collection';
import { Posts } from '../../lib/collections/posts/collection';
import { commentBodyStyles } from '../../themes/stylePiping'
import { Link } from '../../lib/reactRouterWrapper';

const styles = (theme: ThemeType): JssStyles => ({
  card: {
    paddingTop: 8,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 6,
    width: 500,
    [theme.breakpoints.down('xs')]: {
      width: "100%",
    }
  },
  tagDescription: {
    ...commentBodyStyles(theme)
  },
  relevance: {
    marginBottom: 12,
    ...theme.typography.body2,
    ...theme.typography.commentStyle
  },
  relevanceLabel: {
    marginRight: 8,
    color: theme.palette.grey[600]
  },
  score: {
    marginLeft: 4,
    marginRight: 4,
  },
  footerCount: {
    borderTop: "solid 1px rgba(0,0,0,.08)",
    paddingTop: 6,
    textAlign: "right",
    ...theme.typography.smallFont,
    ...theme.typography.commentStyle,
    color: theme.palette.lwTertiary.main,
    marginTop: 6,
    marginBottom: 2
  },
  posts: {
    marginTop: 12,
    paddingTop: 8,
    borderTop: "solid 1px rgba(0,0,0,.08)",
    marginBottom: 8
  }
});

const TagPreview = ({tag, classes, showCount=true, postCount=6}: {
  tag: TagPreviewFragment,
  classes: ClassesType,
  showCount?: boolean,
  postCount?: number
}) => {
  const { TagPreviewDescription, TagSmallPostLink, Loading } = Components;
  const { results } = useMulti({
    skip: !(tag?._id),
    terms: {
      filterSettings: {tags:[{tagId: tag?._id, tagName: tag?.name, filterMode: "Required"}]},
      view: "tagRelevance",
      tagId: tag?._id,
    },
    collection: Posts,
    fragmentName: "PostsList",
    limit: postCount,
    ssr: true,
  });

  if (!tag) return null

  return (<div className={classes.card}>
    <TagPreviewDescription tag={tag}/>
    {results ? <div className={classes.posts}>
      {results.map((post,i) => post && <TagSmallPostLink key={post._id} post={post} widerSpacing={postCount > 3} />)}
    </div> : <Loading /> }
    {showCount && <div className={classes.footerCount}>
      <Link to={Tags.getUrl(tag)}>View all {tag.postCount} posts</Link>
    </div>}
  </div>)
}

const TagPreviewComponent = registerComponent("TagPreview", TagPreview, {styles});

declare global {
  interface ComponentTypes {
    TagPreview: typeof TagPreviewComponent
  }
}
{'fraction_non_alphanumeric': 0.1648066958947788, 'fraction_numerical': 0.016739736946990835, 'mean_word_length': 3.2606112054329373, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 33, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4887377', 'n_tokens_mistral': 1722, 'n_tokens_neox': 1647, 'n_words': 358}