Added quest/misc individual subscription buttons #360

Signed-off-by: RaenonX <[email protected]>
RaenonX-DL · Jan 19, 2022 · 6d673b9 · 6d673b9
1 parent 0215ec3
commit 6d673b9
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 18 deletions.
diff --git a/src/components/elements/posts/configBar.tsx b/src/components/elements/posts/configBar.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Col from 'react-bootstrap/Col';
+
+import {SubscribeButton, SubscribeButtonProps} from '../common/button/subscribe/main';
+import {RowNoGutter} from '../common/grid/row';
+
+
+type Props = SubscribeButtonProps;
+
+export const PostConfigBar = (props: Props) => {
+  return (
+    <RowNoGutter className="text-end mb-2">
+      <Col>
+        <SubscribeButton
+          {...props}
+          asIcon={false}
+        />
+      </Col>
+    </RowNoGutter>
+  );
+};
diff --git a/src/components/elements/posts/list/page.tsx b/src/components/elements/posts/list/page.tsx
@@ -1,23 +1,22 @@
 import React from 'react';
 
 import {useSession} from 'next-auth/react';
-import Col from 'react-bootstrap/Col';
 
 import {
   ApiResponseCode,
   isFailedResponse,
   SequencedPostInfo,
-  SequencedPostListResponse, SubscriptionKeyConstName,
+  SequencedPostListResponse,
+  SubscriptionKeyConstName,
 } from '../../../../api-def/api';
 import {useI18n} from '../../../../i18n/hook';
 import {FunctionFetchPostList} from '../../../../utils/services/api';
 import {AdsPostList} from '../../common/ads/main';
-import {SubscribeButton} from '../../common/button/subscribe/main';
 import {SubscribeButtonState} from '../../common/button/subscribe/type';
 import {isNotFetched, useFetchState} from '../../common/fetch';
-import {RowNoGutter} from '../../common/grid/row';
 import {Loading} from '../../common/loading';
 import {AlertFetchListFailed} from '../alert';
+import {PostConfigBar} from '../configBar';
 import {PostManageBar, PostManageBarProps} from '../manageBar';
 import styles from './page.module.scss';
 
@@ -98,16 +97,11 @@ export const PostLookupPage = <E extends SequencedPostInfo, R extends SequencedP
       <div className={styles.title}>
         <h2>{title}</h2>
       </div>
