🩹 Fix mocked council stages following the Nara upgrade (#4807)

* Fix mocked council stages on following the Nara upgrade * Show responsive styles in stories
Joystream · Mar 14, 2024 · 1f165fe · 1f165fe
1 parent 57517df
commit 1f165fe
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 18 deletions.
diff --git a/packages/ui/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx
@@ -7,6 +7,7 @@ import { createGlobalStyle } from 'styled-components'
 
 import { GlobalModals } from '../src/app/GlobalModals'
 import { GlobalStyle } from '../src/app/providers/GlobalStyle'
+import { ResponsiveProvider } from '../src/common/providers/responsive/provider'
 import { OnBoardingProvider } from '../src/common/providers/onboarding/provider'
 import { NotificationsHolder } from '../src/common/components/page/SideNotification'
 import { TransactionStatus } from '../src/common/components/TransactionStatus/TransactionStatus'
@@ -53,16 +54,18 @@ const RHFDecorator: Decorator = (Story) => {
   )
 }
 
-const ModalDecorator: Decorator = (Story) => (
+const Providers: Decorator = (Story) => (
   <TransactionStatusProvider>
     <ModalContextProvider>
       <OnBoardingProvider>
         <ValidatorContextProvider>
-          <Story />
-          <GlobalModals />
-          <NotificationsHolder>
-            <TransactionStatus />
-          </NotificationsHolder>
+          <ResponsiveProvider>
+            <Story />
+            <GlobalModals />
+            <NotificationsHolder>
+              <TransactionStatus />
+            </NotificationsHolder>
+          </ResponsiveProvider>
         </ValidatorContextProvider>
       </OnBoardingProvider>
     </ModalContextProvider>
@@ -85,7 +88,7 @@ const KeyringDecorator: Decorator = (Story) => {
 }
 
 export const decorators = [
-  ModalDecorator,
+  Providers,
   stylesWrapperDecorator,
   i18nextDecorator,
   RHFDecorator,

diff --git a/packages/ui/src/app/App.stories.tsx b/packages/ui/src/app/App.stories.tsx
@@ -123,8 +123,6 @@ export default {
           : {
               query: {
                 members: { membershipPrice: joy(20) },
-                council: { stage: { stage: { isIdle: true }, changedAt: 123 } },
-                referendum: { stage: {} },
                 staking: {
                   validators: {
                     entries: Object.entries(validators).map(([address, { commission }]) => [

diff --git a/packages/ui/src/app/pages/Election/BlacklistedAccounts/BlacklistedAccounts.stories.tsx b/packages/ui/src/app/pages/Election/BlacklistedAccounts/BlacklistedAccounts.stories.tsx
@@ -23,9 +23,6 @@ export default {
         accounts: { list: allAccounts },
         chain: {
           query: {
-            council: {
-              stage: { stage: { isIdle: true }, changedAt: 123 },
-            },
             referendum: {
               accountsOptedOut: {
                 keys: Array.from({ length: 23 }).map(

diff --git a/packages/ui/src/app/pages/Proposals/ProposalPreview.stories.tsx b/packages/ui/src/app/pages/Proposals/ProposalPreview.stories.tsx
@@ -132,7 +132,6 @@ export default {
             council: {
               budget: joy(1000),
               councilorReward: joy(1),
-              stage: { stage: { isIdle: true }, changedAt: 123 },
             },
             referendum: { stage: {} },
           },

diff --git a/packages/ui/src/council/hooks/useElectionStage.ts b/packages/ui/src/council/hooks/useElectionStage.ts
@@ -26,19 +26,19 @@ export const useElectionStage = (): UseElectionStage => {
 export const electionStageObservable = (api: Api) => {
   const councilObservable = api.query.council.stage().pipe(
     concatMap(({ stage: councilStage, changedAt }): Observable<StageInfo> => {
-      if (councilStage.isIdle) {
+      if (councilStage.isIdle.valueOf()) {
         return of({ stage: 'inactive', changedAt })
-      } else if (councilStage.isAnnouncing) {
+      } else if (councilStage.isAnnouncing.valueOf()) {
         return of({ stage: 'announcing', changedAt })
       }
       return EMPTY
     })
   )
   const referendumObservable = api.query.referendum.stage().pipe(
     concatMap((referendumStage): Observable<StageInfo> => {
-      if (referendumStage.isVoting) {
+      if (referendumStage.isVoting.valueOf()) {
         return of({ stage: 'voting', changedAt: referendumStage.asVoting.started })
-      } else if (referendumStage.isRevealing) {
+      } else if (referendumStage.isRevealing.valueOf()) {
         return of({ stage: 'revealing', changedAt: referendumStage.asRevealing.started })
       }
       return EMPTY

diff --git a/packages/ui/src/mocks/data/proposals.ts b/packages/ui/src/mocks/data/proposals.ts
@@ -245,7 +245,6 @@ export const proposalsPagesChain = (
           budget: councilBudget,
           councilorReward,
           nextRewardPayments,
-          stage: { stage: { isIdle: true }, changedAt: 123 },
         },
         referendum: { stage: {} },
 

diff --git a/packages/ui/src/mocks/providers/api.tsx b/packages/ui/src/mocks/providers/api.tsx
@@ -46,6 +46,8 @@ export const MockApiProvider: FC<MockApiProps> = ({ children, chain }) => {
     const defaultQuery = {
       session: { validators: [] },
       staking: { activeEra: {} },
+      council: { stage: { stage: { isIdle: true, isAnnouncing: false }, changedAt: 123 } },
+      referendum: { stage: { isVoting: false, isRevealing: false } },
     }
     const rpcChain = {
       getBlockHash: createType('BlockHash', BLOCK_HASH),