show ElectionStatus outside of elections

src/App.tsx

@@ -64,6 +64,7 @@ class App extends React.Component<IProps, IState> {
     let lastBlock: Block = { id: 0, timestamp: 0, duration: 6 };
 
     let termEndsAt = Number((await api.query.council.termEndsAt()).toJSON());
+    this.save("termEndsAt", termEndsAt);
     let round: number = Number(
       (await api.query.councilElection.round()).toJSON()
     );
@@ -558,6 +559,7 @@ class App extends React.Component<IProps, IState> {
     const lastVersion = this.load("version");
     if (lastVersion !== version) return this.clearData();
     console.log(`Loading data`);
+    const termEndsAt = this.load("termEndsAt");
     await this.loadMembers();
     await this.loadCouncils();
     await this.loadCategories();
@@ -572,7 +574,7 @@ class App extends React.Component<IProps, IState> {
     await this.loadReports();
     const block = this.load("block");
     const now = this.load("now");
-    this.setState({ block, now, loading: false });
+    this.setState({ block, now, termEndsAt, loading: false });
   }
 
   load(key: string) {

src/components/Council/ElectionStatus.tsx

@@ -1,11 +1,15 @@
 import React from "react";
 import { domain } from "../../config";
 
-const ElectionStage = (props: any) => {
+const ElectionStage = (props: {
+  termEndsAt: number;
+  block: number;
+  stage?: any;
+}) => {
   const { block, stage, termEndsAt } = props;
 
   if (!stage) {
-    if (!block) return <div />;
+    if (!block || !termEndsAt) return <div />;
     const blocks = termEndsAt - block;
     const seconds = blocks * 6;
     const days = Math.floor(seconds / 86400);
@@ -32,14 +36,17 @@ const ElectionStage = (props: any) => {
 const ElectionStatus = (props: {
   councilElection?: { termEndsAt: number; round: number; stage: any };
   block: number;
+  termEndsAt: number;
 }) => {
-  const { councilElection, block } = props;
-
-  if (!councilElection) return <div></div>;
+  const { councilElection, block, termEndsAt } = props;
 
   return (
     <div className="position-absolute text-left text-light">
-      <ElectionStage block={block} {...councilElection} />
+      <ElectionStage
+        termEndsAt={termEndsAt}
+        block={block}
+        {...councilElection}
+      />
     </div>
   );
 };

src/components/Council/index.tsx

@@ -18,14 +18,20 @@ const Council = (props: {
   council: number[];
   councilElection?: any;
   block: number;
+  termEndsAt: number;
 }) => {
-  const { findHandle, council, block, councilElection } = props;
+  const { findHandle, council, block, councilElection, termEndsAt } = props;
   const half = Math.floor(council.length / 2);
-  const show = council.length;
+  const show = council.length ? true : false;
 
   return (
     <div className="box">
-      <ElectionStatus show={show} block={block} {...councilElection} />
+      <ElectionStatus
+        show={show}
+        termEndsAt={termEndsAt}
+        block={block}
+        {...councilElection}
+      />
       <h3>Council</h3>
 
       {(show && (

src/components/Dashboard/index.tsx

@@ -8,7 +8,7 @@ import { IState } from "../../types";
 
 const Dashboard = (props: IState) => {
   const { block, councils, domain, handles, members, proposals } = props;
-  const council = councils[councils.length - 1] || []
+  const council = councils[councils.length - 1] || [];
 
   const findHandle = (id: number) => {
     const member = members.find((m) => m.id === id);
@@ -38,6 +38,7 @@ const Dashboard = (props: IState) => {
         council={council}
         councilElection={props.councilElection}
         block={block}
+        termEndsAt={props.termEndsAt}
       />
       <div className="d-flex flex-row">
         <Validators validators={props.validators} handles={handles} />