{"size": 2468, "ext": "js", "max_stars_repo_path": "packages/app/src/pages/CouncilorBountyDetail/index.js", "max_stars_repo_name": "opensquare-network/dapps", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "packages/app/src/pages/CouncilorBountyDetail/index.js", "max_issues_repo_name": "opensquare-network/dapps", "max_issues_repo_issues_event_min_datetime": "2020-12-11T02:19:01.000Z", "max_issues_repo_issues_event_max_datetime": "2020-12-16T05:35:09.000Z", "max_forks_repo_path": "packages/app/src/pages/CouncilorBountyDetail/index.js", "max_forks_repo_name": "opensquare-network/dapps", "max_forks_repo_forks_event_min_datetime": "2021-11-04T15:31:14.000Z", "max_forks_repo_forks_event_max_datetime": "2021-11-04T15:31:14.000Z"}
{"max_stars_count": null, "max_issues_count": 16, "max_forks_count": 1, "avg_line_length": 24.4356435644, "max_line_length": 115, "alphanum_fraction": 0.6045380875}
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  bountyContentSelector,
  bountySelector,
  fetchBounty,
  fetchBountyContent
} from "../../store/reducers/bountySlice";
import styled from "styled-components";
import { useParams } from 'react-router'
import Container from "@components/Container";
import Card from "@components/Card";
import { NavLink } from "react-router-dom";
import { Divider } from "semantic-ui-react";

import Detail from "./Detail";
import Description from "./Description";
import backArrow from "@static/back-arrow.svg";
import Address from "@components/Address";
import DateShow from "@components/DateShow";

const Wrapper = styled(Container)`
  margin-top: 26px;
`

const Content = styled(Card)`
  min-height: 360px;
`
const Nav = styled.nav`
  color: rgba(29, 37, 60, 0.64);
  margin-bottom: 26px;
  display: inline-flex;
  aligin-items: center;
  gap: 10px;
`

export default function () {
  const {bountyId} = useParams()
  const dispatch = useDispatch()
  const bounty = useSelector(bountySelector)
  const content = useSelector(bountyContentSelector)

  useEffect(() => {
    if (bountyId) {
      dispatch(fetchBounty(bountyId))
    }
  }, [dispatch, bountyId])

  const {
    meta: {
      V1: {
        currency_id: currency,
        payment: amount,
        title,
        digest,
      }
    },
  } = bounty || {
    meta: {V1: {title: ''}},
    state: {},
  }

  useEffect(() => {
    if (digest) {
      dispatch(fetchBountyContent(digest))
    }
  }, [dispatch, digest])

  // fake detail data
  const fakeDetailData = {
    avatar: "",
    labels: ["N/A", "N/A"],
    info: (
      bounty
        ? [
          {title: "Creator", content: <Address>{bounty.creator}</Address>},
          {title: "Created At", content: <DateShow value={bounty.indexer.blockTime} />},
          ...(
            bounty.state
              ? [{title: `${bounty.state.state} At`, content: <DateShow value={bounty.state.indexer.blockTime} />}]
              : []
          )
        ]
        : []
    )
  };

  return (
    <Wrapper>
      <NavLink to="/councilor">
        <Nav><img src={backArrow} alt="back arrow"/> Back to Councilor Explorer</Nav>
      </NavLink>
      <Content>
        <Detail title={title} amount={amount} currency={currency} {...fakeDetailData} />
        <Divider/>
        <Description md={content?.content || 'No data'}/>
      </Content>
    </Wrapper>
  );
}
