<commit_before>import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { FormattedMessage } from 'react-intl';

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
    },
    messageWrapper: {
        marginTop: theme.spacing(4),
        padding: theme.spacing(2),
        textAlign: 'center',
        color: theme.palette.text.secondary,
    },
}));

export default function NoApi() {
    const classes = useStyles();
    const theme = useTheme();

    return (
        <div className={classes.root}>
            <Grid container spacing={3}>
                <Grid item xs={12} className={classes.messageWrapper}>
                    <img src={theme.custom.noApiImage} className={classes.messageWrapper} />
                    <Typography variant='h5' gutterBottom>
                        <FormattedMessage id='Apis.Listing.NoApi.nodata.title' defaultMessage='No APIs Available' />
                    </Typography>
                    <Typography variant='subtitle1' gutterBottom>
                        <FormattedMessage id='Apis.Listing.NoApi.nodata.content' defaultMessage='There is no apis to show you right now.' />
                    </Typography>
                </Grid>
            </Grid>
        </div>
    );
}<commit_msg>Fixed the message which is displayed in the store when there are no APIs<commit_after>import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { FormattedMessage } from 'react-intl';

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
    },
    messageWrapper: {
        marginTop: theme.spacing(4),
        padding: theme.spacing(2),
        textAlign: 'center',
        color: theme.palette.text.secondary,
    },
}));

export default function NoApi() {
    const classes = useStyles();
    const theme = useTheme();

    return (
        <div className={classes.root}>
            <Grid container spacing={3}>
                <Grid item xs={12} className={classes.messageWrapper}>
                    <img src={theme.custom.noApiImage} className={classes.messageWrapper} />
                    <Typography variant='h5' gutterBottom>
                        <FormattedMessage id='Apis.Listing.NoApi.nodata.title' defaultMessage='No APIs Available' />
                    </Typography>
                    <Typography variant='subtitle1' gutterBottom>
                        <FormattedMessage id='Apis.Listing.NoApi.nodata.content' defaultMessage='There are no APIs to show you right now.' />
                    </Typography>
                </Grid>
            </Grid>
        </div>
    );
}
{'fraction_non_alphanumeric': 0.12167832167832168, 'fraction_numerical': 0.005594405594405594, 'mean_word_length': 2.2146067415730335, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 31, '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': '5717019', 'n_tokens_mistral': 791, 'n_tokens_neox': 761, 'n_words': 185}