From b743da83078ca5ea50951ebba7249e060dd0bb77 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sun, 21 Mar 2021 10:11:07 +0100
Subject: [PATCH] Show voting columns (#4884)

---
 packages/page-society/src/Overview/Member.tsx |  2 ++
 .../page-society/src/Overview/Members.tsx     |  1 +
 packages/page-society/src/index.tsx           | 33 +++++++++++--------
 packages/react-components/src/Tag.tsx         |  2 +-
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/page-society/src/Overview/Member.tsx b/packages/page-society/src/Overview/Member.tsx
index 8371e4ac86..ec0cebc66c 100644
--- a/packages/page-society/src/Overview/Member.tsx
+++ b/packages/page-society/src/Overview/Member.tsx
@@ -120,6 +120,8 @@ function Member ({ bestNumber, className = '', value: { isCandidateVoter, isFoun
           />
         )}
       </td>
+      <td>{isDefenderVoter && t<string>('defender')}</td>
+      <td>{isCandidateVoter && t<string>('candidate')}</td>
       <td className='number'>{formatNumber(strikes)}</td>
       <td>
         {canInk && (
diff --git a/packages/page-society/src/Overview/Members.tsx b/packages/page-society/src/Overview/Members.tsx
index fc597817d6..d9cd3770e4 100644
--- a/packages/page-society/src/Overview/Members.tsx
+++ b/packages/page-society/src/Overview/Members.tsx
@@ -22,6 +22,7 @@ function Members ({ className = '', mapMembers }: Props): React.ReactElement<Pro
 
   const headerRef = useRef([
     [t('members'), 'start', 3],
+    [t('round voting'), 'start', 2],
     [t('strikes')],
     []
   ]);
diff --git a/packages/page-society/src/index.tsx b/packages/page-society/src/index.tsx
index 80dfaba67d..0198ca8127 100644
--- a/packages/page-society/src/index.tsx
+++ b/packages/page-society/src/index.tsx
@@ -50,6 +50,16 @@ function voterSort (a: MapMember, b: MapMember): number {
         : strikeSort(a, b);
 }
 
+function skepticSort (a: MapMember, b: MapMember): number {
+  return a.isSkeptic && b.isSkeptic
+    ? voterSort(a, b)
+    : a.isSkeptic
+      ? -1
+      : b.isSkeptic
+        ? 1
+        : 0;
+}
+
 function finalSort (a: MapMember, b: MapMember): number {
   return a.isHead
     ? -1
@@ -59,13 +69,7 @@ function finalSort (a: MapMember, b: MapMember): number {
         ? -1
         : b.isFounder
           ? 1
-          : a.isSkeptic && b.isSkeptic
-            ? voterSort(a, b)
-            : a.isSkeptic
-              ? -1
-              : b.isSkeptic
-                ? 1
-                : 0;
+          : skepticSort(a, b);
 }
 
 function getMapMembers (members: DeriveSocietyMember[], skeptics: string[], voters: string[], info: DeriveSociety, warnStrikes: BN): MapMember[] {
@@ -95,8 +99,9 @@ function SocietyApp ({ basePath, className }: Props): React.ReactElement<Props>
   const { candidates, skeptics, voters } = useVoters();
 
   const mapMembers = useMemo(
-    () => members && info && skeptics && voters &&
-      getMapMembers(members, skeptics, voters, info, api.consts.society.maxStrikes.mul(BN_TWO).div(BN_THREE)),
+    () => members && info && skeptics && voters
+      ? getMapMembers(members, skeptics, voters, info, api.consts.society.maxStrikes.mul(BN_TWO).div(BN_THREE))
+      : undefined,
     [api, info, members, skeptics, voters]
   );
 
@@ -119,10 +124,12 @@ function SocietyApp ({ basePath, className }: Props): React.ReactElement<Props>
 
   return (
     <main className={className}>
-      <Tabs
-        basePath={basePath}
-        items={items}
-      />
+      <header>
+        <Tabs
+          basePath={basePath}
+          items={items}
+        />
+      </header>
       <Switch>
         <Route path={`${basePath}/candidates`}>
           <Candidates
diff --git a/packages/react-components/src/Tag.tsx b/packages/react-components/src/Tag.tsx
index 47fd6be340..ce6bb5d241 100644
--- a/packages/react-components/src/Tag.tsx
+++ b/packages/react-components/src/Tag.tsx
@@ -47,7 +47,7 @@ export default React.memo(styled(Tag)`
   font-size: 0.78571429rem;
   font-weight: var(--font-weight-normal);
   line-height: 1;
-  margin: 0.125rem;
+  margin: 0 0.125rem;
   padding: 0.5833em 0.833em;
   position: relative;
   white-space: nowrap;