From 8f21ec7240dbb30ab85258cfe2486337a166097d Mon Sep 17 00:00:00 2001 From: NancyAanchal Date: Sat, 10 Aug 2024 13:50:36 +0545 Subject: [PATCH 1/7] added hover and navigate --- nepalingo-web/src/components/UserAvatar.tsx | 35 +++++++++++++++---- .../src/components/header/UserProfile.tsx | 8 ++++- 2 files changed, 35 insertions(+), 8 deletions(-) diff --git a/nepalingo-web/src/components/UserAvatar.tsx b/nepalingo-web/src/components/UserAvatar.tsx index e7dda8d..8434ce2 100644 --- a/nepalingo-web/src/components/UserAvatar.tsx +++ b/nepalingo-web/src/components/UserAvatar.tsx @@ -1,17 +1,38 @@ -import React from "react"; +import React, { HTMLAttributes } from "react"; import { useAuth } from "@/hooks/Auth"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faPen } from "@fortawesome/free-solid-svg-icons"; -const UserAvatar: React.FC = () => { +interface UserAvatarProps extends HTMLAttributes { + showPenOnHover?: boolean; +} + +const UserAvatar: React.FC = ({ + onClick, + showPenOnHover = false, + ...props +}) => { const { user } = useAuth(); const username = user?.user_metadata?.username; const avatarUrl = `https://robohash.org/${username}.png?set=set4`; return ( - User Avatar +
+ User Avatar + {showPenOnHover && ( +
+ +
+ )} +
); }; diff --git a/nepalingo-web/src/components/header/UserProfile.tsx b/nepalingo-web/src/components/header/UserProfile.tsx index 546806a..83842f9 100644 --- a/nepalingo-web/src/components/header/UserProfile.tsx +++ b/nepalingo-web/src/components/header/UserProfile.tsx @@ -4,6 +4,7 @@ import { StreakContext } from "@/hooks/StreakContext"; import { getPhrase } from "@/components/header/StreakPhrase"; import { useAuth } from "@/hooks/Auth"; import fire from "@/assets/fire.svg"; +import { useNavigate } from "react-router-dom"; const UserProfile: React.FC = () => { const [isOpen, setIsOpen] = useState(false); @@ -11,6 +12,7 @@ const UserProfile: React.FC = () => { const { currentStreak, longestStreak } = useContext(StreakContext); const phrase = getPhrase(currentStreak); const dropdownRef = useRef(null); + const navigate = useNavigate(); const toggleMenu = () => { setIsOpen(!isOpen); @@ -25,6 +27,10 @@ const UserProfile: React.FC = () => { } }; + const handleAvatarClick = () => { + navigate("/edit-profile"); + }; + useEffect(() => { document.addEventListener("mousedown", handleClickOutside); return () => { @@ -47,7 +53,7 @@ const UserProfile: React.FC = () => {
- +
{user?.user_metadata?.username} From b4c8b5f75924ab86689b880afdaabe10bc7631ee Mon Sep 17 00:00:00 2001 From: COdevra Date: Sat, 10 Aug 2024 14:25:13 +0545 Subject: [PATCH 2/7] add profilepage and other changes --- nepalingo-web/package.json | 1 + nepalingo-web/pnpm-lock.yaml | 12 +++ nepalingo-web/src/App.tsx | 2 + .../src/components/ProfileEditForm.tsx | 88 +++++++++++++++++++ nepalingo-web/src/hooks/StreakContext.tsx | 2 +- nepalingo-web/src/pages/ProfilePage.tsx | 25 ++++++ 6 files changed, 129 insertions(+), 1 deletion(-) create mode 100644 nepalingo-web/src/components/ProfileEditForm.tsx create mode 100644 nepalingo-web/src/pages/ProfilePage.tsx diff --git a/nepalingo-web/package.json b/nepalingo-web/package.json index 3638f47..be10438 100644 --- a/nepalingo-web/package.json +++ b/nepalingo-web/package.json @@ -23,6 +23,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-ga4": "^2.1.0", + "react-icons": "^5.2.1", "react-router-dom": "^6.24.1", "react-supabase": "^0.2.0", "swr": "^2.2.5" diff --git a/nepalingo-web/pnpm-lock.yaml b/nepalingo-web/pnpm-lock.yaml index 2e3eeaa..760d250 100644 --- a/nepalingo-web/pnpm-lock.yaml +++ b/nepalingo-web/pnpm-lock.yaml @@ -41,6 +41,9 @@ importers: react-ga4: specifier: ^2.1.0 version: 2.1.0 + react-icons: + specifier: ^5.2.1 + version: 5.2.1(react@18.3.1) react-router-dom: specifier: ^6.24.1 version: 6.24.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1842,6 +1845,11 @@ packages: react-ga4@2.1.0: resolution: {integrity: sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==} + react-icons@5.2.1: + resolution: {integrity: sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==} + peerDependencies: + react: '*' + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -4166,6 +4174,10 @@ snapshots: react-ga4@2.1.0: {} + react-icons@5.2.1(react@18.3.1): + dependencies: + react: 18.3.1 + react-is@16.13.1: {} react-refresh@0.14.2: {} diff --git a/nepalingo-web/src/App.tsx b/nepalingo-web/src/App.tsx index c4dcd31..9a9db76 100644 --- a/nepalingo-web/src/App.tsx +++ b/nepalingo-web/src/App.tsx @@ -12,6 +12,7 @@ import { PrivateRoutes } from "@/components/PrivateRoutes"; import FeedbackForm from "@/components/FeedbackForm"; import TestYourself from "@/pages/TestYourself"; import SignUp from "./pages/SignUp"; +import ProfilePage from "@/pages/ProfilePage"; const App: React.FC = () => { const TrackingID = import.meta.env.VITE_GOOGLE_ANALYTICS_TRACKING_ID; @@ -38,6 +39,7 @@ const App: React.FC = () => { } /> } /> } /> + } /> diff --git a/nepalingo-web/src/components/ProfileEditForm.tsx b/nepalingo-web/src/components/ProfileEditForm.tsx new file mode 100644 index 0000000..05351c9 --- /dev/null +++ b/nepalingo-web/src/components/ProfileEditForm.tsx @@ -0,0 +1,88 @@ +import React, { useState } from "react"; +import { supabaseClient } from "@/config/supabase-client"; +import { useAuth } from "@/hooks/Auth"; + +const ProfileEditForm: React.FC = () => { + const { user } = useAuth(); + const [avatarUrl, setAvatarUrl] = useState(user?.user_metadata.avatar_url || ""); + const [username, setUsername] = useState(user?.user_metadata.username || ""); + const [bio, setBio] = useState(user?.user_metadata.bio || ""); + const [status, setStatus] = useState(user?.user_metadata.status || ""); + const [password, setPassword] = useState(""); + + const handleSubmit = async () => { + if (!user) return; + + // Update user metadata + const { data, error } = await supabaseClient.auth.updateUser({ + data: { + avatar_url: avatarUrl, + username, + bio, + status, + }, + password: password || undefined, // Optional password update + }); + + if (error) { + console.error("Error updating profile:", error.message); + return; + } + + console.log("Profile updated successfully"); + }; + + return ( +
+
+ + setAvatarUrl(e.target.value)} + className="w-full p-2 border border-gray-300 rounded" + /> +
+
+ + setUsername(e.target.value)} + className="w-full p-2 border border-gray-300 rounded" + /> +
+
+ +