Ott 496 get set delete subscriptions (#207)
* Ott 496 get set delete subscriptions 1 (#205) * feat(ott-496): part of the code * fix(ott-496): minor change in checkbo * fix(ott-496): fixed get subscriptions types * fix(ott-496): deleted unnecessary exports * fix(ott-496): fixed types * fix(ott-496): fixed types * fix(ott-496): deleted fullwidth from click outside * fix(ott-496): finish (#206) * fix(ott-496): finish * fix(ott-496): bug fix * fix(ott-496): added switch * fix(ott-496): bug fix according to Mirlan's comments * fix(ott-496): finishkeep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Armen
5 years ago
committed by
GitHub
parent
26493b0c92
commit
ee715e19e7
@ -0,0 +1,67 @@ |
||||
import React from 'react' |
||||
|
||||
import { Price } from 'features/Register/components/Price' |
||||
import { Radio } from 'features/Common/Radio' |
||||
import { Checkbox } from 'features/Common/Checkbox' |
||||
|
||||
import { |
||||
CheckboxWrapper, |
||||
SubscriptionWrapper, |
||||
BoldTextWrapper, |
||||
NormalTextWrapper, |
||||
} from './styled' |
||||
import { PriceWrapper } from '../CardNumber/styled' |
||||
|
||||
type Props = { |
||||
amount: number, |
||||
checked?: boolean, |
||||
id: string, |
||||
inputType?: string, |
||||
label?: string, |
||||
noMarginBottom?: boolean, |
||||
noMarginTop?: boolean, |
||||
packageAction?: string, |
||||
packageName?: string, |
||||
selectSubscription: () => void, |
||||
} |
||||
|
||||
export const Subscription = ({ |
||||
amount, |
||||
checked, |
||||
id, |
||||
inputType, |
||||
label, |
||||
noMarginBottom, |
||||
noMarginTop, |
||||
packageAction, |
||||
packageName, |
||||
selectSubscription, |
||||
}: Props) => ( |
||||
<SubscriptionWrapper |
||||
noMarginTop={noMarginTop} |
||||
noMarginBottom={noMarginBottom} |
||||
> |
||||
{inputType === 'radio' && ( |
||||
<Radio |
||||
id={id} |
||||
checked={checked} |
||||
onClick={selectSubscription} |
||||
label={label} |
||||
/> |
||||
)} |
||||
{inputType === 'checkbox' && ( |
||||
<CheckboxWrapper> |
||||
<Checkbox |
||||
checked={checked} |
||||
onClick={selectSubscription} |
||||
label={label} |
||||
/> |
||||
</CheckboxWrapper> |
||||
)} |
||||
{packageName && <BoldTextWrapper>{packageName}</BoldTextWrapper>} |
||||
{packageAction && <NormalTextWrapper>{packageAction}</NormalTextWrapper>} |
||||
<PriceWrapper> |
||||
<Price amount={amount} /> |
||||
</PriceWrapper> |
||||
</SubscriptionWrapper> |
||||
) |
||||
@ -0,0 +1,84 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { Label as CheckboxLabel } from 'features/Common/Checkbox/styled' |
||||
import { Label as RadioLabel } from 'features/Common/Radio/styled' |
||||
|
||||
import { TextWrapper } from '../CardNumber/styled' |
||||
|
||||
type Props = { |
||||
noMarginBottom?: boolean, |
||||
noMarginTop?: boolean, |
||||
} |
||||
|
||||
export const SubscriptionWrapperStyles = css<Props>` |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
height: 48px; |
||||
background-color: #3F3F3F; |
||||
border-top: ${({ noMarginBottom, noMarginTop }) => (noMarginBottom && noMarginTop ? '1px solid #000' : '')}; |
||||
border-bottom: ${({ noMarginBottom, noMarginTop }) => (noMarginBottom && noMarginTop ? '1px solid #000' : '')}; |
||||
border-radius: ${({ noMarginBottom, noMarginTop }) => { |
||||
switch (true) { |
||||
case noMarginTop && noMarginBottom: |
||||
return '0' |
||||
case noMarginTop: |
||||
return '0 0 2px 2px' |
||||
case noMarginBottom: |
||||
return '2px 2px 0 0' |
||||
default: |
||||
return '2px' |
||||
} |
||||
}}; |
||||
|
||||
|
||||
|
||||
margin-top: ${({ noMarginTop }) => (noMarginTop ? '0' : '20px')}; |
||||
margin-bottom: ${({ noMarginBottom }) => (noMarginBottom ? '0' : '20px')}; |
||||
width: 100%; |
||||
${RadioLabel}::before { |
||||
margin-left: 22px; |
||||
} |
||||
` |
||||
|
||||
export const SubscriptionWrapper = styled.div` |
||||
${SubscriptionWrapperStyles}; |
||||
|
||||
label{ |
||||
font-size: 16px; |
||||
} |
||||
&:nth-child(n+1) { |
||||
border-bottom: ${({ noMarginBottom }) => (noMarginBottom ? '1px solid #000' : '')}; |
||||
border-top: ${({ noMarginBottom, noMarginTop }) => (noMarginBottom && noMarginTop ? 'none' : '')}; |
||||
} |
||||
` |
||||
|
||||
export const CheckboxWrapper = styled.div` |
||||
${CheckboxLabel} { |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
line-height: 24px; |
||||
|
||||
&::before { |
||||
margin-left: 22px; |
||||
} |
||||
} |
||||
` |
||||
|
||||
export const BoldTextWrapper = styled(TextWrapper)` |
||||
color: #fff; |
||||
font-weight: bold; |
||||
font-size: 20px; |
||||
margin-right: 24px; |
||||
|
||||
&:hover { |
||||
cursor: default; |
||||
} |
||||
` |
||||
|
||||
export const NormalTextWrapper = styled(TextWrapper)` |
||||
color: #fff; |
||||
font-weight: normal; |
||||
font-size: 16px; |
||||
margin-right: 24px; |
||||
` |
||||
@ -0,0 +1,98 @@ |
||||
import React, { Fragment } from 'react' |
||||
|
||||
import map from 'lodash/map' |
||||
import isNumber from 'lodash/isNumber' |
||||
import isArray from 'lodash/isArray' |
||||
import find from 'lodash/find' |
||||
|
||||
import type { SportList } from 'requests/getSportList' |
||||
|
||||
import { useLexicsStore } from 'features/LexicsStore' |
||||
|
||||
import type { Subscription, UserSubscriptions } from '../../hooks/useUserSubscriptions' |
||||
import { UserAccountButton } from '../UserAccountButton' |
||||
import { UserAccountSubscription } from '../UserAccountSubscription' |
||||
import { UserAccountSubscriptionMatch } from '../UserAccountSubscriptionMatch' |
||||
import { TextNoBorder } from '../TextNoBorder' |
||||
|
||||
import { |
||||
UserAccountBlockTitle, |
||||
SubscriptionTitle, |
||||
} from './styled' |
||||
|
||||
type Props = { |
||||
deleteUserSubscription: (subscription: Subscription, sport: number) => void, |
||||
open: () => void, |
||||
selectedSubscription: number | null, |
||||
selectedSubscriptionLexic: string, |
||||
sportList: SportList, |
||||
userSubscriptions: any, |
||||
} |
||||
|
||||
export const SubscriptionsForm = ({ |
||||
deleteUserSubscription, |
||||
open, |
||||
selectedSubscription, |
||||
selectedSubscriptionLexic, |
||||
sportList, |
||||
userSubscriptions, |
||||
}: Props) => { |
||||
const { translate } = useLexicsStore() |
||||
|
||||
return ( |
||||
<Fragment> |
||||
<UserAccountBlockTitle t='subscriptions' /> |
||||
{isNumber(selectedSubscription) && ( |
||||
<UserAccountSubscription |
||||
amount={1999} |
||||
inputType='radio' |
||||
packageName={selectedSubscriptionLexic} |
||||
/> |
||||
)} |
||||
{map(userSubscriptions, (subscription) => { |
||||
const sportName = find(sportList, (item) => subscription.sport === item.id) |
||||
return ( |
||||
<Fragment key={subscription.sport}> |
||||
{sportName && <SubscriptionTitle t={sportName.lexic} />} |
||||
{map(subscription, (item: UserSubscriptions) => { |
||||
if (isArray(item)) { |
||||
return map(item, (subscriptionObj) => { |
||||
if (subscriptionObj.date) { |
||||
return ( |
||||
<UserAccountSubscriptionMatch |
||||
key={subscriptionObj.id} |
||||
noMarginBottom |
||||
amount={1999} |
||||
matchData={subscriptionObj} |
||||
deleteSubscription={ |
||||
() => deleteUserSubscription(subscriptionObj, subscription.sport) |
||||
} |
||||
/> |
||||
) |
||||
} |
||||
return ( |
||||
<UserAccountSubscription |
||||
key={subscriptionObj.id} |
||||
noMarginBottom |
||||
amount={1999} |
||||
label={subscriptionObj} |
||||
deleteSubscription={ |
||||
() => deleteUserSubscription(subscriptionObj, subscription.sport) |
||||
} |
||||
/> |
||||
) |
||||
}) |
||||
} |
||||
return null |
||||
})} |
||||
</Fragment> |
||||
) |
||||
})} |
||||
<UserAccountButton text='select_subscription' open={open} /> |
||||
<TextNoBorder |
||||
text={`${translate('next_debit')} 31.02.2020`} |
||||
amount={4796} |
||||
/> |
||||
</Fragment> |
||||
) |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import styled from 'styled-components/macro' |
||||
|
||||
import { BlockTitle } from 'features/Login/styled' |
||||
import { T9n } from 'features/T9n' |
||||
|
||||
export const UserAccountBlockTitle = styled(BlockTitle)` |
||||
align-self: flex-start; |
||||
` |
||||
|
||||
export const SubscriptionTitle = styled(T9n)` |
||||
color: white; |
||||
font-weight: 500; |
||||
font-size: 25px; |
||||
align-self: flex-start; |
||||
margin-top: 40px; |
||||
` |
||||
@ -0,0 +1,70 @@ |
||||
import React from 'react' |
||||
|
||||
import map from 'lodash/map' |
||||
|
||||
import type { SubscriptionType } from 'requests/getSubscriptions' |
||||
|
||||
import { Modal } from 'features/Modal' |
||||
import { useLexicsStore } from 'features/LexicsStore' |
||||
|
||||
import { Subscription } from '../Subscription' |
||||
|
||||
import { |
||||
AddSubscriptionModal, |
||||
Line, |
||||
ModalTitle, |
||||
SubscriptionsWrapper, |
||||
SaveButton, |
||||
} from './styled' |
||||
|
||||
type Props = { |
||||
close: () => void, |
||||
isOpen: boolean, |
||||
saveSubscription: () => void, |
||||
selectedSubscription: number | null, |
||||
setSelectedSubscription: (arg: number | null) => void, |
||||
subscriptions: Array<SubscriptionType>, |
||||
} |
||||
|
||||
export const SubscriptionModal = ({ |
||||
close, |
||||
isOpen, |
||||
saveSubscription, |
||||
selectedSubscription, |
||||
setSelectedSubscription, |
||||
subscriptions, |
||||
}: Props) => { |
||||
const { translate } = useLexicsStore() |
||||
|
||||
return ( |
||||
<Modal |
||||
isOpen={isOpen} |
||||
close={close} |
||||
> |
||||
<AddSubscriptionModal> |
||||
<ModalTitle t='select_subscription' /> |
||||
<Line /> |
||||
<SubscriptionsWrapper> |
||||
{map(subscriptions, (subscription) => ( |
||||
<Subscription |
||||
id={`${subscription.id}`} |
||||
checked={selectedSubscription === subscription.id} |
||||
key={`${subscription.id}`} |
||||
noMarginBottom |
||||
noMarginTop |
||||
amount={1999} |
||||
inputType='radio' |
||||
label={translate(`${subscription.lexic}`)} |
||||
selectSubscription={() => { |
||||
setSelectedSubscription(subscription.id) |
||||
}} |
||||
/> |
||||
))} |
||||
</SubscriptionsWrapper> |
||||
<SaveButton onClick={saveSubscription}> |
||||
Save |
||||
</SaveButton> |
||||
</AddSubscriptionModal> |
||||
</Modal> |
||||
) |
||||
} |
||||
@ -0,0 +1,46 @@ |
||||
import styled from 'styled-components/macro' |
||||
|
||||
import { customScrollbar, customStylesMixin } from 'features/Common' |
||||
import { T9n } from 'features/T9n' |
||||
|
||||
import { OutlinedButton } from '../../styled' |
||||
|
||||
export const AddSubscriptionModal = styled.div` |
||||
width: 538px; |
||||
height: 452px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
` |
||||
|
||||
export const ModalTitle = styled(T9n)` |
||||
display: block; |
||||
font-size: 24px; |
||||
font-weight: normal; |
||||
` |
||||
|
||||
export const Line = styled.hr` |
||||
position:absolute; |
||||
width: 100%; |
||||
top: 40px; |
||||
height: 1px; |
||||
border: 1px solid #3F3F3F; |
||||
` |
||||
|
||||
export const SaveButton = styled(OutlinedButton)` |
||||
width: 192px; |
||||
height: 36px; |
||||
display: block; |
||||
font-weight: normal; |
||||
margin-left: auto; |
||||
margin-top: auto; |
||||
` |
||||
|
||||
export const SubscriptionsWrapper = styled.div` |
||||
margin-top: 45px; |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: auto; |
||||
${customScrollbar}; |
||||
${customStylesMixin}; |
||||
` |
||||
@ -1,11 +1,20 @@ |
||||
import React from 'react' |
||||
|
||||
import { T9n } from 'features/T9n' |
||||
|
||||
import { PlusIconWrapper } from '../PlusIcon' |
||||
import { UserAccountButtonWrapper, PlusIconTextWrapper } from './styled' |
||||
|
||||
export const UserAccountButton = ({ text }: { text: string }) => ( |
||||
<UserAccountButtonWrapper> |
||||
type Props = { |
||||
open?: () => void, |
||||
text: string, |
||||
} |
||||
|
||||
export const UserAccountButton = ({ open, text }: Props) => ( |
||||
<UserAccountButtonWrapper onClick={open}> |
||||
<PlusIconWrapper /> |
||||
<PlusIconTextWrapper>{text}</PlusIconTextWrapper> |
||||
<PlusIconTextWrapper> |
||||
<T9n t={text} /> |
||||
</PlusIconTextWrapper> |
||||
</UserAccountButtonWrapper> |
||||
) |
||||
|
||||
@ -0,0 +1,72 @@ |
||||
import React, { Fragment } from 'react' |
||||
|
||||
import format from 'date-fns/format' |
||||
|
||||
import type { Match } from 'features/UserAccount/hooks/useUserSubscriptions' |
||||
import { Name } from 'features/Name' |
||||
import { Price } from 'features/Register/components/Price' |
||||
import { T9n } from 'features/T9n' |
||||
|
||||
import { |
||||
UserAccountSubscriptionWrapper, |
||||
UserAccountBoldTextWrapper, |
||||
UserAccountTextLeftPart, |
||||
UserAccountNormalTextWrapper, |
||||
UserAccountText, |
||||
UserAccountDate, |
||||
UserAccountDeleteButton, |
||||
UserAccountTeams, |
||||
} from './styled' |
||||
import { PriceWrapper } from '../CardNumber/styled' |
||||
|
||||
type Props = { |
||||
amount: number, |
||||
deleteSubscription?: () => void, |
||||
inputType?: string, |
||||
matchData: Match, |
||||
noMarginBottom?: boolean, |
||||
noMarginTop?: boolean, |
||||
packageAction?: string, |
||||
packageName?: string, |
||||
} |
||||
|
||||
export const UserAccountSubscriptionMatch = ({ |
||||
amount, |
||||
deleteSubscription, |
||||
matchData, |
||||
noMarginBottom, |
||||
noMarginTop, |
||||
packageAction, |
||||
packageName, |
||||
}: Props) => ( |
||||
<UserAccountSubscriptionWrapper |
||||
noMarginTop={noMarginTop} |
||||
noMarginBottom={noMarginBottom} |
||||
> |
||||
<UserAccountTextLeftPart> |
||||
<Fragment> |
||||
<UserAccountDate> |
||||
{format(new Date(matchData.date), 'dd.MM.yyyy')} |
||||
</UserAccountDate> |
||||
<UserAccountText> |
||||
<Name nameObj={matchData.tournament} /> |
||||
</UserAccountText> |
||||
</Fragment> |
||||
<UserAccountTeams> |
||||
<Name nameObj={matchData.team1} /> - <Name nameObj={matchData.team2} /> |
||||
</UserAccountTeams> |
||||
</UserAccountTextLeftPart> |
||||
{packageName |
||||
&& <UserAccountBoldTextWrapper>{packageName}</UserAccountBoldTextWrapper>} |
||||
{packageAction |
||||
&& <UserAccountNormalTextWrapper>{packageAction}</UserAccountNormalTextWrapper>} |
||||
<PriceWrapper> |
||||
<Price amount={amount} /> |
||||
</PriceWrapper> |
||||
{deleteSubscription && ( |
||||
<UserAccountDeleteButton type='button' onClick={deleteSubscription}> |
||||
<T9n t='delete' /> |
||||
</UserAccountDeleteButton> |
||||
)} |
||||
</UserAccountSubscriptionWrapper> |
||||
) |
||||
@ -0,0 +1,117 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { Label as CheckboxLabel } from 'features/Common/Checkbox/styled' |
||||
import { Label as RadioLabel } from 'features/Common/Radio/styled' |
||||
|
||||
import { TextWrapper } from '../CardNumber/styled' |
||||
|
||||
type Props = { |
||||
noMarginBottom?: boolean, |
||||
noMarginTop?: boolean, |
||||
} |
||||
|
||||
export const SubscriptionWrapperStyles = css<Props>` |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
height: 75px; |
||||
background-color: #3F3F3F; |
||||
border-top: ${({ noMarginBottom, noMarginTop }) => (noMarginBottom && noMarginTop ? '1px solid #000' : '')}; |
||||
border-bottom: ${({ noMarginBottom, noMarginTop }) => (noMarginBottom && noMarginTop ? '1px solid #000' : '')}; |
||||
border-radius: ${({ noMarginBottom, noMarginTop }) => { |
||||
switch (true) { |
||||
case noMarginTop && noMarginBottom: |
||||
return '0' |
||||
case noMarginTop: |
||||
return '0 0 2px 2px' |
||||
case noMarginBottom: |
||||
return '2px 2px 0 0' |
||||
default: |
||||
return '2px' |
||||
} |
||||
}}; |
||||
margin-top: ${({ noMarginTop }) => (noMarginTop ? '0' : '20px')}; |
||||
margin-bottom: ${({ noMarginBottom }) => (noMarginBottom ? '0' : '20px')}; |
||||
padding-left: 20px; |
||||
width: 100%; |
||||
${RadioLabel}::before { |
||||
margin-left: 22px; |
||||
} |
||||
` |
||||
|
||||
export const UserAccountDeleteButton = styled.button` |
||||
width: 80px; |
||||
height: 100%; |
||||
background: red; |
||||
cursor: pointer; |
||||
border: none; |
||||
color: white; |
||||
font-size: 15px; |
||||
font-weight: 600; |
||||
display: none; |
||||
` |
||||
export const UserAccountTextLeftPart = styled.div`` |
||||
|
||||
export const UserAccountSubscriptionWrapper = styled.div` |
||||
${SubscriptionWrapperStyles}; |
||||
&:hover { |
||||
${UserAccountDeleteButton} { |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
&:nth-child(n+1) { |
||||
border-bottom: ${({ noMarginBottom }) => (noMarginBottom ? '1px solid #000' : '')}; |
||||
border-top: ${({ noMarginBottom, noMarginTop }) => (noMarginBottom && noMarginTop ? 'none' : '')}; |
||||
} |
||||
` |
||||
|
||||
export const CheckboxWrapper = styled.div` |
||||
${CheckboxLabel} { |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
line-height: 24px; |
||||
|
||||
&::before { |
||||
margin-left: 22px; |
||||
} |
||||
} |
||||
` |
||||
|
||||
export const UserAccountDate = styled.span` |
||||
color: #fff; |
||||
font-size: 17px; |
||||
cursor: default; |
||||
` |
||||
export const UserAccountText = styled.span` |
||||
color: #fff; |
||||
font-size: 18px; |
||||
cursor: default; |
||||
font-weight: 800; |
||||
margin-left: 20px; |
||||
` |
||||
|
||||
export const UserAccountTeams = styled.p` |
||||
color: #fff; |
||||
font-size: 18px; |
||||
cursor: default; |
||||
margin-top: 15px; |
||||
` |
||||
|
||||
export const UserAccountBoldTextWrapper = styled(TextWrapper)` |
||||
color: #fff; |
||||
font-weight: bold; |
||||
font-size: 20px; |
||||
margin-right: 24px; |
||||
|
||||
&:hover { |
||||
cursor: default; |
||||
} |
||||
` |
||||
|
||||
export const UserAccountNormalTextWrapper = styled(TextWrapper)` |
||||
color: #fff; |
||||
font-weight: normal; |
||||
font-size: 16px; |
||||
margin-right: 24px; |
||||
` |
||||
@ -0,0 +1,31 @@ |
||||
import { |
||||
useEffect, |
||||
useState, |
||||
} from 'react' |
||||
|
||||
import map from 'lodash/map' |
||||
|
||||
import type { SubscriptionType } from 'requests/getSubscriptions' |
||||
import { getSubscriptions } from 'requests/getSubscriptions' |
||||
|
||||
import { useLexicsStore } from 'features/LexicsStore' |
||||
|
||||
export const useSubscriptions = () => { |
||||
const [subscriptions, setSubscriptions] = useState<Array<SubscriptionType>>([]) |
||||
|
||||
const { addLexicsConfig } = useLexicsStore() |
||||
|
||||
useEffect(() => { |
||||
getSubscriptions().then((res) => { |
||||
const lexicsArray = map(res, (subscription) => ( |
||||
String(subscription.lexic) |
||||
)) |
||||
addLexicsConfig(lexicsArray) |
||||
setSubscriptions(res) |
||||
}) |
||||
}, [addLexicsConfig]) |
||||
|
||||
return { |
||||
subscriptions, |
||||
} |
||||
} |
||||
@ -1,41 +1,99 @@ |
||||
import { |
||||
useEffect, |
||||
useState, |
||||
useCallback, |
||||
} from 'react' |
||||
|
||||
import map from 'lodash/map' |
||||
|
||||
import type { SportList } from 'requests/getSportList' |
||||
import { |
||||
SubscriptionAction, |
||||
saveUserCustomSubscription, |
||||
} from 'requests/saveUserCustomSubscription' |
||||
import { getSportList } from 'requests/getSportList' |
||||
import { getUserSubscriptions } from 'requests/getUserSubscriptions' |
||||
import { saveUserSubscription } from 'requests/saveUserSubscription' |
||||
|
||||
import { useLexicsStore } from 'features/LexicsStore' |
||||
import { useToggle } from 'hooks' |
||||
|
||||
export type Team = { |
||||
export type Subscription = { |
||||
id: number, |
||||
name_eng: string, |
||||
name_rus: string, |
||||
type?: number, |
||||
} |
||||
|
||||
type Name = { |
||||
name_eng: string, |
||||
name_rus: string, |
||||
} |
||||
|
||||
export type Match = { |
||||
date: Date, |
||||
id: number, |
||||
team1: Name, |
||||
team2: Name, |
||||
tournament: Name, |
||||
} |
||||
|
||||
export type UserSubscriptions = { |
||||
matches?: Array<Match>, |
||||
sport: number, |
||||
teams?: Array<Subscription>, |
||||
tournaments?: Array<Subscription>, |
||||
} |
||||
|
||||
export const useUserSubscriptions = () => { |
||||
const [subscriptions, setSubscriptions] = useState<Array<Team>>([]) |
||||
const { suffix } = useLexicsStore() |
||||
const [userSubscriptions, setUserSubscriptions] = useState<Array<UserSubscriptions>>([]) |
||||
const [selectedSubscription, setSelectedSubscription] = useState<number | null>(null) |
||||
const [selectedSubscriptionLexic, setSelectedSubscriptionLexic] = useState<string>('') |
||||
const [sportList, setSportList] = useState<SportList>([]) |
||||
|
||||
type Names = 'name_eng' | 'name_rus' |
||||
const { |
||||
close, |
||||
isOpen, |
||||
open, |
||||
} = useToggle() |
||||
|
||||
useEffect(() => { |
||||
getUserSubscriptions().then((res) => { |
||||
setSubscriptions(res.custom?.[0].teams) |
||||
setUserSubscriptions(res.custom) |
||||
setSelectedSubscription(res.id) |
||||
setSelectedSubscriptionLexic(`${res.lexic}`) |
||||
}) |
||||
|
||||
getSportList().then(setSportList) |
||||
}, []) |
||||
|
||||
const normalizeSubscriptions = useCallback(() => { |
||||
const nameKey = `name_${suffix}` as Names |
||||
const saveSubscription = async () => { |
||||
await saveUserSubscription(selectedSubscription) |
||||
close() |
||||
await getUserSubscriptions().then((res) => { |
||||
setSelectedSubscription(res.id) |
||||
setSelectedSubscriptionLexic(`${res.lexic}`) |
||||
}) |
||||
} |
||||
|
||||
return map(subscriptions, (team) => ({ |
||||
...team, |
||||
name: team[nameKey], |
||||
})) |
||||
}, [subscriptions, suffix]) |
||||
const deleteUserSubscription = async (subscription: Subscription, sport: number) => { |
||||
await saveUserCustomSubscription({ |
||||
action: SubscriptionAction.REMOVE, |
||||
id: subscription.id, |
||||
sport, |
||||
type: subscription.type as number, |
||||
}) |
||||
await getUserSubscriptions().then((res) => { |
||||
setUserSubscriptions(res.custom) |
||||
}) |
||||
} |
||||
|
||||
return normalizeSubscriptions() |
||||
return { |
||||
close, |
||||
deleteUserSubscription, |
||||
isOpen, |
||||
open, |
||||
saveSubscription, |
||||
selectedSubscription, |
||||
selectedSubscriptionLexic, |
||||
setSelectedSubscription, |
||||
sportList, |
||||
userSubscriptions, |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,34 @@ |
||||
import { |
||||
DATA_URL, |
||||
PROCEDURES, |
||||
} from 'config' |
||||
import { callApi } from 'helpers' |
||||
|
||||
const proc = PROCEDURES.get_subscriptions |
||||
|
||||
type Tournament = { |
||||
id: number, |
||||
name_eng: string, |
||||
name_rus: string, |
||||
sport: number, |
||||
} |
||||
|
||||
export type SubscriptionType = { |
||||
id: number, |
||||
lexic: number, |
||||
tournaments: Array<Tournament>, |
||||
} |
||||
|
||||
export const getSubscriptions = (): Promise<Array<SubscriptionType>> => { |
||||
const config = { |
||||
body: { |
||||
params: {}, |
||||
proc, |
||||
}, |
||||
} |
||||
|
||||
return callApi({ |
||||
config, |
||||
url: DATA_URL, |
||||
}) |
||||
} |
||||
Loading…
Reference in new issue