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

feat(#2478): add smart banner for android

Browse Source
keep-around/91fca9f16fe632a82e3fff022fd78f163d2ae7b8
Andrei Dekterev 3 years ago
parent 4734987790
commit 91fca9f16f
6 changed files with 187 additions and 13 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. 24
      public/images/icon-instattv-smart-banner.svg
  2. 55
      src/components/SmartBanner/index.tsx
  3. 56
      src/components/SmartBanner/styled.tsx
  4. 37
      src/features/HeaderMobile/index.tsx
  5. 16
      src/features/HomePage/hooks.tsx
  6. 12
      src/features/HomePage/index.tsx

24
public/images/icon-instattv-smart-banner.svg
Unescape View File

@ -0,0 +1,24 @@
<svg width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M0 19.6875C0 12.7962 0 9.35059 1.34113 6.71848C2.52082 4.4032 4.4032 2.52082 6.71848 1.34113C9.35059 0 12.7962 0 19.6875 0H43.3125C50.2038 0 53.6494 0 56.2815 1.34113C58.5968 2.52082 60.4792 4.4032 61.6589 6.71848C63 9.35059 63 12.7962 63 19.6875V43.3125C63 50.2038 63 53.6494 61.6589 56.2815C60.4792 58.5968 58.5968 60.4792 56.2815 61.6589C53.6494 63 50.2038 63 43.3125 63H19.6875C12.7962 63 9.35059 63 6.71848 61.6589C4.4032 60.4792 2.52082 58.5968 1.34113 56.2815C0 53.6494 0 50.2038 0 43.3125V19.6875Z" fill="black"/>
<path d="M0 19.6875C0 12.7962 0 9.35059 1.34113 6.71848C2.52082 4.4032 4.4032 2.52082 6.71848 1.34113C9.35059 0 12.7962 0 19.6875 0H43.3125C50.2038 0 53.6494 0 56.2815 1.34113C58.5968 2.52082 60.4792 4.4032 61.6589 6.71848C63 9.35059 63 12.7962 63 19.6875V43.3125C63 50.2038 63 53.6494 61.6589 56.2815C60.4792 58.5968 58.5968 60.4792 56.2815 61.6589C53.6494 63 50.2038 63 43.3125 63H19.6875C12.7962 63 9.35059 63 6.71848 61.6589C4.4032 60.4792 2.52082 58.5968 1.34113 56.2815C0 53.6494 0 50.2038 0 43.3125V19.6875Z" fill="url(#pattern0)" fill-opacity="0.05"/>
<path d="M0 19.6875C0 12.7962 0 9.35059 1.34113 6.71848C2.52082 4.4032 4.4032 2.52082 6.71848 1.34113C9.35059 0 12.7962 0 19.6875 0H43.3125C50.2038 0 53.6494 0 56.2815 1.34113C58.5968 2.52082 60.4792 4.4032 61.6589 6.71848C63 9.35059 63 12.7962 63 19.6875V43.3125C63 50.2038 63 53.6494 61.6589 56.2815C60.4792 58.5968 58.5968 60.4792 56.2815 61.6589C53.6494 63 50.2038 63 43.3125 63H19.6875C12.7962 63 9.35059 63 6.71848 61.6589C4.4032 60.4792 2.52082 58.5968 1.34113 56.2815C0 53.6494 0 50.2038 0 43.3125V19.6875Z" fill="url(#paint0_radial_27909_241566)"/>
<path d="M0.0307617 19.6875C0.0307617 16.2414 0.0307856 13.6586 0.198301 11.6083C0.365787 9.55838 0.700552 8.04344 1.36854 6.73244C2.54528 4.42295 4.42295 2.54528 6.73244 1.36854C8.04344 0.700552 9.55838 0.365787 11.6083 0.198301C13.6586 0.0307856 16.2414 0.0307617 19.6875 0.0307617H43.3125C46.7586 0.0307617 49.3414 0.0307856 51.3917 0.198301C53.4416 0.365787 54.9566 0.700552 56.2676 1.36854C58.577 2.54528 60.4547 4.42295 61.6315 6.73244C62.2994 8.04344 62.6342 9.55838 62.8017 11.6083C62.9692 13.6586 62.9692 16.2414 62.9692 19.6875V43.3125C62.9692 46.7586 62.9692 49.3414 62.8017 51.3917C62.6342 53.4416 62.2994 54.9566 61.6315 56.2676C60.4547 58.577 58.577 60.4547 56.2676 61.6315C54.9566 62.2994 53.4416 62.6342 51.3917 62.8017C49.3414 62.9692 46.7586 62.9692 43.3125 62.9692H19.6875C16.2414 62.9692 13.6586 62.9692 11.6083 62.8017C9.55838 62.6342 8.04344 62.2994 6.73244 61.6315C4.42295 60.4547 2.54528 58.577 1.36854 56.2676C0.700552 54.9566 0.365787 53.4416 0.198301 51.3917C0.0307856 49.3414 0.0307617 46.7586 0.0307617 43.3125V19.6875Z" stroke="black" stroke-opacity="0.08" stroke-width="0.0615234"/>
<path d="M57.742 19.1351C57.742 19.5076 57.613 19.8181 57.3226 20.0664C57.0645 20.3148 56.7097 20.4389 56.3225 20.4389C56.129 20.4389 55.9354 20.4079 55.7741 20.3458C55.6128 20.2837 55.4515 20.1906 55.3225 20.0664C55.1934 19.9422 55.0966 19.8181 55.0321 19.6628C54.9676 19.5076 54.9031 19.3214 54.9031 19.1351C54.9031 18.9488 54.9353 18.7936 55.0321 18.6384C55.0966 18.4832 55.2257 18.328 55.3225 18.2348C55.4515 18.1107 55.6128 18.0175 55.7741 17.9554C55.9354 17.8933 56.129 17.8623 56.3225 17.8623C56.7097 17.8623 57.0645 17.9865 57.3226 18.2348C57.613 18.4521 57.742 18.7626 57.742 19.1351Z" fill="white"/>
<path d="M11.6417 28.9141C11.6095 28.9762 11.4804 28.9762 11.3191 28.9762H9.02861C8.77052 28.9762 8.64148 28.852 8.64148 28.6347V18.3593C8.64148 18.142 8.77052 18.0488 9.02861 18.0488H11.3514C11.5449 18.0488 11.6417 18.0799 11.674 18.1109C11.7062 18.142 11.7062 18.2351 11.7062 18.3593V28.6347C11.7062 28.7589 11.7062 28.852 11.6417 28.9141Z" fill="white"/>
<path d="M17.1905 22.7976C17.0937 22.7976 16.9646 22.7976 16.7711 22.7976C16.6098 22.7976 16.4485 22.8287 16.2872 22.8597V28.6649C16.2872 28.7891 16.2549 28.8822 16.2226 28.9132C16.1904 28.9443 16.0613 28.9753 15.9 28.9753H13.7386C13.4805 28.9753 13.3514 28.8822 13.3514 28.6649V21.9595C13.3514 21.618 13.416 21.3696 13.5127 21.1523C13.6095 20.935 13.8676 20.8108 14.2547 20.7177C14.3515 20.6867 14.5128 20.6867 14.7386 20.6556C14.9645 20.6246 15.1903 20.5935 15.4484 20.5935C15.7065 20.5935 15.9646 20.5625 16.2226 20.5625C16.4807 20.5625 16.7065 20.5625 16.9001 20.5625C17.6744 20.5625 18.3841 20.6246 18.9971 20.7798C19.61 20.935 20.0939 21.1523 20.481 21.4938C20.8682 21.8353 21.1585 22.2389 21.3843 22.7666C21.5779 23.2943 21.6747 23.9463 21.6747 24.6913V28.6959C21.6747 28.8201 21.6424 28.9132 21.6102 28.9443C21.5779 28.9753 21.4489 29.0064 21.2876 29.0064H19.0938C18.8358 29.0064 18.7067 28.9132 18.7067 28.6959V24.3809C18.7067 23.8531 18.6099 23.4496 18.3841 23.1702C18.1905 22.9218 17.8034 22.7976 17.1905 22.7976Z" fill="white"/>
<path d="M23.0296 21.6806C22.9651 21.2459 22.9973 20.8113 23.1264 20.3767C23.2554 19.9421 23.449 19.5696 23.7393 19.2281C24.0297 18.8866 24.4168 18.6072 24.933 18.3589C25.4491 18.1105 26.0298 17.9553 26.7396 17.8932C27.3848 17.8311 28.0622 17.8311 28.772 17.8622C29.4494 17.9243 30.0301 18.0484 30.5463 18.2347C30.7399 18.2968 30.8367 18.3589 30.8689 18.452C30.9012 18.5141 30.8689 18.6693 30.8044 18.8866L30.514 20.2215C30.4495 20.4388 30.385 20.563 30.3205 20.594C30.256 20.6251 30.1269 20.6251 29.9334 20.563C29.4494 20.5009 28.9655 20.4388 28.4816 20.4078C27.9977 20.4078 27.5138 20.4078 27.0944 20.4388C26.7073 20.4699 26.4815 20.563 26.3524 20.6561C26.2234 20.7803 26.1911 20.9045 26.2234 21.0597C26.2234 21.1218 26.2556 21.1839 26.2879 21.2459C26.3202 21.308 26.3847 21.3701 26.4815 21.4322C26.5782 21.4943 26.7073 21.5564 26.8686 21.6495C27.0299 21.7116 27.2557 21.7737 27.5461 21.8358C28.2235 22.022 28.8365 22.1773 29.3849 22.3635C29.9334 22.5498 30.385 22.7671 30.7721 23.0154C31.1593 23.2638 31.4819 23.5742 31.7077 23.9467C31.9335 24.2882 32.0948 24.7539 32.1593 25.2506C32.2884 26.3682 31.998 27.2374 31.2883 27.8893C30.5786 28.5102 29.5462 28.9137 28.1268 29.069C27.3848 29.131 26.6105 29.1621 25.804 29.1C24.9975 29.0379 24.2232 28.8516 23.5457 28.5412C23.4167 28.4791 23.3522 28.417 23.3522 28.3549C23.3199 28.2929 23.3522 28.1687 23.3844 28.0135L23.8684 26.4613C23.9329 26.275 23.9974 26.1819 24.0619 26.1508C24.1264 26.1198 24.2555 26.1198 24.4168 26.1819C24.5781 26.244 24.8039 26.275 25.062 26.3061C25.3201 26.3682 25.6104 26.3992 25.9008 26.4302C26.1911 26.4613 26.5137 26.4923 26.8363 26.4923C27.1589 26.4923 27.4815 26.4923 27.7719 26.4613C28.03 26.4302 28.2235 26.3992 28.3848 26.3371C28.5139 26.275 28.6429 26.2129 28.7075 26.1198C28.772 26.0577 28.8365 25.9646 28.8365 25.8715C28.8365 25.7783 28.8688 25.7162 28.8365 25.6541C28.8365 25.561 28.8042 25.4989 28.772 25.4058C28.7397 25.3127 28.6752 25.2506 28.5784 25.1885C28.4816 25.1264 28.3526 25.0643 28.159 24.9712C27.9655 24.9091 27.7396 24.816 27.4493 24.7539C26.8686 24.6297 26.3202 24.4745 25.804 24.2882C25.2878 24.133 24.8362 23.9157 24.449 23.6984C24.0619 23.4811 23.7393 23.1707 23.5135 22.8602C23.2554 22.5498 23.0941 22.1462 23.0296 21.6806Z" fill="white"/>
<path d="M38.676 28.6962C38.676 28.7583 38.6115 28.7893 38.4824 28.8204C38.0308 28.9445 37.5791 29.0377 37.1597 29.0687C36.7404 29.0997 36.321 29.1308 35.9661 29.1308C34.966 29.1308 34.2563 28.9135 33.8369 28.5099C33.3853 28.1063 33.1917 27.5476 33.1917 26.8336V22.7979H32.0626C31.9335 22.7979 31.8367 22.7668 31.8367 22.7048C31.8045 22.6427 31.7722 22.5495 31.7722 22.4874V21.3699C31.7722 21.2767 31.7722 21.1836 31.8045 21.1526C31.8367 21.1215 31.9013 21.0905 32.0303 21.0594L33.1594 20.749V19.321C33.1594 19.1658 33.1917 19.0726 33.2562 19.0106C33.3207 18.9485 33.4175 18.9174 33.5466 18.8864L35.708 18.2655C35.8371 18.2345 35.9338 18.2345 35.9984 18.2966C36.0306 18.2966 36.0629 18.3897 36.0629 18.5449V20.78H37.8695C37.9985 20.78 38.0953 20.8111 38.0953 20.8421C38.0953 20.8732 38.1276 20.9663 38.1276 21.0594V22.4564C38.1276 22.5806 38.1276 22.6427 38.1276 22.7048C38.1276 22.7668 38.0308 22.7668 37.9017 22.7668H36.0629V26.0575C36.0629 26.3058 36.1274 26.4921 36.2887 26.5852C36.45 26.6783 36.6436 26.7404 36.9662 26.7404C37.1275 26.7404 37.3533 26.7404 37.6114 26.7094C37.8695 26.6783 38.063 26.6473 38.1921 26.6473C38.2889 26.6473 38.3534 26.6473 38.3857 26.6473C38.4179 26.6783 38.4502 26.7094 38.4502 26.8025L38.676 28.5099C38.676 28.603 38.676 28.6651 38.676 28.6962Z" fill="white"/>
<path d="M47.0641 27.8275C47.0641 27.9827 47.0641 28.1069 46.9995 28.2C46.935 28.2931 46.8382 28.4173 46.6447 28.5104C46.3866 28.6346 46.1285 28.7278 45.8381 28.7898C45.5478 28.883 45.2252 28.9451 44.9348 29.0071C44.6122 29.0692 44.2896 29.1003 43.967 29.1313C43.6444 29.1624 43.3541 29.1624 43.0637 29.1624C42.3217 29.1624 41.6765 29.1003 41.1926 28.9761C40.6764 28.8519 40.2893 28.6657 39.9667 28.4173C39.6764 28.2 39.4505 27.8896 39.3215 27.5791C39.1925 27.2687 39.1279 26.8962 39.1279 26.5237C39.1279 25.5923 39.4183 24.9094 40.0312 24.4437C40.6442 23.9781 41.4184 23.7297 42.4185 23.7297H44.1929V23.5124C44.1929 23.4503 44.1929 23.3572 44.1606 23.2641C44.1283 23.1709 44.0961 23.0778 43.9993 22.9847C43.9348 22.8915 43.8057 22.8295 43.6444 22.7674C43.4831 22.7053 43.2896 22.7053 43.0637 22.7053C42.9024 22.7053 42.7411 22.7053 42.5476 22.7363C42.354 22.7363 42.1604 22.7674 41.9346 22.7984C41.7088 22.8295 41.5152 22.8605 41.2894 22.8605C41.0636 22.8915 40.87 22.9226 40.7087 22.9847C40.5474 23.0157 40.4506 23.0157 40.4184 22.9847C40.3538 22.9536 40.3216 22.8605 40.2893 22.7674L39.999 21.4325C39.9667 21.2773 39.9667 21.1841 39.999 21.1531C40.0312 21.1221 40.0958 21.06 40.1925 21.0289C40.7087 20.8737 41.2249 20.7495 41.7733 20.6564C42.3217 20.5943 42.8702 20.5322 43.4831 20.5322C44.709 20.5322 45.6446 20.7806 46.2253 21.2462C46.806 21.7119 47.1286 22.4569 47.1286 23.4814L47.0641 27.8275ZM44.1606 25.4061H43.1928C43.0637 25.4061 42.9669 25.4061 42.8379 25.4371C42.7089 25.4682 42.6121 25.4992 42.5153 25.5613C42.4185 25.6234 42.3217 25.7165 42.2895 25.8096C42.225 25.9338 42.1927 26.058 42.1927 26.2443C42.1927 26.4926 42.2895 26.6789 42.483 26.803C42.6766 26.9272 42.9347 26.9893 43.225 26.9893C43.2896 26.9893 43.4509 26.9893 43.6444 26.9583C43.838 26.9272 44.0315 26.8962 44.1606 26.8341V25.4061Z" fill="white"/>
<path d="M54.2901 28.6962C54.2901 28.7583 54.2256 28.7893 54.0966 28.8204C53.6449 28.9445 53.1933 29.0377 52.7739 29.0687C52.3545 29.0997 51.9351 29.1308 51.5802 29.1308C50.5802 29.1308 49.8704 28.9135 49.451 28.5099C48.9994 28.1063 48.8058 27.5476 48.8058 26.8336V22.7979H47.6767C47.5477 22.7979 47.4509 22.7668 47.4509 22.7048C47.4186 22.6427 47.3864 22.5495 47.3864 22.4874V21.3699C47.3864 21.2767 47.3864 21.1836 47.4186 21.1526C47.4509 21.1215 47.5154 21.0905 47.6444 21.0594L48.8058 20.78V19.321C48.8058 19.1658 48.8381 19.0726 48.9026 19.0106C48.9671 18.9485 49.0639 18.9174 49.1929 18.8864L51.3544 18.2655C51.4835 18.2345 51.5802 18.2345 51.6448 18.2966C51.7093 18.3586 51.7415 18.4207 51.7415 18.5759V20.8111H53.5481C53.6772 20.8111 53.774 20.8421 53.774 20.8732C53.774 20.9042 53.8062 20.9974 53.8062 21.0905V22.4874C53.8062 22.6116 53.8062 22.6737 53.8062 22.7358C53.8062 22.7979 53.7094 22.7979 53.5804 22.7979H51.7738V26.0885C51.7738 26.3369 51.8383 26.5231 51.9996 26.6163C52.1287 26.7094 52.3545 26.7715 52.6771 26.7715C52.8384 26.7715 53.0642 26.7715 53.3223 26.7404C53.5804 26.7094 53.774 26.6783 53.903 26.6783C53.9998 26.6783 54.0643 26.6783 54.0966 26.6783C54.1288 26.7094 54.1611 26.7404 54.1611 26.8336L54.3869 28.541C54.2901 28.603 54.2901 28.6651 54.2901 28.6962Z" fill="white"/>
<path d="M21.4835 37.4718H17.0735V34.873H29.0829V37.4718H24.6729V48.6543H21.4835V37.4718ZM46.1612 34.873L40.1959 48.6543H37.0459L31.1003 34.873H34.5456L38.739 44.7168L42.9915 34.873H46.1612Z" fill="white"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="0.170159" height="0.170159">
<use xlink:href="#image0_27909_241566" transform="scale(0.00265873)"/>
</pattern>
<radialGradient id="paint0_radial_27909_241566" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(31.5 18.6083) rotate(90) scale(18.0596 31.3866)">
<stop stop-color="white" stop-opacity="0.14"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</radialGradient>
<image id="image0_27909_241566" width="64" height="64" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA40lEQVR4Xu3bQQ6EQAhEUbj/oXsO8Sdh4XOvJAi/qkF3Zt6E6710++xuiD6T40uACtACqYlzD2IACFKBkoHcgmSQDJJBMngKIT6ADygF6DSYfcCLTzg/z0eGrASogDbT0gKxB2MB5pkiBoBgrEEMwIBjLx9fAAiCIAhygmkkRgYjhWMHditsL2AvYC+QIHjdwzk+BmAABmBAWc1kCF0bKRAEQRAEQRAMGaACbaCUz/P5BRiKxhQaiV07uRjfYgQDMKDpGAhGCMUCzD4CBEEw1iAGYIBPZMJh+g8/P8cKpAJfV4EfMee/sLtaEFIAAAAASUVORK5CYII="/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

55
src/components/SmartBanner/index.tsx
Unescape View File

@ -0,0 +1,55 @@
import { Icon } from 'features/Icon'
import { add } from 'date-fns'
import {
ScBannerWrap,
ScIconLogo,
ScTitleWrap,
ScTitle,
ScNameOfCompany,
ScDescribe,
ScBtnDownload,
ScIconWrap,
} from './styled'
type SmartBannerProps = {
setIsOpenDownload: (open: boolean) => void,
}
export const SmartBanner = ({ setIsOpenDownload }: SmartBannerProps) => (
<ScBannerWrap>
<ScIconWrap>
<Icon
refIcon='Close'
onClick={() => {
localStorage.setItem(
'dateLastOpenSmartBanner',
JSON.stringify(add(new Date(), { days: 1 })),
)
setIsOpenDownload(false)
}}
/>
</ScIconWrap>
<ScIconLogo src='/images/icon-instattv-smart-banner.svg' />
<ScTitleWrap>
<ScTitle>official InStat TV app</ScTitle>
<ScNameOfCompany>InStat TV limited</ScNameOfCompany>
<ScDescribe>InStat – the Home of Sports Streaming</ScDescribe>
</ScTitleWrap>
<a
href='https://play.google.com/store/apps/details?id=instat.ott'
target='_blank'
rel='noreferrer'
onClick={() => {
localStorage.setItem(
'dateLastOpenSmartBanner',
JSON.stringify(add(new Date(), { days: 1 })),
)
setIsOpenDownload(false)
}}
>
<ScBtnDownload>Download</ScBtnDownload>
</a>
</ScBannerWrap>
)

56
src/components/SmartBanner/styled.tsx
Unescape View File

@ -0,0 +1,56 @@
import styled from 'styled-components/macro'
export const ScBannerWrap = styled.div`
width: 100%;
height: 78px;
padding: 8px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: #f2f2f2;
z-index: 10;
> * {
padding: 0 4px;
}
`
export const ScIconLogo = styled.img``
export const ScTitleWrap = styled.div`
display: flex;
flex-direction: column;
font-weight: 400;
line-height: 24px;
text-transform: capitalize;
letter-spacing: 0.02em;
justify-content: center;
`
export const ScTitle = styled.span`
font-size: 14px;
`
export const ScNameOfCompany = styled.span`
font-size: 12px;
color: rgba(0, 0, 0, 0.7);
`
export const ScDescribe = styled.span`
font-size: 10px;
line-height: 12px;
color: rgba(0, 0, 0, 0.5);
`
export const ScBtnDownload = styled.span`
color: #0076ff;
font-weight: 400;
font-size: 14px;
line-height: 24px;
`
export const ScIconWrap = styled.div`
color: #747474;
`

37
src/features/HeaderMobile/index.tsx
Unescape View File

@ -1,10 +1,13 @@
import { useRecoilValue } from 'recoil'
import { isIOS } from 'config/userAgent'
import { HeaderMenu } from 'features/HeaderMenu'
import { DateFilter } from 'features/HeaderFilters'
import { ScoreSwitch } from 'features/MatchSwitches'
import { SportsFilter } from 'features/SportsFilter'
import { isSportFilterShownAtom } from 'features/HomePage/Atoms/HomePageAtoms'
import { SmartBanner } from 'components/SmartBanner'
import {
HeaderStyled,
@ -12,19 +15,31 @@ import {
ScSportsWrapper,
} from './styled'
export const HeaderMobile = () => {
type HeaderBannerProps = {
isOpenDownload: boolean,
setIsOpenDownload: (open: boolean) => void,
}
export const HeaderMobile = ({ isOpenDownload, setIsOpenDownload }: HeaderBannerProps) => {
const isSportFilterShown = useRecoilValue(isSportFilterShownAtom)
return (
<HeaderStyled>
<HeaderMenu />
<DateFilter />
<ScSportsWrapper>
{isSportFilterShown ? <SportsFilter /> : null}
<ScoreSwitchWrapper>
<ScoreSwitch />
</ScoreSwitchWrapper>
</ScSportsWrapper>
</HeaderStyled>
<>
{
isOpenDownload
&& !isIOS
&& <SmartBanner setIsOpenDownload={setIsOpenDownload} />
}
<HeaderStyled>
<HeaderMenu />
<DateFilter />
<ScSportsWrapper>
{isSportFilterShown ? <SportsFilter /> : null}
<ScoreSwitchWrapper>
<ScoreSwitch />
</ScoreSwitchWrapper>
</ScSportsWrapper>
</HeaderStyled>
</>
)
}

16
src/features/HomePage/hooks.tsx
Unescape View File

@ -3,7 +3,8 @@ import {
useEffect,
useState,
} from 'react'
import format from 'date-fns/format'
import { format } from 'date-fns'
import { useSetRecoilState } from 'recoil'
@ -35,6 +36,7 @@ const getDate = (date: Date) => format(date, 'yyyy-MM-dd')
export const useHomePage = () => {
const { user } = useAuthStore()
const { selectedDate } = useHeaderFiltersStore()
const [isOpenDownload, setIsOpenDownload] = useState(false)
const [isShowConfirmPopup, setIsShowConfirmPopup] = useState(false)
const setIsSportFilterShown = useSetRecoilState(isSportFilterShownAtom)
@ -53,6 +55,16 @@ export const useHomePage = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
useEffect(() => {
const dateLastOpenSmartBanner = localStorage.getItem('dateLastOpenSmartBanner')
if (!dateLastOpenSmartBanner
|| Date.parse(JSON.parse(dateLastOpenSmartBanner)) < Date.parse(new Date().toISOString())
) {
setIsOpenDownload(true)
}
}, [])
const fetchMatches = useCallback(
(limit: number, offset: number) => getHomeMatches({
date: getDate(selectedDate),
@ -72,6 +84,8 @@ export const useHomePage = () => {
return {
fetchMatches,
handleCloseConfirmPopup,
isOpenDownload,
isShowConfirmPopup,
setIsOpenDownload,
}
}

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

@ -26,11 +26,21 @@ const Home = () => {
const {
fetchMatches,
handleCloseConfirmPopup,
isOpenDownload,
isShowConfirmPopup,
setIsOpenDownload,
} = useHomePage()
return (
<PageWrapper>
{isMobileDevice ? <HeaderMobile /> : <Header />}
{isMobileDevice ? (
<HeaderMobile
isOpenDownload={isOpenDownload}
setIsOpenDownload={setIsOpenDownload}
/>
) : (
<Header />
)}
<Main>
<UserFavorites />
<Content>

Write Preview
Loading…
Cancel
Save