From bdb8fc9d31d248c9c36ade93524bd2701c3339b2 Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Tue, 27 Feb 2024 23:09:52 +0500 Subject: [PATCH 1/6] center the loading spinner on pages --- src/pages/bots/Body.tsx | 4 +- src/pages/tickets/style.ts | 3 +- src/pages/tribes/Body.tsx | 3 +- src/pages/tribes/__tests__/Body.spec.tsx | 28 ++++++++++++++ src/people/main/Body.tsx | 47 ++++++++++++++---------- src/people/main/__tests__/Body.spec.tsx | 41 +++++++++++++++------ 6 files changed, 89 insertions(+), 37 deletions(-) diff --git a/src/pages/bots/Body.tsx b/src/pages/bots/Body.tsx index 100427eb..5d17669a 100644 --- a/src/pages/bots/Body.tsx +++ b/src/pages/bots/Body.tsx @@ -39,12 +39,12 @@ const BotText = styled.div` const Body = styled.div` flex: 1; - height: calc(100% - 105px); - padding-bottom: 80px; + height: calc(100vh - 60px); width: 100%; overflow: auto; display: flex; flex-direction: column; + align-items: center; `; const Label = styled.div` font-family: Roboto; diff --git a/src/pages/tickets/style.ts b/src/pages/tickets/style.ts index cd8fb03b..514ca555 100644 --- a/src/pages/tickets/style.ts +++ b/src/pages/tickets/style.ts @@ -2,11 +2,12 @@ import styled from 'styled-components'; export const Body = styled.div` flex: 1; - height: calc(100% - 105px); + height: calc(100vh - 60px); width: 100%; overflow: auto; display: flex; flex-direction: column; + align-items: center; `; export const OrgBody = styled.div` diff --git a/src/pages/tribes/Body.tsx b/src/pages/tribes/Body.tsx index cb2c2e7f..7cd251e3 100644 --- a/src/pages/tribes/Body.tsx +++ b/src/pages/tribes/Body.tsx @@ -22,7 +22,6 @@ import Tribe from './Tribe'; const Body = styled.div` flex: 1; height: calc(100vh - 60px); - // padding-bottom:80px; width: 100%; overflow: auto; background: ${colors.dark.tribesBackground}; @@ -120,7 +119,7 @@ function BodyComponent() { if (loading) { return ( - + ); diff --git a/src/pages/tribes/__tests__/Body.spec.tsx b/src/pages/tribes/__tests__/Body.spec.tsx index 27e13542..543fb171 100644 --- a/src/pages/tribes/__tests__/Body.spec.tsx +++ b/src/pages/tribes/__tests__/Body.spec.tsx @@ -143,4 +143,32 @@ describe('Tribes Body Component', () => { }); }); }); + + test('content element has justifyContent and alignItems centered', async () => { + (useStores as jest.Mock).mockReturnValue({ + main: { + tribes: [], + getTribes: jest.fn() + }, + ui: { + peoplePageNumber: 1, + searchText: 'abc', + tags: [] + } + }); + + (useFuse as jest.Mock).mockReturnValue([]); + + const { getByTestId } = render(); + + const contentElement = getByTestId('content'); + + expect(contentElement).toBeInTheDocument(); + + const styles = window.getComputedStyle(contentElement); + const { justifyContent, alignItems } = styles; + + expect(justifyContent).toEqual('center'); + expect(alignItems).toEqual('center'); + }); }); diff --git a/src/people/main/Body.tsx b/src/people/main/Body.tsx index 720ca781..ea9e3743 100644 --- a/src/people/main/Body.tsx +++ b/src/people/main/Body.tsx @@ -18,7 +18,7 @@ import { usePeopleFilteredSearch } from './usePeopleFilteredSearch'; const color = colors['light']; const Body = styled.div<{ isMobile: boolean }>` flex: 1; - height: ${(p: any) => (p.isMobile ? 'calc(100% - 105px)' : 'calc(100% - 65px)')}; + height: ${(p: any) => (p.isMobile ? 'calc(100% - 105px)' : 'calc(100vh - 60px)')}; background: ${(p: any) => (p.isMobile ? undefined : color.grayish.G950)}; width: 100%; overflow-x: hidden; @@ -94,9 +94,20 @@ function BodyComponent() { history.push(`/p/${uuid}`); } + if (isLoading) { + return ( + + + + ); + } + return ( { handleScroll(e); @@ -118,25 +129,21 @@ function BodyComponent() { />
- {isLoading ? ( - - ) : ( - <> - {main.people.map((p: Person) => ( - - ))} + <> + {main.people.map((p: Person) => ( + + ))} - {!main.people.length && } - - - )} + {!main.people.length && } + +
{openStartUpModel && ( diff --git a/src/people/main/__tests__/Body.spec.tsx b/src/people/main/__tests__/Body.spec.tsx index bad3f433..b84344b0 100644 --- a/src/people/main/__tests__/Body.spec.tsx +++ b/src/people/main/__tests__/Body.spec.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen, waitFor, act } from '@testing-library/react'; import '@testing-library/jest-dom'; import nock from 'nock'; import { user } from '../../../__test__/__mockData__/user'; @@ -15,9 +15,9 @@ describe('BodyComponent', () => { .reply(200, {}); it('content element has equal left and right margins', () => { - render(); + const { getByTestId } = render(); - const contentElement = screen.getByTestId('content'); + const contentElement = getByTestId('content'); expect(contentElement).toBeInTheDocument(); @@ -28,17 +28,34 @@ describe('BodyComponent', () => { expect(marginLeft).toEqual(marginRight); }); - it('filter is in viewport when device is mobile', () => { - Object.assign(window, { innerWidth: 375 }); + it('content element has justifyContent and alignItems centered', async () => { + const { getByTestId } = render(); + + const contentElement = getByTestId('content'); - render(); - const filterNode = screen.getByTestId('PeopleHeader'); + expect(contentElement).toBeInTheDocument(); - const { left, right, bottom, top, width, height } = filterNode.getBoundingClientRect(); + const styles = window.getComputedStyle(contentElement); + const { justifyContent, alignItems } = styles; - expect(left).toBeGreaterThanOrEqual(0); - expect(top).toBeGreaterThanOrEqual(0); - expect(right - width).toBeGreaterThanOrEqual(0); - expect(bottom - height).toBeGreaterThanOrEqual(0); + expect(justifyContent).toEqual('center'); + expect(alignItems).toEqual('center'); + }); + + it('filter is in viewport when device is mobile', async () => { + Object.assign(window, { innerWidth: 375 }); + act(async () => { + render(); + await waitFor(() => { + const filterNode = screen.getByTestId('PeopleHeader'); + + const { left, right, bottom, top, width, height } = filterNode.getBoundingClientRect(); + + expect(left).toBeGreaterThanOrEqual(0); + expect(top).toBeGreaterThanOrEqual(0); + expect(right - width).toBeGreaterThanOrEqual(0); + expect(bottom - height).toBeGreaterThanOrEqual(0); + }); + }); }); }); From 5edcdfc9b02edc9fd9824bf16fd58cbcb2ff29bb Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Fri, 1 Mar 2024 05:33:56 +0500 Subject: [PATCH 2/6] fixed tribes loading issue --- src/pages/tribes/Body.tsx | 38 +++++++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/src/pages/tribes/Body.tsx b/src/pages/tribes/Body.tsx index 7cd251e3..e900a59d 100644 --- a/src/pages/tribes/Body.tsx +++ b/src/pages/tribes/Body.tsx @@ -44,6 +44,29 @@ const StyledTagPopupWrapper = styled.div` } `; +const H = styled.div` + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 37px; + letter-spacing: 0.1em; + text-align: center; + + font-family: Roboto; + font-style: normal; + line-height: 26px; + display: flex; + align-items: center; + text-align: center; + + /* Primary Text 1 */ + + color: #292c33; + letter-spacing: 0px; + color: rgb(60, 63, 65); +`; + + function BodyComponent() { const { main, ui } = useStores(); const [selected, setSelected] = useState(''); @@ -242,7 +265,20 @@ function BodyComponent() { )) ) : ( - + <> +
+ No results +
+ )} From 82ce23f4febd460065b2c97550d19b0e61c51c2b Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Fri, 1 Mar 2024 05:36:58 +0500 Subject: [PATCH 3/6] fixed prettier issue --- src/pages/tribes/Body.tsx | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/pages/tribes/Body.tsx b/src/pages/tribes/Body.tsx index e900a59d..55b16b3a 100644 --- a/src/pages/tribes/Body.tsx +++ b/src/pages/tribes/Body.tsx @@ -66,7 +66,6 @@ const H = styled.div` color: rgb(60, 63, 65); `; - function BodyComponent() { const { main, ui } = useStores(); const [selected, setSelected] = useState(''); @@ -265,20 +264,20 @@ function BodyComponent() { )) ) : ( - <> -
- No results -
- + <> +
+ No results +
+ )} From 68c507d36fbc1268b534809553f411d807a7fce4 Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Fri, 1 Mar 2024 06:14:39 +0500 Subject: [PATCH 4/6] fixed elint error --- src/pages/tribes/Body.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/tribes/Body.tsx b/src/pages/tribes/Body.tsx index 55b16b3a..13bca224 100644 --- a/src/pages/tribes/Body.tsx +++ b/src/pages/tribes/Body.tsx @@ -12,7 +12,6 @@ import { observer } from 'mobx-react-lite'; import { useStores } from '../../store'; import { useIsMobile, usePageScroll } from '../../hooks'; import { SearchTextInput } from '../../components/common'; -import NoResults from '../../people/utils/NoResults'; import PageLoadSpinner from '../../people/utils/PageLoadSpinner'; import { colors } from '../../config/colors'; import tags from './tags'; From daed5620255c61b8ceebbf042d12a4be0e9e4936 Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Fri, 1 Mar 2024 20:20:52 +0500 Subject: [PATCH 5/6] fix styled component --- src/pages/tribes/Body.tsx | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/pages/tribes/Body.tsx b/src/pages/tribes/Body.tsx index 13bca224..56c1ccf3 100644 --- a/src/pages/tribes/Body.tsx +++ b/src/pages/tribes/Body.tsx @@ -65,6 +65,15 @@ const H = styled.div` color: rgb(60, 63, 65); `; +const NoResult = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + margin-top: 20px; +`; + function BodyComponent() { const { main, ui } = useStores(); const [selected, setSelected] = useState(''); @@ -263,20 +272,9 @@ function BodyComponent() { )) ) : ( - <> -
- No results -
- + + No results + )} From 86bb3df2493d0bdf3c98f7cf8843d685312e81f3 Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Fri, 1 Mar 2024 20:27:09 +0500 Subject: [PATCH 6/6] fix styled issue --- src/pages/tribes/Body.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/tribes/Body.tsx b/src/pages/tribes/Body.tsx index 56c1ccf3..30fe7c56 100644 --- a/src/pages/tribes/Body.tsx +++ b/src/pages/tribes/Body.tsx @@ -58,8 +58,6 @@ const H = styled.div` align-items: center; text-align: center; - /* Primary Text 1 */ - color: #292c33; letter-spacing: 0px; color: rgb(60, 63, 65);