Ott 245 favorite error modal (#102)

5 years ago · 01124ce8ca
parent a116bbfad2
commit 01124ce8ca
12 changed files with 151 additions and 12 deletions
--- a/public/images/exclamation.svg
+++ b/public/images/exclamation.svg
@ -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>
--- a/public/index.html
+++ b/public/index.html
@ -11,6 +11,7 @@
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="modal-root"></div>
    <div id="root"></div>
  </body>
 </html>
--- a/src/config/lexics/indexLexics.tsx
+++ b/src/config/lexics/indexLexics.tsx
@ -2,6 +2,7 @@ import { proceduresLexics } from './procedures'

 export const indexLexics = {
  add_to_favorites: 1701,
+  add_to_favorites_error: 12943,
  added_to_favorites: 13048,
  basketball: 6960,
  broadcast: 13049,
--- a/src/features/HomePage/index.tsx
+++ b/src/features/HomePage/index.tsx
@ -1,7 +1,6 @@
 import React from 'react'

 import { Matches } from 'features/Matches'
-
 import { Content } from './styled'

 export const HomePage = () => (
--- a/src/features/Modal/index.tsx
+++ b/src/features/Modal/index.tsx
@ -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
+};
--- a/src/features/Modal/styled.tsx
+++ b/src/features/Modal/styled.tsx
@ -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;
+`
--- a/src/features/OutsideClick/hooks/index.tsx
+++ b/src/features/OutsideClick/hooks/index.tsx
@ -15,7 +15,7 @@ export const useOutsideClickEffect = ({
        : null

      /** деструктуризация wrapperRef не сработает, ссылка на реф теряется */
-      if (wrapperRef.current && !wrapperRef.current.contains(targetNode)) {
+      if (!wrapperRef.current?.contains(targetNode)) {
        onClick()
      }
    }
--- a/src/features/ProfileCard/hooks.tsx
+++ b/src/features/ProfileCard/hooks.tsx
@ -4,9 +4,11 @@ import { useCallback } from 'react'
 import findIndex from 'lodash/findIndex'

 import { handleImageError, getProfileLogo } from 'helpers'
-import { useUserFavoritesStore } from 'features/UserFavorites/store'
+
 import { useSportNameParam, usePageId } from 'hooks'

+import { useUserFavoritesStore } from 'features/UserFavorites/store'
+
 import type { ProfileCardProps } from './types'

 export const useProfileCard = ({ profileType }: ProfileCardProps) => {
--- a/src/features/UserFavorites/hooks/index.tsx
+++ b/src/features/UserFavorites/hooks/index.tsx
@ -6,8 +6,11 @@ import {

 import type { UserFavorites } from 'requests'
 import { modifyUserFavorites, getUserFavorites } from 'requests'
+
 import { useLexicsStore } from 'features/LexicsStore'

+import { useToggle } from 'hooks/useToggle'
+
 import { normalizeUserFavorites } from '../helpers'

 type Args = Parameters<typeof modifyUserFavorites>[0]
@ -16,12 +19,18 @@ export const useUserFavorites = () => {
  const { suffix } = useLexicsStore()
  const [userFavorites, setUserFavorites] = useState<UserFavorites>([])

+  const {
+    close,
+    isOpen,
+    open,
+  } = useToggle()
+
  useEffect(() => {
    getUserFavorites().then(setUserFavorites)
  }, [])

  const addRemoveFavorite = (args: Args) => {
-    modifyUserFavorites(args).then(setUserFavorites)
+    modifyUserFavorites(args).then(setUserFavorites, open)
  }

  const memoizedUserFavorites = useMemo(
@ -31,6 +40,9 @@ export const useUserFavorites = () => {

  return {
    addRemoveFavorite,
+    close,
+    isOpen,
+    open,
    userFavorites: memoizedUserFavorites,
  }
 }
--- a/src/features/UserFavorites/index.tsx
+++ b/src/features/UserFavorites/index.tsx
@ -4,8 +4,10 @@ import map from 'lodash/map'

 import { handleImageError } from 'helpers'

-import { useUserFavoritesStore } from './store'
+import { Modal } from 'features/Modal'
+
 import { TooltipBlock } from './TooltipBlock'
+
 import {
  StyledLink,
  UserSportFavItemLogoWrapper,
@ -14,10 +16,19 @@ import {
  UserSportFavStar,
  UserSportFavLogoWrapper,
  UserSportFavWrapper,
+  ExclamationSign,
+  FavoriteModal,
+  Text,
 } from './styled'
+import { useUserFavoritesStore } from './store'

 export const UserFavorites = () => {
-  const { addRemoveFavorite, userFavorites } = useUserFavoritesStore()
+  const {
+    addRemoveFavorite,
+    close,
+    isOpen,
+    userFavorites,
+  } = useUserFavoritesStore()

  return (
    <UserSportFavWrapper>
@ -56,6 +67,15 @@ export const UserFavorites = () => {
          </UserSportFavItemLogoWrapper>
        ))
      }
+      <Modal
+        isOpen={isOpen}
+        close={close}
+      >
+        <FavoriteModal>
+          <ExclamationSign />
+          <Text t='add_to_favorites_error' />
+        </FavoriteModal>
+      </Modal>
    </UserSportFavWrapper>
  )
 }
--- a/src/features/UserFavorites/styled.tsx
+++ b/src/features/UserFavorites/styled.tsx
@ -3,6 +3,8 @@ import { Link } from 'react-router-dom'
 import styled from 'styled-components/macro'

 import { Logo } from 'features/Logo'
+import { T9n } from 'features/T9n'
+
 import { TooltipBlockWrapper } from './TooltipBlock/styled'

 export const StyledLink = styled(Link)``
@ -83,3 +85,24 @@ export const UserSportFavStar = styled.div`
  background: #3f3f3f url('/images/sportFavStar.png') no-repeat center;
  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%;
+`
--- a/src/requests/modifyUserSportFavs.tsx
+++ b/src/requests/modifyUserSportFavs.tsx
@ -1,17 +1,20 @@
-import isArray from 'lodash/isArray'
-
 import {
  DATA_URL,
  PROCEDURES,
  SportTypes,
  ProfileTypes,
 } from 'config'
-import { callApi, getResponseData } from 'helpers'
+import { callApi } from 'helpers'

 import { UserFavorites } from './getUserSportFavs'

 const proc = PROCEDURES.save_user_favorite

+enum FavoriteStatusTypes {
+  SUCCESS = 1,
+  FAILURE = 2,
+}
+
 type Args = {
  action: number,
  id: number,
@ -38,10 +41,13 @@ export const modifyUserFavorites = async ({
    },
  }

-  const data = await callApi({
+  const { _p_data, _p_status } = await callApi({
    config,
    url: DATA_URL,
-  }).then(getResponseData(proc))
+  })

-  return isArray(data) ? data : []
+  if (_p_status === FavoriteStatusTypes.FAILURE) {
+    return Promise.reject()
+  }
+  return Promise.resolve(_p_data)
 }