WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Added profile img

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-08-04 13:29:14 +01:00
parent 7ace7e5b5d
commit 476ca04f5f
6 changed files with 67 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/profile.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx
+1 -1
View File
@@ -395,7 +395,7 @@ function ConfirmNairaWithdraw({
onClick={action}
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
>
<span className="text-gradient">Cancel</span>
Cancel
</button>
)}
src/components/MyWallet/Popup/NairaWithdraw.jsx
+1 -1
View File
@@ -796,7 +796,7 @@ function NairaWithdraw({
<button
type="button"
onClick={action}
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center border-gradient text-base rounded-full"
className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
>
<span className="text-gradient">Cancel</span>
</button>
src/components/Partials/Header.jsx
+47 -50
View File
@@ -4,7 +4,7 @@ import bank1 from "../../assets/images/bank-1.png";
import bank2 from "../../assets/images/bank-2.png";
import bank3 from "../../assets/images/bank-3.png";
import bank4 from "../../assets/images/bank-4.png";
import profileImg from "../../assets/images/profile-pic.jpg";
import profileImg from "../../assets/images/profile.jpg";
import useToggle from "../../hooks/useToggle";
import usersService from "../../services/UsersService";
import DarkModeContext from "../Contexts/DarkModeContext";
@@ -15,10 +15,10 @@ import WalletHeader from "../MyWallet/WalletHeader";
import { useDispatch, useSelector } from "react-redux";
import Flag from "../../assets/images/united-states.svg";
import siteLogo from "../../assets/images/wrenchboard-logo-text.png";
import formattedDate from "../../lib/fomattedDate";
import { updateNotifications } from "../../store/notifications";
import TimeDifference from "../Helpers/TimeDifference";
const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
export default function Header({ logoutModalHandler, sidebarHandler }) {
const [balanceDropdown, setbalanceValue] = useToggle(false);
const [notificationDropdown, setNotificationValue] = useToggle(false);
@@ -30,7 +30,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
const [myWalletList, setMyWalletList] = useState([]);
const api = useMemo(() => new usersService(), []);
const dispatch = useDispatch();
const navigate = useNavigate()
const navigate = useNavigate();
const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
@@ -100,10 +100,10 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
};
// User Profile
let { firstname, lastname, email, profile_pic } = userDetails;
let { firstname, lastname, email, profile_pic_url } = userDetails;
let userEmail = email?.split("@")[0];
const userProfileImage = profile_pic_url || DEFAULT_PROFILE_IMAGE;
// console.log("Notify: ", notifications?.data?.raw);
return (
<>
@@ -255,9 +255,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
>
<Icons name="notification" />
<span className="absolute right-2 top-2 z-10 text-xs lg:w-5 lg:h-5 w-4 h-4 flex justify-center items-center rounded-full primary-gradient text-white cursor-default">
{notifications?.loading
? "●"
: notifications?.data?.length}
{notifications?.loading ? "●" : notifications?.data?.length}
</span>
</div>
<div
@@ -273,46 +271,45 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
<div className="content px-7 pb-7">
<ul>
{notifications?.data?.length && notifications?.data?.map((item, idx) =>
{
if(idx < 5){
return (
<li
className={`content-item ${
idx == 4
? "py-5 "
: "py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
}`}
key={idx}
>
<div className="notifications flex space-x-4 items-center">
<div className="icon max-w-[52px] max-h-[52px] w-full h-full rounded-full object-cover">
<img
src={require(`../../assets/images/notifications/${item?.icon}`)}
alt="icon"
className="w-full h-full"
/>
</div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium mb-2">
{item?.title}
{/* <span className="ml-1 font-bold">
{notifications?.data?.length &&
notifications?.data?.map((item, idx) => {
if (idx < 5) {
return (
<li
className={`content-item ${
idx == 4
? "py-5 "
: "py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
}`}
key={idx}
>
<div className="notifications flex space-x-4 items-center">
<div className="icon max-w-[52px] max-h-[52px] w-full h-full rounded-full object-cover">
<img
src={require(`../../assets/images/notifications/${item?.icon}`)}
alt="icon"
className="w-full h-full"
/>
</div>
<div className="name">
<p className="text-base text-dark-gray dark:text-white font-medium mb-2">
{item?.title}
{/* <span className="ml-1 font-bold">
successfully done
</span> */}
</p>
<p className="text-sm text-thin-light-gray font-medium">
<TimeDifference
time={item?.date}
key={item?.uid}
/>
</p>
</div>
</div>
</li>
)
}
})
}
</p>
<p className="text-sm text-thin-light-gray font-medium">
<TimeDifference
time={item?.date}
key={item?.uid}
/>
</p>
</div>
</div>
</li>
);
}
})}
</ul>
<div className="add-money-btn flex justify-center items-center">
@@ -351,9 +348,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
{/* profile-image */}
<div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden">
<img
src={profile_pic != "" ? profile_pic : profileImg}
src={userProfileImage}
alt="profile"
className="w-full h-full"
className="w-full h-full object-cover"
/>
</div>
<div className="lg:block hidden">
@@ -375,7 +372,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
<img
src={profileImg}
alt="profile"
className="w-full h-full"
className="w-full h-full object-cover object-center"
/>
</div>
</div>
src/components/Settings/Tabs/PersonalInfoTab.jsx
+9 -4
View File
@@ -68,6 +68,7 @@ export default function PersonalInfoTab({
state: userDetails?.state,
city: userDetails?.city,
email: userDetails?.email,
profile: userDetails?.profile_pic,
};
let [profile, setProfile] = useState({
@@ -86,6 +87,9 @@ export default function PersonalInfoTab({
const handleUpdateUser = (values, helpers) => {
setRequestState({ message: "", loading: true, status: false });
// there is no profile accommodation on the payload
delete values?.profile;
apiCall
.updateProfile(values)
.then((res) => {
@@ -336,8 +340,8 @@ export default function PersonalInfoTab({
<div className="w-full relative">
<img
src={profileImg}
alt=""
className="sm:w-[198px] sm:h-[198px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
alt="profile"
className="sm:w-[198px] sm:h-[198px] w-[120px] h-[120px] rounded-full overflow-hidden object-contain object-center"
/>
<input
ref={profileImgInput}
@@ -384,7 +388,8 @@ export default function PersonalInfoTab({
)}
<div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center">
<div className="flex items-center space-x-4 mr-9">
<Link
{/* <Link
to="/"
className="text-18 text-light-red tracking-wide "
>
@@ -392,7 +397,7 @@ export default function PersonalInfoTab({
{" "}
Cancel
</span>
</Link>
</Link> */}
{requestStatus.loading ? (
<LoadingSpinner size="8" color="sky-blue" />
src/components/Settings/index.jsx
+9 -4
View File
@@ -5,8 +5,9 @@ import React, {
useRef,
useState,
} from "react";
import { useSelector } from "react-redux";
import cover from "../../assets/images/profile-info-cover.png";
import profile from "../../assets/images/profile-info-profile.png";
import profile from "../../assets/images/profile.jpg";
import usersService from "../../services/UsersService";
import Icons from "../Helpers/Icons";
import Layout from "../Partials/Layout";
@@ -23,15 +24,19 @@ import {
import RecipientAccountTab from "./Tabs/RecipientAccountTab";
export default function Settings({ faq }) {
const [profileImg, setProfileImg] = useState(profile);
const { userDetails } = useSelector((state) => state?.userDetails);
const [profileImg, setProfileImg] = useState(
userDetails?.profile_pic_url ? userDetails.profile_pic_url : profile
);
const [coverImg, setCoverImg] = useState(cover);
const [reloadCardList, setReloadCardList] = useState(false) // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD
const [reloadCardList, setReloadCardList] = useState(false); // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD
// profile img
const profileImgInput = useRef(null);
const browseProfileImg = () => {
profileImgInput.current.click();
};
const profileImgChangHandler = (e) => {
if (e.target.value !== "") {
const imgReader = new FileReader();