From bd7b37c4f70c7b167fda3d8f2e71e8f966cdcc56 Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Wed, 27 Feb 2019 21:23:37 +0100
Subject: [PATCH 01/18] first table changes

---
 .../src/components/Admin/Users/List/index.js  | 44 +++++++++++--------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index 356626c7..39169cb3 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -5,6 +5,7 @@ import Fuse from 'fuse.js';
 import { CAN_VOTE } from 'common/auth/permissions';
 import { adminToggleCanVote } from 'features/user/actionCreators';
 import { UserContainer } from '../User';
+import ReactTable from 'react-table'
 import css from './List.css';
 
 const UserList = ({ users, toggleCanVote }) => {
@@ -19,8 +20,30 @@ const UserList = ({ users, toggleCanVote }) => {
   const usersRegistered = userKeys
     .filter(u => users[u].completedRegistration)
     .length;
+  const data = Object.keys(users)
+    .sort((a, b) => users[a].name.localeCompare(users[b].name))
+    .map((key) => users[key])
+
+  const columns = [{
+    Header: 'Name',
+    accessor: 'name' // String-based value accessors!
+  }, {
+    Header: 'Age',
+    accessor: 'age',
+    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
+  }, {
+    id: 'friendName', // Required because our accessor is not a string
+    Header: 'Friend Name',
+    accessor: d => d.friend.name // Custom value accessors!
+  }, {
+    Header: props => <span>Friend Age</span>, // Custom header components!
+    accessor: 'friend.age'
+  }]
+
   return (
-    <table className={css.list}>
+  
+
+  /*  <table className={css.list}>
       <thead>
         <tr>
           <th className={css.left}>Bruker ({totalUsers})</th>
@@ -36,25 +59,10 @@ const UserList = ({ users, toggleCanVote }) => {
         </tr>
       </thead>
       <tbody>
-        {Object.keys(users)
-          .sort((a, b) => users[a].name.localeCompare(users[b].name))
-          .map((key) => {
-            const user = users[key];
-            return (<UserContainer
-              name={user.name}
-              canVote={user.canVote}
-              completedRegistration={user.completedRegistration}
-              key={user.id}
-              permissions={user.permissions}
-              registered={user.registered}
-              toggleCanVote={toggleCanVote}
-              id={user.id}
-            />);
-          },
-        )}
+        
       </tbody>
     </table>
-  );
+  );*/
 };
 
 UserList.propTypes = {

From d3d2535154cd3ed975ee293a15097e4171a06b13 Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Wed, 27 Feb 2019 22:24:07 +0100
Subject: [PATCH 02/18] added name column

---
 .../src/components/Admin/Users/List/index.js  | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index 39169cb3..350defaf 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -7,6 +7,8 @@ import { adminToggleCanVote } from 'features/user/actionCreators';
 import { UserContainer } from '../User';
 import ReactTable from 'react-table'
 import css from './List.css';
+import 'react-table/react-table.css'
+import classNames from 'classnames';
 
 const UserList = ({ users, toggleCanVote }) => {
   const userKeys = Object.keys(users);
@@ -22,28 +24,23 @@ const UserList = ({ users, toggleCanVote }) => {
     .length;
   const data = Object.keys(users)
     .sort((a, b) => users[a].name.localeCompare(users[b].name))
-    .map((key) => users[key])
+    .map((key) => users[key]);
+  console.log(data)
 
   const columns = [{
-    Header: 'Name',
-    accessor: 'name' // String-based value accessors!
-  }, {
-    Header: 'Age',
-    accessor: 'age',
-    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
-  }, {
-    id: 'friendName', // Required because our accessor is not a string
-    Header: 'Friend Name',
-    accessor: d => d.friend.name // Custom value accessors!
-  }, {
-    Header: props => <span>Friend Age</span>, // Custom header components!
-    accessor: 'friend.age'
-  }]
+    Header: `Name (${totalUsers})` ,
+    accessor: 'name', // String-based value accessors!
+  },
+  ]
 
   return (
-  
-
-  /*  <table className={css.list}>
+  <ReactTable
+    data={data}
+    columns={columns}
+  />)
+}
+/*
+   <table className={css.list}>
       <thead>
         <tr>
           <th className={css.left}>Bruker ({totalUsers})</th>
@@ -61,9 +58,9 @@ const UserList = ({ users, toggleCanVote }) => {
       <tbody>
         
       </tbody>
-    </table>
-  );*/
-};
+    </table>*/
+  
+
 
 UserList.propTypes = {
   users: PropTypes.objectOf(PropTypes.shape({

From 298109c9f02e6b336bf422f5cfcef0d322ff70db Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Wed, 27 Feb 2019 22:46:31 +0100
Subject: [PATCH 03/18] Added permission level and registried

---
 .../src/components/Admin/Users/List/index.js  | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index 350defaf..5ffcc05b 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Fuse from 'fuse.js';
-import { CAN_VOTE } from 'common/auth/permissions';
+import { CAN_VOTE, getPermissionDisplay } from 'common/auth/permissions';
 import { adminToggleCanVote } from 'features/user/actionCreators';
 import { UserContainer } from '../User';
 import ReactTable from 'react-table'
@@ -25,12 +25,26 @@ const UserList = ({ users, toggleCanVote }) => {
   const data = Object.keys(users)
     .sort((a, b) => users[a].name.localeCompare(users[b].name))
     .map((key) => users[key]);
-  console.log(data)
-
+  console.log(data);
   const columns = [{
     Header: `Name (${totalUsers})` ,
     accessor: 'name', // String-based value accessors!
-  },
+  }, {
+    Header: `Registrert (${usersRegistered})`,
+    accessor: `completedRegistration`,
+    Cell: props => <div
+            className={classNames(css.action,
+              { [css.success]: props.value,
+                [css.close]: !props.value,
+                [css.toggle]: props.value,
+              },
+          )}
+          >{props.value}</div>
+  }, {
+    Header: `Rettigheter`,
+    accessor: `permissions`,
+    Cell:  props => getPermissionDisplay(props.value)
+  }
   ]
 
   return (

From d1add3d1a8c3931cde393168c7c09cfbcf368b56 Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Thu, 28 Feb 2019 12:00:31 +0100
Subject: [PATCH 04/18] css changes

---
 .../src/components/Admin/Users/List/List.css  | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/client/src/components/Admin/Users/List/List.css b/client/src/components/Admin/Users/List/List.css
index 77a6e02c..aeef1b92 100644
--- a/client/src/components/Admin/Users/List/List.css
+++ b/client/src/components/Admin/Users/List/List.css
@@ -30,3 +30,47 @@ table.list {
 .right {
   text-align: right;
 }
+
+
+.action {
+  display: inline;
+  font-size: 2rem;
+  font-weight: bold;
+  color: #CCC;
+  padding: 0;
+  background: none;
+  border: none;
+}
+
+.action:last-child {
+  margin-left: 0.5rem;
+}
+
+.action:focus {
+  outline: none;
+}
+
+.success {
+  composes: icon success from 'css/flaticon.css';
+}
+
+.close {
+  composes: icon close from 'css/flaticon.css';
+}
+
+.unavailable {
+  composes: icon lock from 'css/flaticon.css';
+}
+
+.toggle.success {
+  color: #258573;
+}
+
+.toggle.close {
+  color: #c5493c;
+}
+
+.canNotVote {
+  color: #b73b3b;
+  font-weight: bold;
+}
\ No newline at end of file

From cb09bfe04a724a2e86fbd1f92cd49e29720e085d Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Wed, 6 Mar 2019 21:09:44 +0100
Subject: [PATCH 05/18] first prototype of converting table to react-table

---
 .../src/components/Admin/Users/List/index.js  | 79 +++++++++++--------
 package.json                                  |  1 +
 webpack.config.dev.js                         | 17 ++++
 3 files changed, 66 insertions(+), 31 deletions(-)

diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index 5ffcc05b..d2f73a59 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -4,13 +4,12 @@ import { connect } from 'react-redux';
 import Fuse from 'fuse.js';
 import { CAN_VOTE, getPermissionDisplay } from 'common/auth/permissions';
 import { adminToggleCanVote } from 'features/user/actionCreators';
-import { UserContainer } from '../User';
-import ReactTable from 'react-table'
-import css from './List.css';
-import 'react-table/react-table.css'
+import ReactTable from 'react-table';
 import classNames from 'classnames';
+import moment from 'moment';
+import css from './List.css';
 
-const UserList = ({ users, toggleCanVote }) => {
+const UserList = ({ users }) => {
   const userKeys = Object.keys(users);
   const totalUsers = userKeys.length;
   const usersCanVote = userKeys
@@ -22,37 +21,56 @@ const UserList = ({ users, toggleCanVote }) => {
   const usersRegistered = userKeys
     .filter(u => users[u].completedRegistration)
     .length;
-  const data = Object.keys(users)
+
+  const data = [...Object.keys(users)
     .sort((a, b) => users[a].name.localeCompare(users[b].name))
-    .map((key) => users[key]);
-  console.log(data);
+    .map(key => users[key])
+    .map(user => ({
+      name: user.name,
+      canVote: user.canVote,
+      registered: {
+        completedRegistration: user.completedRegistration,
+        registeredDate: user.registered,
+      },
+      id: user.id,
+      permissions: user.permissions,
+      setPermissions: user.setPermissions,
+      toggleCanVote: user.toggleCanVote,
+    }))];
+
   const columns = [{
-    Header: `Name (${totalUsers})` ,
+    Header: `Name (${totalUsers})`,
     accessor: 'name', // String-based value accessors!
   }, {
     Header: `Registrert (${usersRegistered})`,
-    accessor: `completedRegistration`,
-    Cell: props => <div
-            className={classNames(css.action,
-              { [css.success]: props.value,
-                [css.close]: !props.value,
-                [css.toggle]: props.value,
-              },
-          )}
-          >{props.value}</div>
+    accessor: 'registered',
+    className: css.center,
+    Cell: props =>
+      <div
+        className={classNames(css.action,
+          {
+            [css.success]: props.value.completedRegistration,
+            [css.close]: !props.value.completedRegistration,
+            [css.toggle]: props.value.completedRegistration,
+          },
+            )}
+        title={`${moment(props.value.registeredDate).format('LLL')} (${moment(props.value.registeredDate).fromNow()})`}
+      >{props.value.completedRegistration}</div>,
   }, {
-    Header: `Rettigheter`,
-    accessor: `permissions`,
-    Cell:  props => getPermissionDisplay(props.value)
-  }
-  ]
+    Header: `Rettigheter (${usersHasPermsToVote})`,
+    accessor: 'permissions',
+    Cell: props => getPermissionDisplay(props.value),
+  }, {
+    Header: `Stemmeberettigelse (${usersCanVote}/${usersHasPermsToVote})`,
+  },
+  ];
 
   return (
-  <ReactTable
-    data={data}
-    columns={columns}
-  />)
-}
+    <ReactTable
+      data={data}
+      columns={columns}
+    />);
+};
 /*
    <table className={css.list}>
       <thead>
@@ -70,10 +88,9 @@ const UserList = ({ users, toggleCanVote }) => {
         </tr>
       </thead>
       <tbody>
-        
+
       </tbody>
-    </table>*/
-  
+    </table> */
 
 
 UserList.propTypes = {
diff --git a/package.json b/package.json
index 25dfc6c2..a47fc429 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "react-hot-loader": "^3.0.0",
     "react-redux": "^5.0.2",
     "react-router-dom": "^4.1.1",
+    "react-table": "^6.9.2",
     "redux": "^3.6.0",
     "redux-logger": "^3.0.1",
     "redux-persist": "^5.1.0",
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index 6e965aa9..d90f5232 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -11,8 +11,24 @@ module.exports = merge.smart(config, {
   devtool: 'eval-source-map',
   module: {
     rules: [
+            {
+          test: /\.css$/,
+          include: [/node_modules/],
+          use: [
+              {
+                  loader: "style-loader",
+              },
+              {
+                  loader: "css-loader",
+                  options: {
+                      modules: false,
+                  },
+              },
+          ],
+      },
       {
         test: /\.css$/,
+        exclude: [/node_modules/],
         use: [
           {
             loader: 'style-loader',
@@ -23,6 +39,7 @@ module.exports = merge.smart(config, {
               sourceMap: true,
               modules: true,
               localIdentName: '[name]__[local]___[hash:base64:5]',
+              importLoaders:1,
             },
           },
           {

From 4daf2a23c5e1a9b4b6bf63c02136877deedc61f1 Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Wed, 6 Mar 2019 21:23:46 +0100
Subject: [PATCH 06/18] im dumb forgot to include css

---
 .../src/components/Admin/Users/List/index.js  | 63 ++++++++++++-------
 package.json                                  |  1 +
 webpack.config.dev.js                         | 17 +++++
 3 files changed, 59 insertions(+), 22 deletions(-)

diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index 5ffcc05b..54e12917 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -4,13 +4,13 @@ import { connect } from 'react-redux';
 import Fuse from 'fuse.js';
 import { CAN_VOTE, getPermissionDisplay } from 'common/auth/permissions';
 import { adminToggleCanVote } from 'features/user/actionCreators';
-import { UserContainer } from '../User';
-import ReactTable from 'react-table'
-import css from './List.css';
-import 'react-table/react-table.css'
+import ReactTable from 'react-table';
+import 'react-table/react-table.css';
 import classNames from 'classnames';
+import moment from 'moment';
+import css from './List.css';
 
-const UserList = ({ users, toggleCanVote }) => {
+const UserList = ({ users }) => {
   const userKeys = Object.keys(users);
   const totalUsers = userKeys.length;
   const usersCanVote = userKeys
@@ -22,29 +22,48 @@ const UserList = ({ users, toggleCanVote }) => {
   const usersRegistered = userKeys
     .filter(u => users[u].completedRegistration)
     .length;
-  const data = Object.keys(users)
+
+  const data = [...Object.keys(users)
     .sort((a, b) => users[a].name.localeCompare(users[b].name))
-    .map((key) => users[key]);
-  console.log(data);
+    .map(key => users[key])
+    .map(user => ({
+      name: user.name,
+      canVote: user.canVote,
+      registered: {
+        completedRegistration: user.completedRegistration,
+        registeredDate: user.registered,
+      },
+      id: user.id,
+      permissions: user.permissions,
+      setPermissions: user.setPermissions,
+      toggleCanVote: user.toggleCanVote,
+    }))];
+
   const columns = [{
-    Header: `Name (${totalUsers})` ,
+    Header: `Name (${totalUsers})`,
     accessor: 'name', // String-based value accessors!
-  }, {
+    },{
     Header: `Registrert (${usersRegistered})`,
-    accessor: `completedRegistration`,
-    Cell: props => <div
+    accessor: 'registered',
+    className: css.center,
+    Cell: props => 
+           <div
             className={classNames(css.action,
-              { [css.success]: props.value,
-                [css.close]: !props.value,
-                [css.toggle]: props.value,
-              },
-          )}
-          >{props.value}</div>
-  }, {
-    Header: `Rettigheter`,
-    accessor: `permissions`,
+              { 
+                [css.success]:props.value.completedRegistration,
+                [css.close]: !props.value.completedRegistration,
+                [css.toggle]: props.value.completedRegistration,
+              }
+            )}
+            title={`${moment(props.value.registeredDate).format('LLL')} (${moment(props.value.registeredDate).fromNow()})`}
+          >{props.value.completedRegistration}</div>
+    }, {
+    Header: `Rettigheter (${usersHasPermsToVote})`,
+    accessor: 'permissions',
     Cell:  props => getPermissionDisplay(props.value)
-  }
+    }, {
+    Header: `Stemmeberettigelse (${usersCanVote}/${usersHasPermsToVote})`
+    }
   ]
 
   return (
diff --git a/package.json b/package.json
index 25dfc6c2..a47fc429 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "react-hot-loader": "^3.0.0",
     "react-redux": "^5.0.2",
     "react-router-dom": "^4.1.1",
+    "react-table": "^6.9.2",
     "redux": "^3.6.0",
     "redux-logger": "^3.0.1",
     "redux-persist": "^5.1.0",
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index 6e965aa9..d90f5232 100644
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -11,8 +11,24 @@ module.exports = merge.smart(config, {
   devtool: 'eval-source-map',
   module: {
     rules: [
+            {
+          test: /\.css$/,
+          include: [/node_modules/],
+          use: [
+              {
+                  loader: "style-loader",
+              },
+              {
+                  loader: "css-loader",
+                  options: {
+                      modules: false,
+                  },
+              },
+          ],
+      },
       {
         test: /\.css$/,
+        exclude: [/node_modules/],
         use: [
           {
             loader: 'style-loader',
@@ -23,6 +39,7 @@ module.exports = merge.smart(config, {
               sourceMap: true,
               modules: true,
               localIdentName: '[name]__[local]___[hash:base64:5]',
+              importLoaders:1,
             },
           },
           {

From c94694b402b6816069853d966da765a5d3b0abd3 Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Wed, 6 Mar 2019 21:37:44 +0100
Subject: [PATCH 07/18] increase margin between table and filterer, removed
 commented code removed unecesary css

---
 .../src/components/Admin/Users/List/List.css  | 23 +++----------------
 .../src/components/Admin/Users/List/index.js  | 22 +-----------------
 2 files changed, 4 insertions(+), 41 deletions(-)

diff --git a/client/src/components/Admin/Users/List/List.css b/client/src/components/Admin/Users/List/List.css
index aeef1b92..e77226ec 100644
--- a/client/src/components/Admin/Users/List/List.css
+++ b/client/src/components/Admin/Users/List/List.css
@@ -1,22 +1,5 @@
-table.list {
-  width: 100%;
-  margin-top: 1rem;
-  border-collapse: collapse;
-}
-
-.list th {
-  border-bottom: 1px solid #9597b1;
-  font-weight: normal;
-  padding: 0.25rem 0.25rem;
-}
-
-.list td {
-  padding: 0.5rem 0.25rem;
-  border-bottom: 1px solid #dbdce0;
-}
-
-.list tr:nth-child(even) td {
-  background: #f9f9f9;
+.table {
+  margin-top: 25px;
 }
 
 .left {
@@ -73,4 +56,4 @@ table.list {
 .canNotVote {
   color: #b73b3b;
   font-weight: bold;
-}
\ No newline at end of file
+}
diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index 3097e2d1..cf8c9f72 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -70,29 +70,9 @@ const UserList = ({ users }) => {
     <ReactTable
       data={data}
       columns={columns}
+      className={css.table}
     />);
 };
-/*
-   <table className={css.list}>
-      <thead>
-        <tr>
-          <th className={css.left}>Bruker ({totalUsers})</th>
-          <th className={css.right} title="Har fullført oppmøteregistrering">
-            Registrert ({usersRegistered})
-          </th>
-          <th className={css.right} title="(Antall med stemmerett)">
-            Rettigheter ({usersHasPermsToVote})
-          </th>
-          <th className={css.right}>
-            Stemmeberettigelse ({usersCanVote}/{usersHasPermsToVote})
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-
-      </tbody>
-    </table> */
-
 
 UserList.propTypes = {
   users: PropTypes.objectOf(PropTypes.shape({

From 8b7866c77dec49dd74205a67ca5ec67bd67d9b53 Mon Sep 17 00:00:00 2001
From: Torjus Iveland <torjusti@gmail.com>
Date: Wed, 6 Mar 2019 22:19:21 +0100
Subject: [PATCH 08/18] Support toggling rights from React Table

---
 .../src/components/Admin/Users/List/index.js  | 16 ++-
 .../ToggleCanVote.css}                        |  0
 .../Admin/Users/ToggleCanVote/index.js        | 98 +++++++++++++++++++
 3 files changed, 110 insertions(+), 4 deletions(-)
 rename client/src/components/Admin/Users/{User/User.css => ToggleCanVote/ToggleCanVote.css} (100%)
 create mode 100644 client/src/components/Admin/Users/ToggleCanVote/index.js

diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index cf8c9f72..ff544fb3 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -7,10 +7,11 @@ import { adminToggleCanVote } from 'features/user/actionCreators';
 import ReactTable from 'react-table';
 import 'react-table/react-table.css';
 import classNames from 'classnames';
+import { ToggleCanVoteContainer } from '../ToggleCanVote';
 import moment from 'moment';
 import css from './List.css';
 
-const UserList = ({ users }) => {
+const UserList = ({ users, toggleCanVote }) => {
   const userKeys = Object.keys(users);
   const totalUsers = userKeys.length;
   const usersCanVote = userKeys
@@ -36,7 +37,6 @@ const UserList = ({ users }) => {
       id: user.id,
       permissions: user.permissions,
       setPermissions: user.setPermissions,
-      toggleCanVote: user.toggleCanVote,
     }))];
 
   const columns = [{
@@ -63,8 +63,16 @@ const UserList = ({ users }) => {
     Cell: props => getPermissionDisplay(props.value),
   }, {
     Header: `Stemmeberettigelse (${usersCanVote}/${usersHasPermsToVote})`,
-  },
-  ];
+    accessor: 'canVote',
+    Cell: props =>
+      <ToggleCanVoteContainer
+        canVote={props.value}
+        id={props.original.id}
+        permissions={props.original.permissions}
+        setPermissions={props.original.setPermissions}
+        toggleCanVote={toggleCanVote}
+      />,
+  }];
 
   return (
     <ReactTable
diff --git a/client/src/components/Admin/Users/User/User.css b/client/src/components/Admin/Users/ToggleCanVote/ToggleCanVote.css
similarity index 100%
rename from client/src/components/Admin/Users/User/User.css
rename to client/src/components/Admin/Users/ToggleCanVote/ToggleCanVote.css
diff --git a/client/src/components/Admin/Users/ToggleCanVote/index.js b/client/src/components/Admin/Users/ToggleCanVote/index.js
new file mode 100644
index 00000000..4ca93743
--- /dev/null
+++ b/client/src/components/Admin/Users/ToggleCanVote/index.js
@@ -0,0 +1,98 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import { CAN_VOTE } from 'common/auth/permissions';
+import { adminSetPermissions } from 'features/user/actionCreators';
+import Button from '../../../Button';
+import Dialog from '../../../Dialog';
+import css from './ToggleCanVote.css';
+
+class ToggleCanVote extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showToggleCanVoteWarning: false,
+    };
+  }
+
+  canVoteHandler(id, toggleTo) {
+    this.setState({ showToggleCanVoteWarning: false });
+    this.props.setPermissions(id, toggleTo, CAN_VOTE);
+  }
+
+  render() {
+    const { id, canVote, permissions, toggleCanVote } = this.props;
+
+    const successToggle = classNames(
+      css.success,
+      { [css.toggle]: canVote },
+    );
+
+    const closeToggle = classNames(
+      css.close,
+      { [css.toggle]: !canVote },
+    );
+
+    return (
+      <Fragment>
+          <Dialog
+            title="Gi stemmerett"
+            subtitle={'Denne personen er ikke medlem av Online. Ønsker du å ' +
+            'gi dem stemmerett?'}
+            visible={this.state.showToggleCanVoteWarning}
+            onClose={() => this.setState({ showToggleCanVoteWarning: false })}
+          >
+            <p>Dette kan bare gjøres dersom generalforsamlingen vedtar det.</p>
+            <Button
+              background
+              onClick={() => this.canVoteHandler(id, true)}
+            >Bekreft</Button>
+            <Button
+              background
+              onClick={() => this.setState({ showToggleCanVoteWarning: false })}
+            >Avbryt</Button>
+          </Dialog>
+
+          <button
+            className={css.action}
+            onClick={() => (permissions >= CAN_VOTE
+              ? toggleCanVote(id, true)
+              : this.setState({ showToggleCanVoteWarning: true }))}
+          >
+            <div
+              className={permissions >= CAN_VOTE ? successToggle : css.unavailable}
+              title={permissions >= CAN_VOTE
+                ? 'Gi brukeren stemmerett'
+                : 'Brukeren har ikke rett til å få stemmerett.'}
+            />
+          </button>
+          <button
+            className={css.action}
+            onClick={() => toggleCanVote(id, false)}
+          >
+            <div className={closeToggle} title="Fjern brukerens stemmerett" />
+          </button>
+      </Fragment>
+    );
+  }
+}
+
+ToggleCanVote.propTypes = {
+  canVote: PropTypes.bool.isRequired,
+  id: PropTypes.string.isRequired,
+  permissions: PropTypes.number.isRequired,
+  setPermissions: PropTypes.func.isRequired,
+  toggleCanVote: PropTypes.func.isRequired,
+};
+
+const mapDispatchToProps = ({
+  setPermissions: adminSetPermissions,
+});
+
+export default ToggleCanVote;
+export const ToggleCanVoteContainer = connect(
+  null,
+  mapDispatchToProps,
+)(ToggleCanVote);

From d3100943dbaf3117783852a75a571ea8acb30eb0 Mon Sep 17 00:00:00 2001
From: Torjus Iveland <torjusti@gmail.com>
Date: Wed, 6 Mar 2019 22:49:57 +0100
Subject: [PATCH 09/18] Clean up unused CSS

---
 client/src/components/Admin/Users/List/List.css          | 9 ---------
 .../Admin/Users/ToggleCanVote/ToggleCanVote.css          | 8 --------
 2 files changed, 17 deletions(-)

diff --git a/client/src/components/Admin/Users/List/List.css b/client/src/components/Admin/Users/List/List.css
index e77226ec..696e998b 100644
--- a/client/src/components/Admin/Users/List/List.css
+++ b/client/src/components/Admin/Users/List/List.css
@@ -2,19 +2,10 @@
   margin-top: 25px;
 }
 
-.left {
-  text-align: left;
-}
-
 .center {
   text-align: center;
 }
 
-.right {
-  text-align: right;
-}
-
-
 .action {
   display: inline;
   font-size: 2rem;
diff --git a/client/src/components/Admin/Users/ToggleCanVote/ToggleCanVote.css b/client/src/components/Admin/Users/ToggleCanVote/ToggleCanVote.css
index b649770d..a8030fde 100644
--- a/client/src/components/Admin/Users/ToggleCanVote/ToggleCanVote.css
+++ b/client/src/components/Admin/Users/ToggleCanVote/ToggleCanVote.css
@@ -3,14 +3,6 @@
   font-weight: bold;
 }
 
-.left {
-  composes: left from '../List/List.css';
-}
-
-.right {
-  composes: right from '../List/List.css';
-}
-
 .action {
   display: inline;
   font-size: 2rem;

From 29832da69bf4aaffa04fc3d25065cb11dd63dc50 Mon Sep 17 00:00:00 2001
From: Torjus Iveland <torjusti@gmail.com>
Date: Thu, 7 Mar 2019 00:47:39 +0100
Subject: [PATCH 10/18] Disable resizing of columns

---
 client/src/components/Admin/Users/List/List.css |  9 ++++++++-
 client/src/components/Admin/Users/List/index.js | 12 +++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Admin/Users/List/List.css b/client/src/components/Admin/Users/List/List.css
index 696e998b..486870b4 100644
--- a/client/src/components/Admin/Users/List/List.css
+++ b/client/src/components/Admin/Users/List/List.css
@@ -3,7 +3,14 @@
 }
 
 .center {
-  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+.tableCell {
+  display: flex;
+  align-items: center;
+  margin-left: 0.25rem;
 }
 
 .action {
diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index ff544fb3..434debc2 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -41,7 +41,7 @@ const UserList = ({ users, toggleCanVote }) => {
 
   const columns = [{
     Header: `Name (${totalUsers})`,
-    accessor: 'name', // String-based value accessors!
+    accessor: 'name',
     },{
     Header: `Registrert (${usersRegistered})`,
     accessor: 'registered',
@@ -64,6 +64,7 @@ const UserList = ({ users, toggleCanVote }) => {
   }, {
     Header: `Stemmeberettigelse (${usersCanVote}/${usersHasPermsToVote})`,
     accessor: 'canVote',
+    className: css.center,
     Cell: props =>
       <ToggleCanVoteContainer
         canVote={props.value}
@@ -79,6 +80,15 @@ const UserList = ({ users, toggleCanVote }) => {
       data={data}
       columns={columns}
       className={css.table}
+      getTrProps={(state, rowInfo, column, instance) => ({
+        className: classNames({
+          [css.canNotVote]: !(rowInfo && rowInfo.row.canVote),
+        }),
+      })}
+      getTdProps={() => ({
+        className: css.tableCell,
+      })}
+      resizable={false}
     />);
 };
 

From 1f1cbcd70735bca292550d3f8ec0edd608ed6fb9 Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Thu, 7 Mar 2019 01:00:43 +0100
Subject: [PATCH 11/18] added changes, removed unused file and updated
 dependencies

---
 .../src/components/Admin/Users/List/index.js  |   4 +-
 .../Admin/Users/ToggleCanVote/index.js        |  62 ++++-----
 .../src/components/Admin/Users/User/index.js  | 122 ------------------
 yarn.lock                                     |   7 +
 4 files changed, 40 insertions(+), 155 deletions(-)
 delete mode 100644 client/src/components/Admin/Users/User/index.js

diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index 434debc2..e917caf9 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -7,9 +7,9 @@ import { adminToggleCanVote } from 'features/user/actionCreators';
 import ReactTable from 'react-table';
 import 'react-table/react-table.css';
 import classNames from 'classnames';
-import { ToggleCanVoteContainer } from '../ToggleCanVote';
 import moment from 'moment';
 import css from './List.css';
+import { ToggleCanVoteContainer } from '../ToggleCanVote';
 
 const UserList = ({ users, toggleCanVote }) => {
   const userKeys = Object.keys(users);
@@ -42,7 +42,7 @@ const UserList = ({ users, toggleCanVote }) => {
   const columns = [{
     Header: `Name (${totalUsers})`,
     accessor: 'name',
-    },{
+  }, {
     Header: `Registrert (${usersRegistered})`,
     accessor: 'registered',
     className: css.center,
diff --git a/client/src/components/Admin/Users/ToggleCanVote/index.js b/client/src/components/Admin/Users/ToggleCanVote/index.js
index 4ca93743..4cd933f5 100644
--- a/client/src/components/Admin/Users/ToggleCanVote/index.js
+++ b/client/src/components/Admin/Users/ToggleCanVote/index.js
@@ -37,43 +37,43 @@ class ToggleCanVote extends React.Component {
 
     return (
       <Fragment>
-          <Dialog
-            title="Gi stemmerett"
-            subtitle={'Denne personen er ikke medlem av Online. Ønsker du å ' +
+        <Dialog
+          title="Gi stemmerett"
+          subtitle={'Denne personen er ikke medlem av Online. Ønsker du å ' +
             'gi dem stemmerett?'}
-            visible={this.state.showToggleCanVoteWarning}
-            onClose={() => this.setState({ showToggleCanVoteWarning: false })}
-          >
-            <p>Dette kan bare gjøres dersom generalforsamlingen vedtar det.</p>
-            <Button
-              background
-              onClick={() => this.canVoteHandler(id, true)}
-            >Bekreft</Button>
-            <Button
-              background
-              onClick={() => this.setState({ showToggleCanVoteWarning: false })}
-            >Avbryt</Button>
-          </Dialog>
+          visible={this.state.showToggleCanVoteWarning}
+          onClose={() => this.setState({ showToggleCanVoteWarning: false })}
+        >
+          <p>Dette kan bare gjøres dersom generalforsamlingen vedtar det.</p>
+          <Button
+            background
+            onClick={() => this.canVoteHandler(id, true)}
+          >Bekreft</Button>
+          <Button
+            background
+            onClick={() => this.setState({ showToggleCanVoteWarning: false })}
+          >Avbryt</Button>
+        </Dialog>
 
-          <button
-            className={css.action}
-            onClick={() => (permissions >= CAN_VOTE
+        <button
+          className={css.action}
+          onClick={() => (permissions >= CAN_VOTE
               ? toggleCanVote(id, true)
               : this.setState({ showToggleCanVoteWarning: true }))}
-          >
-            <div
-              className={permissions >= CAN_VOTE ? successToggle : css.unavailable}
-              title={permissions >= CAN_VOTE
+        >
+          <div
+            className={permissions >= CAN_VOTE ? successToggle : css.unavailable}
+            title={permissions >= CAN_VOTE
                 ? 'Gi brukeren stemmerett'
                 : 'Brukeren har ikke rett til å få stemmerett.'}
-            />
-          </button>
-          <button
-            className={css.action}
-            onClick={() => toggleCanVote(id, false)}
-          >
-            <div className={closeToggle} title="Fjern brukerens stemmerett" />
-          </button>
+          />
+        </button>
+        <button
+          className={css.action}
+          onClick={() => toggleCanVote(id, false)}
+        >
+          <div className={closeToggle} title="Fjern brukerens stemmerett" />
+        </button>
       </Fragment>
     );
   }
diff --git a/client/src/components/Admin/Users/User/index.js b/client/src/components/Admin/Users/User/index.js
deleted file mode 100644
index a0660a5a..00000000
--- a/client/src/components/Admin/Users/User/index.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import classNames from 'classnames';
-import moment from 'moment';
-import { CAN_VOTE, getPermissionDisplay } from 'common/auth/permissions';
-import { adminSetPermissions } from 'features/user/actionCreators';
-import Button from '../../../Button';
-import Dialog from '../../../Dialog';
-import css from './User.css';
-
-class User extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showToggleCanVoteWarning: false,
-    };
-  }
-
-  canVoteHandler(id, toggleTo) {
-    this.setState({ showToggleCanVoteWarning: false });
-    this.props.setPermissions(id, toggleTo, CAN_VOTE);
-  }
-
-  render() {
-    const { id, name, registered, canVote, completedRegistration, permissions, toggleCanVote,
-    } = this.props;
-    const userClass = classNames({
-      [css.canNotVote]: !canVote,
-    });
-    const registeredDate = moment(registered);
-    const successToggle = classNames(
-      css.success,
-      { [css.toggle]: canVote },
-    );
-    const closeToggle = classNames(
-      css.close,
-      { [css.toggle]: !canVote },
-    );
-    const permissionLevel = getPermissionDisplay(permissions);
-    return (
-      <tr className={userClass}>
-        <td className={css.left}>{name}</td>
-        <td
-          className={css.right}
-          title={`${registeredDate.format('LLL')} (${registeredDate.fromNow()})`}
-        >
-          <div
-            className={classNames(css.action,
-              { [css.success]: completedRegistration,
-                [css.close]: !completedRegistration,
-                [css.toggle]: completedRegistration,
-              },
-          )}
-          >{completedRegistration}</div>
-        </td>
-        <td className={css.right}>
-          {permissionLevel}
-        </td>
-        <td className={css.right}>
-          <Dialog
-            title="Gi stemmerett"
-            subtitle={'Denne personen er ikke medlem av Online. Ønsker du å ' +
-            'gi dem stemmerett?'}
-            visible={this.state.showToggleCanVoteWarning}
-            onClose={() => this.setState({ showToggleCanVoteWarning: false })}
-          >
-            <p>Dette kan bare gjøres dersom generalforsamlingen vedtar det.</p>
-            <Button
-              background
-              onClick={() => this.canVoteHandler(id, true)}
-            >Bekreft</Button>
-            <Button
-              background
-              onClick={() => this.setState({ showToggleCanVoteWarning: false })}
-            >Avbryt</Button>
-          </Dialog>
-          <button
-            className={css.action}
-            onClick={() => (permissions >= CAN_VOTE
-              ? toggleCanVote(id, true)
-              : this.setState({ showToggleCanVoteWarning: true }))}
-          >
-            <div
-              className={permissions >= CAN_VOTE ? successToggle : css.unavailable}
-              title={permissions >= CAN_VOTE
-                ? 'Gi brukeren stemmerett'
-                : 'Brukeren har ikke rett til å få stemmerett.'}
-            />
-          </button>
-          <button
-            className={css.action}
-            onClick={() => toggleCanVote(id, false)}
-          >
-            <div className={closeToggle} title="Fjern brukerens stemmerett" />
-          </button>
-        </td>
-      </tr>
-    );
-  }
-}
-
-User.propTypes = {
-  name: PropTypes.string.isRequired,
-  canVote: PropTypes.bool.isRequired,
-  completedRegistration: PropTypes.bool.isRequired,
-  id: PropTypes.string.isRequired,
-  permissions: PropTypes.number.isRequired,
-  registered: PropTypes.string.isRequired,
-  setPermissions: PropTypes.func.isRequired,
-  toggleCanVote: PropTypes.func.isRequired,
-};
-
-const mapDispatchToProps = ({
-  setPermissions: adminSetPermissions,
-});
-
-export default User;
-export const UserContainer = connect(
-  null,
-  mapDispatchToProps,
-)(User);
diff --git a/yarn.lock b/yarn.lock
index 86a02a99..070bc304 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6247,6 +6247,13 @@ react-side-effect@^1.0.2:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
+react-table@^6.9.2:
+  version "6.9.2"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-6.9.2.tgz#6a59adfeb8d5deced288241ed1c7847035b5ec5f"
+  integrity sha512-sTbNHU8Um0xRtmCd1js873HXnXaMWeBwZoiljuj0l1d44eaqjKyYPK/3HCBbJg1yeE2O5pQJ3Km0tlm9niNL9w==
+  dependencies:
+    classnames "^2.2.5"
+
 react@^16.0.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"

From 026ff28f2b6ac1a6fb8443d9e80eb18ab5e78394 Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Thu, 7 Mar 2019 14:15:51 +0100
Subject: [PATCH 12/18] add z-index for dialog when ending genfors

---
 client/src/components/Dialog/Dialog.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/Dialog/Dialog.css b/client/src/components/Dialog/Dialog.css
index 2eec7c58..258fdd29 100644
--- a/client/src/components/Dialog/Dialog.css
+++ b/client/src/components/Dialog/Dialog.css
@@ -9,6 +9,7 @@
 
 .visible {
   display: block;
+  z-index: 1;
 }
 
 .backdrop {

From 64deaeb7fcc93a3981cae056a5cb9fea36dd0891 Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Sat, 9 Mar 2019 18:32:10 +0100
Subject: [PATCH 13/18] Translated parts of the table to norwegian

---
 client/src/components/Admin/Users/List/index.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index e917caf9..26940645 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -40,7 +40,7 @@ const UserList = ({ users, toggleCanVote }) => {
     }))];
 
   const columns = [{
-    Header: `Name (${totalUsers})`,
+    Header: `Navn (${totalUsers})`,
     accessor: 'name',
   }, {
     Header: `Registrert (${usersRegistered})`,
@@ -80,7 +80,7 @@ const UserList = ({ users, toggleCanVote }) => {
       data={data}
       columns={columns}
       className={css.table}
-      getTrProps={(state, rowInfo, column, instance) => ({
+      getTrProps={(state, rowInfo) => ({
         className: classNames({
           [css.canNotVote]: !(rowInfo && rowInfo.row.canVote),
         }),
@@ -88,7 +88,13 @@ const UserList = ({ users, toggleCanVote }) => {
       getTdProps={() => ({
         className: css.tableCell,
       })}
-      resizable={false}
+      previousText= 'Forrige'
+      nextText= 'Neste'
+      loadingText= 'Laster inn...'
+      noDataText= 'Ingen rekker funnet'
+      pageText= 'Side'
+      ofText= 'av'
+      rowsText= 'rekker'
     />);
 };
 

From 9564361c84d7f772dc07ab0513f7af7dbb8387fa Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Sat, 9 Mar 2019 18:32:34 +0100
Subject: [PATCH 14/18] linting: single quote to double quote

---
 client/src/components/Admin/Users/List/index.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index 26940645..e5742d92 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -88,13 +88,13 @@ const UserList = ({ users, toggleCanVote }) => {
       getTdProps={() => ({
         className: css.tableCell,
       })}
-      previousText= 'Forrige'
-      nextText= 'Neste'
-      loadingText= 'Laster inn...'
-      noDataText= 'Ingen rekker funnet'
-      pageText= 'Side'
-      ofText= 'av'
-      rowsText= 'rekker'
+      previousText="Forrige"
+      nextText="Neste"
+      loadingText="Laster inn..."
+      noDataText="Ingen rekker funnet"
+      pageText="Side"
+      ofText="av"
+      rowsText="rekker"
     />);
 };
 

From eb233382b06943c9a75bcf3e88781d0fc2aed75b Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Sat, 9 Mar 2019 20:07:18 +0100
Subject: [PATCH 15/18] Moved Cell componements to unique file; Defined
 proptypes for each of them

---
 .../src/components/Admin/Users/List/Table.js  | 51 +++++++++++++++++++
 .../src/components/Admin/Users/List/index.js  | 46 ++++++-----------
 2 files changed, 66 insertions(+), 31 deletions(-)
 create mode 100644 client/src/components/Admin/Users/List/Table.js

diff --git a/client/src/components/Admin/Users/List/Table.js b/client/src/components/Admin/Users/List/Table.js
new file mode 100644
index 00000000..3ab13c3b
--- /dev/null
+++ b/client/src/components/Admin/Users/List/Table.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getPermissionDisplay } from 'common/auth/permissions';
+import classNames from 'classnames';
+import moment from 'moment';
+import css from './List.css';
+import { ToggleCanVoteContainer } from '../ToggleCanVote';
+
+export const RegisteredIndicator = props =>
+  <div
+    className={classNames(css.action,
+      {
+        [css.success]: props.value.isRegistered,
+        [css.close]: !props.value.isRegistered,
+        [css.toggle]: props.value.isRegistered,
+      },
+        )}
+    title={`${moment(props.value.registeredDate).format('LLL')} (${moment(props.value.registeredDate).fromNow()})`}
+  >{props.value.isRegistered}</div>;
+
+RegisteredIndicator.propTypes = {
+  value: PropTypes.shape({
+    registeredDate: PropTypes.string,
+    isRegistered: PropTypes.bool,
+  }).isRequired,
+};
+
+export const PermissionDisplay = props =>
+  getPermissionDisplay(props.value);
+
+PermissionDisplay.propTypes = {
+  value: PropTypes.number,
+};
+
+export const ToggleCanVoteIndicator = (props, toggleCanVote) =>
+  <ToggleCanVoteContainer
+    canVote={props.value}
+    id={props.original.id}
+    permissions={props.original.permissions}
+    setPermissions={props.original.setPermissions}
+    toggleCanVote={toggleCanVote}
+  />;
+
+ToggleCanVoteIndicator.propTypes = {
+  value: PropTypes.bool.isRequired,
+  original: PropTypes.shape({
+    id: PropTypes.string,
+    permissions: PropTypes.number,
+    setPermissions: PropTypes.func.isRequired,
+  }).isRequired,
+};
diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index e5742d92..8b6dfaa7 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -2,14 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Fuse from 'fuse.js';
-import { CAN_VOTE, getPermissionDisplay } from 'common/auth/permissions';
+import { CAN_VOTE } from 'common/auth/permissions';
 import { adminToggleCanVote } from 'features/user/actionCreators';
 import ReactTable from 'react-table';
 import 'react-table/react-table.css';
 import classNames from 'classnames';
-import moment from 'moment';
 import css from './List.css';
-import { ToggleCanVoteContainer } from '../ToggleCanVote';
+import { RegisteredIndicator, PermissionDisplay, ToggleCanVoteIndicator } from './Table';
 
 const UserList = ({ users, toggleCanVote }) => {
   const userKeys = Object.keys(users);
@@ -31,14 +30,16 @@ const UserList = ({ users, toggleCanVote }) => {
       name: user.name,
       canVote: user.canVote,
       registered: {
-        completedRegistration: user.completedRegistration,
         registeredDate: user.registered,
+        isRegistered: user.completedRegistration,
       },
       id: user.id,
       permissions: user.permissions,
       setPermissions: user.setPermissions,
     }))];
 
+  console.log(data);
+
   const columns = [{
     Header: `Navn (${totalUsers})`,
     accessor: 'name',
@@ -46,33 +47,16 @@ const UserList = ({ users, toggleCanVote }) => {
     Header: `Registrert (${usersRegistered})`,
     accessor: 'registered',
     className: css.center,
-    Cell: props =>
-      <div
-        className={classNames(css.action,
-          {
-            [css.success]: props.value.completedRegistration,
-            [css.close]: !props.value.completedRegistration,
-            [css.toggle]: props.value.completedRegistration,
-          },
-            )}
-        title={`${moment(props.value.registeredDate).format('LLL')} (${moment(props.value.registeredDate).fromNow()})`}
-      >{props.value.completedRegistration}</div>,
+    Cell: RegisteredIndicator,
   }, {
     Header: `Rettigheter (${usersHasPermsToVote})`,
     accessor: 'permissions',
-    Cell: props => getPermissionDisplay(props.value),
+    Cell: PermissionDisplay,
   }, {
     Header: `Stemmeberettigelse (${usersCanVote}/${usersHasPermsToVote})`,
     accessor: 'canVote',
     className: css.center,
-    Cell: props =>
-      <ToggleCanVoteContainer
-        canVote={props.value}
-        id={props.original.id}
-        permissions={props.original.permissions}
-        setPermissions={props.original.setPermissions}
-        toggleCanVote={toggleCanVote}
-      />,
+    Cell: props => ToggleCanVoteIndicator(props, toggleCanVote),
   }];
 
   return (
@@ -80,6 +64,13 @@ const UserList = ({ users, toggleCanVote }) => {
       data={data}
       columns={columns}
       className={css.table}
+      previousText="Forrige"
+      nextText="Neste"
+      loadingText="Laster inn..."
+      noDataText="Ingen rekker funnet"
+      pageText="Side"
+      ofText="av"
+      rowsText="rekker"
       getTrProps={(state, rowInfo) => ({
         className: classNames({
           [css.canNotVote]: !(rowInfo && rowInfo.row.canVote),
@@ -88,13 +79,6 @@ const UserList = ({ users, toggleCanVote }) => {
       getTdProps={() => ({
         className: css.tableCell,
       })}
-      previousText="Forrige"
-      nextText="Neste"
-      loadingText="Laster inn..."
-      noDataText="Ingen rekker funnet"
-      pageText="Side"
-      ofText="av"
-      rowsText="rekker"
     />);
 };
 

From 7b3561ba8fe2eb596fb7cd7a21484a4c447a2f95 Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Sat, 9 Mar 2019 20:18:27 +0100
Subject: [PATCH 16/18] making sure you cant resize the rows after accidently
 removing it since im dumb

---
 client/src/components/Admin/Users/List/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index 8b6dfaa7..92ffabb4 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -64,6 +64,7 @@ const UserList = ({ users, toggleCanVote }) => {
       data={data}
       columns={columns}
       className={css.table}
+      resizable={false}
       previousText="Forrige"
       nextText="Neste"
       loadingText="Laster inn..."

From 2d664ebcc6e31da580a43503ddece9c23bc60705 Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Sat, 9 Mar 2019 20:27:16 +0100
Subject: [PATCH 17/18] forgot to remove console log

---
 client/src/components/Admin/Users/List/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index 92ffabb4..095ed113 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -38,8 +38,6 @@ const UserList = ({ users, toggleCanVote }) => {
       setPermissions: user.setPermissions,
     }))];
 
-  console.log(data);
-
   const columns = [{
     Header: `Navn (${totalUsers})`,
     accessor: 'name',

From ff41b8a742c1db1a533e980a4c93fa4a3c01206d Mon Sep 17 00:00:00 2001
From: kharann <anhkhav@gmail.com>
Date: Sun, 10 Mar 2019 17:42:12 +0100
Subject: [PATCH 18/18] changed from xp to rem in css; fixed indenting; removed
 unecesarry sort

---
 client/src/components/Admin/Users/List/List.css | 2 +-
 client/src/components/Admin/Users/List/Table.js | 2 +-
 client/src/components/Admin/Users/List/index.js | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Admin/Users/List/List.css b/client/src/components/Admin/Users/List/List.css
index 486870b4..13f5e973 100644
--- a/client/src/components/Admin/Users/List/List.css
+++ b/client/src/components/Admin/Users/List/List.css
@@ -1,5 +1,5 @@
 .table {
-  margin-top: 25px;
+  margin-top: 1rem;
 }
 
 .center {
diff --git a/client/src/components/Admin/Users/List/Table.js b/client/src/components/Admin/Users/List/Table.js
index 3ab13c3b..d11d4532 100644
--- a/client/src/components/Admin/Users/List/Table.js
+++ b/client/src/components/Admin/Users/List/Table.js
@@ -14,7 +14,7 @@ export const RegisteredIndicator = props =>
         [css.close]: !props.value.isRegistered,
         [css.toggle]: props.value.isRegistered,
       },
-        )}
+    )}
     title={`${moment(props.value.registeredDate).format('LLL')} (${moment(props.value.registeredDate).fromNow()})`}
   >{props.value.isRegistered}</div>;
 
diff --git a/client/src/components/Admin/Users/List/index.js b/client/src/components/Admin/Users/List/index.js
index 095ed113..cb385af7 100644
--- a/client/src/components/Admin/Users/List/index.js
+++ b/client/src/components/Admin/Users/List/index.js
@@ -24,7 +24,6 @@ const UserList = ({ users, toggleCanVote }) => {
     .length;
 
   const data = [...Object.keys(users)
-    .sort((a, b) => users[a].name.localeCompare(users[b].name))
     .map(key => users[key])
     .map(user => ({
       name: user.name,