|
@@ -1,9 +1,9 @@
|
|
|
-import { useState, useEffect } from 'react';
|
|
|
-import { Table } from 'react-bootstrap';
|
|
|
-import axios from 'axios';
|
|
|
+import { useState, useEffect } from "react";
|
|
|
+import { Table } from "react-bootstrap";
|
|
|
+import axios from "axios";
|
|
|
|
|
|
-import Loading from '../Loading';
|
|
|
-import './bounties.css';
|
|
|
+import Loading from "../Loading";
|
|
|
+import "./bounties.css";
|
|
|
|
|
|
interface IBounty {
|
|
|
id: any;
|
|
@@ -13,57 +13,53 @@ interface IBounty {
|
|
|
openedDate: any;
|
|
|
status: string;
|
|
|
reward: string | number;
|
|
|
- manager: string[],
|
|
|
+ manager: string[];
|
|
|
links: string[];
|
|
|
}
|
|
|
|
|
|
-function Bounties() {
|
|
|
- const [bounties, setBounties] = useState<IBounty[] | null>(null);
|
|
|
+const bountiesUrl =
|
|
|
+ "https://raw.githubusercontent.com/Joystream/community-repo/master/bounties/overview/bounties-status.json";
|
|
|
|
|
|
- const fetchBounties = async () => {
|
|
|
- const response = await axios.get<{ activeBounties: IBounty[] }>(
|
|
|
- `https://raw.githubusercontent.com/Joystream/community-repo/master/bounties/overview/bounties-status.json`
|
|
|
- );
|
|
|
+function Bounties() {
|
|
|
+ const [bounties, setBounties] = useState<IBounty[]>([]);
|
|
|
|
|
|
- setBounties(response.data?.activeBounties);
|
|
|
+ const fetchBounties = (url: string) => {
|
|
|
+ axios
|
|
|
+ .get<{ activeBounties: IBounty[] }>(url)
|
|
|
+ .then(({ data }) => data && setBounties(data.activeBounties));
|
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
|
- fetchBounties();
|
|
|
+ fetchBounties(bountiesUrl);
|
|
|
}, []);
|
|
|
|
|
|
if (!bounties) return <Loading target={`bounties`} />;
|
|
|
|
|
|
return (
|
|
|
- <>
|
|
|
- <div className="Bounties m-2 p-1 bg-light">
|
|
|
- <h1>Bounties</h1>
|
|
|
- <Table striped bordered hover>
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th>#</th>
|
|
|
- <th>Title</th>
|
|
|
- <th>Description</th>
|
|
|
- <th>Links</th>
|
|
|
- <th>Opened date</th>
|
|
|
- <th>Reward</th>
|
|
|
- <th>Manager, Co</th>
|
|
|
- <th>Status/Grading</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- {bounties && bounties.map((b: any) => <Bounty key={b.id} {...b} />)}
|
|
|
- </tbody>
|
|
|
- </Table>
|
|
|
- <a href="https://github.com/Joystream/community-repo/tree/master/workinggroup-reports/bounty_reports">
|
|
|
- Reports
|
|
|
- </a>
|
|
|
- <br />
|
|
|
- <a href="https://github.com/Joystream/community-repo/blob/master/bounties-overview/README.md">
|
|
|
- Closed Bounties
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </>
|
|
|
+ <div className="Bounties bg-light p-3">
|
|
|
+ <h1>Bounties</h1>
|
|
|
+ <Table striped bordered hover>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>#</th>
|
|
|
+ <th>Opened</th>
|
|
|
+ <th>Reward</th>
|
|
|
+ <th>Manager</th>
|
|
|
+ <th>Status</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ {bounties && bounties.map((b: any) => <Bounty key={b.id} {...b} />)}
|
|
|
+ </tbody>
|
|
|
+ </Table>
|
|
|
+ <a href="https://github.com/Joystream/community-repo/tree/master/workinggroup-reports/bounty_reports">
|
|
|
+ Reports
|
|
|
+ </a>
|
|
|
+ <br />
|
|
|
+ <a href="https://github.com/Joystream/community-repo/blob/master/bounties-overview/README.md">
|
|
|
+ Closed Bounties
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
);
|
|
|
}
|
|
|
export default Bounties;
|
|
@@ -80,22 +76,27 @@ const Bounty = ({
|
|
|
links,
|
|
|
}: IBounty) => {
|
|
|
return (
|
|
|
- <tr>
|
|
|
- <td>{id}</td>
|
|
|
- <td>{title}</td>
|
|
|
- <td>{description}</td>
|
|
|
- <td>
|
|
|
- {links.map((l) => (
|
|
|
- <>
|
|
|
- <a href={l}>{l}</a>
|
|
|
- <br />
|
|
|
- </>
|
|
|
- ))}
|
|
|
- </td>
|
|
|
- <td>{openedDate}</td>
|
|
|
- <td>${reward}</td>
|
|
|
- <td>{manager?.join(', ')}</td>
|
|
|
- <td>{status}</td>
|
|
|
- </tr>
|
|
|
+ <>
|
|
|
+ <tr>
|
|
|
+ <td rowSpan={2} className="font-weight-bold">
|
|
|
+ {id}
|
|
|
+ </td>
|
|
|
+ <td>{openedDate}</td>
|
|
|
+ <td>${reward}</td>
|
|
|
+ <td>{manager?.join(", ")}</td>
|
|
|
+ <td>{status}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colSpan={6}>
|
|
|
+ <h3>{title}</h3>
|
|
|
+ {description}
|
|
|
+ {links.map((l, i) => (
|
|
|
+ <div key={i}>
|
|
|
+ <a href={l}>{l}</a>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </>
|
|
|
);
|
|
|
};
|