<commit_before>import React, { useState } from 'react';
import { registerComponent, Components } from '../../lib/vulcan-lib';
import { useMulti } from '../../lib/crud/withMulti';
import { Tags } from '../../lib/collections/tags/collection';
import { useTagBySlug } from './useTag';
import { commentBodyStyles } from '../../themes/stylePiping'
import { EditTagForm } from './EditTagPage';
import { userCanEditTagPortal } from '../../lib/betas'
import { useCurrentUser } from '../common/withUser';
import { AnalyticsContext } from "../../lib/analyticsEvents";
import { Link, QueryLink } from '../../lib/reactRouterWrapper';
import AddBoxIcon from '@material-ui/icons/AddBox';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import { wikiGradeDefinitions } from '../../lib/collections/tags/schema';
import { useLocation } from '../../lib/routeUtil';
import { useDialog } from '../common/withDialog';

const styles = theme => ({
  root: {
    margin: "auto",
    maxWidth: 1000
  },
  topSection: {
    maxWidth: 800,
    marginLeft: "auto",
    marginRight: "auto",
    marginBottom: theme.spacing.unit*8
  },
  alphabetical: {
    columns: 5,
    columnWidth: 200,
    columnGap: 0,
    background: "white",
    padding: 20,
    marginBottom: 24
  },
  portal: {
    marginTop: 18,
    ...commentBodyStyles(theme),
    marginBottom: 18,
    position: "relative",
    [theme.breakpoints.down('xs')]: {
      '& td': {
        display: 'block',
        width: '100% !important',
        height: 'inherit !important'
      }
    }
  },
  edit: {
    position: "absolute",
    right: 5,
    color: theme.palette.grey[600]
  }
})

const reverseWikiGradeDescriptions = Object.fromEntries(Object.entries(wikiGradeDefinitions).map(([key, value]) => [value, key]))

const AllTagsPage = ({classes}: {
  classes: ClassesType,
}) => {
  const { query } = useLocation()
  const { openDialog } = useDialog()
  const wikiGrade = query?.tagFilter
  const { results, loadMoreProps, totalCount, count } = useMulti({
    terms: {
      view: "allTagsHierarchical",
      wikiGrade: reverseWikiGradeDescriptions[wikiGrade]
    },
    collection: Tags,
    fragmentName: "TagPreviewFragment",
    limit: 20,
    itemsPerPage: 100,
    ssr: true
  });

  const currentUser = useCurrentUser()
  const { tag } = useTagBySlug("portal", "TagFragment");
  const [ editing, setEditing ] = useState(false)
  // Type hack because MenuItem is too narrowly typed and doesn't properly take into account props-forwarding
  const UntypedMenuItem = MenuItem as any

  const { AllTagsAlphabetical, SectionButton, TagsDetailsItem, SectionTitle, LoadMore, SectionFooter, ContentItemBody } = Components;

  return (
    <AnalyticsContext pageContext="allTagsPage">
      <div className={classes.root}>
        <div className={classes.topSection}>
          <AnalyticsContext pageSectionContext="tagPortal">
            <SectionTitle title="Concepts Portal">
              <SectionButton>
                <AddBoxIcon/>
                {currentUser ? 
                  <Link to="/tag/create">New Tag</Link> :
                  <a onClick={(ev) => {
                    openDialog({
                      componentName: "LoginPopup",
                      componentProps: {}
                    });
                    ev.preventDefault();
                  }}>New Tag</a>
                }
              </SectionButton>
            </SectionTitle>
            <div className={classes.portal}>
              {userCanEditTagPortal(currentUser) && <a onClick={() => setEditing(true)} className={classes.edit}>
                Edit
              </a>}
              {editing && tag ?
                <EditTagForm tag={tag} successCallback={()=>setEditing(false)}/>
                :
                <ContentItemBody
                  dangerouslySetInnerHTML={{__html: tag?.description.html || ""}}
                  description={`tag ${tag?.name}`}
                />
              }
            </div>
          </AnalyticsContext>
        </div>
        <AnalyticsContext pageSectionContext="tagDetails">
          <SectionTitle title={`Tag Details`}>
            <Select
              value={wikiGrade||"none"}
              inputProps={{
                name: 'Showing All Tags'
              }}
            >
              <UntypedMenuItem value="none" component={QueryLink} query={{ tagFilter: undefined }}>
                No Filters
              </UntypedMenuItem>  
              {Object.entries(wikiGradeDefinitions).map(([value, name]) => {
                if(name === wikiGradeDefinitions[0]) return null
                if(name === wikiGradeDefinitions[1]) return null
                return <UntypedMenuItem key={value} value={name} component={QueryLink} query={{ tagFilter: name }}>
                  {name}
                </UntypedMenuItem>
              })}
            </Select>
          </SectionTitle>
          <div>
            {results && results.map(tag => {
              return <TagsDetailsItem key={tag._id} tag={tag} />
            })}
            {results && !results.length && <div>
              There aren't any tags yet.
            </div>}
          </div>
          <SectionFooter>
            <LoadMore
              {...loadMoreProps}
              totalCount={totalCount}
              count={count}
            />
          </SectionFooter>
        </AnalyticsContext>
        <AnalyticsContext pageSectionContext="allTagsAlphabetical">
          <AllTagsAlphabetical />
        </AnalyticsContext>
      </div>
    </AnalyticsContext>
  );
}<commit_msg>Reverse sort order in menu<commit_after>import React, { useState } from 'react';
import { registerComponent, Components } from '../../lib/vulcan-lib';
import { useMulti } from '../../lib/crud/withMulti';
import { Tags } from '../../lib/collections/tags/collection';
import { useTagBySlug } from './useTag';
import { commentBodyStyles } from '../../themes/stylePiping'
import { EditTagForm } from './EditTagPage';
import { userCanEditTagPortal } from '../../lib/betas'
import { useCurrentUser } from '../common/withUser';
import { AnalyticsContext } from "../../lib/analyticsEvents";
import { Link, QueryLink } from '../../lib/reactRouterWrapper';
import AddBoxIcon from '@material-ui/icons/AddBox';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import { wikiGradeDefinitions } from '../../lib/collections/tags/schema';
import { useLocation } from '../../lib/routeUtil';
import { useDialog } from '../common/withDialog';

