frontend fixes

src/App.tsx

@@ -186,8 +186,8 @@ class App extends React.Component<IProps, IState> {
     const era = Number(await api.query.staking.currentEra());
     this.fetchEraRewardPoints(api, era);
 
-    const { status } = this.state;
-    if (era > status.era) {
+    const { status, validators } = this.state;
+    if (era > status.era || validators.length) {
       console.debug(`Updating validators`);
       this.fetchLastReward(api, status.era);
       const validators = await this.fetchValidators(api);

src/components/Councils/SeatBackers.tsx

@@ -11,7 +11,7 @@ const SeatBackers = (props: { backers: Backer[] }) => {
         .sort((a, b) => b.stake - a.stake)
         .map((backer) => (
           <div
-            key={`${backer.consulId}-${backer.memberId}`}
+            key={backer.createdAt}
             className="d-flex flex-row justify-content-between"
           >
             <div className="mr-2">{backer.member.handle}</div>

src/components/Dashboard/Proposals.tsx

@@ -1,10 +1,10 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import { ProposalTable } from "..";
 import {
   AppBar,
   createStyles,
   Grid,
-  Link,
   makeStyles,
   Paper,
   Theme,
@@ -75,13 +75,13 @@ const Proposals = (props: {
             <Typography variant="h6" className={classes.title}>
               Active Proposals
             </Typography>
-            <Link className="m-3 text-light" href={"/proposals"}>
+            <Link className="m-3 text-light" to={"/proposals"}>
               All
             </Link>
-            <Link className="m-3 text-light" href={"/spending"}>
+            <Link className="m-3 text-light" to={"/spending"}>
               Spending
             </Link>
-            <Link className="m-3 text-light" href={"/councils"}>
+            <Link className="m-3 text-light" to={"/councils"}>
               Votes
             </Link>
           </Toolbar>

src/components/Members/MemberBox.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import MemberOverlay from "./MemberOverlay";
 
 import { Council, Post, ProposalDetail } from "../../types";
-import { Link } from "@material-ui/core";
+import { Link } from "react-router-dom";
 import InfoTooltip from "../Tooltip";
 
 const shortName = (key) => `${key.slice(0, 5)}..${key.slice(key.length - 5)}`;
@@ -47,6 +47,7 @@ const MemberBox = (props: {
     >
       <Link
         variant={"button"}
+        className="text-center"
         style={{
           color: "#fff",
           display: "block",
@@ -54,7 +55,7 @@ const MemberBox = (props: {
           border: "1px solid #fff",
           borderRadius: "4px",
         }}
-        href={`/members/${handle}`}
+        to={`/members/${handle}`}
       >
         {handle}
       </Link>

src/components/Validators/Waiting.tsx

@@ -40,6 +40,7 @@ const Waiting = (props: {}) => {
       <ListGroup className="waiting-validators">
         {waiting.map((v) => (
           <MemberBox
+            key={v}
             id={0}
             account={v}
             placement={"top"}

src/components/Validators/index.tsx

@@ -142,8 +142,6 @@ const Validators = (iProps: IProps) => {
   const unstarred = validators.filter((v) => !stars[v]);
   const waiting = stashes.filter((s) => !stars[s] && !validators.includes(s));
 
-  if (!unstarred.length) return <Loading gridSize={12} target="validators" />;
-
   return (
     <Grid
       style={{