Add meetings

src/app/views/index.js

@@ -4,7 +4,7 @@ import { isAuthenticated } from '../views/auth/store/authSlice';
 import Layout from './layout/containers/Layout';
 import Login from './auth/containers/login/Login';
 import Users from './users/containers/usersManagement/UsersManagement';
-import Meetings from './meetings/containers/meetings/Meetings';
+import Meetings from './meetings/containers/meetingsManagement/MeetingsManagement';
 
 const PrivateRoute = ({ isAuth, component }) => {
   return isAuth ? (

src/app/views/meetings/components/meetings/Meetings.js

@@ -0,0 +1,42 @@
+import { useTable } from 'react-table';
+import styles from './Meetings.module.scss';
+
+const Meetings = ({ columns, data }) => {
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
+    useTable({
+      columns,
+      data,
+    });
+
+  return (
+    <div className={styles.table}>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map((headerGroup) => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map((column) => (
+                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {rows.map((row, i) => {
+            prepareRow(row);
+            return (
+              <tr {...row.getRowProps()}>
+                {row.cells.map((cell) => {
+                  return (
+                    <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Meetings;

src/app/views/meetings/components/meetings/Meetings.module.scss

@@ -0,0 +1,27 @@
+.table {
+  background-color: var(--header);
+  table {
+    border-spacing: 0;
+    border: 1px solid var(--border);
+
+    tr {
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    th,
+    td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid var(--border);
+      border-right: 1px solid var(--border);
+
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+}

src/app/views/meetings/containers/meetings/Meetings.js → src/app/views/meetings/containers/meetingsManagement/MeetingsManagement.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Loader, Title } from '../../../../library/index';
 import { Filters, Header } from '../../../users/components/index';
@@ -8,18 +8,69 @@ import {
   selectLoading,
   usersListSort,
 } from '../../store/usersSlice';
-import styles from './Meetings.module.scss';
+import Meetings from '../../components/meetings/Meetings';
+import styles from './MeetingsManagement.module.scss';
 
-const Meetings = () => {
+const MeetingsManagement = () => {
   const dispatch = useDispatch();
   const loading = useSelector(selectLoading);
   const [user, setUser] = useState({});
   const [profileDetails, setProfileDetails] = useState(false);
   const [newUser, setNewUser] = useState(false);
   const { first_name, avatar } = user;
 
+  const columns = useMemo(
+    () => [
+      {
+        Header: 'Type',
+        accessor: 'type',
+      },
+      {
+        Header: 'Date',
+        accessor: 'date',
+      },
+      {
+        Header: 'Organizer',
+        accessor: 'organizer',
+      },
+      {
+        Header: 'Participants',
+        accessor: 'participant',
+      },
+      {
+        Header: 'ID',
+        accessor: 'id',
+      },
+      {
+        Header: 'Status',
+        accessor: 'status',
+      },
+    ],
+    []
+  );
+
+  const data = [
+    {
+      id: 81,
+      type: 'one-on-one',
+      date: '2021-09-01T00:00:00.000Z',
+      organizer: 'John Doe',
+      participants: 'Mary Jane',
+      status: 'complete',
+    },
+    {
+      id: 82,
+      type: 'one-on-one',
+      date: '2021-09-01T00:00:00.000Z',
+      organizer: 'Peter Parker',
+      participants: 'Mike Wazowski',
+      status: 'complete',
+    },
+  ];
+
   useEffect(() => {
     dispatch(getUsers());
+    return () => {};
   }, [dispatch]);
 
   const toggleNewUser = (isNewUser) => setNewUser(isNewUser);
@@ -30,7 +81,7 @@ const Meetings = () => {
 
   return (
     <div className={styles.pageContainer} datatestid="list">
-      <Title text="Users List" />
+      <Title text="Meetings List" />
       <Header sortUsers={handleSortUsers} toggleNewUser={toggleNewUser} />
       <div className={styles.bodyContainer}>
         <Filters handleFilterAction={handleFilterAction} />
@@ -40,11 +91,11 @@ const Meetings = () => {
               <Loader />
             </div>
           ) : (
-            <div>AAAA</div>
+            <Meetings columns={columns} data={data} />
           )}
         </div>
       </div>
     </div>
   );
 };
-export default Meetings;
+export default MeetingsManagement;

src/app/views/meetings/containers/meetingsManagement/table.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useTable } from 'react-table';
+
+import makeData from './makeData';
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+
+    tr {
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    th,
+    td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+`;
+
+function Table({ columns, data }) {
+  // Use the state and functions returned from useTable to build your UI
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
+    useTable({
+      columns,
+      data,
+    });
+
+  // Render the UI for your table
+  return (
+    <table {...getTableProps()}>
+      <thead>
+        {headerGroups.map((headerGroup) => (
+          <tr {...headerGroup.getHeaderGroupProps()}>
+            {headerGroup.headers.map((column) => (
+              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody {...getTableBodyProps()}>
+        {rows.map((row, i) => {
+          prepareRow(row);
+          return (
+            <tr {...row.getRowProps()}>
+              {row.cells.map((cell) => {
+                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
+              })}
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  );
+
+  const data = React.useMemo(() => makeData(20), []);
+
+  return (
+    <Styles>
+      <Table columns={columns} data={data} />
+    </Styles>
+  );
+}
+
+export default App;

src/app/views/users/store/usersSlice.js

@@ -60,11 +60,12 @@ const usersSlice = createSlice({
         loading: false,
         users: users.filter((user) => {
           const lowerCaseName = user.first_name.toLowerCase();
-          return lowerCaseName.includes(search.toLowerCase());
+          const lowerCaseSearch = search.toLowerCase();
+          return lowerCaseName.includes(lowerCaseSearch);
         }),
       };
     });
-    builder.addCase(searchUsers.pending, (state, action) => {
+    builder.addCase(searchUsers.pending, (state) => {
       return {
         ...state,
         loading: true,