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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
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.