display user data in list

#69
yalla-coop · Oct 4, 2019 · f8acfa1 · f8acfa1
1 parent 97cf129
commit f8acfa1
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 70 deletions.
diff --git a/src/components/Admin/Users/AllUsers.js b/src/components/Admin/Users/AllUsers.js
@@ -6,8 +6,8 @@ import axios from 'axios';
 import Loading from '../../Loading';
 import usePostPatchPut from '../../../hooks/usePostPatchPut';
 import useFetch from '../../../hooks/useFetch';
-import UsersColumns from './UsersColumns';
-
+// import UsersColumns from './UsersColumns';
+import UserListItem from './UserListItem';
 import { status as statusConst, roles } from '../../../constants/users';
 
 // admin user -> please change id for testing
@@ -43,14 +43,14 @@ const updateUsers = async () => {
 };
 
 // create table friendly data sets
-const createUserTable = arr =>
-  arr.map(({ _id, name, email, role, status }) => ({
-    key: _id,
-    name,
-    email,
-    level: role,
-    status,
-  }));
+// const createUserTable = arr =>
+//   arr.map(({ _id, name, email, role, status }) => ({
+//     key: _id,
+//     name,
+//     email,
+//     level: role,
+//     status,
+//   }));
 
 export default function AllUsers({ statusProp }) {
   // fetch users
@@ -72,8 +72,7 @@ export default function AllUsers({ statusProp }) {
   // sets users
   useEffect(() => {
     if (allUsers && allUsers.msg) {
-      const newUsers = createUserTable(allUsers.msg);
-      setUsers(newUsers);
+      setUsers(allUsers.msg);
     }
   }, [allUsers]);
 
@@ -83,8 +82,7 @@ export default function AllUsers({ statusProp }) {
     if (updateUserStatus && updateUserStatus.msg) {
       updateUsers()
         .then(({ data: updatedUsers }) => {
-          const updateAllUsers = createUserTable(updatedUsers.msg);
-          setUsers(updateAllUsers);
+          setUsers(updatedUsers.msg);
         })
         .catch(err => message.error(err));
       return message.success(updateUserStatus && updateUserStatus.msg);
@@ -113,67 +111,13 @@ export default function AllUsers({ statusProp }) {
     setSearchText('');
   };
 
-  const getColumnSearchProps = dataIndex => ({
-    filterDropdown: ({
-      setSelectedKeys,
-      selectedKeys,
-      confirm,
-      clearFilters,
-    }) => (
-      <div style={{ padding: 8 }}>
-        <Input
-          ref={searchInputRef}
-          placeholder={`Search ${dataIndex}`}
-          value={selectedKeys[0]}
-          onChange={e =>
-            setSelectedKeys(e.target.value ? [e.target.value] : [])
-          }
-          onPressEnter={() => handleSearch(selectedKeys, confirm)}
-          style={{ width: 188, marginBottom: 8, display: 'block' }}
-        />
-        <Button
-          type="primary"
-          onClick={() => handleSearch(selectedKeys, confirm)}
-          icon="search"
-          size="small"
-          style={{ width: 90, marginRight: 8 }}
-        >
-          Search
-        </Button>
-        <Button
-          onClick={() => handleReset(clearFilters)}
-          size="small"
-          style={{ width: 90 }}
-        >
-          Reset
-        </Button>
-      </div>
-    ),
-    filterIcon: filtered => (
-      <Icon
-        type="search"
-        style={{ fontSize: '20px', color: filtered ? '#1890ff' : undefined }}
-      />
-    ),
-    onFilter: (value, record) => {
-      return record[dataIndex]
-        .toString()
-        .toLowerCase()
-        .includes(value.toLowerCase());
-    },
-    onFilterDropdownVisibleChange: visible => {
-      if (visible) {
-        setTimeout(() => searchInputRef.current.select());
-      }
-    },
-  });
-
   return (
     <Fragment>
       {isLoading && <Loading />}
       <List
         dataSource={filterUsersByStatus(statusProp, users)}
-        renderItem={() => <p>Hello</p>}
+        renderItem={UserListItem}
+        pagination={{ position: 'bottom' }}
       />
     </Fragment>
   );

diff --git a/src/components/Admin/Users/UserListItem.js b/src/components/Admin/Users/UserListItem.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { List, Icon } from 'antd';
+import { RoleTile, UserTitle } from './Users.style';
+
+const Title = ({ name, status, role }) => {
+  return (
+    <UserTitle>
+      <div style={{ marginRight: '0.4rem' }}>{name}</div>
+      <div>
+        <RoleTile>{role}</RoleTile>
+        {status !== 'unverified' ? (
+          <Icon type="check" style={{ marginLeft: '0.5rem', color: 'green' }} />
+        ) : (
+          ''
+        )}
+      </div>
+    </UserTitle>
+  );
+};
+
+const UserListItem = ({ _id, name, email, role, status }) => {
+  return (
+    <List.Item key={_id} actions={[<a href="#">view</a>]}>
+      <List.Item.Meta
+        title={<Title name={name} status={status} role={role} />}
+        description={email}
+      />
+    </List.Item>
+  );
+};
+
+export default UserListItem;
diff --git a/src/components/Admin/Users/Users.style.js b/src/components/Admin/Users/Users.style.js
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const RoleTile = styled.span`
+  background: #333333;
+  color: #ffffff;
+  padding: 0.2rem 0.4rem;
+  font-size: 0.7rem;
+  border-radius: 10%;
+`;
+
+export const UserTitle = styled.div`
+  display: flex;
+  flex-direction: column;
+  @media all and (min-width: 600px) {
+    flex-direction: row;
+  }
+`;