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

Ott 245 favorite error modal (#102)

Browse Source
keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Armen 5 years ago committed by GitHub
parent a116bbfad2
commit 01124ce8ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 151 additions and 12 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. 5
      public/images/exclamation.svg
  2. 1
      public/index.html
  3. 1
      src/config/lexics/indexLexics.tsx
  4. 1
      src/features/HomePage/index.tsx
  5. 38
      src/features/Modal/index.tsx
  6. 32
      src/features/Modal/styled.tsx
  7. 2
      src/features/OutsideClick/hooks/index.tsx
  8. 4
      src/features/ProfileCard/hooks.tsx
  9. 14
      src/features/UserFavorites/hooks/index.tsx
  10. 24
      src/features/UserFavorites/index.tsx
  11. 23
      src/features/UserFavorites/styled.tsx
  12. 18
      src/requests/modifyUserSportFavs.tsx

5
public/images/exclamation.svg
Unescape View File

@ -0,0 +1,5 @@
<svg width="76" height="66" viewBox="0 0 76 66" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.26803 64.6128C1.71534 64.6128 0.151516 61.6768 1.48903 59.3974L34.7984 2.62856C36.0727 0.457146 39.08 0.457146 40.3543 2.62856L73.6637 59.3994C75.0012 61.6789 73.4374 64.6149 70.8847 64.6149H4.26803V64.6128Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
<path d="M37.576 48.3018C34.8724 48.3018 32.6826 50.4936 32.6826 53.1951C32.6826 55.8966 34.8724 58.0884 37.576 58.0884C40.2775 58.0884 42.4693 55.8966 42.4693 53.1951C42.4693 50.4936 40.2795 48.3018 37.576 48.3018Z" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"/>
<path d="M37.575 41.7775C39.3488 41.7775 40.4294 40.809 40.8372 39.3308C41.245 37.8526 42.2196 27.6663 42.4683 22.3856C42.607 19.4149 40.2765 17.3108 37.575 17.3108C34.8735 17.3108 32.543 19.4149 32.6817 22.3856C32.9304 27.6663 33.905 37.8526 34.3128 39.3308C34.7206 40.809 35.8012 41.7775 37.575 41.7775Z" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
public/index.html
Unescape View File

@ -11,6 +11,7 @@
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="modal-root"></div>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

1
src/config/lexics/indexLexics.tsx
Unescape View File

@ -2,6 +2,7 @@ import { proceduresLexics } from './procedures'
export const indexLexics = { export const indexLexics = {
add_to_favorites: 1701, add_to_favorites: 1701,
add_to_favorites_error: 12943,
added_to_favorites: 13048, added_to_favorites: 13048,
basketball: 6960, basketball: 6960,
broadcast: 13049, broadcast: 13049,

1
src/features/HomePage/index.tsx
Unescape View File

@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import { Matches } from 'features/Matches' import { Matches } from 'features/Matches'
import { Content } from './styled' import { Content } from './styled'
export const HomePage = () => ( export const HomePage = () => (

38
src/features/Modal/index.tsx
Unescape View File

@ -0,0 +1,38 @@
import type { ReactNode } from 'react'
import React, {
useRef,
} from 'react'
import ReactDOM from 'react-dom'
import {
ModalContainer,
ModalWindow,
ModalCloseButton,
} from './styled'
type TModalProps = {
children: ReactNode,
close: ()=> void,
isOpen: boolean,
}
export const Modal = ({
children,
close,
isOpen,
}: TModalProps) => {
const modalRoot = useRef(document.getElementById('modal-root'))
return isOpen
? ReactDOM.createPortal(
<ModalContainer>
<ModalWindow>
<ModalCloseButton onClick={close} />
{children}
</ModalWindow>
</ModalContainer>,
modalRoot.current as Element,
)
: null
};

32
src/features/Modal/styled.tsx
Unescape View File

@ -0,0 +1,32 @@
import styled from 'styled-components/macro'
import { CloseButton } from 'features/Common/CloseButton'
export const ModalContainer = styled.div`
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
color: white;
font-weight: 600;
`
export const ModalWindow = styled.div`
background: #3F3F3F;
position: relative;
padding: 15px;
box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.7);
border-radius: 10px;
`
export const ModalCloseButton = styled(CloseButton)`
margin-right: 19px;
margin-top: 16px;
width: 12.82px;
height: 12.82px;
cursor: pointer;
`

2
src/features/OutsideClick/hooks/index.tsx
Unescape View File

@ -15,7 +15,7 @@ export const useOutsideClickEffect = ({
: null : null
/** деструктуризация wrapperRef не сработает, ссылка на реф теряется */ /** деструктуризация wrapperRef не сработает, ссылка на реф теряется */
if (wrapperRef.current && !wrapperRef.current.contains(targetNode)) { if (!wrapperRef.current?.contains(targetNode)) {
onClick() onClick()
} }
} }

4
src/features/ProfileCard/hooks.tsx
Unescape View File

@ -4,9 +4,11 @@ import { useCallback } from 'react'
import findIndex from 'lodash/findIndex' import findIndex from 'lodash/findIndex'
import { handleImageError, getProfileLogo } from 'helpers' import { handleImageError, getProfileLogo } from 'helpers'
import { useUserFavoritesStore } from 'features/UserFavorites/store'
import { useSportNameParam, usePageId } from 'hooks' import { useSportNameParam, usePageId } from 'hooks'
import { useUserFavoritesStore } from 'features/UserFavorites/store'
import type { ProfileCardProps } from './types' import type { ProfileCardProps } from './types'
export const useProfileCard = ({ profileType }: ProfileCardProps) => { export const useProfileCard = ({ profileType }: ProfileCardProps) => {

14
src/features/UserFavorites/hooks/index.tsx
Unescape View File

@ -6,8 +6,11 @@ import {
import type { UserFavorites } from 'requests' import type { UserFavorites } from 'requests'
import { modifyUserFavorites, getUserFavorites } from 'requests' import { modifyUserFavorites, getUserFavorites } from 'requests'
import { useLexicsStore } from 'features/LexicsStore' import { useLexicsStore } from 'features/LexicsStore'
import { useToggle } from 'hooks/useToggle'
import { normalizeUserFavorites } from '../helpers' import { normalizeUserFavorites } from '../helpers'
type Args = Parameters<typeof modifyUserFavorites>[0] type Args = Parameters<typeof modifyUserFavorites>[0]
@ -16,12 +19,18 @@ export const useUserFavorites = () => {
const { suffix } = useLexicsStore() const { suffix } = useLexicsStore()
const [userFavorites, setUserFavorites] = useState<UserFavorites>([]) const [userFavorites, setUserFavorites] = useState<UserFavorites>([])
const {
close,
isOpen,
open,
} = useToggle()
useEffect(() => { useEffect(() => {
getUserFavorites().then(setUserFavorites) getUserFavorites().then(setUserFavorites)
}, []) }, [])
const addRemoveFavorite = (args: Args) => { const addRemoveFavorite = (args: Args) => {
modifyUserFavorites(args).then(setUserFavorites) modifyUserFavorites(args).then(setUserFavorites, open)
} }
const memoizedUserFavorites = useMemo( const memoizedUserFavorites = useMemo(
@ -31,6 +40,9 @@ export const useUserFavorites = () => {
return { return {
addRemoveFavorite, addRemoveFavorite,
close,
isOpen,
open,
userFavorites: memoizedUserFavorites, userFavorites: memoizedUserFavorites,
} }
} }

24
src/features/UserFavorites/index.tsx
Unescape View File

@ -4,8 +4,10 @@ import map from 'lodash/map'
import { handleImageError } from 'helpers' import { handleImageError } from 'helpers'
import { useUserFavoritesStore } from './store' import { Modal } from 'features/Modal'
import { TooltipBlock } from './TooltipBlock' import { TooltipBlock } from './TooltipBlock'
import { import {
StyledLink, StyledLink,
UserSportFavItemLogoWrapper, UserSportFavItemLogoWrapper,
@ -14,10 +16,19 @@ import {
UserSportFavStar, UserSportFavStar,
UserSportFavLogoWrapper, UserSportFavLogoWrapper,
UserSportFavWrapper, UserSportFavWrapper,
ExclamationSign,
FavoriteModal,
Text,
} from './styled' } from './styled'
import { useUserFavoritesStore } from './store'
export const UserFavorites = () => { export const UserFavorites = () => {
const { addRemoveFavorite, userFavorites } = useUserFavoritesStore() const {
addRemoveFavorite,
close,
isOpen,
userFavorites,
} = useUserFavoritesStore()
return ( return (
<UserSportFavWrapper> <UserSportFavWrapper>
@ -56,6 +67,15 @@ export const UserFavorites = () => {
</UserSportFavItemLogoWrapper> </UserSportFavItemLogoWrapper>
)) ))
} }
<Modal
isOpen={isOpen}
close={close}
>
<FavoriteModal>
<ExclamationSign />
<Text t='add_to_favorites_error' />
</FavoriteModal>
</Modal>
</UserSportFavWrapper> </UserSportFavWrapper>
) )
} }

23
src/features/UserFavorites/styled.tsx
Unescape View File

@ -3,6 +3,8 @@ import { Link } from 'react-router-dom'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import { Logo } from 'features/Logo' import { Logo } from 'features/Logo'
import { T9n } from 'features/T9n'
import { TooltipBlockWrapper } from './TooltipBlock/styled' import { TooltipBlockWrapper } from './TooltipBlock/styled'
export const StyledLink = styled(Link)`` export const StyledLink = styled(Link)``
@ -83,3 +85,24 @@ export const UserSportFavStar = styled.div`
background: #3f3f3f url('/images/sportFavStar.png') no-repeat center; background: #3f3f3f url('/images/sportFavStar.png') no-repeat center;
margin-bottom: 16px; margin-bottom: 16px;
` `
export const FavoriteModal = styled.div`
width: 411px;
height: 202px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`
export const ExclamationSign = styled.div`
width: 77px;
height: 66px;
background: url(/images/exclamation.svg) no-repeat;
margin-bottom: 20px;
`
export const Text = styled(T9n)`
text-align: center;
line-height: 160.2%;
`

18
src/requests/modifyUserSportFavs.tsx
Unescape View File

@ -1,17 +1,20 @@
import isArray from 'lodash/isArray'
import { import {
DATA_URL, DATA_URL,
PROCEDURES, PROCEDURES,
SportTypes, SportTypes,
ProfileTypes, ProfileTypes,
} from 'config' } from 'config'
import { callApi, getResponseData } from 'helpers' import { callApi } from 'helpers'
import { UserFavorites } from './getUserSportFavs' import { UserFavorites } from './getUserSportFavs'
const proc = PROCEDURES.save_user_favorite const proc = PROCEDURES.save_user_favorite
enum FavoriteStatusTypes {
SUCCESS = 1,
FAILURE = 2,
}
type Args = { type Args = {
action: number, action: number,
id: number, id: number,
@ -38,10 +41,13 @@ export const modifyUserFavorites = async ({
}, },
} }
const data = await callApi({ const { _p_data, _p_status } = await callApi({
config, config,
url: DATA_URL, url: DATA_URL,
}).then(getResponseData(proc)) })
return isArray(data) ? data : [] if (_p_status === FavoriteStatusTypes.FAILURE) {
return Promise.reject()
}
return Promise.resolve(_p_data)
} }

Write Preview
Loading…
Cancel
Save