<commit_before>import * as React from 'react';
import styled from 'styled-components'
import { PostView, IPost } from '../reader/PostView';

// TODO: Implement a responsive sidebar layout.
/*const FeedContainer = styled.div`
    display: grid;
    width: 100vw;
    margin: 0;
    grid-template-columns: 15% auto;
    grid-template-rows: auto;
    grid-template-areas:
    "s f f f"
    "s f f f";
`;*/
const FeedContainer = styled.div`
    display: grid;
    width: 100vw;
    margin: 0;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
    "f f f"
    "f f f";
`;
/*const Sidebar = styled.aside`
    grid-area: s;
`;*/
const Feed = styled.div`
    grid-area: f;
`;
const LoadMore = styled.div`
    grid-area: f;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.25);;
    text-align: center;
    font-size: 0.9rem;
    line-height: 3.5rem;
    height: 3.5rem;
    width: 100%;
    user-select: none;
`;

interface IProps { }
interface IState { 
    posts: IPost[]
    currentDescendingPostIndex: number;
    loading: boolean;
    loadedAll: boolean;
}

class FeedComponent extends React.Component<IProps, IState> {

    componentWillMount() {
        this.setState({
            posts: [],
            currentDescendingPostIndex: 0,
            loading: true,
            loadedAll: false
        });
    }
    
    componentDidMount() {
        this.loadPosts(5);
    }
    
    loadPosts(quantity: number) {
        const query = {
            from_descending_index: this.state.currentDescendingPostIndex,
            to_descending_index: this.state.currentDescendingPostIndex + quantity
        };

        PostView.fetchPost(query, (posts: IPost[]) => {
            this.setState({
                currentDescendingPostIndex: this.state.currentDescendingPostIndex + quantity,
                posts: [...this.state.posts, ...posts],
                loading: false,
                loadedAll: posts.length < quantity
            });
        });
    }
    
    render() {
        return (
            <FeedContainer>
                {/*<Sidebar>
                </Sidebar>*/}
                <Feed>
                   { this.state.posts.map((post, key) => {
                       console.log('returning post ', post);
                       return <PostView retracted post={post} key={key} />
                   }) }
                </Feed>
            { !this.state.loading && !this.state.loadedAll &&
                <LoadMore onClick={() => { this.loadPosts(5) }}>load more</LoadMore> }
            </FeedContainer>
        )
    }
}

module.exports = FeedComponent;<commit_msg>Fix feed post order<commit_after>import * as React from 'react';
import styled from 'styled-components'
import { PostView, IPost } from '../reader/PostView';

// TODO: Implement a responsive sidebar layout.
/*const FeedContainer = styled.div`
    display: grid;
    width: 100vw;
    margin: 0;
    grid-template-columns: 15% auto;
    grid-template-rows: auto;
    grid-template-areas:
    "s f f f"
    "s f f f";
`;*/
const FeedContainer = styled.div`
    display: grid;
    width: 100%;
    margin: 0;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
    "f f f"
    "f f f";
`;
/*const Sidebar = styled.aside`
    grid-area: s;
`;*/
const Feed = styled.div`
    grid-area: f;
`;
const LoadMore = styled.div`
    grid-area: f;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.25);;
    text-align: center;
    font-size: 0.9rem;
    line-height: 3.5rem;
    height: 3.5rem;
    width: 100%;
    user-select: none;
`;

interface IProps { }
interface IState { 
    posts: IPost[]
    currentDescendingPostIndex: number;
    loading: boolean;
    loadedAll: boolean;
}

class FeedComponent extends React.Component<IProps, IState> {

    componentWillMount() {
        this.setState({
            posts: [],
            currentDescendingPostIndex: 0,
            loading: true,
            loadedAll: false
        });
    }
    
    componentDidMount() {
        this.loadPosts(5);
    }
    
    loadPosts(quantity: number) {
        const query = {
            from_descending_index: this.state.currentDescendingPostIndex,
            to_descending_index: this.state.currentDescendingPostIndex + quantity
        };

        PostView.fetchPost(query, (posts: IPost[]) => {
            this.setState({
                currentDescendingPostIndex: this.state.currentDescendingPostIndex + quantity,
                posts: [...this.state.posts, ...posts],
                loading: false,
                loadedAll: posts.length < quantity
            });
        });
    }
    
    render() {
        return (
            <FeedContainer>
                {/*<Sidebar>
                </Sidebar>*/}
                <Feed>
                   { this.state.posts.reverse().map((post, key) => {
                       console.log('returning post ', post);
                       return <PostView retracted post={post} key={key} />
                   }) }
                </Feed>
            { !this.state.loading && !this.state.loadedAll &&
                <LoadMore onClick={() => { this.loadPosts(5) }}>load more</LoadMore> }
            </FeedContainer>
        )
    }
}

module.exports = FeedComponent;
{'fraction_non_alphanumeric': 0.12823907698127482, 'fraction_numerical': 0.013240022697181766, 'mean_word_length': 1.8754758020663405, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 29, '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': '4720187', 'n_tokens_mistral': 1674, 'n_tokens_neox': 1570, 'n_words': 352}