freeze admin bounty overview section

frontend/app/package.json

@@ -176,6 +176,7 @@
     "@craco/craco": "^7.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^7.1.2",
     "@types/dateformat": "^3.0.1",
     "@types/jest": "^24.9.1",
@@ -200,4 +201,4 @@
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.2"
   }
-}
+}

frontend/app/src/hooks/__tests__/useInViewport.spec.ts

@@ -0,0 +1,57 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useInViewPort } from 'hooks/useInViewport';
+import { IntersectionOptions } from 'react-intersection-observer';
+
+const defaultOptions: IntersectionOptions = {};
+
+describe('useInViewport hook', () => {
+  interface Window {
+    IntersectionObserver: unknown;
+  }
+
+  const prepareForTesting = (isIntersecting: boolean): void => {
+    const mockedIntersectionObserver = jest.fn((callback: any) => {
+      callback([{ isIntersecting }]);
+
+      return {
+        observe: jest.fn(),
+        unobserve: jest.fn()
+      };
+    });
+
+    (window as Window).IntersectionObserver = mockedIntersectionObserver;
+  };
+
+  it('should initialize the inView state to false', () => {
+    prepareForTesting(false);
+
+    const { result } = renderHook(() => useInViewPort(defaultOptions));
+    expect(result.current[0]).toBe(false);
+  });
+
+  it('should not detect element when reference is not connected', () => {
+    prepareForTesting(false);
+
+    const { result } = renderHook(() => useInViewPort(defaultOptions));
+    const [isVisible, ref] = result.current;
+
+    expect(ref.current).toBe(null);
+    expect(isVisible).toBe(false);
+  });
+
+  it('should detect element after scroll', () => {
+    prepareForTesting(true);
+
+    const element = document.createElement('div');
+
+    const { result } = renderHook(() => useInViewPort(defaultOptions));
+
+    const [isVisible, ref] = result.current;
+
+    ref.current = element;
+
+    renderHook(() => useInViewPort(defaultOptions));
+
+    expect(isVisible).toBe(true);
+  });
+});

frontend/app/src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useFuse';
 export * from './useScroll';
 export * from './uiHooks';
 export * from './usePerson';
+export * from './useInViewport';

frontend/app/src/hooks/useInViewport.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef, useState } from 'react';
+import { IntersectionOptions } from 'react-intersection-observer';
+
+export const useInViewPort = (options: IntersectionOptions) => {
+  const [inView, setInView] = useState<boolean>(false);
+  const elementRef = useRef<HTMLElement | null>(null);
+
+  const callback = (entries: IntersectionObserverEntry[]) => {
+    const [entry] = entries;
+    setInView(entry.isIntersecting);
+  };
+
+  useEffect(() => {
+    // checking support and blocking execution on server-side
+    if (!(typeof window !== 'undefined') && !('IntersectionObserver' in window)) return;
+
+    const observer = new IntersectionObserver(callback, options);
+    if (elementRef.current) observer.observe(elementRef.current);
+
+    return () => observer.disconnect();
+  }, [options]);
+
+  return [inView, elementRef] as const;
+};

frontend/app/src/pages/superadmin/header/HeaderStyles.tsx

@@ -19,6 +19,11 @@ export const AlternateWrapper = styled.div`
   justify-content: space-between;
   align-items: center;
   flex-shrink: 0;
+  position: fixed;
+  top: 62px;
+  left: 0;
+  width: 100%;
+  z-index: 9999999;
 `;
 export const LeftWrapper = styled.div`
   display: flex;

frontend/app/src/pages/superadmin/index.tsx

@@ -8,6 +8,7 @@ import styled from 'styled-components';
 import { BountyMetrics, BountyStatus } from 'store/main';
 import { useStores } from 'store';
 import moment from 'moment';
+import { useInViewPort } from 'hooks';
 import { MyTable } from './tableComponent';
 import { Header } from './header';
 import { Statistics } from './statistics';
@@ -18,6 +19,7 @@ const Container = styled.body`
   overflow-y: auto; /* Enable vertical scrolling */
   align-items: center;
   margin: 0px auto;
+  padding: 4.5rem 0;
 `;
 
 const LoaderContainer = styled.div`
