reza added something

temp
Reza_ashrafi 3 years ago
parent 2bffd0fbbf
commit 4de8f441c9
  1. 2
      src/components/Select/index.js
  2. 31
      src/redux/actions/user.js
  3. 15
      src/redux/reducers/user.js
  4. 283
      src/views/Address/index.js
  5. 12
      src/views/Dashboard/index.js
  6. 30
      src/views/Dashboard/layouts/Main/index.js
  7. 2
      src/views/Dashboard/layouts/SidebarMenu/index.js

@ -9,6 +9,7 @@ function Select({
backgroundColor,
onChange,
name,
defaultValue,
width = "w-1/2"
}) {
return (
@ -18,6 +19,7 @@ function 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}`}
onChange={(e) => onChange(name, e.target.value)}
defaultValue={defaultValue}
>
{options.map((option, index) => (
<option key={index} className="">

@ -1,8 +1,10 @@
import proxy from "../proxy";
const user = {
otp: (data = {}) => async (dispatch) =>
await proxy.post("public/sendOTP", data, { dispatch }),
otp:
(data = {}) =>
async (dispatch) =>
await proxy.post("public/sendOTP", data, { dispatch }),
otp_login: (data) => async (dispatch) =>
await proxy.login("user/otp/login", data, { dispatch }), //{cellphone, otp}
@ -10,32 +12,12 @@ const user = {
login: (data) => async (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) =>
await proxy.logout("user/logout", data, { dispatch }),
getUserRole: (data) => async (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:
(data = {}) =>
async (dispatch) =>
@ -46,6 +28,11 @@ const user = {
await proxy.put("user/setProfile", data, { dispatch });
await proxy.get("user/getProfile", data2, { dispatch });
},
setProfileFields:
(data = {}) =>
async (dispatch) => {
await dispatch({ type: "user/setProfileFields", data });
},
add:
(data = {}, data2 = {}) =>
async (dispatch) => {

@ -10,7 +10,8 @@ const initialState = {
mothers: [],
profileStatus: false,
setDone: false,
setLogin : false,
setLogin: false,
profileFields: {},
};
export default function user(state = initialState, action) {
let { type, data } = action;
@ -31,14 +32,22 @@ export default function user(state = initialState, action) {
};
case "user/getProfile":
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":
return { ...state, loading: false, status: proxy.status(), error: null };
case "user/getUserRole":
return { ...state, loading: false, userRoles: data, error: null };
case "user/setProfile":
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":
return { ...state, loading: true };
case "error":

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

@ -7,11 +7,19 @@ import Sidebar from "./layouts/SidebarMenu";
import Main from "./layouts/Main";
export const Dashboard = ({ isMobile, headerOptions, setHeaderOptions }) => {
const [page, setPage] = useState(
localStorage?.getItem("dashboard") || "userItems"
);
useEffect(() => {
setHeaderOptions(headerOptions);
},[]);
}, []);
useEffect(() => {
localStorage.setItem("dashboard", page);
}, [page]);
const [page, setPage] = useState("userItems");
return isMobile ? (
<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 { publicApi } from "../../../../redux/actions";
@ -8,23 +8,27 @@ import MyBooks from "./MyBooks";
import Ticket from "../../../Contact/layouts/Ticket";
import Favorites from "../../../Favorites/index";
import Addresses from "./Addresses";
import Address from "../../../Address";
const views = {
orders: <Orders />,
mybooks: <MyBooks />,
userItems: <UserItems />,
setTicket: (
<div className="w-1/2">
<Ticket />
</div>
),
favorites : <Favorites />,
addresses : <Addresses />,
profile : <Address profilePage={true} />,
};
export const Main = ({ setHeaderOptions, page }) => {
useEffect(() => {
setHeaderOptions({ shown: true });
}, []);
const views = {
orders: <Orders />,
mybooks: <MyBooks />,
userItems: <UserItems />,
setTicket: (
<div className="w-1/2">
<Ticket />
</div>
),
favorites : <Favorites />,
addresses : <Addresses />
};
return (
<div
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,
title: "حساب کاربری",
notification: null,
list: [{ title: "ویرایش حساب کاربری", value: "edit" }],
list: [{ title: "ویرایش حساب کاربری", value: "profile" }],
},
support: {
name: "support",

Loading…
Cancel
Save