{"size": 1381, "ext": "js", "max_stars_repo_path": "web-app/src/app/memes/panels/topics-panel.js", "max_stars_repo_name": "sokomishalov/memeory", "max_stars_repo_stars_event_min_datetime": "2019-10-01T12:15:16.000Z", "max_stars_repo_stars_event_max_datetime": "2019-10-23T12:52:03.000Z", "max_issues_repo_path": "web-app/src/app/memes/panels/topics-panel.js", "max_issues_repo_name": "SokoMishaLov/memeory", "max_issues_repo_issues_event_min_datetime": "2019-11-08T02:25:11.000Z", "max_issues_repo_issues_event_max_datetime": "2020-09-29T17:07:37.000Z", "max_forks_repo_path": "web-app/src/app/memes/panels/topics-panel.js", "max_forks_repo_name": "SokoMishaLov/memeory", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": 137, "max_forks_count": null, "avg_line_length": 34.525, "max_line_length": 129, "alphanum_fraction": 0.5155684287}
import React from 'react';
import "./topics-panel.css"
import {Divider} from "antd";
import _ from "lodash"
import {withRouter} from "react-router";
import {PARAMS, ROUTE} from "../../../util/router/router";
import {withT} from "../../../util/locales/i18n";
import {connect} from "react-redux";
import {selectTopics} from "../../../store/selectors/topics";

const TopicsPanel = ({t, topics, history, match}) => {
    return (
        <div className="topics">
            <div className="topics-header">{t("topics.caption")}</div>
            <Divider/>
            <div className="topics-items">
                {_.map(topics, it => {
                    const active = _.isEqual(ROUTE.MEMES_TOPIC, match.path) && _.isEqual(_.get(match, "params.id", ""), it["id"])
                    return (
                        <div key={it["id"]}
                             className={`topics-items-item ${active ? "topics-items-item-active" : ""}`}
                             onClick={() => history.push(ROUTE.MEMES_TOPIC.replace(PARAMS.ID, it["id"]))}>
                            {it["caption"]}
                        </div>
                    );
                })}
            </div>
        </div>
    );
};

const mapStateToProps = state => ({
    topics: selectTopics(state),
});

export default _.flow(
    withRouter,
    withT,
    connect(mapStateToProps)
)(TopicsPanel);