@@ -50,6 +52,11 @@ export const SuperAdmin = () => {
   const [endDate, setEndDate] = useState(moment().unix());
   const [startDate, setStartDate] = useState(moment().subtract(30, 'days').unix());
 
+  const [inView, ref] = useInViewPort({
+    rootMargin: '0px',
+    threshold: 0.25
+  });
+
   // const getIsSuperAdmin = useCallback(async () => {
   //   const admin = await main.getSuperAdmin();
   //   setIsSuperAdmin(admin);
@@ -128,8 +135,7 @@ export const SuperAdmin = () => {
             setStartDate={setStartDate}
             setEndDate={setEndDate}
           />
-
-          <Statistics metrics={bountyMetrics} />
+          <Statistics freezeHeaderRef={ref} metrics={bountyMetrics} />
           {loading ? (
             <LoaderContainer>
               <EuiLoadingSpinner size="l" />
@@ -139,6 +145,7 @@ export const SuperAdmin = () => {
               bounties={bounties}
               startDate={startDate}
               endDate={endDate}
+              headerIsFrozen={inView}
               bountyStatus={bountyStatus}
               setBountyStatus={setBountyStatus}
               dropdownValue={dropdownValue}

frontend/app/src/pages/superadmin/statistics/index.tsx

@@ -28,11 +28,12 @@ import {
 
 interface StatisticsProps {
   metrics: BountyMetrics | undefined;
+  freezeHeaderRef?: React.MutableRefObject<HTMLElement | null>;
 }
 
-export const Statistics = ({ metrics }: StatisticsProps) => (
+export const Statistics = ({ freezeHeaderRef, metrics }: StatisticsProps) => (
   <>
-    <Wrapper>
+    <Wrapper ref={freezeHeaderRef}>
       <Card>
         <TitleWrapper>
           <img className="BountiesSvg" src={copy} alt="" width="16.508px" height="20px" />

frontend/app/src/pages/superadmin/tableComponent/TableComponent.Spec.tsx

@@ -64,82 +64,82 @@ type Bounty = {
 };
 
 it('renders elements from TableProps in the document', () => {
-  const { getByText } = render(<MyTable bounties={mockBounties} />);
+  const { getByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getByText(mockBounties[0].title)).toBeInTheDocument();
 });
 
 it('renders "Sort By:" in the document', () => {
-  const { getByText } = render(<MyTable bounties={mockBounties} />);
+  const { getByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getByText('Sort By:')).toBeInTheDocument();
 });
 
 it('renders "Date" twice in the document', () => {
-  const { getAllByText } = render(<MyTable bounties={mockBounties} />);
+  const { getAllByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getAllByText('Date')).toHaveLength(2);
 });
 
 it('renders "Assignee" twice in the document', () => {
-  const { getAllByText } = render(<MyTable bounties={mockBounties} />);
+  const { getAllByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getAllByText('Assignee')).toHaveLength(2);
 });
 
 it('renders "Status" twice in the document', () => {
-  const { getAllByText } = render(<MyTable bounties={mockBounties} />);
+  const { getAllByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getAllByText('Status')).toHaveLength(2);
 });
 
 it('renders "Status:" in the document', () => {
-  const { getByText } = render(<MyTable bounties={mockBounties} />);
+  const { getByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getByText('Status:')).toBeInTheDocument();
 });
 
 it('renders "All" in the document', () => {
-  const { getByText } = render(<MyTable bounties={mockBounties} />);
+  const { getByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getByText('All')).toBeInTheDocument();
 });
 
 it('renders "Open" in the document', () => {
-  const { getByText } = render(<MyTable bounties={mockBounties} />);
+  const { getByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getByText('Open')).toBeInTheDocument();
 });
 
 it('renders "In Progress" in the document', () => {
-  const { getByText } = render(<MyTable bounties={mockBounties} />);
+  const { getByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getByText('In Progress')).toBeInTheDocument();
 });
 
 it('renders "Completed" in the document', () => {
-  const { getByText } = render(<MyTable bounties={mockBounties} />);
+  const { getByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getByText('Completed')).toBeInTheDocument();
 });
 
 it('renders "Bounty" in the document', () => {
-  const { getByText } = render(<MyTable bounties={mockBounties} />);
+  const { getByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getByText('Bounty')).toBeInTheDocument();
 });
 
 it('renders "#DTGP" in the document', () => {
-  const { getByText } = render(<MyTable bounties={mockBounties} />);
+  const { getByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getByText('#DTGP')).toBeInTheDocument();
 });
 
 it('renders "Provider" in the document', () => {
-  const { getByText } = render(<MyTable bounties={mockBounties} />);
+  const { getByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getByText('Provider')).toBeInTheDocument();
 });
 
 it('renders "Organization" in the document', () => {
-  const { getByText } = render(<MyTable bounties={mockBounties} />);
+  const { getByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getByText('Organization')).toBeInTheDocument();
 });
 
 it('renders each element in the table in the document', () => {
-  const { getByText } = render(<MyTable bounties={mockBounties} />);
+  const { getByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   expect(getByText(mockBounties[0].title)).toBeInTheDocument();
 });
 
 it('renders each element in the table in the document', () => {
-  const { getByText } = render(<MyTable bounties={mockBounties} />);
+  const { getByText } = render(<MyTable bounties={mockBounties} headerIsFrozen={false} />);
   mockBounties.forEach((bounty: Bounty) => {
     expect(getByText(bounty.title)).toBeInTheDocument();
     expect(getByText(bounty.date)).toBeInTheDocument();

frontend/app/src/pages/superadmin/tableComponent/TableStyle.tsx

@@ -1,16 +1,49 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+
+type FreezeProps = {
+  freeze: boolean;
+};
+
+const applyFreezeHeaderStyles = ({ freeze = false }: FreezeProps) =>
+  freeze &&
+  css`
+    position: fixed;
+    top: 124px;
+    left: 0;
+    padding: 0 2.5rem 0 1rem;
+    background-color: #fff;
+    z-index: 99999999;
+    width: 100%;
+    border-radius: 0;
+    box-shadow: none;
+  `;
+
+const applyFreezeTableHeaderStyles = ({ freeze = false }: FreezeProps) =>
+  freeze &&
+  css`
+    position: sticky;
+    top: 50px;
+    left: 0;
+    width: 100%;
+    background-color: #fff;
+    z-index: 99999999;
+    box-shadow:
+      inset 0 1px 0 #ddd,
+      inset 0 -1px 0 #ddd;
+  `;
 
 export const TableContainer = styled.div`
   background-color: #fff;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 `;
 
-export const HeaderContainer = styled.div`
+export const HeaderContainer = styled.div<FreezeProps>`
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   padding-right: 40px;
   padding-left: 20px;
+  ${applyFreezeHeaderStyles}
 `;
 
 export const PaginatonSection = styled.div`
@@ -33,11 +66,12 @@ export const Table = styled.table`
   border-collapse: collapse;
 `;
 
-export const TableRow = styled.tr`
+export const TableRow = styled.tr<FreezeProps>`
   border: 1px solid #ddd;
   &:nth-child(even) {
     background-color: #f9f9f9;
   }
+  ${applyFreezeTableHeaderStyles}
 `;
 
 export const TableDataRow = styled.tr`

frontend/app/src/pages/superadmin/tableComponent/index.tsx

@@ -58,6 +58,7 @@ interface TableProps {
   bounties: Bounty[];
   startDate?: number;
   endDate?: number;
+  headerIsFrozen?: boolean;
   bountyStatus?: BountyStatus;
   setBountyStatus?: React.Dispatch<React.SetStateAction<BountyStatus>>;
   dropdownValue?: string;
@@ -151,6 +152,7 @@ export const MyTable = ({
   bountyStatus,
   setBountyStatus,
   dropdownValue,
+  headerIsFrozen,
   setDropdownValue
 }: TableProps) => {
   const [currentPage, setCurrentPage] = useState(1);
@@ -282,7 +284,7 @@ export const MyTable = ({
   const bountiesLength = bounties && bounties.length;
   return (
     <>
-      <HeaderContainer>
+      <HeaderContainer freeze={!headerIsFrozen}>
         <Header>
           <BountyHeader>
             <img src={copygray} alt="" width="16.508px" height="20px" />
@@ -315,7 +317,7 @@ export const MyTable = ({
       </HeaderContainer>
       <TableContainer>
         <Table>
-          <TableRow>
+          <TableRow freeze={!headerIsFrozen}>
             <TableHeaderData>Bounty</TableHeaderData>
             <TableHeaderData>Date</TableHeaderData>
             <TableHeaderDataCenter>#DTGP</TableHeaderDataCenter>