Hunar (#54)

* Add folder for student register issue: There was a router problem for student register resolve: always make page.js for route just separate them by making different folders. * database * - Created useContext for user (uid) - Added service folder with functions to read and write data from the database - Added authentication for student/homepage and student/information - Updated student/login page to fix email and password authentication issues * starting login page * login page design * signup page complete * adding colors * file change * forget password * add modal * add conditions * login page * add posst function for menu and restaurant details * meging with main * adding restaurant information page * fetching and adding data for restaurants * merging from origin * merge from orign * adding emails status in database * add and create function for adding new email with active status add and create function for getting email names where active status is true make changes in register page to check that email is in database for register * chengin import sttement * adding terms condition * adding logos facility * merge from master * update database sait-staff * adding search option * commit * connecting sait-staff with database * merging form master * changes on sait * mege from master to origin * changing restaurant info table * adding data to database * updating cards * adding logc for increase and decrease arrow * adding databse changes * updating datasbe function to getting student information * adding authentication for restaurants * changing Searching bar * adding search bar in sait-staff * updating restaurant login page * adding update,delete and change password features * adding fuctionality of deleting user's information from database including user data and restaurant menu, delete data from storage and from authentication * update edit functionallity in sait-staff and add delete functionality in restaurant * add add functionality for admins * Hunar (#46) * Add folder for student register issue: There was a router problem for student register resolve: always make page.js for route just separate them by making different folders. * database * - Created useContext for user (uid) - Added service folder with functions to read and write data from the database - Added authentication for student/homepage and student/information - Updated student/login page to fix email and password authentication issues * starting login page * login page design * signup page complete * adding colors * file change * forget password * add modal * add conditions * login page * add posst function for menu and restaurant details * meging with main * adding restaurant information page * fetching and adding data for restaurants * merging from origin * merge from orign * adding emails status in database * add and create function for adding new email with active status add and create function for getting email names where active status is true make changes in register page to check that email is in database for register * chengin import sttement * adding terms condition * adding logos facility * merge from master * update database sait-staff * adding search option * commit * connecting sait-staff with database * merging form master * changes on sait * mege from master to origin * changing restaurant info table * adding data to database * updating cards * adding logc for increase and decrease arrow * adding databse changes * updating datasbe function to getting student information * adding authentication for restaurants * changing Searching bar * adding search bar in sait-staff * updating restaurant login page * adding update,delete and change password features * adding fuctionality of deleting user's information from database including user data and restaurant menu, delete data from storage and from authentication --------- Co-authored-by: Abdel Mouzahir <[email protected]> * trying to show username in saitstaff * console log * small change * remove azure * adding loading animation * loading in all login pages * trying to fetch the name * fetch data in login * comment to hunar * problem solved mentioned by abdel * updatinf sait-login * add feature of edit and update active state * add search functionality in sait-staff * add feature of updating password and delete account * small change * add profil picture in saitadmin * approuval * add profile page for sait-staff and resolve the problem related sait-staff login * connect profile part with database * update sait-staff components --------- Co-authored-by: Abdel Mouzahir <[email protected]> Co-authored-by: abdel mouzahir <[email protected]>
Abdelmouzahir · Jul 9, 2024 · ce6adb1 · ce6adb1
1 parent 5fc0460
commit ce6adb1
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 64 deletions.
diff --git a/Components/UserGreeting.js b/Components/UserGreeting.js
@@ -1,43 +1,31 @@
 import { useEffect, useState } from "react";
-import { AiOutlineUser } from "react-icons/ai";
-import { useUserAuth } from "@/services/utils";
-import { getSaitDataByUser } from "@/services/GetRequest/getRequest";
 
-const UserGreeting = ({setActiveTab}) => {
-  const { user } = useUserAuth();
-  const [userData, setUserData] = useState(null);
-  const [userName, setUserName] = useState("User");
-  const [email, setEmail] = useState("");
-  const [userImage, setUserImage] = useState("");
-
-  async function fetchSaitStaffUserInformation() {
-    const data = await getSaitDataByUser(user);
-    setUserData(data);
-    console.log(data);
-  }
+const UserGreeting = ({ setActiveTab, data }) => {
+  const [userName, setUserName] = useState(data[0].name);
+  const [email, setEmail] = useState(data[0].email);
+  const [userImage, setUserImage] = useState(data[0].imageUrl);
 
   useEffect(() => {
-    if (!user==false && user){
-      fetchSaitStaffUserInformation();
+    if(data){
+      setUserName(data[0].name);
+      setEmail(data[0].email);
+      setUserImage(data[0].imageUrl);
     }
-  }, [user]);
-
-  useEffect(() => {
-    if(userData){
-      setUserName(userData[0].name);
-      setEmail(userData[0].email);
-      setUserImage(userData[0].imageUrl);
-    }
-  }, [userData]);
-
-  useEffect(() => {console.log(userImage)}, [userName, email, userImage]);
+  }, [data]);
 
   return (
-    <div className="inline-flex items-center ml-5 rounded-full cursor-pointer" onClick={()=>{setActiveTab("setting")}}>
+    <div
+      className="inline-flex items-center ml-5 rounded-full cursor-pointer"
+      onClick={() => {
+        setActiveTab("setting");
+      }}
+    >
       <div className="bg-slate-200 relative h-12 w-12 border rounded-full overflow-hidden hover:bg-[#F29F3D]">
         <img
           className="w-full h-full rounded-full"
-          src={userImage ? userImage : "/assets/images/UserDefaultSaitStaff.png"}
+          src={
+            userImage ? userImage : "/assets/images/UserDefaultSaitStaff.png"
+          }
           alt="User Image"
         />
       </div>

diff --git a/app/sait-staff/page.js b/app/sait-staff/page.js
@@ -9,15 +9,33 @@ import UserGreeting from "@/Components/UserGreeting";
 import SaitStaffNav from "@/Components/SaitStaffNav";
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { getSaitDataByUser } from "@/services/GetRequest/getRequest";
+import { useUserAuth } from "@/services/utils";
 
 export default function Page() {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [activeTab, setActiveTab] = useState("home"); // Set default active tab
-  const [user, setUser] = useState(null);
   const [hideUserGreeting, setHideUserGreeting] = useState(false);
+  const [userData, setUserData] = useState(null);
+  const {user} = useUserAuth();
 
   const router = useRouter();
 
+  //getting user data
+  async function fetchSaitStaffUserInformation() {
+    const data = await getSaitDataByUser(user);
+    setUserData(data);
+    console.log("default: ",data);
+  }
+
+  useEffect(() => {
+    if (!user == false && user) {
+      fetchSaitStaffUserInformation();
+    }
+  },[user]);
+  useEffect(() => {console.log('user data changed')},[userData])
+
+
   // function to select the tab
   const handleTabClick = (tabName) => {
     setActiveTab(tabName);
@@ -51,7 +69,7 @@ export default function Page() {
         setIsCollapsed={setIsCollapsed}
         onTabClick={handleTabClick}
       />
-      <div
+      {userData ? (<div
         className={`flex-1 flex flex-col mx-auto transition-all duration-300 ease-in-out ${
           isCollapsed ? "ml-20" : "ml-64"
         }`}
@@ -65,7 +83,7 @@ export default function Page() {
                   : "inline-flex items-center ml-5 rounded-full"
               }
             >
-              <UserGreeting setActiveTab={setActiveTab}/>
+              <UserGreeting setActiveTab={setActiveTab} data={userData}/>
             </div>
             <div className="col-start-3 grid w-full justify-items-end">
               <button
@@ -83,9 +101,13 @@ export default function Page() {
           {activeTab === "student" && <SDashboard />}
           {activeTab === "restaurant" && <RDashboard />}
           {activeTab === "home" && <Dash />}
-          {activeTab === "setting" && <Settings />}
+          {activeTab === "setting" && <Settings data={userData} getUserData={fetchSaitStaffUserInformation}/>}
         </div>
-      </div>
+      </div>):(
+        <div className="w-full text-center grid items-center h-screen">
+          <p className="text-3xl font-bold animate-pulse">Loading...</p>
+        </div>)}
+
     </div>
   );
 }
diff --git a/app/sait-staff/settingS/index.js b/app/sait-staff/settingS/index.js
@@ -6,7 +6,6 @@ import { Button } from "@/components/ui/button"
 import Passwordreset from "./passwordreset/page"
 import { Label } from "@/components/ui/label"
 import { Input } from "@/components/ui/input"
-import { getSaitDataByUser } from "@/services/GetRequest/getRequest"
 import { useUserAuth } from "@/services/utils"
 import { useEffect, useState } from "react";
 import { getAuth } from "firebase/auth";
@@ -15,25 +14,16 @@ import { useRouter } from "next/navigation";
 import UserProfile from "./userProfile/page";
 
 
-export default function Settings() {
+export default function Settings({data,getUserData}) {
   const route = useRouter();
   const [userEmail, setUserEmail] = useState("");
   const { user } = useUserAuth();
   const auth = getAuth();
-  const [saitData, setSaitData] = useState(null);
-  async function getUserData(){
-    const data = await getSaitDataByUser(user);
+  const [saitData, setSaitData] = useState(data);
+
+  useEffect(() => {if(data){
     setSaitData(data);
-  }
-  useEffect(() => {
-    if(user!==false && user){
-      getUserData();
-      console.log(auth.currentUser)
-    }
-    if(user==false){
-     route.push("/");
-    }
-  },[user]);
+  }}, [data]);
 
   const handleDeleteAccount = async (e) => {
     e.preventDefault();
@@ -51,7 +41,7 @@ export default function Settings() {
     <div className="flex min-h-screen mx-auto">
       <main className="flex-1  dark:bg-gray-800 p-6 md:p-10">
         {saitData ? (<div className="max-w-4xl mx-auto grid gap-8">
-            <UserProfile data={saitData}/>
+            <UserProfile data={saitData} getUserData={getUserData}/>
             <Passwordreset auth={auth} email={saitData[0].email}/>
             <section className="w-full mx-0 py-12 md:py-16">
               <div className="space-y-6">

diff --git a/app/sait-staff/settingS/userProfile/page.js b/app/sait-staff/settingS/userProfile/page.js
@@ -5,32 +5,141 @@
  */
 "use client";
 
-import { useState, useEffect } from "react";
-import { Card, CardContent, CardFooter } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
+import { useState, useEffect, useRef, use } from "react";
+import { Card, CardContent, CardFooter } from "@/Components/ui/card";
+import { Label } from "@/Components/ui/label";
+import { Input } from "@/Components/ui/input";
+import { Button } from "@/Components/ui/button";
 import { formatPhoneNumber } from "@/Constant/formated";
+import { db } from "@/app/firebase/config";
+import { updateDoc, doc } from "firebase/firestore";
+import { CgArrowsExchange } from "react-icons/cg";
+import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
+import { storage } from "@/app/firebase/config";
 
-export default function UserProfile({ data }) {
+export default function UserProfile({ data, getUserData }) {
   const [name, setName] = useState(data[0].name);
   const [email, setEmail] = useState(data[0].email);
   const [phoneNumber, setPhoneNumber] = useState(data[0].phoneNumber);
   const [address, setAddress] = useState(data[0].address);
   const [role, setRole] = useState(data[0].role);
-  const [active, setActive] = useState(data[0].active);
+  const fileInpt = useRef(null);
+
   useEffect(() => {
-    console.log("data: ", data);
+    if (data) {
+      setName(data[0].name);
+      setEmail(data[0].email);
+      setPhoneNumber(data[0].phoneNumber);
+      setAddress(data[0].address);
+      setRole(data[0].role);
+    }
   }, [data]);
+
+  const handleDivClick = () => {
+    fileInpt.current.click();
+  };
+
+  async function uploadImage(image) {
+    const storageRef = ref(storage, `Saitstaff/${data[0].uid}/${image.name}`);
+    const uploadTask = uploadBytesResumable(storageRef, image);
+    uploadTask.on(
+      "state_changed",
+      (snapshot) => {
+        const fileProgress =
+          (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+        console.log(`Upload is ${fileProgress}% done`);
+        switch (snapshot.state) {
+          case "paused":
+            console.log("Upload is paused");
+            break;
+          case "running":
+            console.log("Upload is running");
+            break;
+        }
+      },
+      (error) => {
+        console.error("Upload failed", error);
+      },
+      async () => {
+        const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
+
+        try {
+          // Query to find the restaurant document with the matching userId
+          const docRef = doc(db, "saitStaff", data[0].id);
+          await updateDoc(docRef, {
+            imageUrl: downloadURL,
+          }).then(() => {
+            alert("Image uploaded successfully");
+            getUserData();
+          });
+        } catch (error) {
+          console.error("Error writing document: ", error);
+        }
+      }
+    );
+  }
+
+  const validExtensions = [
+    ".png",
+    ".jpeg",
+    ".jpg",
+    ".gif",
+    ".bmp",
+    ".tiff",
+    ".tif",
+    ".svg",
+    ".webp",
+    ".ico",
+    ".heif",
+    ".heic",
+    ".raw",
+  ];
+  const handleFileChange = (event) => {
+    const file = event.target.files[0];
+    if (validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext))) {
+      uploadImage(file);
+    } else {
+      console.log("Invalid file format");
+    }
+  };
+
+  async function updateProfile(e) {
+    e.preventDefault();
+    try {
+      const docRef = doc(db, "saitStaff", data[0].id);
+      await updateDoc(docRef, {
+        name: name,
+        phoneNumber: phoneNumber,
+        address: address,
+      }).then(() => {
+        alert("Profile updated successfully");
+        getUserData();
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  }
   return (
     // Changes to be made here
     <div className="mx-full max-w-md">
       <div className="mx-auto grid items-center justify-center w-[200%]">
         <div
-          className="mx-auto rounded-full bg-cover bg-center w-96 h-96 "
+          className="mx-auto rounded-full bg-cover bg-center w-96 h-96 cursor-pointer"
           style={{ backgroundImage: `url(${data[0].imageUrl})` }}
-        />
+        >
+          <input
+            type="file"
+            ref={fileInpt}
+            onChange={(e) => handleFileChange(e)}
+            className="hidden"
+          />
+          <div
+            className="group rounded-full w-96 h-96 hover:bg-black/30 grid items-center justify-center text-center cursor-pointer"
+            onClick={handleDivClick}
+          >
+            <CgArrowsExchange className="hidden group-hover:block text-4xl z-10 text-white"></CgArrowsExchange>
+          </div>
+        </div>
         <h1 className="text-3xl font-bold mx-auto my-10">{data[0].name}</h1>
       </div>
       <Card className="w-[200%]">
@@ -97,8 +206,14 @@ export default function UserProfile({ data }) {
           </div>
         </CardContent>
         <CardFooter>
-          <Button type="submit" className="w-full bg-green-600">
-            Reset Password
+          <Button
+            type="submit"
+            className="w-full bg-green-600"
+            onClick={(e) => {
+              updateProfile(e);
+            }}
+          >
+            Update Profile
           </Button>
         </CardFooter>
       </Card>