-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #22 from team-schnell/profile
Basic Profile Page
Showing
4 changed files
with
184 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,60 @@ | ||
"use client"; | ||
import ProfileContent from "@/components/profileComponents/ProfileContent" | ||
import ProjectContent from "@/components/profileComponents/ProjectContent"; | ||
import WalletContent from "@/components/profileComponents/WalletContent"; | ||
import React from "react"; | ||
import { useState } from "react"; | ||
|
||
|
||
|
||
const Profile = () => { | ||
return <div>Profile</div>; | ||
const [option, setOption] = useState<string>('Profile'); | ||
|
||
const renderContent = () => { | ||
switch (option) { | ||
case 'Profile': | ||
return <ProfileContent/>; | ||
case 'Projects': | ||
return <ProjectContent/>; | ||
|
||
default: | ||
return <div>Here is an overview of your profile</div>; | ||
} | ||
}; | ||
|
||
return ( | ||
<div className="flex justify-center items-center min-h-screen"> | ||
<div className="w-[85vw] h-[88vh] flex bg-stone-950 rounded-md"> | ||
<div className="w-1/4 p-8 "> | ||
<p className="text-lg text-gray-200">FirstCheque</p> | ||
|
||
<div className="mt-10"> | ||
<p className="text-md text-gray-600 pb-6">Menu</p> | ||
<ul className="text-xs text-gray-400 "> | ||
<li className={`pb-4 cursor-pointer hover:text-white ${option === 'Profile'? 'text-white':null }`} | ||
onClick={()=> setOption('Profile')}> | ||
Profile | ||
</li> | ||
<li className={`pb-4 cursor-pointer hover:text-white ${option === 'Projects'? 'text-white':null}`} | ||
onClick={()=> setOption('Projects')}> | ||
Projects | ||
</li> | ||
|
||
</ul> | ||
<p className="text-md text-gray-500 mt-10 pb-6">Account settings</p> | ||
<ul className="text-xs text-gray-400 "> | ||
|
||
<li className="pb-4 cursor-pointer hover:text-white" | ||
onClick={()=> console.log("handle logout")}> | ||
Logout | ||
</li> | ||
</ul> | ||
</div> | ||
</div> | ||
<div className="w-3/4 text-gray-300 text-sm p-12">{renderContent()}</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Profile; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
import React from 'react' | ||
import { useEffect, useState } from "react"; | ||
import { useAuthInfo } from "@/context/AuthInfo"; | ||
import { createClient } from "@/utils/supabase/client" | ||
import WalletContent from './WalletContent'; | ||
|
||
|
||
interface FreelancerData { | ||
skills: string; | ||
age: number; | ||
gender: string; | ||
} | ||
|
||
interface EmployerData { | ||
companyName: string; | ||
website: string; | ||
} | ||
const ProfileContent = () => { | ||
const { user, role ,setRole} = useAuthInfo(); | ||
const [userData, setUserData] = useState<string | null>(null); | ||
const [freelancerData, setFreelancerData] = useState<FreelancerData | null>(null); | ||
const [employerData, setEmployerData] = useState<EmployerData | null>(null); const supabase = createClient(); | ||
useEffect(() => { | ||
const fetchUserRole = async () => { | ||
if (!role && user) { | ||
const supabase = createClient(); | ||
const { data, error } = await supabase | ||
.from("user") | ||
.select("role") | ||
.eq("userid", user.id) | ||
.single(); | ||
|
||
if (error) { | ||
console.error("Error fetching user role:", error); | ||
} else if (data) { | ||
setRole(data.role); | ||
} | ||
} | ||
}; | ||
|
||
fetchUserRole(); | ||
}, [user, role, setRole]); | ||
useEffect(()=>{ | ||
const fetchProfileData = async () => { | ||
|
||
const { data: { user } } = await supabase.auth.getUser(); | ||
if(user){ | ||
const {data,error}=await supabase .from("user").select("name").eq("userid",user.id); | ||
if (error) { | ||
console.error('Error fetching user:', error); | ||
} else{ | ||
setUserData(data?.[0]?.name); | ||
} | ||
} | ||
if (user && role === "freelancer") { | ||
const { data: freelancerData,error } = await supabase.from("freelancer") | ||
.select("skills, age, gender") | ||
.eq("id", user.id); | ||
if(!error && freelancerData){ | ||
setFreelancerData(freelancerData[0]); | ||
} | ||
|
||
} | ||
else if (user && role === "employer") { | ||
const { data: employerData,error } = await supabase.from("employer") | ||
.select("companyName, website") | ||
.eq("id", user.id); | ||
if(!error && employerData){ | ||
setEmployerData(employerData[0]); | ||
} | ||
} | ||
}; | ||
fetchProfileData(); | ||
},[supabase,user,role]) | ||
console.log("Role:", role); | ||
console.log("user:", user); | ||
return ( | ||
<div> | ||
{userData && <h1>Welcome {userData}</h1>} | ||
{user ? ( | ||
role === "freelancer" ? ( | ||
freelancerData ? ( | ||
<div> | ||
<p>Skills: {freelancerData.skills}</p> | ||
<p>Age: {freelancerData.age}</p> | ||
<p>Gender: {freelancerData.gender}</p> | ||
</div> | ||
) : ( | ||
<p>freelancer data</p> | ||
) | ||
) : role === "employer" ? ( | ||
employerData ? ( | ||
<div> | ||
<p>Company Name: {employerData.companyName}</p> | ||
<p>Website: {employerData.website}</p> | ||
</div> | ||
) : ( | ||
<p>employer data</p> | ||
) | ||
) : ( | ||
<p>error</p> | ||
) | ||
): ( | ||
<p>No user </p> | ||
)} | ||
|
||
<WalletContent/> | ||
</div> | ||
); | ||
} | ||
|
||
export default ProfileContent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import React from 'react' | ||
|
||
const ProjectContent = () => { | ||
return ( | ||
<div>ProjectContent</div> | ||
) | ||
} | ||
|
||
export default ProjectContent |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import React from 'react' | ||
|
||
const WalletContent = () => { | ||
return ( | ||
<div>WalletContent</div> | ||
) | ||
} | ||
|
||
export default WalletContent |