refactor(958): only one subscription can be selected (#343)

5 years ago · a604f767da
parent 5f35c6aaa2
commit a604f767da
7 changed files with 25 additions and 45 deletions
--- a/src/features/BuyMatchPopup/components/ConfirmationStep/index.tsx
+++ b/src/features/BuyMatchPopup/components/ConfirmationStep/index.tsx
@ -20,9 +20,8 @@ import {
 export const ConfirmationStep = () => {
  const {
    close,
-    selectedSubscriptions,
+    selectedSubscription,
    subscribeToMatches,
-    totalPrice,
  } = useBuyMatchPopupStore()

  return (
@ -36,11 +35,13 @@ export const ConfirmationStep = () => {
        </HeaderActions>
      </Header>
      <Body marginTop={25}>
-        <SubscriptionsList subscriptions={selectedSubscriptions} />
+        <SubscriptionsList
+          subscriptions={selectedSubscription ? [selectedSubscription] : []}
+        />
      </Body>
      <Footer marginTop={35}>
        <Button onClick={subscribeToMatches}>
-          <T9n t='buy_for' /> {totalPrice} {currencySymbols.ruble}
+          <T9n t='buy_for' /> {selectedSubscription?.price} {currencySymbols.ruble}
        </Button>
      </Footer>
    </Wrapper>
--- a/src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx
+++ b/src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx
@ -25,6 +25,7 @@ export const SubscriptionSelectionStep = () => {
    close,
    goTo,
    match,
+    selectedSubscription,
  } = useBuyMatchPopupStore()

  if (!match) return null
@ -47,6 +48,7 @@ export const SubscriptionSelectionStep = () => {
      </Body>
      <Footer>
        <Button
+          disabled={!selectedSubscription}
          onClick={(e) => goTo(Steps.Confirmation, e)}
        >
          <T9n t='buy_subscription' />
--- a/src/features/BuyMatchPopup/components/Subscriptions/index.tsx
+++ b/src/features/BuyMatchPopup/components/Subscriptions/index.tsx
@ -26,7 +26,7 @@ export const Subscriptions = () => {
    onPeriodSelect,
    onSubscriptionSelect,
    selectedPeriod,
-    selectedSubscriptions,
+    selectedSubscription,
    subscriptions,
  } = useBuyMatchPopupStore()
  return (
@ -41,7 +41,7 @@ export const Subscriptions = () => {
      <SubscriptionsList
        height={364}
        subscriptions={subscriptions}
-        selectedSubscriptions={selectedSubscriptions}
+        selectedSubscription={selectedSubscription}
        onSelect={onSubscriptionSelect}
      />
    </Wrapper>
--- a/src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx
+++ b/src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx
@ -1,5 +1,4 @@
 import map from 'lodash/map'
-import includes from 'lodash/includes'

 import type { MatchSubscriptions, MatchSubscription } from 'features/BuyMatchPopup/types'
 import { T9n } from 'features/T9n'
@ -15,14 +14,14 @@ import {
 type Props = {
  height?: number,
  onSelect?: (subscription: MatchSubscription) => void,
-  selectedSubscriptions?: MatchSubscriptions,
+  selectedSubscription?: MatchSubscription | null,
  subscriptions: MatchSubscriptions,
 }

 export const SubscriptionsList = ({
  height,
  onSelect,
-  selectedSubscriptions,
+  selectedSubscription,
  subscriptions,
 }: Props) => (
  <List height={height}>
@ -31,7 +30,7 @@ export const SubscriptionsList = ({
        <Item
          key={subscription.id}
          onClick={() => onSelect?.(subscription)}
-          active={includes(selectedSubscriptions, subscription)}
+          active={subscription === selectedSubscription}
        >
          <InfoWrapper>
            <Header>
--- a/src/features/BuyMatchPopup/store/hooks/index.tsx
+++ b/src/features/BuyMatchPopup/store/hooks/index.tsx
@ -47,10 +47,9 @@ export const useBuyMatchPopup = () => {
    onSubscriptionSelect,
    resetSubscriptions,
    selectedPeriod,
-    selectedSubscriptions,
+    selectedSubscription,
    subscribeToMatches,
    subscriptions,
-    totalPrice,
  } = useSubscriptions(goTo)

  const closePopup = () => {
@ -75,9 +74,8 @@ export const useBuyMatchPopup = () => {
    onSubscriptionSelect,
    open: openPopup,
    selectedPeriod,
-    selectedSubscriptions,
+    selectedSubscription,
    subscribeToMatches,
    subscriptions,
-    totalPrice,
  }
 }
--- a/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
+++ b/src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
@ -5,14 +5,11 @@ import {
  useCallback,
 } from 'react'

-import sumBy from 'lodash/sumBy'
 import filter from 'lodash/filter'
-import without from 'lodash/without'
-import includes from 'lodash/includes'

 import {
  getSubscriptions,
-  buyMatchSubscriptions,
+  buyMatchSubscription,
 } from 'requests'

 import { SportTypes } from 'config'
@ -26,7 +23,7 @@ export const useSubscriptions = (goTo: (step: Steps) => void) => {
  const { fetchLexics } = useLexicsFetcher()
  const [selectedPeriod, setSelectedPeriod] = useState(SubscriptionType.Month)
  const [subscriptionsList, setSubscriptionsList] = useState<MatchSubscriptions>([])
-  const [selectedSubscriptions, setSelectedSubscriptions] = useState<MatchSubscriptions>([])
+  const [selectedSubscription, setSelectedSubscription] = useState<MatchSubscription | null>(null)

  const fetchSubscriptions = useCallback((sport: SportTypes, id: number) => {
    getSubscriptions(sport, id)
@ -40,40 +37,29 @@ export const useSubscriptions = (goTo: (step: Steps) => void) => {
    [selectedPeriod, subscriptionsList],
  )

-  const totalPrice = useMemo(
-    () => sumBy(selectedSubscriptions, (subscription) => subscription.price),
-    [selectedSubscriptions],
-  )
-
-  const onSubscriptionSelect = (selected: MatchSubscription) => {
-    const newSubscriptions = includes(selectedSubscriptions, selected)
-      ? without(selectedSubscriptions, selected)
-      : [...selectedSubscriptions, selected]
-    setSelectedSubscriptions(newSubscriptions)
-  }
-
  const resetSubscriptions = useCallback(() => {
    setSelectedPeriod(SubscriptionType.Month)
-    setSelectedSubscriptions([])
+    setSelectedSubscription(null)
    setSubscriptionsList([])
  }, [])

  const subscribeToMatches = (e: MouseEvent) => {
    e.stopPropagation()
-    buyMatchSubscriptions(selectedSubscriptions)
-      .then(() => goTo(Steps.Success))
-      .catch(() => goTo(Steps.Error))
+    if (selectedSubscription) {
+      buyMatchSubscription(selectedSubscription)
+        .then(() => goTo(Steps.Success))
+        .catch(() => goTo(Steps.Error))
+    }
  }

  return {
    fetchSubscriptions,
    onPeriodSelect: setSelectedPeriod,
-    onSubscriptionSelect,
+    onSubscriptionSelect: setSelectedSubscription,
    resetSubscriptions,
    selectedPeriod,
-    selectedSubscriptions,
+    selectedSubscription,
    subscribeToMatches,
    subscriptions,
-    totalPrice,
  }
 }
--- a/src/requests/buyMatchSubscriptions.tsx
+++ b/src/requests/buyMatchSubscriptions.tsx
@ -1,5 +1,3 @@
-import map from 'lodash/map'
-
 import { API_ROOT } from 'config'
 import { callApi } from 'helpers'

@ -10,7 +8,7 @@ type Subscription = {
  type: SubscriptionType,
 }

-const buyMatchSubscription = ({ id, type }: Subscription) => {
+export const buyMatchSubscription = ({ id, type }: Subscription) => {
  const config = {
    body: {
      interval: type,
@ -24,7 +22,3 @@ const buyMatchSubscription = ({ id, type }: Subscription) => {
    url: `${API_ROOT}/account/purchase`,
  })
 }
-
-export const buyMatchSubscriptions = (subscriptions: Array<Subscription>) => (
-  Promise.all(map(subscriptions, buyMatchSubscription))
-)