frontend
/
spa_instat_tv
1
0
Fork 0
Code Pull Requests 1 Releases Wiki Activity

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

Browse Source
keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Mirlan 5 years ago committed by GitHub
parent 5f35c6aaa2
commit a604f767da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 25 additions and 45 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 9
      src/features/BuyMatchPopup/components/ConfirmationStep/index.tsx
  2. 2
      src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx
  3. 4
      src/features/BuyMatchPopup/components/Subscriptions/index.tsx
  4. 7
      src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx
  5. 6
      src/features/BuyMatchPopup/store/hooks/index.tsx
  6. 30
      src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
  7. 8
      src/requests/buyMatchSubscriptions.tsx

9
src/features/BuyMatchPopup/components/ConfirmationStep/index.tsx
Unescape View File

@ -20,9 +20,8 @@ import {
export const ConfirmationStep = () => { export const ConfirmationStep = () => {
const { const {
close, close,
selectedSubscriptions, selectedSubscription,
subscribeToMatches, subscribeToMatches,
totalPrice,
} = useBuyMatchPopupStore() } = useBuyMatchPopupStore()
return ( return (
@ -36,11 +35,13 @@ export const ConfirmationStep = () => {
</HeaderActions> </HeaderActions>
</Header> </Header>
<Body marginTop={25}> <Body marginTop={25}>
<SubscriptionsList subscriptions={selectedSubscriptions} /> <SubscriptionsList
subscriptions={selectedSubscription ? [selectedSubscription] : []}
/>
</Body> </Body>
<Footer marginTop={35}> <Footer marginTop={35}>
<Button onClick={subscribeToMatches}> <Button onClick={subscribeToMatches}>
<T9n t='buy_for' /> {totalPrice} {currencySymbols.ruble} <T9n t='buy_for' /> {selectedSubscription?.price} {currencySymbols.ruble}
</Button> </Button>
</Footer> </Footer>
</Wrapper> </Wrapper>

2
src/features/BuyMatchPopup/components/SubscriptionSelectionStep/index.tsx
Unescape View File

@ -25,6 +25,7 @@ export const SubscriptionSelectionStep = () => {
close, close,
goTo, goTo,
match, match,
selectedSubscription,
} = useBuyMatchPopupStore() } = useBuyMatchPopupStore()
if (!match) return null if (!match) return null
@ -47,6 +48,7 @@ export const SubscriptionSelectionStep = () => {
</Body> </Body>
<Footer> <Footer>
<Button <Button
disabled={!selectedSubscription}
onClick={(e) => goTo(Steps.Confirmation, e)} onClick={(e) => goTo(Steps.Confirmation, e)}
> >
<T9n t='buy_subscription' /> <T9n t='buy_subscription' />

4
src/features/BuyMatchPopup/components/Subscriptions/index.tsx
Unescape View File

@ -26,7 +26,7 @@ export const Subscriptions = () => {
onPeriodSelect, onPeriodSelect,
onSubscriptionSelect, onSubscriptionSelect,
selectedPeriod, selectedPeriod,
selectedSubscriptions, selectedSubscription,
subscriptions, subscriptions,
} = useBuyMatchPopupStore() } = useBuyMatchPopupStore()
return ( return (
@ -41,7 +41,7 @@ export const Subscriptions = () => {
<SubscriptionsList <SubscriptionsList
height={364} height={364}
subscriptions={subscriptions} subscriptions={subscriptions}
selectedSubscriptions={selectedSubscriptions} selectedSubscription={selectedSubscription}
onSelect={onSubscriptionSelect} onSelect={onSubscriptionSelect}
/> />
</Wrapper> </Wrapper>

7
src/features/BuyMatchPopup/components/SubscriptionsList/index.tsx
Unescape View File

@ -1,5 +1,4 @@
import map from 'lodash/map' import map from 'lodash/map'
import includes from 'lodash/includes'
import type { MatchSubscriptions, MatchSubscription } from 'features/BuyMatchPopup/types' import type { MatchSubscriptions, MatchSubscription } from 'features/BuyMatchPopup/types'
import { T9n } from 'features/T9n' import { T9n } from 'features/T9n'
@ -15,14 +14,14 @@ import {
type Props = { type Props = {
height?: number, height?: number,
onSelect?: (subscription: MatchSubscription) => void, onSelect?: (subscription: MatchSubscription) => void,
selectedSubscriptions?: MatchSubscriptions, selectedSubscription?: MatchSubscription | null,
subscriptions: MatchSubscriptions, subscriptions: MatchSubscriptions,
} }
export const SubscriptionsList = ({ export const SubscriptionsList = ({
height, height,
onSelect, onSelect,
selectedSubscriptions, selectedSubscription,
subscriptions, subscriptions,
}: Props) => ( }: Props) => (
<List height={height}> <List height={height}>
@ -31,7 +30,7 @@ export const SubscriptionsList = ({
<Item <Item
key={subscription.id} key={subscription.id}
onClick={() => onSelect?.(subscription)} onClick={() => onSelect?.(subscription)}
active={includes(selectedSubscriptions, subscription)} active={subscription === selectedSubscription}
> >
<InfoWrapper> <InfoWrapper>
<Header> <Header>

6
src/features/BuyMatchPopup/store/hooks/index.tsx
Unescape View File

@ -47,10 +47,9 @@ export const useBuyMatchPopup = () => {
onSubscriptionSelect, onSubscriptionSelect,
resetSubscriptions, resetSubscriptions,
selectedPeriod, selectedPeriod,
selectedSubscriptions, selectedSubscription,
subscribeToMatches, subscribeToMatches,
subscriptions, subscriptions,
totalPrice,
} = useSubscriptions(goTo) } = useSubscriptions(goTo)
const closePopup = () => { const closePopup = () => {
@ -75,9 +74,8 @@ export const useBuyMatchPopup = () => {
onSubscriptionSelect, onSubscriptionSelect,
open: openPopup, open: openPopup,
selectedPeriod, selectedPeriod,
selectedSubscriptions, selectedSubscription,
subscribeToMatches, subscribeToMatches,
subscriptions, subscriptions,
totalPrice,
} }
} }

30
src/features/BuyMatchPopup/store/hooks/useSubscriptions.tsx
Unescape View File

@ -5,14 +5,11 @@ import {
useCallback, useCallback,
} from 'react' } from 'react'
import sumBy from 'lodash/sumBy'
import filter from 'lodash/filter' import filter from 'lodash/filter'
import without from 'lodash/without'
import includes from 'lodash/includes'
import { import {
getSubscriptions, getSubscriptions,
buyMatchSubscriptions, buyMatchSubscription,
} from 'requests' } from 'requests'
import { SportTypes } from 'config' import { SportTypes } from 'config'
@ -26,7 +23,7 @@ export const useSubscriptions = (goTo: (step: Steps) => void) => {
const { fetchLexics } = useLexicsFetcher() const { fetchLexics } = useLexicsFetcher()
const [selectedPeriod, setSelectedPeriod] = useState(SubscriptionType.Month) const [selectedPeriod, setSelectedPeriod] = useState(SubscriptionType.Month)
const [subscriptionsList, setSubscriptionsList] = useState<MatchSubscriptions>([]) const [subscriptionsList, setSubscriptionsList] = useState<MatchSubscriptions>([])
const [selectedSubscriptions, setSelectedSubscriptions] = useState<MatchSubscriptions>([]) const [selectedSubscription, setSelectedSubscription] = useState<MatchSubscription | null>(null)
const fetchSubscriptions = useCallback((sport: SportTypes, id: number) => { const fetchSubscriptions = useCallback((sport: SportTypes, id: number) => {
getSubscriptions(sport, id) getSubscriptions(sport, id)
@ -40,40 +37,29 @@ export const useSubscriptions = (goTo: (step: Steps) => void) => {
[selectedPeriod, subscriptionsList], [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(() => { const resetSubscriptions = useCallback(() => {
setSelectedPeriod(SubscriptionType.Month) setSelectedPeriod(SubscriptionType.Month)
setSelectedSubscriptions([]) setSelectedSubscription(null)
setSubscriptionsList([]) setSubscriptionsList([])
}, []) }, [])
const subscribeToMatches = (e: MouseEvent) => { const subscribeToMatches = (e: MouseEvent) => {
e.stopPropagation() e.stopPropagation()
buyMatchSubscriptions(selectedSubscriptions) if (selectedSubscription) {
buyMatchSubscription(selectedSubscription)
.then(() => goTo(Steps.Success)) .then(() => goTo(Steps.Success))
.catch(() => goTo(Steps.Error)) .catch(() => goTo(Steps.Error))
} }
}
return { return {
fetchSubscriptions, fetchSubscriptions,
onPeriodSelect: setSelectedPeriod, onPeriodSelect: setSelectedPeriod,
onSubscriptionSelect, onSubscriptionSelect: setSelectedSubscription,
resetSubscriptions, resetSubscriptions,
selectedPeriod, selectedPeriod,
selectedSubscriptions, selectedSubscription,
subscribeToMatches, subscribeToMatches,
subscriptions, subscriptions,
totalPrice,
} }
} }

8
src/requests/buyMatchSubscriptions.tsx
Unescape View File

@ -1,5 +1,3 @@
import map from 'lodash/map'
import { API_ROOT } from 'config' import { API_ROOT } from 'config'
import { callApi } from 'helpers' import { callApi } from 'helpers'
@ -10,7 +8,7 @@ type Subscription = {
type: SubscriptionType, type: SubscriptionType,
} }
const buyMatchSubscription = ({ id, type }: Subscription) => { export const buyMatchSubscription = ({ id, type }: Subscription) => {
const config = { const config = {
body: { body: {
interval: type, interval: type,
@ -24,7 +22,3 @@ const buyMatchSubscription = ({ id, type }: Subscription) => {
url: `${API_ROOT}/account/purchase`, url: `${API_ROOT}/account/purchase`,
}) })
} }
export const buyMatchSubscriptions = (subscriptions: Array<Subscription>) => (
Promise.all(map(subscriptions, buyMatchSubscription))
)

Write Preview
Loading…
Cancel
Save