Skip to content

Commit

Permalink
DEAR-125: add join team to account dropwdown menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@baurnick
baurnick committed Jul 21, 2024
1 parent f88930c commit 623aaad
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 103 deletions.
6 changes: 4 additions & 2 deletions app/(main)/team/(teammember)/[id]/members/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Separator from '@components/ui/Separator/Separator';
import { Clipboard, Check } from 'lucide-react';
import Input from '@components/ui/Input/Input';
import { Button } from '@components/ui/Buttons/Button';
import { useAuth } from '@providers/AuthProvider';
import { columns } from '../../../components/TeamMembersTable/columns';
import TeamMemberTable from '../../../components/TeamMembersTable/TeamMemberTable';

Expand All @@ -25,6 +26,7 @@ const TeamMembersPage: React.FC<TeamMembersPageProps> = ({ params }) => {
const inputRef = React.useRef<HTMLInputElement>(null);
const { data, isLoading, error } = useSWRClient<TeamWithMembers>(`/v1/team-member/${teamId}`);
const { code: teamCode } = data?.team || {};
const { userId: currentUserId } = useAuth();

const copyToClipboard = () => {
const inputValue = inputRef.current?.value;
Expand Down Expand Up @@ -61,11 +63,11 @@ const TeamMembersPage: React.FC<TeamMembersPageProps> = ({ params }) => {
<h2>Manage</h2>
<p className="text-sm font-thin">All team members listed.</p>
</div>
<TeamMemberTable<TeamMemberWithUser> columns={columns} data={data.members} />
<TeamMemberTable<TeamMemberWithUser> columns={columns(currentUserId)} data={data.members} />
</div>
</>
) : (
<TeamMemberTable<TeamMemberWithUser> columns={columns} data={data.members} />
<TeamMemberTable<TeamMemberWithUser> columns={columns(currentUserId)} data={data.members} />
)}
</div>
) : (
Expand Down
9 changes: 8 additions & 1 deletion app/(main)/team/components/TeamMembersTable/columns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,15 @@ import { ColumnDef } from '@tanstack/react-table';
import { Badge } from '@components/ui/Badge/Badge';
import cn from '@/lib/utils';
import DataTableColumnHeader from '@components/ui/Table/DataTableColumnHeader';
import { Asterisk } from 'lucide-react';

export const columns: ColumnDef<TeamMemberWithUser>[] = [
export const columns = (currentUserId: string | undefined): ColumnDef<TeamMemberWithUser>[] => [
{
id: 'activeUser',
cell: ({ row }) => (
<div>{currentUserId === row.original.user.id.toString() && <Asterisk className="h-4 w-4" />}</div>
),
},
{
id: 'name',
accessorKey: 'user.name',
Expand Down
85 changes: 50 additions & 35 deletions app/(onboarding)/onboarding/components/JoinTeamDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
'use client';

import * as React from 'react';
import Link from 'next/link';
import { DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@components/ui/Dialog/Dialog';
import { Button } from '@components/ui/Buttons/Button';
import { zodResolver } from '@hookform/resolvers/zod';
Expand Down Expand Up @@ -44,6 +45,10 @@ const JoinTeamDialog: React.FC = () => {
});
} catch (error) {
console.error(error);
form.setError('code', {
type: 'manual',
message: 'Failed to join team with this code. Please try again.',
});
} finally {
setIsLoading(false);
}
Expand All @@ -69,44 +74,54 @@ const JoinTeamDialog: React.FC = () => {
<span className="font-bold text-black underline">{joinedTeam.name}</span>.
</span>
) : (
'Fill the four-digit code, this code should be provided to you by a admin.'
'Fill the four-digit code, this code should be provided to you by an admin.'
)}
</DialogDescription>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
<FormField
control={form.control}
name="code"
render={({ field }) => (
<FormItem>
<FormLabel>Team code</FormLabel>
<FormControl>
<InputOTP maxLength={4} pattern={REGEXP_ONLY_DIGITS_AND_CHARS} {...field}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
</InputOTPGroup>
</InputOTP>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<DialogFooter>
{!isLoading ? (
<Button type="submit">Join Team</Button>
) : (
<Button disabled>
<Loader2 className="animate-sping mr-2 h-4 w-4" />
Please wait
</Button>
)}
</DialogFooter>
</form>
</Form>
{!joinedTeam ? (
<Form {...form}>
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
<FormField
control={form.control}
name="code"
render={({ field }) => (
<FormItem>
<FormLabel>Team code</FormLabel>
<FormControl>
<InputOTP maxLength={4} pattern={REGEXP_ONLY_DIGITS_AND_CHARS} {...field}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
</InputOTPGroup>
</InputOTP>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<DialogFooter>
{!isLoading ? (
<Button type="submit">Join Team</Button>
) : (
<Button disabled>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Please wait
</Button>
)}
</DialogFooter>
</form>
</Form>
) : (
<DialogFooter>
<div>
<Link href="/team">
<Button className="mt-8 px-8">Continue</Button>
</Link>
</div>
</DialogFooter>
)}
</>
);
};
Expand Down
147 changes: 82 additions & 65 deletions components/Header/Account.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import Link from 'next/link';
import { Button } from '@components/ui/Buttons/Button';
import { User, Settings, LogOut, LifeBuoyIcon } from 'lucide-react';
import { User, Settings, LogOut, LifeBuoyIcon, Plus } from 'lucide-react';
import {
DropdownMenu,
DropdownMenuTrigger,
Expand All @@ -24,6 +24,8 @@ import {
AlertDialogCancel,
} from '@components/ui/AltertDialog/AlertDialog';
import { useAuth } from '@providers/AuthProvider';
import { Dialog, DialogTrigger, DialogContent } from '@components/ui/Dialog/Dialog';
import JoinTeamDialog from '@/(onboarding)/onboarding/components/JoinTeamDialog';

const Account: React.FC = () => {
const { user } = useAuth();
Expand All @@ -33,70 +35,85 @@ const Account: React.FC = () => {
};

return (
<AlertDialog>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<User className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="min-w-48">
<DropdownMenuLabel className="text-sm">
<p>{user ? `${user?.name}` : 'My Account'}</p>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem asChild>
<Link href="/settings">
<div className="flex items-center">
<User className="mr-2 h-4 w-4" />
<span>Profile</span>
</div>
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/contact">
<div className="flex items-center">
<LifeBuoyIcon className="mr-2 h-4 w-4" />
<span>Support</span>
</div>
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/settings/appearance">
<div className="flex items-center">
<Settings className="mr-2 h-4 w-4" />
<span>Settings</span>
</div>
</Link>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<AlertDialogTrigger asChild>
<DropdownMenuItem>
<LogOut className="mr-2 h-4 w-4" />
<span>Log out</span>
</DropdownMenuItem>
</AlertDialogTrigger>
</DropdownMenuContent>
</DropdownMenu>
<AlertDialogContent className="max-w-[400px]">
<AlertDialogHeader>
<AlertDialogTitle>
<h3>Are you sure?</h3>
</AlertDialogTitle>
<AlertDialogDescription>
<p className="text-xs font-thin">Log out of your yappi account.</p>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel className="h-8">Cancel</AlertDialogCancel>
<AlertDialogAction className="h-8" onClick={handleLogout}>
Log out
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<Dialog>
<AlertDialog>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<User className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="min-w-48">
<DropdownMenuLabel className="text-sm">
<p>{user ? `${user?.name}` : 'My Account'}</p>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem asChild>
<Link href="/settings">
<div className="flex items-center">
<User className="mr-2 h-4 w-4" />
<span>Profile</span>
</div>
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DialogTrigger asChild>
<DropdownMenuItem>
<div className="flex items-center">
<Plus className="mr-2 h-4 w-4" />
<span>Join team</span>
</div>
</DropdownMenuItem>
</DialogTrigger>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href="/contact">
<div className="flex items-center">
<LifeBuoyIcon className="mr-2 h-4 w-4" />
<span>Support</span>
</div>
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/settings/appearance">
<div className="flex items-center">
<Settings className="mr-2 h-4 w-4" />
<span>Settings</span>
</div>
</Link>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<AlertDialogTrigger asChild>
<DropdownMenuItem>
<LogOut className="mr-2 h-4 w-4" />
<span>Log out</span>
</DropdownMenuItem>
</AlertDialogTrigger>
</DropdownMenuContent>
</DropdownMenu>
<AlertDialogContent className="max-w-[400px]">
<AlertDialogHeader>
<AlertDialogTitle>
<h3>Are you sure?</h3>
</AlertDialogTitle>
<AlertDialogDescription>
<p className="text-xs font-thin">Log out of your yappi account.</p>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel className="h-8">Cancel</AlertDialogCancel>
<AlertDialogAction className="h-8" onClick={handleLogout}>
Log out
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<DialogContent>
<JoinTeamDialog />
</DialogContent>
</Dialog>
);
};

Expand Down

0 comments on commit 623aaad

Please sign in to comment.