Skip to content

Commit 066effe

Browse files
Pubudu-PiyankaraPubudu-Piyankara
committed
profile uploading done
1 parent 7ee9dca commit 066effe

File tree

1 file changed

+47
-65
lines changed

1 file changed

+47
-65
lines changed

‎frontend/src/pages/Private/Profile.js

+47-65
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { firestore } from "../../config/firebase_configure";
77
import { toast } from "react-toastify";
88
import { getAuth, updateProfile } from "firebase/auth";
99
import "react-toastify/dist/ReactToastify.css";
10+
import { PiUploadSimpleLight } from "react-icons/pi";
11+
import { PiCheckSquareOffsetLight } from "react-icons/pi";
1012
import {
1113
ref,
1214
getDownloadURL,
@@ -36,7 +38,6 @@ const ProfilePage = () => {
3638
const userData = doc.data();
3739
setUser(userData);
3840
setUserData(userData);
39-
// console.log("this is current user",currentUser);
4041
} else {
4142
console.log("No such document!");
4243
}
@@ -51,6 +52,7 @@ const ProfilePage = () => {
5152
return unsubscribe;
5253
}, []);
5354

55+
//get the profile picture url
5456
useEffect(() => {
5557
const fetchurl = () => {
5658
if (user && user.uid) {
@@ -69,32 +71,35 @@ const ProfilePage = () => {
6971
fetchurl();
7072
}, [user]);
7173

74+
//handle input profile picture and set it to the state
7275
const handleInputPic = (e) => {
7376
if (e.target.files[0]) {
7477
setProfilePic(e.target.files[0]);
78+
toast.success("Please Click Upload button to update profile picture");
7579
}
7680
};
7781

7882
//prpofile pic upload
7983
const uploadpic = () => {
8084
const imageRef = ref(storage, `profile_pictures/${user.uid}`);
8185
const desertRef = ref(storage, `profile_pictures/${user.uid}`);
86+
//file selection
8287
if (profilePic === null) {
8388
toast.error("Please select a profile picture");
8489
return;
8590
} else {
91+
//if already exist profile picture delete it
8692
if (`profile_pictures/${user.uid}`) {
8793
deleteObject(desertRef)
8894
.then(() => {
89-
// toast.success("Profile Picture Deleted Successfully");
9095
console.log("File deleted successfully");
9196
})
9297
.catch((error) => {
9398
console.log("Error in deleting", error.message);
9499
toast.error("Error in deleting exist profile picture");
95100
});
96101
}
97-
102+
//upload new profile picture
98103
uploadBytes(imageRef, profilePic)
99104
.then(() => {
100105
getDownloadURL(imageRef)
@@ -159,81 +164,55 @@ const ProfilePage = () => {
159164
<div className=" text-black w-64 h-full p-4"></div>
160165
</div>
161166

162-
{/* new profile feature */}
163-
<div className="p-2 flex flex-col">
167+
{/* profile picture section */}
168+
<div className="p-2 flex flex-col w-full mx-5">
164169
{user ? (
165-
<div>
166-
<h1 className="text-[#4743E0] text-lg lg:text-6xl font-extrabold mb-3 lg:mb-8 mt-5 lg:mt-10">
167-
Welcome, {user.userName}
170+
<div className="flex flex-row items-center justify-between gap-5">
171+
<h1 className="text-[#4743E0] text-6xl font-extrabold mb-3 lg:mb-8 mt-5 lg:mt-10">
172+
{user.userName}
168173
</h1>
169-
{/* Profile Picture */}
170-
<div className="flex flex-col lg:flex-row items-center justify-center">
171-
<div
172-
className="flex flex-col justify-between"
173-
style={{
174-
borderRadius: "50%",
175-
overflow: "hidden",
176-
width: 200,
177-
height: 200,
178-
}}
179-
>
180-
{url ? (
181-
<div className="relative w-44 h-44 lg:w-60 lg:h-60 mb-6 lg:mb-0 mr-0 lg:mr-12">
182-
<img
183-
src={url}
184-
alt={"profile pic"}
185-
className="w-full h-full object-cover rounded-full shadow-lg"
186-
/>
187-
<div className="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-gray-900 bg-opacity-75 rounded-full">
188-
<input
189-
type="file"
190-
onChange={handleInputPic}
191-
className="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
192-
/>
193-
<span className="text-white text-sm lg:text-base font-semibold">
194-
Change Picture
195-
</span>
196-
</div>
197-
</div>
198-
) : (
199-
<div className="relative w-44 h-44">
200-
<img
201-
src={default_profile}
202-
alt={"profile pic"}
203-
className="w-full h-full object-cover rounded-full shadow-lg"
204-
/>
205-
<div className="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-gray-900 bg-opacity-75 rounded-full">
206-
<input
207-
type="file"
208-
onChange={handleInputPic}
209-
className="absolute opacity-0 cursor-pointer w-full h-full"
210-
/>
211-
<span className="text-white text-sm lg:text-base font-semibold">
212-
Change Picture
213-
</span>
214-
</div>
215-
</div>
216-
)}
174+
<div className="flex flex-col lg:flex-col items-center justify-center ">
175+
{/* Profile Picture */}
176+
<div className="flex-shrink-0 relative w-32 h-32 m-2 justify-center items-center lg:w-44 lg:h-44 mb-6 lg:mb-0 mr-0 lg:mr-12">
177+
<img
178+
src={url || default_profile}
179+
alt="profile pic"
180+
className="justify-center items-center w-full h-full object-cover rounded-full shadow-lg"
181+
/>
182+
<div className="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-gray-900 bg-opacity-75 rounded-full">
183+
<input
184+
type="file"
185+
onChange={handleInputPic}
186+
className="absolute justify-center inset-0 opacity-0 cursor-pointer w-full h-full"
187+
/>
188+
<span className="text-white text-sm justify-center lg:justify-center font-normal">
189+
<PiCheckSquareOffsetLight className="justify-center w-6 h-6 ml-10" />
190+
Change Picture
191+
</span>
192+
</div>
217193
</div>
218-
<div>
194+
<div className="flex flex-row justify-center items-center lg:mr-10 mt-2 ">
219195
<button
220-
className="cursor-pointer bg-[#4743E0] text-white px-8 py-2 rounded-full ease-in-out hover:bg-opacity-80"
196+
className="cursor-pointer flex flex-row justify-center border-2 text-gray-800 px-4 py-1 rounded-full ease-in-out hover:underline hover:bg-slate-100"
221197
onClick={uploadpic}
222198
>
199+
<PiUploadSimpleLight className="m-1" />
223200
Upload
224201
</button>
225202
</div>
226203
</div>
227204
</div>
228205
) : (
229-
<div>user not found</div>
230-
)}
206+
<div className=" text-lg lg:text-2xl font-thin mt-5">
207+
User not found
208+
</div>
209+
)}
231210

211+
{/* profile details section */}
232212
<div>
233213
{userData ? (
234214
<>
235-
<div></div>
236-
<hr className="mx-auto border-dashed rounded-md w-[1000%] lg:w-[1000px] mt-12 mb-5" />
215+
<hr className="mx-auto border-dashed rounded-md lg:w-full mt-12 mb-5" />
237216
<div>
238217
<div>
239218
<label htmlFor="userName" className="lg:ml-2 mb-2">
@@ -286,7 +265,7 @@ const ProfilePage = () => {
286265
<select
287266
className="border rounded-full py-2 px-3 mb-4 text-grey-darker w-72"
288267
defaultValue={userData.role}
289-
// onChange={onChangeHandler}
268+
onChange={onChangeHandler}
290269
id="role"
291270
type="select"
292271
name="role"
@@ -321,9 +300,10 @@ const ProfilePage = () => {
321300
Save Changes
322301
</button>
323302
</div>
324-
<hr className="mx-auto border-dashed rounded-md w-[1000%] lg:w-[1000px] mt-12 mb-5" />
303+
<hr className="mx-auto border-dashed rounded-md lg:w-full mt-12 mb-5" />
304+
{/* Password section */}
325305
<div>
326-
<h1 className="font-semibold text-lg">Change Password</h1>
306+
<h1 className="font-semibold text-lg m-2">Change Password</h1>
327307
<div>
328308
<label htmlFor="password" className="lg:ml-2 mb-2">
329309
New Password
@@ -334,6 +314,7 @@ const ProfilePage = () => {
334314
placeholder="********"
335315
name="password"
336316
className="border rounded-full py-2 px-3 mb-4 text-grey-darker w-72"
317+
// onChange={passwordHandler}
337318
/>
338319
</div>
339320
<div>
@@ -346,6 +327,7 @@ const ProfilePage = () => {
346327
placeholder="******"
347328
name="confirmPassword"
348329
className="border rounded-full py-2 px-3 mb-4 text-grey-darker w-72"
330+
// onChange={confirmPasswordHandler}
349331
/>
350332
</div>
351333
</div>

0 commit comments

Comments
 (0)