feat: user integration

WBG-Coach · Aug 3, 2023 · 73e1576 · 73e1576
2 parents 39c5c76 + 0de4e85
commit 73e1576
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 4,426 deletions.
diff --git a/index.html b/index.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="https://coachdigital.org/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Coach SL</title>
   </head>

diff --git a/src/components/Layouts/ProtectedLayout/index.tsx b/src/components/Layouts/ProtectedLayout/index.tsx
@@ -1,24 +1,26 @@
-import { Box, HStack } from "@chakra-ui/react";
-import { Outlet, Navigate, useNavigate } from "react-router-dom";
-import { useContext, useEffect } from "react";
-import "react-toastify/dist/ReactToastify.css";
-import { UserContext } from "../../../contexts/UserContext";
-import Navbar from "@/components/Navbar";
+import { Box, HStack } from '@chakra-ui/react';
+import { Outlet, Navigate, useNavigate } from 'react-router-dom';
+import { useContext, useEffect } from 'react';
+import 'react-toastify/dist/ReactToastify.css';
+import { UserContext } from '../../../contexts/UserContext';
+import Navbar from '@/components/Navbar';
 
 export const ProtectedLayout = () => {
   const { user } = useContext(UserContext);
   const navigate = useNavigate();
 
   useEffect(() => {
-    if (!user) navigate("/login");
+    if (!user) navigate('/login');
   }, [user, navigate]);
 
   return (
     <HStack w="100%">
       <Box w="240px">
         <Navbar />
       </Box>
-      <Outlet />
+      <Box maxH="100vh" w="100%" overflow="scroll">
+        <Outlet />
+      </Box>
     </HStack>
   );
 };
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Center, HStack, Input, Text, VStack } from '@chakra-ui/react';
+import { Box, Center, HStack, Input, Select, Text, VStack } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import ReactPaginate from 'react-paginate';
 import Icon from '../Base/Icon';
@@ -14,16 +14,17 @@ type Column = {
 type Props = {
   data: any[];
   columns: Column[];
-  itemsPerPage?: number;
   filters?: { label: string; prop: string }[];
 };
 
-const Table: React.FC<Props> = ({ columns, data, filters, itemsPerPage }) => {
+const SIZE_OPTIONS = [5, 10, 15, 20];
+
+const Table: React.FC<Props> = ({ columns, data, filters }) => {
   const [page, setPage] = useState(0);
   const { t } = useTranslation();
   const [filter, setFilter] = useState<any>({});
   const [filteredData, setFilteredData] = useState(data);
-  const PAGE_SIZE = itemsPerPage || 5;
+  const [itemsPerPage, setItemsPerPage] = useState(10);
 
   const handleFilterValue = (e: ChangeEvent<HTMLInputElement>) => {
     setFilter({ ...filter, [e.target.name]: e.target.value.toUpperCase() });
@@ -79,7 +80,7 @@ const Table: React.FC<Props> = ({ columns, data, filters, itemsPerPage }) => {
           ))}
         </HStack>
         <VStack w="100%">
-          {filteredData.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE).map((item) => (
+          {filteredData.slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage).map((item) => (
             <HStack w="100%">
               {columns.map((column) => (
                 <Box
@@ -96,25 +97,38 @@ const Table: React.FC<Props> = ({ columns, data, filters, itemsPerPage }) => {
           ))}
         </VStack>
       </VStack>
-      <Center flex={1} p="16px">
-        <ReactPaginate
-          forcePage={page}
-          activeClassName={'item active '}
-          breakClassName={'item break-me '}
-          breakLabel={'...'}
-          containerClassName={'pagination'}
-          disabledClassName={'disabled-page'}
-          marginPagesDisplayed={2}
-          nextClassName={'item next '}
-          nextLabel={<Icon name="angle-right" />}
-          onPageChange={({ selected }) => setPage(selected)}
-          pageCount={filteredData.length / PAGE_SIZE}
-          pageClassName={'item pagination-page '}
-          pageRangeDisplayed={1}
-          previousClassName={'item previous'}
-          previousLabel={<Icon name="angle-left" />}
-        />
-      </Center>
+      <HStack p="16px" w="100%">
+        <HStack w="120px"></HStack>
+        <Center flex={1}>
+          <ReactPaginate
+            forcePage={page}
+            activeClassName={'item active '}
+            breakClassName={'item break-me '}
+            breakLabel={'...'}
+            containerClassName={'pagination'}
+            disabledClassName={'disabled-page'}
+            marginPagesDisplayed={2}
+            nextClassName={'item next '}
+            nextLabel={<Icon name="angle-right" />}
+            onPageChange={({ selected }) => setPage(selected)}
+            pageCount={filteredData.length / itemsPerPage}
+            pageClassName={'item pagination-page '}
+            pageRangeDisplayed={1}
+            previousClassName={'item previous'}
+            previousLabel={<Icon name="angle-left" />}
+          />
+        </Center>
+        <VStack w="120px">
+          <Text fontSize="14px" fontWeight="semibold" mr="auto">
+            Items per page:
+          </Text>
+          <Select value={itemsPerPage} onChange={(e) => setItemsPerPage(Number(e.target.value))}>
+            {SIZE_OPTIONS.map((value) => (
+              <option value={value}>{value}</option>
+            ))}
+          </Select>
+        </VStack>
+      </HStack>
     </VStack>
   );
 };

diff --git a/src/i18n/langs/en.ts b/src/i18n/langs/en.ts
@@ -24,6 +24,12 @@ const enTranslation = {
   school: {
     'new-school': 'New school',
   },
+  coach: {
+    'new-coach': 'New coach',
+  },
+  teacher: {
+    'new-teacher': 'New teacher',
+  },
   common: {
     actions: 'Actions',
     activate: 'Activate',