-      <RowNoGutter className="text-end mb-2">
-        <Col>
-          <SubscribeButton
-            subscriptionKey={{type: 'const', name: subKeyName}}
-            state={globalSubscriptionButtonState}
-            disabled={isNotFetched(fetchStatus)}
-            asIcon={false}
-          />
-        </Col>
-      </RowNoGutter>
+      <PostConfigBar
+        subscriptionKey={{type: 'const', name: subKeyName}}
+        state={globalSubscriptionButtonState}
+        disabled={isNotFetched(fetchStatus)}
+      />
       {
         data?.user.isAdmin &&
         <PostManageBar {...postManageBarProps}/>

diff --git a/src/components/pages/posts/misc/output/main.test.tsx b/src/components/pages/posts/misc/output/main.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import {screen} from '@testing-library/react';
+import {screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import {renderReact} from '../../../../../../test/render/main';
 import {
@@ -11,6 +12,7 @@ import {
 } from '../../../../../api-def/api';
 import {makePostUrl, PostPath} from '../../../../../api-def/paths';
 import {translation as translationEN} from '../../../../../i18n/translations/en/translation';
+import {ApiRequestSender} from '../../../../../utils/services/api/requestSender';
 import {MiscPostOutput} from './main';
 
 
@@ -33,6 +35,7 @@ describe('Misc post output', () => {
     otherLangs: [],
     modifiedEpoch: 10000,
     publishedEpoch: 9000,
+    userSubscribed: true,
   };
 
   const altLangTips = translationEN.posts.message.altLang
@@ -118,4 +121,42 @@ describe('Misc post output', () => {
     expect(screen.queryByText(new RegExp(`${altLangTips}`, 'g'))).not.toBeInTheDocument();
     expect(screen.queryByText(new RegExp(`${otherLangTips}`, 'g'))).not.toBeInTheDocument();
   });
+
+  it('unsubscribes', async () => {
+    const fnUpdateSubscription = jest.spyOn(ApiRequestSender, 'removeSubscription').mockResolvedValue({
+      code: ApiResponseCode.SUCCESS,
+      success: true,
+    });
+
+    renderReact(
+      () => <MiscPostOutput post={{...postResponse, userSubscribed: true}}/>,
+      {hasSession: true},
+    );
+
+    const updateSubscriptionBtn = await screen.findByText(translationEN.misc.subscription.remove);
+    userEvent.click(updateSubscriptionBtn);
+
+    await waitFor(() => expect(fnUpdateSubscription).toHaveBeenCalled());
+
+    expect(fnUpdateSubscription).toHaveBeenCalled();
+  });
+
+  it('subscribes', async () => {
+    const fnUpdateSubscription = jest.spyOn(ApiRequestSender, 'addSubscription').mockResolvedValue({
+      code: ApiResponseCode.SUCCESS,
+      success: true,
+    });
+
+    renderReact(
+      () => <MiscPostOutput post={{...postResponse, userSubscribed: false}}/>,
+      {hasSession: true},
+    );
+
+    const updateSubscriptionBtn = await screen.findByText(translationEN.misc.subscription.add);
+    userEvent.click(updateSubscriptionBtn);
+
+    await waitFor(() => expect(fnUpdateSubscription).toHaveBeenCalled());
+
+    expect(fnUpdateSubscription).toHaveBeenCalled();
+  });
 });
diff --git a/src/components/pages/posts/misc/output/main.tsx b/src/components/pages/posts/misc/output/main.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 
 import {useSession} from 'next-auth/react';
 
-import {MiscPostGetResponse} from '../../../../../api-def/api';
+import {MiscPostGetResponse, PostType} from '../../../../../api-def/api';
 import {GeneralPath, makePostUrl, PostPath} from '../../../../../api-def/paths';
 import {useI18n} from '../../../../../i18n/hook';
 import {AdsInPost} from '../../../../elements/common/ads/main';
+import {PostConfigBar} from '../../../../elements/posts/configBar';
 import {PostManageBar} from '../../../../elements/posts/manageBar';
 import {AlertIsAlternativeLanguage, AlertOtherLanguageAvailable} from '../../../../elements/posts/output/alert';
 import {PostInfo} from '../../../../elements/posts/output/info';
@@ -22,6 +23,10 @@ export const MiscPostOutput = ({post}: Props) => {
 
   return (
     <>
+      <PostConfigBar
+        subscriptionKey={{type: 'post', postType: PostType.MISC, id: post.seqId}}
+        defaultSubscribed={post.userSubscribed}
+      />
       {
         data?.user.isAdmin &&
         <PostManageBar

diff --git a/src/components/pages/posts/quest/output/main.test.tsx b/src/components/pages/posts/quest/output/main.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import {screen} from '@testing-library/react';
+import {screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import {renderReact} from '../../../../../../test/render/main';
 import {
@@ -11,6 +12,7 @@ import {
 } from '../../../../../api-def/api';
 import {makePostUrl, PostPath} from '../../../../../api-def/paths';
 import {translation as translationEN} from '../../../../../i18n/translations/en/translation';
+import {ApiRequestSender} from '../../../../../utils/services/api/requestSender';
 import {QuestPostOutput} from './main';
 
 
@@ -43,6 +45,7 @@ describe('Quest post output', () => {
     otherLangs: [],
     modifiedEpoch: 10000,
     publishedEpoch: 9000,
+    userSubscribed: true,
   };
 
   const altLangTips = translationEN.posts.message.altLang
@@ -152,4 +155,42 @@ describe('Quest post output', () => {
     expect(screen.queryByText(new RegExp(`${altLangTips}`, 'g'))).not.toBeInTheDocument();
     expect(screen.queryByText(new RegExp(`${otherLangTips}`, 'g'))).not.toBeInTheDocument();
   });
+
+  it('unsubscribes', async () => {
+    const fnUpdateSubscription = jest.spyOn(ApiRequestSender, 'removeSubscription').mockResolvedValue({
+      code: ApiResponseCode.SUCCESS,
+      success: true,
+    });
+
+    renderReact(
+      () => <QuestPostOutput post={{...postResponse, userSubscribed: true}}/>,
+      {hasSession: true},
+    );
+
+    const updateSubscriptionBtn = await screen.findByText(translationEN.misc.subscription.remove);
+    userEvent.click(updateSubscriptionBtn);
+
+    await waitFor(() => expect(fnUpdateSubscription).toHaveBeenCalled());
+
+    expect(fnUpdateSubscription).toHaveBeenCalled();
+  });
+
+  it('subscribes', async () => {
+    const fnUpdateSubscription = jest.spyOn(ApiRequestSender, 'addSubscription').mockResolvedValue({
+      code: ApiResponseCode.SUCCESS,
+      success: true,
+    });
+
+    renderReact(
+      () => <QuestPostOutput post={{...postResponse, userSubscribed: false}}/>,
+      {hasSession: true},
+    );
+
+    const updateSubscriptionBtn = await screen.findByText(translationEN.misc.subscription.add);
+    userEvent.click(updateSubscriptionBtn);
+
+    await waitFor(() => expect(fnUpdateSubscription).toHaveBeenCalled());
+
+    expect(fnUpdateSubscription).toHaveBeenCalled();
+  });
 });
diff --git a/src/components/pages/posts/quest/output/main.tsx b/src/components/pages/posts/quest/output/main.tsx
@@ -2,12 +2,13 @@ import React from 'react';
 
 import {useSession} from 'next-auth/react';
 
-import {QuestPostGetResponse} from '../../../../../api-def/api';
+import {PostType, QuestPostGetResponse} from '../../../../../api-def/api';
 import {GeneralPath, makePostUrl, PostPath} from '../../../../../api-def/paths';
 import {useI18n} from '../../../../../i18n/hook';
 import {AdsInPost} from '../../../../elements/common/ads/main';
 import {Markdown} from '../../../../elements/markdown/main';
 import {AlertVideoTips} from '../../../../elements/posts/alert';
+import {PostConfigBar} from '../../../../elements/posts/configBar';
 import {PostManageBar} from '../../../../elements/posts/manageBar';
 import {AlertIsAlternativeLanguage, AlertOtherLanguageAvailable} from '../../../../elements/posts/output/alert';
 import {PostInfo} from '../../../../elements/posts/output/info';
@@ -24,6 +25,10 @@ export const QuestPostOutput = ({post}: Props) => {
 
   return (
     <>
+      <PostConfigBar
+        subscriptionKey={{type: 'post', postType: PostType.QUEST, id: post.seqId}}
+        defaultSubscribed={post.userSubscribed}
+      />
       {
         data?.user.isAdmin &&
         <PostManageBar