{"size": 3887, "ext": "js", "max_stars_repo_path": "frontend/src/components/NotificationRow/presenter.js", "max_stars_repo_name": "SHHam12/sukhwagram", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "frontend/src/components/NotificationRow/presenter.js", "max_issues_repo_name": "SHHam12/sukhwagram", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "frontend/src/components/NotificationRow/presenter.js", "max_forks_repo_name": "SHHam12/sukhwagram", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 31.3467741935, "max_line_length": 134, "alphanum_fraction": 0.5109338822}
import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import styles from "./styles.scss";
import TimeStamp from "components/TimeStamp";

const NotificationRow = (props, context) => (
  <div className={styles.list}>
    <Link
      to={{ pathname: `/${props.creator.username}` }}
      target="_self"
      style={{ textDecoration: "none", color: "black" }}
    >
      <img
        src={props.creator.profile_image || require("images/noPhoto.jpg")}
        alt={props.creator.username}
        className={styles.avatar}
      />
    </Link>
    {(() => {
      switch (props.notification_type) {
        case "comment":
          return <div className={styles.row}>
              <Link to={{ pathname: `/${props.creator.username}` }} target="_self" style={{ textDecoration: "none", color: "black" }}>
                <span className={styles.username}>
                  {props.creator.username}
                </span>
              </Link>
              <span className={styles.message}>
                {context.t("left comment on your photo.: ")}
              </span>
              <span className={styles.comment}>{props.comment}</span>
              <TimeStamp time={props.natural_time} className={styles.time} />
            </div>;
        case "like":
          return (
            <div className={styles.row}>
              <Link
                to={{ pathname: `/${props.creator.username}` }}
                target="_self"
                style={{ textDecoration: "none", color: "black" }}
              >
                <span className={styles.username}>
                  {props.creator.username}
                </span>
              </Link>
              <span className={styles.message}>
                {context.t("liked your photo.")}
              </span>
              <TimeStamp time={props.natural_time} className={styles.time} />
            </div>
          );
        case "follow":
          return (
            <div className={styles.row}>
              <Link
                to={{ pathname: `/${props.creator.username}` }}
                target="_self"
                style={{ textDecoration: "none", color: "black" }}
              >
                <span className={styles.username}>
                  {props.creator.username}
                </span>
              </Link>
              <span className={styles.message}>
                {context.t("started following you.")}
              </span>
              <TimeStamp time={props.natural_time} className={styles.time} />
            </div>
          );
        default:
          return "err";
      }
    })()}
    {(() => {
      switch (props.notification_type) {
        case "like":
        case "comment":
          return (
            <div>
              <img
                src={props.image.file}
                alt={props.image.caption}
                className={styles.image}
              />
            </div>
          );
        case "follow":
          return (
            <button className={styles.button} onClick={props.handleClick}>
              {props.creator.is_following
                ? context.t("Unfollow")
                : context.t("Follow")}
            </button>
          );
        default:
          return "error";
      }
    })()}
  </div>
);

NotificationRow.propTypes = {
  creator: PropTypes.shape({
    username: PropTypes.string.isRequiored,
    profile_image: PropTypes.string,
    is_following: PropTypes.bool.isRequired
  }).isRequired,
  notification_type: PropTypes.string.isRequired,
  comment: PropTypes.string,
  natural_time: PropTypes.string.isRequired,
  image: PropTypes.shape({
    file: PropTypes.string,
    caption: PropTypes.string
  }),
  handleClick: PropTypes.func.isRequired
};

NotificationRow.contextTypes = {
  t: PropTypes.func.isRequired
};

export default NotificationRow;
