From 5a2aaeddd222e4e00fcd19b678a02b66fa8c509e Mon Sep 17 00:00:00 2001 From: polubis Date: Sat, 9 Dec 2023 11:16:41 +0100 Subject: [PATCH 01/10] fix checkbox light theme borders --- system/libs/figa-ui/src/lib/theme-provider/light-theme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/system/libs/figa-ui/src/lib/theme-provider/light-theme.ts b/system/libs/figa-ui/src/lib/theme-provider/light-theme.ts index 03c022f1..d2899110 100644 --- a/system/libs/figa-ui/src/lib/theme-provider/light-theme.ts +++ b/system/libs/figa-ui/src/lib/theme-provider/light-theme.ts @@ -20,11 +20,11 @@ const light: Theme = { }, }, checkbox: { - borderColor: tokens.common.white, + borderColor: tokens.common.black, checked: { bg: tokens.primary[50], borderColor: tokens.primary[50], - color: tokens.common.white, + color: tokens.common.black, }, }, radio: { From 6305d03c0c4a9140c10e8487a08f31cd01ebc754 Mon Sep 17 00:00:00 2001 From: polubis Date: Sat, 9 Dec 2023 11:18:13 +0100 Subject: [PATCH 02/10] fix issue with exception during articles loading --- .../store-factories/articles/create-articles-store.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/system/apps/blog/store-factories/articles/create-articles-store.ts b/system/apps/blog/store-factories/articles/create-articles-store.ts index 6e8fe7a1..9b09d65a 100644 --- a/system/apps/blog/store-factories/articles/create-articles-store.ts +++ b/system/apps/blog/store-factories/articles/create-articles-store.ts @@ -222,7 +222,16 @@ const createArticlesStore = () => { initialParams: params, }); }, - change: (params) => change.next(params), + change: (params) => { + const state = selectors.state(); + + if (state.is === 'changing_fail') { + actions.reset(); + return; + } + + change.next(params); + }, reset: () => { const state = selectors.state(); From 5ef6e9b2ed1e336b8abfc4e98427b73a4444897d Mon Sep 17 00:00:00 2001 From: polubis Date: Sat, 9 Dec 2023 11:22:39 +0100 Subject: [PATCH 03/10] Fix articles filters style and show status select when signed in --- .../articles-screen/articles-screen.tsx | 34 +++++++++++++------ 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/system/apps/blog/components/articles-screen/articles-screen.tsx b/system/apps/blog/components/articles-screen/articles-screen.tsx index deb7445a..6c17c706 100644 --- a/system/apps/blog/components/articles-screen/articles-screen.tsx +++ b/system/apps/blog/components/articles-screen/articles-screen.tsx @@ -28,6 +28,7 @@ import { ScrollState, useScroll } from '@system/figa-hooks'; import { Lang } from '@system/blog-api-models'; import type { ArticlesStore } from '../../store-factories/articles'; import { auth_store_selectors } from '../../store/auth'; +import { SignedInOnly } from '../../core'; const Placeholder = styled.div` background: ${(props) => props.theme.box.filled.bg}; @@ -143,6 +144,18 @@ const Filters = styled.div` width: 100%; background: ${(props) => props.theme.box.outlined.borderColor}; } + + .articles-screen-filters-content { + padding: ${tokens.spacing[250]}; + + & > *:not(:last-child) { + margin-bottom: ${tokens.spacing[200]}; + } + + & > *:last-child { + margin-top: ${tokens.spacing[450]}; + } + } `; const makeUrl = (lang: Lang, article: ArticlesStore.Article): string => { @@ -229,22 +242,21 @@ const ArticlesScreen = (props: ArticlesScreenProps) => { - +
actions.change({ Search })} /> - - actions.change({ Status })} - /> - + + + actions.change({ Status })} + /> + + {authorized && ( { Share - +
); From e620f611ea0c14966291ade7fe2acb961c26df30 Mon Sep 17 00:00:00 2001 From: polubis Date: Sat, 9 Dec 2023 11:34:44 +0100 Subject: [PATCH 04/10] change all and yours filters UI --- .../articles-screen/articles-screen.tsx | 51 +++++++++++++------ 1 file changed, 35 insertions(+), 16 deletions(-) diff --git a/system/apps/blog/components/articles-screen/articles-screen.tsx b/system/apps/blog/components/articles-screen/articles-screen.tsx index 6c17c706..d74608dc 100644 --- a/system/apps/blog/components/articles-screen/articles-screen.tsx +++ b/system/apps/blog/components/articles-screen/articles-screen.tsx @@ -1,7 +1,6 @@ import { Box, Button, - Checkbox, Divider, Field, FiltersIcon, @@ -9,7 +8,10 @@ import { L_DOWN, Loader, M_DOWN, + M_UP, Popover, + Tab, + Tabs, VIEWPORT, column, tokens, @@ -27,7 +29,6 @@ import { InfoSection } from '../info-section'; import { ScrollState, useScroll } from '@system/figa-hooks'; import { Lang } from '@system/blog-api-models'; import type { ArticlesStore } from '../../store-factories/articles'; -import { auth_store_selectors } from '../../store/auth'; import { SignedInOnly } from '../../core'; const Placeholder = styled.div` @@ -81,8 +82,8 @@ const Container = styled.div` .articles-content { ${column()} - & > .h6 { - margin-bottom: ${tokens.spacing[250]}; + & > .b1 { + margin: 0 0 ${tokens.spacing[150]} 0; } .articles-screen-tiles { @@ -129,6 +130,14 @@ const Container = styled.div` grid-template-columns: 1fr; } } + + .tabs { + margin: 0 0 ${tokens.spacing[200]} 0; + + @media ${M_UP} { + max-width: 280px; + } + } `; const Filters = styled.div` @@ -142,6 +151,7 @@ const Filters = styled.div` .divider div { width: 100%; + height: ${tokens.spacing[12]}; background: ${(props) => props.theme.box.outlined.borderColor}; } @@ -207,7 +217,6 @@ const PopoverTrigger = ({ }; const ArticlesScreen = (props: ArticlesScreenProps) => { - const authorized = auth_store_selectors.useIsAuthorized(); const { selectors, actions } = props; const state = selectors.useState(); const lang = useLang(); @@ -249,6 +258,7 @@ const ArticlesScreen = (props: ArticlesScreenProps) => { onChange={(Search) => actions.change({ Search })} /> + { /> - {authorized && ( - - actions.change({ yours: !selectors.safeState().params.yours }) - } - /> - )} + { return ( <> - Results ({state.articles.length}) + + + actions.change({ yours: false })} + > + All + + actions.change({ yours: true })} + > + Yours + + + + Results ({state.articles.length})
{state.articles.map((article) => ( {
); - }, [state, lang, actions.reset]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [state, lang]); return ( From 18aeefe4268d1560fb89c0c16708aa57deb94de7 Mon Sep 17 00:00:00 2001 From: polubis Date: Sat, 9 Dec 2023 11:39:24 +0100 Subject: [PATCH 05/10] improve filters change mechanism to avoid active when scrolling down --- .../components/articles-screen/articles-screen.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/system/apps/blog/components/articles-screen/articles-screen.tsx b/system/apps/blog/components/articles-screen/articles-screen.tsx index d74608dc..b5cdd5ba 100644 --- a/system/apps/blog/components/articles-screen/articles-screen.tsx +++ b/system/apps/blog/components/articles-screen/articles-screen.tsx @@ -236,6 +236,17 @@ const ArticlesScreen = (props: ArticlesScreenProps) => { [state] ); + const filtersChanged = useMemo(() => { + if (state.is === 'idle') { + return false; + } + + const { CurrentPage, ...initialParams } = state.initialParams; + const { CurrentPage: cp, ...params } = state.params; + + return !isEqual(initialParams, params); + }, [state]); + const filters = ( @@ -366,7 +377,7 @@ const ArticlesScreen = (props: ArticlesScreenProps) => { return ( - + Articles {filters} From 6ebc0d0c4d8ee7ed7c48cfde049ce5b663ccfe36 Mon Sep 17 00:00:00 2001 From: polubis Date: Sat, 9 Dec 2023 11:46:24 +0100 Subject: [PATCH 06/10] fix outline when clicking navigation button for article tile --- system/apps/blog/components/articles-grid/article-tile.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/system/apps/blog/components/articles-grid/article-tile.tsx b/system/apps/blog/components/articles-grid/article-tile.tsx index 1bd2122e..0e25f93a 100644 --- a/system/apps/blog/components/articles-grid/article-tile.tsx +++ b/system/apps/blog/components/articles-grid/article-tile.tsx @@ -27,11 +27,9 @@ const avatar_size = { const Container = styled.div` background: 1px solid ${(props) => props.theme.box.outlined.bg}; - overflow: hidden; .article-tile-flipped-container { ${column()} - padding: ${tokens.spacing[200]}; height: 100%; .detail { From 755ae014d5ddd635da0b1faedf7e365ee34a6f2c Mon Sep 17 00:00:00 2001 From: polubis Date: Sat, 9 Dec 2023 11:59:18 +0100 Subject: [PATCH 07/10] fix article columns size --- .../components/articles-grid/article-tile.tsx | 2 -- .../articles-screen/articles-screen.tsx | 18 +++++++++++------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/system/apps/blog/components/articles-grid/article-tile.tsx b/system/apps/blog/components/articles-grid/article-tile.tsx index 0e25f93a..1ac06603 100644 --- a/system/apps/blog/components/articles-grid/article-tile.tsx +++ b/system/apps/blog/components/articles-grid/article-tile.tsx @@ -26,8 +26,6 @@ const avatar_size = { }; const Container = styled.div` - background: 1px solid ${(props) => props.theme.box.outlined.bg}; - .article-tile-flipped-container { ${column()} height: 100%; diff --git a/system/apps/blog/components/articles-screen/articles-screen.tsx b/system/apps/blog/components/articles-screen/articles-screen.tsx index b5cdd5ba..ff4d4a28 100644 --- a/system/apps/blog/components/articles-screen/articles-screen.tsx +++ b/system/apps/blog/components/articles-screen/articles-screen.tsx @@ -88,8 +88,8 @@ const Container = styled.div` .articles-screen-tiles { display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: ${tokens.spacing[250]}; + grid-template-columns: 32.5% 32.5% 32.5%; + gap: ${tokens.spacing[300]} 2.5%; & > * { height: 400px; @@ -99,21 +99,24 @@ const Container = styled.div` @media ${L_DOWN} { .articles-content .articles-screen-tiles { - grid-template-columns: 1fr 1fr; + grid-template-columns: 49% 49%; + gap: ${tokens.spacing[300]} 2%; } } @media (max-width: 940px) { .articles-content .articles-screen-tiles { - grid-template-columns: 1fr; + grid-template-columns: 100%; + gap: ${tokens.spacing[200]}; } } @media (max-width: 740px) { - grid-template-columns: 1fr; + grid-template-columns: 100%; .articles-content .articles-screen-tiles { - grid-template-columns: 1fr 1fr; + grid-template-columns: 49% 49%; + gap: ${tokens.spacing[300]} 2%; } .articles-filters { @@ -127,7 +130,8 @@ const Container = styled.div` @media ${M_DOWN} { .articles-content .articles-screen-tiles { - grid-template-columns: 1fr; + grid-template-columns: 100%; + gap: ${tokens.spacing[300]}; } } From fd8b575cac9be984ceb345cb19dee3b3c3a9061b Mon Sep 17 00:00:00 2001 From: polubis Date: Sat, 9 Dec 2023 12:02:58 +0100 Subject: [PATCH 08/10] disable filters active when yours changed --- .../apps/blog/components/articles-screen/articles-screen.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/system/apps/blog/components/articles-screen/articles-screen.tsx b/system/apps/blog/components/articles-screen/articles-screen.tsx index ff4d4a28..d2af9661 100644 --- a/system/apps/blog/components/articles-screen/articles-screen.tsx +++ b/system/apps/blog/components/articles-screen/articles-screen.tsx @@ -245,8 +245,8 @@ const ArticlesScreen = (props: ArticlesScreenProps) => { return false; } - const { CurrentPage, ...initialParams } = state.initialParams; - const { CurrentPage: cp, ...params } = state.params; + const { CurrentPage, yours, ...initialParams } = state.initialParams; + const { CurrentPage: cp, yours: y, ...params } = state.params; return !isEqual(initialParams, params); }, [state]); From 51fecf39a8670b6f6943fdfd8beb840eaa1f76ed Mon Sep 17 00:00:00 2001 From: polubis Date: Sat, 9 Dec 2023 12:10:05 +0100 Subject: [PATCH 09/10] move theme change to other place --- .../components/main-layout/main-layout.tsx | 18 ------- .../components/main-layout/user-section.tsx | 49 +++++++++++++++++-- 2 files changed, 45 insertions(+), 22 deletions(-) diff --git a/system/apps/blog/components/main-layout/main-layout.tsx b/system/apps/blog/components/main-layout/main-layout.tsx index 1cb83296..04a82f44 100644 --- a/system/apps/blog/components/main-layout/main-layout.tsx +++ b/system/apps/blog/components/main-layout/main-layout.tsx @@ -19,9 +19,6 @@ import { ArticlesSearchIcon, BottomNavItem, PlusCircleIcon, - useThemeProvider, - SunIcon, - HalfMoonIcon, TopNavItem, column, } from '@system/figa-ui'; @@ -81,7 +78,6 @@ const LogoWrapper = styled.div` const MainLayout = ({ children, sidebar, offPadding }: MainLayoutProps) => { const lang = useLang(); - const theme = useThemeProvider(); const pathname = usePathname(); const [, { toTop }] = useScrollTo(); @@ -112,13 +108,6 @@ const MainLayout = ({ children, sidebar, offPadding }: MainLayoutProps) => { Create - - theme.setTheme(theme.key === 'dark' ? 'light' : 'dark') - } - > - Theme {theme.key === 'dark' ? : } - } bottomNav={ @@ -144,13 +133,6 @@ const MainLayout = ({ children, sidebar, offPadding }: MainLayoutProps) => { active={pathname === `/${lang}/articles-creator`} /> - : } - text="Theme" - onClick={() => - theme.setTheme(theme.key === 'dark' ? 'light' : 'dark') - } - /> } sidebar={sidebar} diff --git a/system/apps/blog/components/main-layout/user-section.tsx b/system/apps/blog/components/main-layout/user-section.tsx index dbcd0d11..d8a2a996 100644 --- a/system/apps/blog/components/main-layout/user-section.tsx +++ b/system/apps/blog/components/main-layout/user-section.tsx @@ -1,4 +1,11 @@ -import { Box, TopNavItem } from '@system/figa-ui'; +import { + Box, + Button, + HalfMoonIcon, + SunIcon, + TopNavItem, + useThemeProvider, +} from '@system/figa-ui'; import { Link } from '../link'; import { useLang } from '../../dk'; import { useAuthStore } from '../../store/auth'; @@ -9,22 +16,47 @@ const UserSection = () => { const { is } = useAuthStore(); const pathname = usePathname(); const lang = useLang(); + const theme = useThemeProvider(); if (is === 'idle') { return ( - + Sign Up Sign In + ); } if (is === 'authorized') { - return ; + return ( + + + + + ); } return ( - + Sign Up @@ -35,6 +67,15 @@ const UserSection = () => { Sign In + ); }; From 965b5378fc05baf97252d5a86e8c7d905033ae07 Mon Sep 17 00:00:00 2001 From: polubis Date: Sat, 9 Dec 2023 12:26:29 +0100 Subject: [PATCH 10/10] add articles reset when unauthorized --- system/apps/blog-e2e/src/e2e/articles-filtering.cy.ts | 2 +- system/apps/blog-e2e/src/e2e/sign-in.cy.ts | 2 +- system/apps/blog/store/auth/actions.ts | 4 ++++ system/apps/blog/store/sign-out/actions.ts | 2 -- system/apps/blog/store/sign-out/store.test.ts | 5 ----- 5 files changed, 6 insertions(+), 9 deletions(-) diff --git a/system/apps/blog-e2e/src/e2e/articles-filtering.cy.ts b/system/apps/blog-e2e/src/e2e/articles-filtering.cy.ts index 990c816f..a22bcce9 100644 --- a/system/apps/blog-e2e/src/e2e/articles-filtering.cy.ts +++ b/system/apps/blog-e2e/src/e2e/articles-filtering.cy.ts @@ -7,6 +7,6 @@ describe('Articles filtering works when: ', () => { it('not signed in user visits your articles page and session expiration section is displayed', () => { Given('System mocked endpoint', 'getRecommendedArticles') .And('System sets page as', '/en/articles') - .Then('I not see text', 'Show your articles'); + .Then('I not see text', 'Yours', 'All') }); }); diff --git a/system/apps/blog-e2e/src/e2e/sign-in.cy.ts b/system/apps/blog-e2e/src/e2e/sign-in.cy.ts index 091b2ef5..2740365f 100644 --- a/system/apps/blog-e2e/src/e2e/sign-in.cy.ts +++ b/system/apps/blog-e2e/src/e2e/sign-in.cy.ts @@ -25,7 +25,7 @@ describe('Sign in works when: ', () => { 'Signed in' ) .And('Im on page', '/en/articles') - .When('I click checkbox', 'Show your articles') + .When('I click tab', 'Yours') .Then('System recieved response from endpoint', 'getYourArticles') .When('I go back') .Then( diff --git a/system/apps/blog/store/auth/actions.ts b/system/apps/blog/store/auth/actions.ts index 820e0b42..4fa6890d 100644 --- a/system/apps/blog/store/auth/actions.ts +++ b/system/apps/blog/store/auth/actions.ts @@ -1,6 +1,8 @@ import { type AuthStore } from './defs'; import { useAuthStore } from './store'; import { authStorage } from './core'; +import { articles_store_actions } from '../articles'; +import { sign_in_store_actions } from '../sign-in'; const { setState } = useAuthStore; @@ -26,6 +28,8 @@ const auth_store_actions: AuthStore.Actions = { unauthorize: () => { authStorage.set('user', null); useAuthStore.setState({ is: 'unauthorized', user: null }); + articles_store_actions.reset(); + sign_in_store_actions.reset(); }, }; diff --git a/system/apps/blog/store/sign-out/actions.ts b/system/apps/blog/store/sign-out/actions.ts index 3761ddfc..238080b8 100644 --- a/system/apps/blog/store/sign-out/actions.ts +++ b/system/apps/blog/store/sign-out/actions.ts @@ -2,7 +2,6 @@ import { getError, signOut } from '@system/blog-api'; import { type SignOutStore } from './defs'; import { useSignOutStore } from './store'; import { auth_store_actions } from '../auth'; -import { sign_in_store_actions } from '../sign-in'; const { setState } = useSignOutStore; @@ -18,7 +17,6 @@ const sign_out_store_actions: SignOutStore.Actions = { await signOut(); auth_store_actions.unauthorize(); - sign_in_store_actions.reset(); set({ is: 'ok' }); } catch (error: unknown) { diff --git a/system/apps/blog/store/sign-out/store.test.ts b/system/apps/blog/store/sign-out/store.test.ts index 00be5c36..b4137571 100644 --- a/system/apps/blog/store/sign-out/store.test.ts +++ b/system/apps/blog/store/sign-out/store.test.ts @@ -4,13 +4,11 @@ import { signOut, getError } from '@system/blog-api'; import { storeFixture } from '../test-utils'; import { mockResponseError } from '@system/blog-api-mocks'; import { auth_store_actions } from '../auth'; -import { sign_in_store_actions } from '../sign-in'; import type { SignOutStore } from './defs'; import { sign_out_store_actions } from './actions'; jest.mock('@system/blog-api'); jest.mock('../auth'); -jest.mock('../sign-in'); describe('Allows to sign out user when: ', () => { afterEach(() => { @@ -22,7 +20,6 @@ describe('Allows to sign out user when: ', () => { (signOut as jest.Mock).mockImplementation(() => Promise.resolve()); (auth_store_actions.unauthorize as jest.Mock).mockImplementation(jest.fn()); - (sign_in_store_actions.reset as jest.Mock).mockImplementation(jest.fn()); expect(result.current.is).toBe('idle'); @@ -37,7 +34,6 @@ describe('Allows to sign out user when: ', () => { }); expect(auth_store_actions.unauthorize).toHaveBeenCalledTimes(1); - expect(sign_in_store_actions.reset).toHaveBeenCalledTimes(1); expect(result.current.is).toBe('ok'); restore(); @@ -64,7 +60,6 @@ describe('Allows to sign out user when: ', () => { }); expect(auth_store_actions.unauthorize).not.toHaveBeenCalled(); - expect(sign_in_store_actions.reset).not.toHaveBeenCalled(); expect(result.current.is).toBe('fail'); expect((result.current as SignOutStore.Fail).error).toEqual( mockResponseError()