From bf42375d406e726e150e23360293296f9aaf484b Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Sun, 2 Jan 2022 21:31:05 +0330 Subject: [PATCH] reza added some features --- package.json | 1 + src/App.js | 14 + src/App.scss | 4 + src/assets/icons/arrow-left-green.png | Bin 0 -> 1243 bytes src/assets/icons/arrow-left.png | Bin 0 -> 567 bytes src/assets/icons/bottom-home-active.svg | 5 + src/assets/icons/bottom-products-deactive.svg | 9 + src/assets/icons/bottom-profile-deactive.svg | 5 + src/assets/icons/bottom-test-deactive.svg | 8 + src/assets/icons/bottom-video-deactive.svg | 10 + src/assets/icons/dropdown.png | Bin 0 -> 382 bytes src/components/BottomNavigation/index.js | 91 ++++ src/components/Button/index.js | 2 + src/components/Input/danger.png | Bin 0 -> 860 bytes src/components/Input/index.js | 171 +++++++ src/components/Input/index.scss | 60 +++ src/components/Input/tick.png | Bin 0 -> 411 bytes src/components/Navbar/index.js | 88 ++-- src/components/PrivateRouter/index.js | 32 ++ src/components/Textarea/index.js | 21 + src/components/Textarea/index.scss | 63 +++ src/components/Timer/index.js | 84 ++++ src/components/Timer/index.scss | 8 + src/redux/actions/userFactor.js | 24 + src/redux/actions/userProduct.js | 30 +- src/redux/reducers/scroll.js | 20 +- src/redux/reducers/user.js | 2 +- src/redux/reducers/userFactor.js | 28 +- src/redux/reducers/userProduct.js | 33 +- src/router.js | 13 +- src/utils/onInput.js | 282 +++++++++++ src/views/Auth/Login/index.js | 33 ++ src/views/Auth/Login/index.scss | 262 ++++++++++ src/views/Auth/Profile/Birthdate/index.js | 61 +++ src/views/Auth/Profile/Birthdate/index.scss | 118 +++++ src/views/Auth/Profile/Document/index.js | 36 ++ src/views/Auth/Profile/Document/index.scss | 52 ++ src/views/Auth/Profile/GenderSwitch/index.js | 27 ++ .../Auth/Profile/GenderSwitch/index.scss | 44 ++ .../Auth/Profile/MultipleSelector/index.js | 9 + .../Auth/Profile/MultipleSelector/index.scss | 10 + src/views/Auth/Profile/Upload/index.js | 27 ++ src/views/Auth/Profile/Upload/index.scss | 61 +++ src/views/Auth/Profile/index.js | 450 ++++++++++++++++++ src/views/Auth/Profile/index.scss | 166 +++++++ src/views/Auth/SignUp/assets/logo.svg | 8 + src/views/Auth/SignUp/index.js | 118 +++++ src/views/Auth/SignUp/index.scss | 320 +++++++++++++ src/views/Auth/index.js | 24 + src/views/Auth/index.scss | 3 + src/views/Home/Landscape/index.js | 1 + .../Home/Portrait/Private/Blogs/index.js | 4 +- src/views/Home/Portrait/Private/Shop/index.js | 12 +- src/views/Product/index.js | 26 +- src/views/ShoppingCart/index.js | 42 +- tailwind.config.js | 1 + yarn.lock | 117 ++++- 57 files changed, 3059 insertions(+), 81 deletions(-) create mode 100644 src/assets/icons/arrow-left-green.png create mode 100644 src/assets/icons/arrow-left.png create mode 100644 src/assets/icons/bottom-home-active.svg create mode 100644 src/assets/icons/bottom-products-deactive.svg create mode 100644 src/assets/icons/bottom-profile-deactive.svg create mode 100644 src/assets/icons/bottom-test-deactive.svg create mode 100644 src/assets/icons/bottom-video-deactive.svg create mode 100644 src/assets/icons/dropdown.png create mode 100644 src/components/BottomNavigation/index.js create mode 100644 src/components/Input/danger.png create mode 100644 src/components/Input/index.js create mode 100644 src/components/Input/index.scss create mode 100644 src/components/Input/tick.png create mode 100644 src/components/PrivateRouter/index.js create mode 100644 src/components/Textarea/index.js create mode 100644 src/components/Textarea/index.scss create mode 100644 src/components/Timer/index.js create mode 100644 src/components/Timer/index.scss create mode 100644 src/utils/onInput.js create mode 100644 src/views/Auth/Login/index.js create mode 100644 src/views/Auth/Login/index.scss create mode 100644 src/views/Auth/Profile/Birthdate/index.js create mode 100644 src/views/Auth/Profile/Birthdate/index.scss create mode 100644 src/views/Auth/Profile/Document/index.js create mode 100644 src/views/Auth/Profile/Document/index.scss create mode 100644 src/views/Auth/Profile/GenderSwitch/index.js create mode 100644 src/views/Auth/Profile/GenderSwitch/index.scss create mode 100644 src/views/Auth/Profile/MultipleSelector/index.js create mode 100644 src/views/Auth/Profile/MultipleSelector/index.scss create mode 100644 src/views/Auth/Profile/Upload/index.js create mode 100644 src/views/Auth/Profile/Upload/index.scss create mode 100644 src/views/Auth/Profile/index.js create mode 100644 src/views/Auth/Profile/index.scss create mode 100644 src/views/Auth/SignUp/assets/logo.svg create mode 100644 src/views/Auth/SignUp/index.js create mode 100644 src/views/Auth/SignUp/index.scss create mode 100644 src/views/Auth/index.js create mode 100644 src/views/Auth/index.scss diff --git a/package.json b/package.json index 7d9f7f9..8e8924f 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@testing-library/user-event": "^12.1.10", "@trendyol-js/react-carousel": "^2.0.0", "axios": "^0.24.0", + "jalali-moment": "^3.3.10", "jol-player": "^2.5.0", "lodash": "^4.17.21", "react": "^17.0.2", diff --git a/src/App.js b/src/App.js index 56e18d6..3fada8a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,7 @@ import "./App.scss"; import { Provider } from "react-redux"; +import { ToastContainer } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; import store from "./redux/store"; import Router from "./router"; @@ -7,6 +9,18 @@ function App({theme}) { return ( + ); } diff --git a/src/App.scss b/src/App.scss index c612a88..fee89fa 100644 --- a/src/App.scss +++ b/src/App.scss @@ -91,3 +91,7 @@ max-width: 1480px; } } + +.Toastify *{ + font-size: 13px; +} diff --git a/src/assets/icons/arrow-left-green.png b/src/assets/icons/arrow-left-green.png new file mode 100644 index 0000000000000000000000000000000000000000..4d07993ab433b27e7357ceb8d6f28396efa16ec5 GIT binary patch literal 1243 zcmV<11SI>3P)9#~5P)}f*LLCrN}8kwTGWIFA&5}aONEG3K`*FkNl1I^ z0Zu3aRY>H(v5h!#2oe%MA-&K8H(FXGP)_ZkwC7TVDr!g^wSq?ZEyQvByg%%k*m4~w zu@%4Fb?kSt!b?8;cX@oWzx|1q zD{B>q+yC@5#y#FnaCun1SU6lLPpOeldUxNS$-ei0AcmqRS_Og@j7VNjDfXeRju(ha zA@Ri7)_c*kj+qG$O?5?3oV2^DydQcgqyO34^4)VSI|btU1{U;FS}3dG>w-G?y8dS|G(OAs;LyXS{LK<^N{>e@QD`ns@|h4p&T5DPtm8>64T zO+$hG73T_B6K09zD0~y`dS4>aP{|+w@p-s8-u2;D%^3&%Jg$mm(atJZC zd%#e%=c7W&ZRK%Q5G&TLf^ZpxCvn6>GExunv8ix$&Ld)g-+RgM007ieB))CL{I&@g zPJzgVpeIj}9B#zyaz%m2g@B}t)l+eyPKu`$1HuDQH_wB&R583WHEF{TQf0X9JVHZQ z;K2cjpv@Kp>mXJ^P#T3H*|!bQ?qt-9 zCIo9BW(B>-5FB>}f)xTg=q;>M$BlI>o$AWis5oNl5*eD!~t`XVZ07y=~h1nOyC}?V|?;bHL$Z3Y~sn_0M zuBoAOh z$Ol8^7Gpbz*B6vHR%kr?G0r#$S7BHIp<(3KAGSTi8VC*JKS_=+OMEf2g;@*}t02~Z z@r$ZQzV>4sSWl*P5cyzW!H1ivF!BqR(S)iH>t+{cdc0{EPIyEb)atib=BibvKxiP@ zFicjf&VkS{W&}Ma5o!w)am`e5<|K$h)|66@se)J`S_P2?Q9WmgRBMkqaC&R3`v_26 zQ|g#2Cwc0GehezPMImi0-KqfB#=7?eDc)C37A&={snhv`&rXD~M-P`;csa?Va{kv; z2hYv%o(_UhV>u~bDqS-jJX)ak3XvcmRN5(heJVf662G0__b`#^@*9kPwoB#q2TDb{ zEacSkku#AWr?jrC`aab!l&xhkiA^e*5Q(Q>?tL(sc^{E0PlZX7T!w>NwW~)bPqjfZ za{8U`XS3&?x8wKfUmu5RiE4Pmq-m4j-MU@ynK)05>NO!(v2|OYuS}fWQ4hR<3%VTw zqJ~HkQoY1w@oxcufk~e9xTJA{*^5O<<}b9~TUg67uK-8SQq7mv8}k4F002ovPDHLk FV1n3?LplHe literal 0 HcmV?d00001 diff --git a/src/assets/icons/arrow-left.png b/src/assets/icons/arrow-left.png new file mode 100644 index 0000000000000000000000000000000000000000..70d90d454dc9207639cf5fe4e2fc0c1ca84a2c8b GIT binary patch literal 567 zcmV-70?7S|P)`F#Ew-Iq}m6}8sq z_81@E(Ef(@2ec-e&1N{C&*^>Nbn>HIF5h8r&xhetGzb#oyR+HsIi9x%1Jo;^ZcY*O zJr;liz}=Fr0RvP3s3+fsIC_A)2V76@V(OhEA~A>Dy4`NCbfr@1!oY)s5eLmj0-HeK z!a+o0>YGMveiyzM)L!cMX0CC}%J!C?_yUC^lH3P*DATe;?GY zfqrOruwpC-0@Z9bjh+M)d&QDqi^W2<+iiAQIF?ITD`vY=0*(bne`yE5Z#XuXG@KKd zB%Cvt6r2|@2{>J&*OyI3-%PCPHu>GU({s$ZIFHy~0CqrU(E002ovPDHLk FV1ksr_YeR8 literal 0 HcmV?d00001 diff --git a/src/assets/icons/bottom-home-active.svg b/src/assets/icons/bottom-home-active.svg new file mode 100644 index 0000000..b5aa911 --- /dev/null +++ b/src/assets/icons/bottom-home-active.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/bottom-products-deactive.svg b/src/assets/icons/bottom-products-deactive.svg new file mode 100644 index 0000000..875ff38 --- /dev/null +++ b/src/assets/icons/bottom-products-deactive.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/bottom-profile-deactive.svg b/src/assets/icons/bottom-profile-deactive.svg new file mode 100644 index 0000000..8a9ae83 --- /dev/null +++ b/src/assets/icons/bottom-profile-deactive.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/bottom-test-deactive.svg b/src/assets/icons/bottom-test-deactive.svg new file mode 100644 index 0000000..f040018 --- /dev/null +++ b/src/assets/icons/bottom-test-deactive.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/bottom-video-deactive.svg b/src/assets/icons/bottom-video-deactive.svg new file mode 100644 index 0000000..4250b15 --- /dev/null +++ b/src/assets/icons/bottom-video-deactive.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/dropdown.png b/src/assets/icons/dropdown.png new file mode 100644 index 0000000000000000000000000000000000000000..7d05d91a37695ce5a1be60cc0f15c5c84ac5e39f GIT binary patch literal 382 zcmV-^0fGLBP)P000>X1^@s6#OZ}&00004b3#c}2nYxW zd1(*s*I*4f?$-r=B=pZF<1~PFPNZbJ~ zAylByfw_a072p}g*p{5hNL^x$hbOIi@K#h^eZ_ym)@OA@=dY71(~VKF#~g- z1XW{OJWz^GuEM3*_+DEO(@c5My)<&#q^Rj%n8|bMa(%2__MM+`m!e+NwU5GfjboBl cM*ohkPiq638hQR!fB*mh07*qoM6N<$f|BW=kN^Mx literal 0 HcmV?d00001 diff --git a/src/components/BottomNavigation/index.js b/src/components/BottomNavigation/index.js new file mode 100644 index 0000000..4de876c --- /dev/null +++ b/src/components/BottomNavigation/index.js @@ -0,0 +1,91 @@ +import React, { useState } from "react"; +import { Link } from "react-router-dom"; +import { connect } from "react-redux"; +import activeHomeIcon from "../../assets/icons/bottom-home-active.svg"; +import deactiveProductsIcon from "../../assets/icons/bottom-products-deactive.svg"; +import deactiveVideoIcon from "../../assets/icons/bottom-video-deactive.svg"; +import deactiveProfileIcon from "../../assets/icons/bottom-profile-deactive.svg"; +import deactiveTestIcon from "../../assets/icons/bottom-test-deactive.svg"; + +export const BottomNavigation = ({ pages, isDark }) => { + const [activeLink, setActiveLink] = useState("/"); + + const Tab = ({ page }) => { + return ( + setActiveLink(page.link)} + > + + + {page.name} + + + ); + }; + return ( + <> +
+ {pages.map((page, index) => ( + + ))} +
+ + ); +}; + +const mapStateToProps = (state) => ({ + isDark: state.publicApi.isDark, +}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(BottomNavigation); + +BottomNavigation.defaultProps = { + pages: [ + { + id: 0, + name: "صفحه اصلی", + link: "/", + activeIcon: activeHomeIcon, + deactiveIcon: "", + }, + { + id: 1, + name: "محصولات", + link: "/products", + activeIcon: "", + deactiveIcon: deactiveProductsIcon, + }, + { + id: 2, + name: "ویدئو", + link: "/vod", + activeIcon: "", + deactiveIcon: deactiveVideoIcon, + }, + { + id: 3, + name: "آزمون", + link: "/test", + activeIcon: "", + deactiveIcon: deactiveTestIcon, + }, + { + id: 4, + name: "حساب کاربری", + link: "/profile", + activeIcon: "", + deactiveIcon: deactiveProfileIcon, + }, + ], +}; diff --git a/src/components/Button/index.js b/src/components/Button/index.js index ca558a3..ac65d92 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -7,6 +7,7 @@ export default function Button({ border, width, bgOpacity, + onClick, }) { return ( diff --git a/src/components/Input/danger.png b/src/components/Input/danger.png new file mode 100644 index 0000000000000000000000000000000000000000..0bb622e5d0c66cca3809e10899fef105bca78dc5 GIT binary patch literal 860 zcmV-i1Ec(jP)tY?!yFj+K*Jx)%D$7jZ~J`It6O(r`j~|OLKIG>Q<#2PGCAMl6Ue~^kjb-?@bt{AP zsZ$IrDk?ZV28_%P-}miH1{vJOUteFzUs#AY6yBtzF??OKhCv3H+?Zu#aH{>-)5Gwg zwY7!uv6|XR;i*&2I9*)u8vMSok>S&%NeuEYUotSTu;5hteb+9AxB2-e86QeZf090X zmX}#v9IwHj=geXF*w@D(bL|@bv<1 zZg0}l8NRMw%^-92Dg(2mB);VK5$J$KaLxl}koS^j&k8V$ic*sC82&te&hXsA;+@>1 zN5Wu(AMo;8u^AX_lRR{YpAwUwTUmYjd-bZT?59ts;Dyj*Rn@t?>FJUD#l@WD82+KN z^ZVC%^A^k8x|I$ugkT0ex3fFI;p=NAP*OsY;UBxYzJFc0a<}xkbN(>1FbaBL@|z6| z>rh}p&(AC-hS%|+Fnt{y{ORA@w<};S#c41!%q^J&1-G!9nliInSn#vy=`pbB>x1?D zx_A*>J^eg>{Nt}PXZ|vL_}~c&Q*;+#t@A*NK*i}p0f9gu(~wz0!u8+h&srdHCSKla mz^Z6Bka { + return lang === "fa" ? option1 : option2; +}; + +const inputStatusHandler = (value, focus, status, primary, success, danger) => { + if (!focus) { + return ""; + } else { + if (!value) { + return primary; + } else { + if (status) { + return success; + } else { + return danger; + } + } + } +}; + +export default function Input(props) { + const [value, setValue] = useState(""); + const [focusToggle, setFocusToggle] = useState(false); + + const { lang, theme, inputMode, label, status, maxLength, message } = props; + + const onChange = (val) => { + setValue(val); + }; + + return ( +
+ + onChange(e.target.value)} + value={value} + onFocus={() => setFocusToggle(true)} + onBlur={() => !value ? setFocusToggle(false) : setFocusToggle(true)} + maxLength={maxLength} + /> + {!status && value && ( + {langDetector(lang, + )} + {status && value && ( + {langDetector(lang, + )} + + {value && !status && ( + + {message} + + )} + {value && ( + + {value.length + "/" + maxLength} + + )} +
+ ); +} + +Input.defaultProps = { + lang : 'fa', + inputMode : 'numeric', + label : 'label', + status : '', + maxLength : '', + message : '', +} \ No newline at end of file diff --git a/src/components/Input/index.scss b/src/components/Input/index.scss new file mode 100644 index 0000000..9b0bf19 --- /dev/null +++ b/src/components/Input/index.scss @@ -0,0 +1,60 @@ +$primary: #196EC0; +$gray: #dbdbdb; +$danger: #E00A0A; +$success: #23C933; + +.input { + &__labelFocus{ + top: 0px !important; + font-size: 9px !important; + color: $primary !important; + } + &__labelDanger{ + top: 0px !important; + font-size: 9px !important; + color: $danger !important; + } + &__labelSuccess{ + top: 0px !important; + font-size: 9px !important; + color: $success !important; + } + + + &__inputActive{ + border-color: $primary !important; + } + &__inputSuccess{ + border-color: $success !important; + } + &__inputDanger{ + border-color: $danger !important; + } + + &__message{ + &Success{ + color: $success; + } + &Danger{ + color: $danger; + } + } + &__length{ + &Success{ + color: $success; + } + &Danger{ + color: $danger; + } + } +} + +.en { + direction: ltr; + text-align: left; +} + +.fa { + direction: rtl; + text-align: right; +} \ No newline at end of file diff --git a/src/components/Input/tick.png b/src/components/Input/tick.png new file mode 100644 index 0000000000000000000000000000000000000000..805f74ab2990e2f79bc6c22ac1a011d06361832d GIT binary patch literal 411 zcmV;M0c8G(P)QZqonY)~En<(iuiN1-H@()!UqpU*k>0NY{NOVQ@v{2CLygB>`m6S@)@9B8et zwgx$2@18`Q5#$~BP;3Qq7Vd~?n51qJNV=*oNm;{XFNENlPsvi7fj*D>QL2nJ0%hTT z@+AP+^!6e4o<~MUBak!i1@!faX8HwN=&P<=6(9=jlny4yai|XEtj=j??p~6TTg})9 zVj|R$ROP#1f+N@p0S9St>oEIC_!e5ze1Axmg7rI@wPKVNuq>A^{+5PIpWVEA(YQ)= zk&zR+WDAZ-y2Ms8F#b*H7}Jlj7x{J83sC;^ENf~GqX~^EmkU$6a=4Y&%;q1M)+!%! zQMyf)`#1jI!daw@?Pm{5rE3IAFPC6Jxpa*|n;z7i{Q#<%qXYOkGNAwf002ovPDHLk FV1iEjt*`(9 literal 0 HcmV?d00001 diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index 757a8cb..2aae4ce 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -12,7 +12,7 @@ import arBlueIcon from "../../assets/icons/ar-blue.svg"; import hamburgerIcon from "../../assets/icons/hamburger.svg"; import hamburgerBlueIcon from "../../assets/icons/hamburger-blue.svg"; -function Navbar({ pages, isDark, isLogin }) { +function Navbar({ pages, isDark}) { const [top, setTop] = useState(false); useEffect(() => { if (window.scrollY === 0) { @@ -80,57 +80,55 @@ function Navbar({ pages, isDark, isLogin }) { > - {isLogin && ( -
- - - - - - -
- )} + +
+ + + + + + +
- {/* portrait end */} + ){/* portrait end */} ); } const mapStateToProps = (state) => ({ isDark: state.publicApi.isDark, - isLogin: state.user.status, }); export default connect(mapStateToProps, {})(Navbar); diff --git a/src/components/PrivateRouter/index.js b/src/components/PrivateRouter/index.js new file mode 100644 index 0000000..017d7c6 --- /dev/null +++ b/src/components/PrivateRouter/index.js @@ -0,0 +1,32 @@ +import React from "react"; +import { Route, Redirect } from "react-router-dom"; +import { connect } from "react-redux"; + +const PrivateRouter = ({ + component: Component, + restricted, + status, + customPage, + ...rest +}) => { + return ( + + restricted ? ( + + ) : ( + + + ) + } + /> + ); +}; + +export default connect( + (state) => ({ + status: state.user.status, + }), + {} +)(PrivateRouter); diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js new file mode 100644 index 0000000..72573ce --- /dev/null +++ b/src/components/Textarea/index.js @@ -0,0 +1,21 @@ +import React from "react"; +import _ from "lodash"; + +export default function Textarea({ placeholder, theme }) { + const light = theme === "light"; + return ( + <> +