{"size": 3001, "ext": "js", "max_stars_repo_path": "client/components/PostsForFeedSection.js", "max_stars_repo_name": "greendost/taaza", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/components/PostsForFeedSection.js", "max_issues_repo_name": "greendost/taaza", "max_issues_repo_issues_event_min_datetime": "2021-03-09T19:56:48.000Z", "max_issues_repo_issues_event_max_datetime": "2022-01-22T09:25:55.000Z", "max_forks_repo_path": "client/components/PostsForFeedSection.js", "max_forks_repo_name": "greendost/taaza", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 3, "max_forks_count": null, "avg_line_length": 30.6224489796, "max_line_length": 75, "alphanum_fraction": 0.4028657114}
import React, { useContext } from 'react';
import AppContext from '../context/AppContext';
import BigListElement from './BigListElement';
import GridRow from './GridRow';

/**
 * @module client/components/PostsForFeedSection
 * @description Show RSS posts from a given feed
 */
const PostsForFeedSection = () => {
  const { state, dispatch } = useContext(AppContext);

  const bigListStyle = theme => ({
    borderBottom: `1px solid ${theme.color.listBorder}`,
    padding: `20px ${theme.container.padding}`,
    '.listItemTitle': {
      fontSize: '18px'
    },
    a: {
      fontSize: '0.8rem',
      color: theme.color.link2
    }
  });

  const listStyle = theme => ({
    padding: '10px 0',
    '&:nth-of-type(1)': {
      paddingTop: '0'
    }
  });

  return (
    <div>
      {state.selectedFeedId === null ? (
        <p css={theme => [{ padding: `10px ${theme.container.padding}` }]}>
          No feed selected
        </p>
      ) : !state.postsForSelectedFeedId.length ? (
        <p css={theme => [{ padding: `10px ${theme.container.padding}` }]}>
          No posts available for this feed
        </p>
      ) : (
        <ul style={{ listStyleType: 'none' }}>
          {state.postsForSelectedFeedId.map((post, i) => {
            return (
              <BigListElement key={i} style={bigListStyle}>
                <p className="listItemTitle">{post.title}</p>
                <GridRow>
                  <a href={post.url} style={{ overflow: 'hidden' }}>
                    {post.url}
                  </a>
                  <a
                    href={post.url}
                    style={{ paddingLeft: '10px' }}
                    target="_blank"
                  >
                    new tab
                  </a>
                  <br />
                </GridRow>
                {!post.extraUrls.length ? null : (
                  <>
                    <p>Additional urls</p>
                    <ul style={{ listStyleType: 'none' }}>
                      {post.extraUrls.map((url, i) => (
                        <li key={i} css={theme => [listStyle(theme)]}>
                          <GridRow>
                            <a href={url} style={{ overflow: 'hidden' }}>
                              {url}
                            </a>
                            <a
                              href={url}
                              style={{ paddingLeft: '10px' }}
                              target="_blank"
                            >
                              new tab
                            </a>
                          </GridRow>
                        </li>
                      ))}
                    </ul>
                  </>
                )}
                <div>
                  <span>{new Date(post.pubDate).toLocaleString()}</span>
                  <br />
                </div>
              </BigListElement>
            );
          })}
        </ul>
      )}
    </div>
  );
};

export default PostsForFeedSection;
