111 lines
3.7 KiB
TypeScript
111 lines
3.7 KiB
TypeScript
'use client';
|
|
import { useState, useEffect, useContext } from 'react';
|
|
import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
|
|
import { Button, Card, CardHeader, CardFooter } from '@heroui/react';
|
|
import { TokenContext } from '@/utils/TokenProvider';
|
|
import Avatar from 'boring-avatars';
|
|
import { fetchMyProjects } from '@/utils/projectsControl';
|
|
import { ProjectType } from '@/types/project';
|
|
import PublicityChip from '@/components/PublicityChip';
|
|
import { LocaleCodeType } from '@/types/locale';
|
|
import { ArrowRight } from 'lucide-react';
|
|
|
|
type AccountPageMessages = {
|
|
yourProjects: string;
|
|
public: string;
|
|
private: string;
|
|
notOwnAnyProjects: string;
|
|
findProjects: string;
|
|
};
|
|
|
|
type Props = {
|
|
messages: AccountPageMessages;
|
|
locale: LocaleCodeType;
|
|
};
|
|
|
|
export default function AccountPage({ messages, locale }: Props) {
|
|
const context = useContext(TokenContext);
|
|
const [myProjects, setMyProjects] = useState<ProjectType[]>([]);
|
|
|
|
useEffect(() => {
|
|
async function fetchDataEffect() {
|
|
if (!context.isSignedIn()) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const data = await fetchMyProjects(context.token.access_token);
|
|
setMyProjects(data);
|
|
} catch (error: any) {
|
|
console.error('Error in effect:', error.message);
|
|
}
|
|
}
|
|
|
|
fetchDataEffect();
|
|
}, [context]);
|
|
|
|
return (
|
|
<>
|
|
{context.isSignedIn() && (
|
|
<div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
|
|
<div className="w-full p-3 flex items-center justify-between">
|
|
<Card className="w-[600px]">
|
|
<CardHeader className="flex gap-6">
|
|
<Avatar
|
|
size={48}
|
|
name={context.token!.user!.username}
|
|
variant="beam"
|
|
colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
|
|
/>
|
|
<div className="flex flex-col">
|
|
<p className="text-xl font-bold">{context.token!.user!.username}</p>
|
|
<p className="text-lg text-default-500">{context.token!.user!.email}</p>
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="w-full p-3">
|
|
<h3 className="font-bold mb-2">{messages.yourProjects}</h3>
|
|
{myProjects.length > 0 ? (
|
|
myProjects.map((myProject, myProjectsIndex) => {
|
|
return (
|
|
<Card key={myProject.id} className={`w-[600px] ${myProjectsIndex !== 0 ? 'mt-2' : ''}`}>
|
|
<CardHeader className="flex gap-6 pb-0">
|
|
<Link href={`/projects/${myProject.id}/home`} locale={locale} className={NextUiLinkClasses}>
|
|
{myProject.name}
|
|
</Link>
|
|
</CardHeader>
|
|
<CardFooter className="justify-between pt-0">
|
|
<p className="text-small text-default-500">{myProject.detail}</p>
|
|
<PublicityChip
|
|
isPublic={myProject.isPublic}
|
|
publicText={messages.public}
|
|
privateText={messages.private}
|
|
/>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
})
|
|
) : (
|
|
<>
|
|
<span className="text-default-500 me-2">{messages.notOwnAnyProjects}</span>
|
|
<Button
|
|
as={Link}
|
|
href={`/projects/`}
|
|
locale={locale}
|
|
variant="flat"
|
|
size="sm"
|
|
endContent={<ArrowRight size={12} />}
|
|
>
|
|
{messages.findProjects}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|