Skip to content

Commit

Permalink
Merge pull request #22 from team-schnell/profile
Browse files Browse the repository at this point in the history
Basic Profile Page
a2ys authored Sep 22, 2024
2 parents a71bd37 + 5087a3f commit 4d6b0f3
Showing 4 changed files with 184 additions and 1 deletion.
55 changes: 54 additions & 1 deletion src/app/profile/page.tsx
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;
112 changes: 112 additions & 0 deletions src/components/profileComponents/ProfileContent.tsx
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;
9 changes: 9 additions & 0 deletions src/components/profileComponents/ProjectContent.tsx
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
9 changes: 9 additions & 0 deletions src/components/profileComponents/WalletContent.tsx
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

0 comments on commit 4d6b0f3

Please sign in to comment.