update README ; cleanup

README.md

@@ -1,10 +1,12 @@
-# Getting Started with Create React App
+# Joystream Stats
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Connects to pioneer websocket and shows network statitistics.
 
-## Available Scripts
+## Install
 
-In the project directory, you can run:
+Configure the endpoint in `src/config.ts`.
+
+Run `yarn` or `npm i` to fetch modules.
 
 ### `yarn start`
 
@@ -14,31 +16,15 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
 ### `yarn build`
 
 Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
 The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
 ## Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

package.json

@@ -1,12 +1,10 @@
 {
   "name": "joystreamstats",
   "version": "0.1.0",
-  "private": true,
+  "license": "GPL-3.0-or-later",
+  "repository": "https://github.com/Joystream/community-repo",
   "dependencies": {
     "@joystream/types": "^0.14.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/node-fetch": "^2.5.7",
@@ -24,8 +22,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "remark-gfm": "^1.0.0",
-    "typescript": "^4.0.3",
-    "web-vitals": "^0.2.4"
+    "typescript": "^4.0.3"
   },
   "scripts": {
     "start": "HOST=localhost PORT=3030 react-scripts start",

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Joystream Stats",
+  "name": "Joystream Stats",
   "icons": [
     {
       "src": "favicon.ico",

src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx

@@ -5,7 +5,7 @@ import "./index.css";
 import { Routes, Loading } from "./components";
 import * as get from "./lib/getters";
 import { domain, wsLocation } from "./config";
-import proposalPosts from "./proposalPosts"; // TODO OPTIMIZE
+import proposalPosts from "./proposalPosts";
 import axios from "axios";
 
 // types
@@ -62,16 +62,6 @@ class App extends React.Component<IProps, IState> {
     this.setState({ councilElection });
     let stageEndsAt: number = termEndsAt;
 
-    // let channels = [];
-    // channels[0] = await get.currentChannelId(api);
-    // let posts = [];
-    // posts[0] = await get.currentPostId(api);
-    // let categories = [];
-    // categories[0] = await get.currentCategoryId(api);
-    // let threads = [];
-    // threads[0] = await get.currentThreadId(api);
-    // this.setState({ channels, posts, categories, threads });
-
     api.rpc.chain.subscribeNewHeads(
       async (header: Header): Promise<void> => {
         // current block
@@ -89,11 +79,6 @@ class App extends React.Component<IProps, IState> {
           this.setState({ proposalCount });
         }
 
-        // channels[1] = await get.currentChannelId(api);
-        // categories[1] = await get.currentCategoryId(api);
-        // posts[1] = await get.currentPostId(api);
-        // threads[1] = await get.currentThreadId(api);
-
         const postCount = await api.query.proposalsDiscussion.postCount();
         this.setState({ proposalComments: Number(postCount) });
 
@@ -106,7 +91,6 @@ class App extends React.Component<IProps, IState> {
         stageEndsAt = json[key];
         //console.log(id, stageEndsAt, json, key);
 
-        // TODO duplicate code
         termEndsAt = Number((await api.query.council.termEndsAt()).toJSON());
         round = Number((await api.query.councilElection.round()).toJSON());
         stage = await api.query.councilElection.stage();
@@ -130,13 +114,12 @@ class App extends React.Component<IProps, IState> {
 
   async fetchCouncils(api: Api, currentRound: number) {
     if (this.state.councils.length)
-      // TODO when to update
       return this.state.councils.map((council) =>
         council.map((seat) => this.fetchMember(api, seat))
       );
 
     let councils: number[][] = [];
-    const cycle = 201600; // TODO calculate cycle
+    const cycle = 201600;
 
     for (let round = 0; round < currentRound; round++) {
       let council: number[] = [];

src/components/Councils/index.tsx

@@ -4,8 +4,9 @@ import { Link } from "react-router-dom";
 import { Member, ProposalDetail } from "../../types";
 import LeaderBoard from "./Leaderboard";
 
+// TODO fetch from chain
 const announcingPeriod = 28800;
-const votingPeriod = 14400; // 43200
+const votingPeriod = 14400;
 const revealingPeriod = 14400;
 const termDuration = 144000;
 const cycle = termDuration + announcingPeriod + votingPeriod + revealingPeriod; // 201600
@@ -90,7 +91,7 @@ const CouncilVotes = (props: {
     const member = members.find((m) => m.id === id);
     councilMembers.push(
       member || { id, handle: String(id), account: String(id) }
-    ); // TODO
+    );
   });
 
   const fail = "btn btn-outline-danger";
@@ -164,8 +165,6 @@ const Vote = (props: {
     Abstain: "btn btn-outline-light",
   };
 
-  //console.log(rejections)
-
   return (
     <div style={{ width: 100 }} className={`text-center p-1 ${styles[v.vote]}`}>
       {v.vote}

src/components/Dashboard/Blocks.tsx

@@ -2,7 +2,6 @@ import { Block } from "../../types";
 import moment from "moment";
 
 const Blocks = (props: { blocks: Block[] }) => {
-  //if (!props.blocks) return ""
   const blocks: Block[] = Array.from(new Set(props.blocks))
     .sort((a: Block, b: Block) => b.id - a.id)
     .slice(0, 5);

src/components/Proposals/Row.tsx

@@ -86,7 +86,6 @@ const ProposalRow = (props: {
   const period = +props.parameters.votingPeriod;
 
   let blocks = finalizedAt ? finalizedAt - createdAt : block - createdAt;
-  //if (blocks < 0) blocks = 0; // TODO make sure block is defined
   const days = blocks ? Math.floor(blocks / 14400) : 0;
   const hours = blocks ? Math.floor((blocks - days * 14400) / 600) : 0;
   const daysStr = days ? `${days}d` : "";

src/components/Proposals/index.tsx~

@@ -1,13 +0,0 @@
-import React from "react";
-
-const Proposals = (props: { proposals: any }) => {
-  const {active, executing} = props.proposals
-  
-  return (
-    <div className="proposals">
-    {active.map(id => <div key={id}>{id}</div>)}
-    </div>
-  );
-};
-
-export default Proposals;

src/components/Routes/index.tsx~

@@ -1,9 +0,0 @@
-import { Switch, Route } from "react-router-dom"
-import Dashboard from "../Dashboard"
-
-const Routes = (props:any) => {
-
-return <Switch><Route path="/" component={Dashboard} {...props}></Switch>
-}
-
-export default Routes

src/components/Tokenomics/ReportBrowser.tsx~

@@ -1,10 +0,0 @@
-import React from "react";
-
-const ReportBrowser = props:any => {
-return <div><h2>Council Reports</h2>
-
-
-</div>
-}
-
-export default ReportBrowser

src/components/Tokenomics/index.tsx~

@@ -1,21 +0,0 @@
-import React from "react";
-import { Button, OverlayTrigger, Tooltip, Table } from "react-bootstrap";
-import { Link } from "react-router-dom";
-import Loading from "..//Loading";
-import moment from "moment";
-
-const Tokenomics = (props: {}) => {
-  return (
-    <div className="bg-light text-center">
-      <Link to={`/`}>
-        <Button variant="secondary" className="p-1 m-3">
-          back
-        </Button>
-      </Link>
-      <h1>Joystream Tokenomics</h1>
-      Previos Councils
-    </div>
-  );
-};
-
-export default Tokenomics;

src/components/User/index.tsx~

@@ -1,26 +0,0 @@
-import React from "react";
-import { OverlayTrigger, Tooltip } from "react-bootstrap";
-import { domain } from "../../config";
-
-const shortName = (name: string) => {
-  return `${name.slice(0, 5)}..${name.slice(+name.length - 5)}`;
-};
-
-const User = (props: { id: string; handle?: string }) => {
-  const { id, handle } = props;
-  if (!id) return <div>unknown validator</div>;
-
-  console.log(`user`, props);
-  return (
-    <OverlayTrigger
-      placement="bottom"
-      overlay={<Tooltip id={id}>{id}</Tooltip>}
-    >
-      <div>
-        <a href={`${domain}`}>{handle ? handle : shortName(id || `unnamed`)}</a>
-      </div>
-    </OverlayTrigger>
-  );
-};
-
-export default User;

src/config.ts

@@ -1,4 +1,3 @@
 export const domain = "https://testnet.joystream.org";
 
 export const wsLocation = "wss://rome-rpc-endpoint.joystream.org:9944/";
-//export const wsLocation = 'wss://joystreamstats.live:9944/'

src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';