feat: grab the users from the database and display them in a vertical…

… list

this closes #157

src/component/manage-user/manage-user.component.jsx

@@ -1,7 +1,30 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { db } from '../data/firebase';
+import UserItem from '../user-item/user-item.component';
+import { StyledUserList } from './manage-user.style';
+import HeaderTitle from '../_dumb/header-title/header-title.component';
 
 const ManageUser = () => {
-  return <div>Manage user panel</div>;
+  const [userList, setUserList] = useState([])
+  useEffect(() => {
+    (async () => {
+      const userSnap = await db.collection('user').get()
+      const userList = userSnap.docs.map(user => ({ id: user.id, ...user.data() }))
+      setUserList(userList)
+    })()
+  }, [])
+  return (
+    <div>
+      <HeaderTitle {...{
+        text: 'Manage user panel',
+        tag: 'h1',
+        fontSize: '22px',
+      }} />
+      <StyledUserList>
+        {userList.map(user => <UserItem key={user.id} user={user} />)}
+      </StyledUserList>
+    </div>
+  );
 };
 
 export default ManageUser;

src/component/manage-user/manage-user.style.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const StyledUserList = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr 1fr;
+  grid-gap: 0.5rem;
+`

src/component/user-item/index.js

@@ -0,0 +1 @@
+export { default } from './user-item.component'

src/component/user-item/user-item.component.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Avatar from '../avatar'
+
+const UserItem = ({ user }) => {
+  const { displayName, photoUrl, email, id } = user
+  return (
+    <>
+      <Avatar user={user} />
+      <div>{email}</div>
+      <div id={id}><a href={`#${id}`} title={id}>#{id.slice(0, 6)}</a></div>
+    </>
+  )
+}
+
+export default UserItem