const styles = theme => ({
  root: {
    margin: "auto",
    maxWidth: 1000
  },
  topSection: {
    maxWidth: 800,
    marginLeft: "auto",
    marginRight: "auto",
    marginBottom: theme.spacing.unit*8
  },
  alphabetical: {
    columns: 5,
    columnWidth: 200,
    columnGap: 0,
    background: "white",
    padding: 20,
    marginBottom: 24
  },
  portal: {
    marginTop: 18,
    ...commentBodyStyles(theme),
    marginBottom: 18,
    position: "relative",
    [theme.breakpoints.down('xs')]: {
      '& td': {
        display: 'block',
        width: '100% !important',
        height: 'inherit !important'
      }
    }
  },
  edit: {
    position: "absolute",
    right: 5,
    color: theme.palette.grey[600]
  }
})

const reverseWikiGradeDescriptions = Object.fromEntries(Object.entries(wikiGradeDefinitions).map(([key, value]) => [value, key]))

const AllTagsPage = ({classes}: {
  classes: ClassesType,
}) => {
  const { query } = useLocation()
  const { openDialog } = useDialog()
  const wikiGrade = query?.tagFilter
  const { results, loadMoreProps, totalCount, count } = useMulti({
    terms: {
      view: "allTagsHierarchical",
      wikiGrade: reverseWikiGradeDescriptions[wikiGrade]
    },
    collection: Tags,
    fragmentName: "TagPreviewFragment",
    limit: 20,
    itemsPerPage: 100,
    ssr: true
  });

  const currentUser = useCurrentUser()
  const { tag } = useTagBySlug("portal", "TagFragment");
  const [ editing, setEditing ] = useState(false)
  // Type hack because MenuItem is too narrowly typed and doesn't properly take into account props-forwarding
  const UntypedMenuItem = MenuItem as any

  const { AllTagsAlphabetical, SectionButton, TagsDetailsItem, SectionTitle, LoadMore, SectionFooter, ContentItemBody } = Components;

  return (
    <AnalyticsContext pageContext="allTagsPage">
      <div className={classes.root}>
        <div className={classes.topSection}>
          <AnalyticsContext pageSectionContext="tagPortal">
            <SectionTitle title="Concepts Portal">
              <SectionButton>
                <AddBoxIcon/>
                {currentUser ? 
                  <Link to="/tag/create">New Tag</Link> :
                  <a onClick={(ev) => {
                    openDialog({
                      componentName: "LoginPopup",
                      componentProps: {}
                    });
                    ev.preventDefault();
                  }}>New Tag</a>
                }
              </SectionButton>
            </SectionTitle>
            <div className={classes.portal}>
              {userCanEditTagPortal(currentUser) && <a onClick={() => setEditing(true)} className={classes.edit}>
                Edit
              </a>}
              {editing && tag ?
                <EditTagForm tag={tag} successCallback={()=>setEditing(false)}/>
                :
                <ContentItemBody
                  dangerouslySetInnerHTML={{__html: tag?.description.html || ""}}
                  description={`tag ${tag?.name}`}
                />
              }
            </div>
          </AnalyticsContext>
        </div>
        <AnalyticsContext pageSectionContext="tagDetails">
          <SectionTitle title={`Tag Details`}>
            <Select
              value={wikiGrade||"none"}
              inputProps={{
                name: 'Showing All Tags'
              }}
            >
              <UntypedMenuItem value="none" component={QueryLink} query={{ tagFilter: undefined }}>
                No Filters
              </UntypedMenuItem>  
              {Object.entries(wikiGradeDefinitions).reverse().map(([value, name]) => {
                if(name === wikiGradeDefinitions[0]) return null
                if(name === wikiGradeDefinitions[1]) return null
                return <UntypedMenuItem key={value} value={name} component={QueryLink} query={{ tagFilter: name }}>
                  {name}
                </UntypedMenuItem>
              })}
            </Select>
          </SectionTitle>
          <div>
            {results && results.map(tag => {
              return <TagsDetailsItem key={tag._id} tag={tag} />
            })}
            {results && !results.length && <div>
              There aren't any tags yet.
            </div>}
          </div>
          <SectionFooter>
            <LoadMore
              {...loadMoreProps}
              totalCount={totalCount}
              count={count}
            />
          </SectionFooter>
        </AnalyticsContext>
        <AnalyticsContext pageSectionContext="allTagsAlphabetical">
          <AllTagsAlphabetical />
        </AnalyticsContext>
      </div>
    </AnalyticsContext>
  );
}
{'fraction_non_alphanumeric': 0.13588167156731712, 'fraction_numerical': 0.006237191481778491, 'mean_word_length': 2.086908690869087, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 107, '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': '4622534', 'n_tokens_mistral': 3173, 'n_tokens_neox': 3032, 'n_words': 666}