status display and storign done

nepalcodes · Aug 11, 2024 · de4befc · de4befc
1 parent 51e8d99
commit de4befc
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 13 deletions.
diff --git a/nepalingo-web/src/components/ProfileEditForm.tsx b/nepalingo-web/src/components/ProfileEditForm.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { supabaseClient } from "@/config/supabase-client";
 import { useAuth } from "@/hooks/Auth";
@@ -16,12 +16,31 @@ const ProfileEditForm: React.FC = () => {
   const [status, setStatus] = useState(user?.user_metadata.status || "");
   const [isDragging, setIsDragging] = useState(false);
 
+  useEffect(() => {
+    const fetchCurrentStatus = async () => {
+      if (user) {
+        const { data, error } = await supabaseClient
+          .from("updateUser")
+          .select("status")
+          .eq("username", user.user_metadata.username)
+          .single();
+
+        if (error) {
+          console.error("Error fetching current status:", error.message);
+        } else {
+          setStatus(data?.status || ""); // Update status with the current value from the database
+        }
+      }
+    };
+
+    fetchCurrentStatus();
+  }, [user]);
+
   const handleAvatarChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
       const file = e.target.files[0];
       const uploadedAvatarUrl = URL.createObjectURL(file);
       setAvatarUrl(uploadedAvatarUrl);
-      // Implement file upload logic here if needed
     }
   };
 
@@ -32,7 +51,6 @@ const ProfileEditForm: React.FC = () => {
       const file = e.dataTransfer.files[0];
       const uploadedAvatarUrl = URL.createObjectURL(file);
       setAvatarUrl(uploadedAvatarUrl);
-      // Implement file upload logic here if needed
     }
   };
 
@@ -46,17 +64,15 @@ const ProfileEditForm: React.FC = () => {
   const handleSaveChanges = async () => {
     if (!user) return;
 
-    // Update user metadata in Supabase
-    const { error } = await supabaseClient.auth.updateUser({
-      data: {
-        username, // Update username directly in Supabase
-        avatar_url: avatarUrl,
-        status,
-      },
+    // Update status, username, and bio in the UpdateUser table
+    const { error: dbError } = await supabaseClient.from("updateUser").upsert({
+      id: user.id,
+      username,
+      status,
     });
 
-    if (error) {
-      console.error("Error updating profile:", error.message);
+    if (dbError) {
+      console.error("Error updating user in database:", dbError.message);
       return;
     }
 

diff --git a/nepalingo-web/src/components/header/UserProfile.tsx b/nepalingo-web/src/components/header/UserProfile.tsx
@@ -5,9 +5,11 @@ import { getPhrase } from "@/components/header/StreakPhrase";
 import { useAuth } from "@/hooks/Auth";
 import fire from "@/assets/fire.svg";
 import { useNavigate } from "react-router-dom";
+import { supabaseClient } from "@/config/supabase-client"; // Import Supabase client
 
 const UserProfile: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const [status, setStatus] = useState<string | null>(null);
   const { user, signOut } = useAuth();
   const { currentStreak, longestStreak } = useContext(StreakContext);
   const phrase = getPhrase(currentStreak);
@@ -38,6 +40,27 @@ const UserProfile: React.FC = () => {
     };
   }, []);
 
+  // Fetch the status from the UpdateUser table
+  useEffect(() => {
+    const fetchStatus = async () => {
+      if (user) {
+        const { data, error } = await supabaseClient
+          .from("updateUser")
+          .select("status")
+          .eq("username", user.user_metadata.username)
+          .single();
+
+        if (error) {
+          console.error("Error fetching status:", error.message);
+        } else {
+          setStatus(data?.status || ""); // Set status or empty string
+        }
+      }
+    };
+
+    fetchStatus();
+  }, [user]);
+
   return (
     <div className="relative inline-block text-left" ref={dropdownRef}>
       <button
@@ -52,7 +75,11 @@ const UserProfile: React.FC = () => {
       {isOpen && (
         <div className="absolute right-0 z-10 mt-2 w-64 rounded-lg shadow-lg bg-[#2B2B2B] p-4">
           <div className="flex flex-col items-center">
-            <div className="w-16 h-16">
+            <p className="text-sm text-gray-400">
+              My moto: <span className="text-sm text-white">{status}</span>
+            </p>
+
+            <div className="w-16 h-16 mt-1">
               <UserAvatar onClick={handleAvatarClick} showPenOnHover />
             </div>
             <span className="mt-1 text-white font-primary font-black">