use hook to make list responsive

#69

src/components/Admin/Users/ListWithFilter.js

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { List, Input } from 'antd';
 
+import useWindowWidth from '../../../hooks/useWindowWidth';
+
 export default function ListWithFilter({ dataSource, renderItem, ...props }) {
   const [searchText, setSearchText] = useState('');
   const [filteredSource, setFilteredSource] = useState(dataSource);
@@ -16,6 +18,12 @@ export default function ListWithFilter({ dataSource, renderItem, ...props }) {
       ),
     [dataSource, searchText]
   );
+  const [isSmallScreen, setSmallScreen] = useState(false);
+  const device = useWindowWidth();
+
+  useEffect(() => {
+    setSmallScreen(device.isTablet);
+  }, [device]);
   return (
     <div>
       <Input
@@ -25,7 +33,12 @@ export default function ListWithFilter({ dataSource, renderItem, ...props }) {
         onChange={e => setSearchText(e.target.value)}
         style={{ marginBottom: '1rem' }}
       />
-      <List dataSource={filteredSource} renderItem={renderItem} {...props} />
+      <List
+        dataSource={filteredSource}
+        renderItem={renderItem}
+        itemLayout={isSmallScreen ? 'vertical' : 'horizontal'}
+        {...props}
+      />
     </div>
   );
 }

src/components/Admin/Users/UserListItem.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { List, Icon, Tag } from 'antd';
+import { List, Tag, Button } from 'antd';
 import { UserTitle } from './Users.style';
 import { renderUserDetails } from '../../../constants/users';
 import { userRoleColor } from '../../../constants/colors';
@@ -15,20 +15,36 @@ const UserLevel = ({ role, status }) => {
 
 const Title = ({ name, status, role }) => {
   return (
-    <UserTitle>
-      <div style={{ marginRight: '0.4rem' }}>{name}</div>
+    <div>
+      <span style={{ marginRight: '0.4rem' }}>{name}</span>
       <UserLevel role={role} status={status} />
-    </UserTitle>
+    </div>
   );
 };
 
+const UserActions = () => (
+  <div className="flex items-center justify-start">
+    <Button
+      style={{ color: '#219653', borderColor: '#219653' }}
+      className="mr1"
+      ghost
+    >
+      Approve
+    </Button>
+    <Button ghost style={{ color: '#EB5757', borderColor: '#EB5757' }}>
+      Reject
+    </Button>
+  </div>
+);
+
 const UserListItem = ({ _id, name, email, role, status }) => {
   return (
-    <List.Item key={_id} actions={[<a href="#">view</a>]}>
+    <List.Item key={_id}>
       <List.Item.Meta
         title={<Title name={name} status={status} role={role} />}
         description={email}
       />
+      <UserActions />
     </List.Item>
   );
 };