reza added something

temp
Reza_ashrafi 3 years ago
parent 2bffd0fbbf
commit 4de8f441c9
  1. 2
      src/components/Select/index.js
  2. 29
      src/redux/actions/user.js
  3. 11
      src/redux/reducers/user.js
  4. 181
      src/views/Address/index.js
  5. 10
      src/views/Dashboard/index.js
  6. 16
      src/views/Dashboard/layouts/Main/index.js
  7. 2
      src/views/Dashboard/layouts/SidebarMenu/index.js

@ -9,6 +9,7 @@ function Select({
backgroundColor, backgroundColor,
onChange, onChange,
name, name,
defaultValue,
width = "w-1/2" width = "w-1/2"
}) { }) {
return ( return (
@ -18,6 +19,7 @@ function Select({
<select <select
className={`text-gray70 text-base lg:text-tiny block appearance-none ${backgroundColor} w-full border border-solid px-4 py-3 pr-3 rounded-md leading-tight focus:outline-none focus:border-blueC0 focus:text-blueC0 ${borderColor}`} className={`text-gray70 text-base lg:text-tiny block appearance-none ${backgroundColor} w-full border border-solid px-4 py-3 pr-3 rounded-md leading-tight focus:outline-none focus:border-blueC0 focus:text-blueC0 ${borderColor}`}
onChange={(e) => onChange(name, e.target.value)} onChange={(e) => onChange(name, e.target.value)}
defaultValue={defaultValue}
> >
{options.map((option, index) => ( {options.map((option, index) => (
<option key={index} className=""> <option key={index} className="">

@ -1,7 +1,9 @@
import proxy from "../proxy"; import proxy from "../proxy";
const user = { const user = {
otp: (data = {}) => async (dispatch) => otp:
(data = {}) =>
async (dispatch) =>
await proxy.post("public/sendOTP", data, { dispatch }), await proxy.post("public/sendOTP", data, { dispatch }),
otp_login: (data) => async (dispatch) => otp_login: (data) => async (dispatch) =>
@ -10,32 +12,12 @@ const user = {
login: (data) => async (dispatch) => login: (data) => async (dispatch) =>
await proxy.login("user/login", data, { dispatch }), await proxy.login("user/login", data, { dispatch }),
// register: (data : undefined) => async (dispatch : Dispatch) =>
// await proxy.login("user/register", data, { dispatch }),
// switchRole: (data : String) => async (dispatch : Dispatch) =>
// await proxy.login("user/switchRole", data, { dispatch }),
logout: (data) => async (dispatch) => logout: (data) => async (dispatch) =>
await proxy.logout("user/logout", data, { dispatch }), await proxy.logout("user/logout", data, { dispatch }),
getUserRole: (data) => async (dispatch) => getUserRole: (data) => async (dispatch) =>
await proxy.get("user/getUserRole", data, { dispatch }), await proxy.get("user/getUserRole", data, { dispatch }),
// list:
// (data = {}) =>
// async (dispatch : Dispatch) =>
// await proxy.get("user/list", data, { dispatch }),
// domains:
// (data = {}) =>
// async (dispatch : Dispatch) =>
// await proxy.get("user/domains", data, { dispatch }),
// getmothers:
// (data = {}) =>
// async (dispatch : Dispatch) =>
// await proxy.get("mothers/list", data, {
// dispatch,
// }),
getProfile: getProfile:
(data = {}) => (data = {}) =>
async (dispatch) => async (dispatch) =>
@ -46,6 +28,11 @@ const user = {
await proxy.put("user/setProfile", data, { dispatch }); await proxy.put("user/setProfile", data, { dispatch });
await proxy.get("user/getProfile", data2, { dispatch }); await proxy.get("user/getProfile", data2, { dispatch });
}, },
setProfileFields:
(data = {}) =>
async (dispatch) => {
await dispatch({ type: "user/setProfileFields", data });
},
add: add:
(data = {}, data2 = {}) => (data = {}, data2 = {}) =>
async (dispatch) => { async (dispatch) => {

@ -11,6 +11,7 @@ const initialState = {
profileStatus: false, profileStatus: false,
setDone: false, setDone: false,
setLogin: false, setLogin: false,
profileFields: {},
}; };
export default function user(state = initialState, action) { export default function user(state = initialState, action) {
let { type, data } = action; let { type, data } = action;
@ -31,7 +32,13 @@ export default function user(state = initialState, action) {
}; };
case "user/getProfile": case "user/getProfile":
localStorage.setItem("userData", JSON.stringify(data)); localStorage.setItem("userData", JSON.stringify(data));
return { ...state, loading: false, status: data, error: null, setDone : false, }; return {
...state,
loading: false,
status: data,
error: null,
setDone: false,
};
case "user/logout": case "user/logout":
return { ...state, loading: false, status: proxy.status(), error: null }; return { ...state, loading: false, status: proxy.status(), error: null };
case "user/getUserRole": case "user/getUserRole":
@ -39,6 +46,8 @@ export default function user(state = initialState, action) {
case "user/setProfile": case "user/setProfile":
toast.success("تغییرات اعمال شد."); toast.success("تغییرات اعمال شد.");
return { ...state, loading: false, error: null, setDone: true }; return { ...state, loading: false, error: null, setDone: true };
case "user/setProfileFields":
return { ...state, loading: false, error: null, profileFields: data };
case "loading": case "loading":
return { ...state, loading: true }; return { ...state, loading: true };
case "error": case "error":

@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi, userAddress, dialog } from "../../redux/actions"; import { publicApi, userAddress, dialog, user } from "../../redux/actions";
import onInput from "../../utils/onInput"; import onInput from "../../utils/onInput";
import Input from "../../components/Input"; import Input from "../../components/Input";
import Select from "../../components/Select"; import Select from "../../components/Select";
@ -26,7 +26,12 @@ export const Address = ({
cityLoading, cityLoading,
isMobile, isMobile,
isDark, isDark,
setDialog setDialog,
profilePage,
setProfileFields,
profileFields,
setProfile,
user,
}) => { }) => {
const [addressFields, setAddressFields] = useState({}); const [addressFields, setAddressFields] = useState({});
const [mapAddress, setMapAddress] = useState(null); const [mapAddress, setMapAddress] = useState(null);
@ -42,7 +47,7 @@ export const Address = ({
getCity({ getCity({
provinceId: provinces.filter( provinceId: provinces.filter(
(province) => province.name === addressFields?.provinceId (province) => province.name === addressFields?.provinceId
)[0].id, )[0]?.id,
}); });
} }
}, [addressFields]); }, [addressFields]);
@ -51,6 +56,35 @@ export const Address = ({
setAddressFields({ ...addressFields, [name]: value }); setAddressFields({ ...addressFields, [name]: value });
}; };
const submitProfile = () => {
const data = {
firstName: profileFields?.firstName || user.firstName,
lastName: profileFields?.lastName || user.lastName,
username: profileFields?.username || user.username,
cellphone: user.cellphone,
password: profileFields?.password || user.password,
postalCode: profileFields?.postalCode || user.postalCode,
address: profileFields?.address || user.address,
email: profileFields?.email || user.email,
phone: profileFields?.phone || user.phone,
nationalId: profileFields?.nationalId || user.nationalId,
picFileId: profileFields?.picFileId || user.picFileId,
gender: profileFields?.gender || user.gender,
birthDate: profileFields?.birthDate || user.birthDate,
schools: profileFields?.schools || user.schools,
gradeIds: profileFields?.gradeIds || user.gradeIds,
provinceId:
provinces.filter(
(province) => province.name === profileFields?.provinceId
)[0]?.id || user.provinceId,
cityId:
cities.filter((city) => city.name === profileFields?.cityId)[0]?.id ||
user.cityId,
docFileIds: profileFields?.docFileIds || user.docFileIds,
};
setProfile(data);
};
const submit = () => { const submit = () => {
const { const {
firstName, firstName,
@ -144,7 +178,7 @@ export const Address = ({
address: mapAddress, address: mapAddress,
provinceId: provinces.filter( provinceId: provinces.filter(
(province) => province.name === provinceId (province) => province.name === provinceId
)[0].id, )[0]?.id,
cityId: cities.filter((city) => city.name === cityId)[0]?.id, cityId: cities.filter((city) => city.name === cityId)[0]?.id,
postalCode, postalCode,
location: null, location: null,
@ -170,6 +204,7 @@ export const Address = ({
className="flex flex-col lg:flex-row-reverse flex-1 pt-10 lg:pt-0 pb-20 gap-5 lg:divide-x lg:divide-solid lg:divide-gray-200" className="flex flex-col lg:flex-row-reverse flex-1 pt-10 lg:pt-0 pb-20 gap-5 lg:divide-x lg:divide-solid lg:divide-gray-200"
// style={{ minHeight: "calc(100vh - 500px)" }} // style={{ minHeight: "calc(100vh - 500px)" }}
> >
{!profilePage && (
<div className="flex flex-col w-full lg:w-1/2"> <div className="flex flex-col w-full lg:w-1/2">
<Input <Input
width="100%" width="100%"
@ -212,7 +247,13 @@ export const Address = ({
</div> </div>
</div> </div>
</div> </div>
<div className="flex flex-col w-full lg:w-1/2 lg:pl-4"> )}
<div
className={`flex flex-col w-full lg:w-1/2 lg:pl-4 ${
profilePage ? "mx-auto" : ""
}`}
>
<Header <Header
title="اطلاعات هویتی" title="اطلاعات هویتی"
text="( لطفا نام و نام خانوادگی خود را به طور کامل وارد نمایید )" text="( لطفا نام و نام خانوادگی خود را به طور کامل وارد نمایید )"
@ -223,8 +264,16 @@ export const Address = ({
label={"نام"} label={"نام"}
regex={(val) => val} regex={(val) => val}
name="firstName" name="firstName"
onChange={(name, value) => onChange(name, value)} onChange={(name, value) =>
value={addressFields?.firstName} profilePage
? setProfileFields({ ...profileFields, firstName: value })
: onChange(name, value)
}
value={
profilePage
? profileFields.firstName || user.firstName
: addressFields?.firstName
}
align="text-right" align="text-right"
direction="rtl" direction="rtl"
/> />
@ -233,12 +282,34 @@ export const Address = ({
label={"نام خانوادگی"} label={"نام خانوادگی"}
regex={(val) => val} regex={(val) => val}
name="lastName" name="lastName"
onChange={(name, value) => onChange(name, value)} onChange={(name, value) =>
value={addressFields?.lastName} profilePage
? setProfileFields({ ...profileFields, lastName: value })
: onChange(name, value)
}
value={
profilePage
? profileFields.lastName || user.lastName
: addressFields?.lastName
}
align="text-right" align="text-right"
direction="rtl" direction="rtl"
/> />
</div> </div>
{profilePage && (
<Input
width={isMobile ? "100%" : "50%"}
label={"کد ملی"}
regex={(val) => onInput.phonenumber(val)}
name="nationalId"
onChange={(name, value) =>
setProfileFields({ ...profileFields, nationalId: value })
}
value={profileFields.nationalId || user.nationalId}
align="text-right"
direction="ltr"
/>
)}
{!isMobile && ( {!isMobile && (
<> <>
<br /> <br />
@ -254,10 +325,18 @@ export const Address = ({
<Input <Input
width={isMobile ? "100%" : "50%"} width={isMobile ? "100%" : "50%"}
label={"شماره موبایل"} label={"شماره موبایل"}
regex={(val) => onInput.numberOnly(val)} regex={(val) => onInput.phonenumber(val)}
name="cellphone" name="cellphone"
onChange={(name, value) => onChange(name, value)} value={
value={addressFields?.cellphone} profilePage
? profileFields.cellphone || user.cellphone
: addressFields?.cellphone
}
onChange={(name, value) =>
profilePage
? setProfileFields({ ...profileFields, cellphone: value })
: onChange(name, value)
}
align="text-right" align="text-right"
direction="ltr" direction="ltr"
maxLength={11} maxLength={11}
@ -267,8 +346,16 @@ export const Address = ({
label={"شماره تلفن"} label={"شماره تلفن"}
regex={(val) => onInput.numberOnly(val)} regex={(val) => onInput.numberOnly(val)}
name="phone" name="phone"
onChange={(name, value) => onChange(name, value)} value={
value={addressFields?.phone} profilePage
? profileFields.phone || user.phone
: addressFields?.phone
}
onChange={(name, value) =>
profilePage
? setProfileFields({ ...profileFields, phone: value })
: onChange(name, value)
}
align="text-right" align="text-right"
direction="ltr" direction="ltr"
maxLength={11} maxLength={11}
@ -289,10 +376,23 @@ export const Address = ({
<Select <Select
options={province} options={province}
name="provinceId" name="provinceId"
onChange={(name, value) => onChange(name, value)} defaultValue={
profilePage
? provinces?.filter(
(province) => province?.id === profileFields.provinceId
)[0]?.name || province[0]
: city[0]
}
onChange={(name, value) =>
value === "استان"
? {}
: profilePage
? setProfileFields({ ...profileFields, provinceId: value })
: onChange(name, value)
}
width={isMobile ? "w-full" : "w-1/2"} width={isMobile ? "w-full" : "w-1/2"}
backgroundColor={ backgroundColor={
isDark ? "dark:bg-transparent dark:text-white" : "" isDark ? "dark:bg-transparent dark:text-white" : "bg-white"
} }
fill={isDark ? "fill-white" : "fill-gray-600"} fill={isDark ? "fill-white" : "fill-gray-600"}
/> />
@ -300,10 +400,23 @@ export const Address = ({
<Select <Select
options={city} options={city}
name="cityId" name="cityId"
onChange={(name, value) => onChange(name, value)} defaultValue={
profilePage
? cities?.filter(
(city) => city?.id === profileFields.cityId
)[0]?.name || city[0]
: city[0]
}
onChange={(name, value) =>
value === "شهر"
? {}
: profilePage
? setProfileFields({ ...profileFields, cityId: value })
: onChange(name, value)
}
width={isMobile ? "w-full" : "w-1/2"} width={isMobile ? "w-full" : "w-1/2"}
backgroundColor={ backgroundColor={
isDark ? "dark:bg-transparent dark:text-white" : "" isDark ? "dark:bg-transparent dark:text-white" : "bg-white"
} }
fill={isDark ? "fill-white" : "fill-gray-600"} fill={isDark ? "fill-white" : "fill-gray-600"}
/> />
@ -326,22 +439,37 @@ export const Address = ({
label={"کد پستی"} label={"کد پستی"}
regex={(val) => onInput.numberOnly(val)} regex={(val) => onInput.numberOnly(val)}
name="postalCode" name="postalCode"
onChange={(name, value) => onChange(name, value)} value={
value={addressFields?.postalCode} profilePage
? profileFields.postalCode || user.postalCode
: addressFields?.postalCode
}
onChange={(name, value) =>
profilePage
? setProfileFields({ ...profileFields, postalCode: value })
: onChange(name, value)
}
align="text-right" align="text-right"
direction="ltr" direction="ltr"
maxLength={10} maxLength={10}
/> />
<div className="flex lg:hidden flex-col items-cente w-full mt-3"> <div
className={`flex ${
profilePage ? "mt-10" : "lg:hidden"
} flex-col items-end w-full mt-3`}
>
<Button <Button
loading={loading} loading={loading}
title="ثبت آدرس" title={
!profilePage ? "ذخیره اطلاعات و بازگشت به صفحه قبل" : "ارسال"
}
backgroundColor="bg-blueC0" backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "0px" }} border={{ color: "#196EC055", width: "0px" }}
width="100%" width={profilePage ? '30%' : '100%'}
color="text-white" color="text-white"
onClick={() => submit()} onClick={() => (profilePage ? submitProfile() : submit())}
/> />
{!profilePage && (
<button <button
className="bg-transparent mt-4 text-base py-3 flex flex-row justify-center items-center border-2 border-solid border-blueC0 text-green7B dark:text-blueC0 rounded-full" className="bg-transparent mt-4 text-base py-3 flex flex-row justify-center items-center border-2 border-solid border-blueC0 text-green7B dark:text-blueC0 rounded-full"
onClick={() => setPhase("deliveryForm")} onClick={() => setPhase("deliveryForm")}
@ -353,6 +481,7 @@ export const Address = ({
className="w-3.5 transform rotate-90" className="w-3.5 transform rotate-90"
/> />
</button> </button>
)}
</div> </div>
</div> </div>
{isMobile && ( {isMobile && (
@ -383,9 +512,11 @@ const mapStateToProps = (state) => ({
provinces: state.publicApi.provinces, provinces: state.publicApi.provinces,
cities: state.publicApi.cities, cities: state.publicApi.cities,
loading: state.userAddress.loading, loading: state.userAddress.loading,
user: state.user.status,
cityLoading: state.publicApi.loading, cityLoading: state.publicApi.loading,
isMobile: state.publicApi.isMobile, isMobile: state.publicApi.isMobile,
isDark: state.publicApi.isDark, isDark: state.publicApi.isDark,
profileFields: state.user.profileFields,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
@ -393,6 +524,8 @@ const mapDispatchToProps = {
getCity: publicApi.getCity, getCity: publicApi.getCity,
createAddress: userAddress.add, createAddress: userAddress.add,
setDialog: dialog.set, setDialog: dialog.set,
setProfileFields: user.setProfileFields,
setProfile: user.setProfile,
}; };
export default connect(mapStateToProps, mapDispatchToProps)(Address); export default connect(mapStateToProps, mapDispatchToProps)(Address);

@ -7,11 +7,19 @@ import Sidebar from "./layouts/SidebarMenu";
import Main from "./layouts/Main"; import Main from "./layouts/Main";
export const Dashboard = ({ isMobile, headerOptions, setHeaderOptions }) => { export const Dashboard = ({ isMobile, headerOptions, setHeaderOptions }) => {
const [page, setPage] = useState(
localStorage?.getItem("dashboard") || "userItems"
);
useEffect(() => { useEffect(() => {
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
}, []); }, []);
const [page, setPage] = useState("userItems"); useEffect(() => {
localStorage.setItem("dashboard", page);
}, [page]);
return isMobile ? ( return isMobile ? (
<div className=""></div> <div className=""></div>

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect, useMemo } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi } from "../../../../redux/actions"; import { publicApi } from "../../../../redux/actions";
@ -8,11 +8,8 @@ import MyBooks from "./MyBooks";
import Ticket from "../../../Contact/layouts/Ticket"; import Ticket from "../../../Contact/layouts/Ticket";
import Favorites from "../../../Favorites/index"; import Favorites from "../../../Favorites/index";
import Addresses from "./Addresses"; import Addresses from "./Addresses";
import Address from "../../../Address";
export const Main = ({ setHeaderOptions, page }) => {
useEffect(() => {
setHeaderOptions({ shown: true });
}, []);
const views = { const views = {
orders: <Orders />, orders: <Orders />,
mybooks: <MyBooks />, mybooks: <MyBooks />,
@ -23,8 +20,15 @@ export const Main = ({ setHeaderOptions, page }) => {
</div> </div>
), ),
favorites : <Favorites />, favorites : <Favorites />,
addresses : <Addresses /> addresses : <Addresses />,
profile : <Address profilePage={true} />,
}; };
export const Main = ({ setHeaderOptions, page }) => {
useEffect(() => {
setHeaderOptions({ shown: true });
}, []);
return ( return (
<div <div
className="overflow-y-scroll overflow-x-hidden flex-1 flex-shrink-0 no-scrollbar pl-5 pb-10 pt-4" className="overflow-y-scroll overflow-x-hidden flex-1 flex-shrink-0 no-scrollbar pl-5 pb-10 pt-4"

@ -215,7 +215,7 @@ SidebarMenu.defaultProps = {
icon: userEdit, icon: userEdit,
title: "حساب کاربری", title: "حساب کاربری",
notification: null, notification: null,
list: [{ title: "ویرایش حساب کاربری", value: "edit" }], list: [{ title: "ویرایش حساب کاربری", value: "profile" }],
}, },
support: { support: {
name: "support", name: "support",

Loading…
Cancel
Save