refactor: some logic improvements + footer + ui changes

NoorFatima01 · Jun 24, 2024 · 739d4e3 · 739d4e3
1 parent 92873cd
commit 739d4e3
Show file tree

Hide file tree

Showing 16 changed files with 129 additions and 178 deletions.
diff --git a/src/app/(lobby)/dashboard/page.tsx b/src/app/(lobby)/dashboard/page.tsx
@@ -77,12 +77,6 @@ export default async function DashboardPage() {
                 No tasks found
               </p>
             )}
-            {/* {tasksDataWithProjectName?.map((taskWithProjectName, index) => (
-              <DashboardTaskCard
-                taskWithProjectName={taskWithProjectName}
-                key={index}
-              />
-            ))} */}
             <TaskList tasksDataWithProjectName={tasksDataWithProjectName} />
           </CardContent>
         </CardHeader>

diff --git a/src/app/(lobby)/layout.tsx b/src/app/(lobby)/layout.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 
 import { getUser } from '@/lib/server-user';
 
+import Footer from '@/components/layout/footer';
 import SiteHeader from '@/components/layout/site-header';
-import { ProgressBar } from '@/components/progress-bar';
 
 interface LobbyLayoutProps {
   children: React.ReactNode;
@@ -18,11 +18,10 @@ export default async function LobbyLayout({ children }: LobbyLayoutProps) {
     image: user?.user_metadata.avatar_url,
   };
   return (
-    <div>
-      <ProgressBar className='fixed top-0 h-3 bg-yellow-300 z-1000'>
-        <SiteHeader user={siteHeaderUser} />
-        <main>{children}</main>
-      </ProgressBar>
+    <div className='flex flex-col min-h-screen'>
+      <SiteHeader user={siteHeaderUser} />
+      <main className='flex-grow'>{children}</main>
+      <Footer />
     </div>
   );
 }
diff --git a/src/app/api/member/[userId]/route.ts b/src/app/api/member/[userId]/route.ts
diff --git a/src/app/api/member/route.ts b/src/app/api/member/route.ts
@@ -1,44 +1,5 @@
 import { createSupabaseServerClient } from '@/lib/supabase/server-clients';
 
-// eslint-disable-next-line unused-imports/no-unused-vars
-// export async function POST(req: Request) {
-//   try {
-//     const serverSupabase = createSupabaseServerClient();
-//     const {
-//       data: { user: serverUser },
-//     } = await serverSupabase.auth.getUser();
-//     const user_id = serverUser?.id;
-
-//     const memberData = {
-//       member_id: user_id,
-//       created_at: new Date().toISOString(),
-//       open_to_work: true,
-//     };
-//     const { error } = await serverSupabase
-//       .from('members')
-//       .insert([{ ...memberData }]);
-//     if (error) {
-//       throw new Error(error.message);
-//     }
-
-//     //upgrade role to member in profiles table
-//     const { error: roleError } = await serverSupabase
-//       .from('profiles')
-//       .update({ role: 'TEAM_MEMBER' })
-//       .eq('id', user_id);
-//     if (roleError) {
-//       throw new Error(roleError.message);
-//     }
-//     return new Response(JSON.stringify({ success: true }), { status: 201 });
-//   } catch (error: unknown) {
-//     if (error instanceof Error) {
-//       return new Response(error.message, { status: 500 });
-//     } else {
-//       return new Response(null, { status: 500 });
-//     }
-//   }
-// }
-
 //get other users for team creation
 export async function GET() {
   try {
@@ -50,7 +11,9 @@ export async function GET() {
     const { data: availableMembers, error } = await serverSupabase
       .from('profiles')
       .select('email, username, id')
-      .neq('id', user_id);
+      .neq('id', user_id)
+      .neq('role', 'TEAM_HEAD')
+      .neq('teams_joined', 3);
 
     if (error) {
       throw new Error(error.message);

diff --git a/src/app/api/project/route.ts b/src/app/api/project/route.ts
@@ -58,7 +58,13 @@ export async function GET(req: Request) {
     const totalProjects = projectsCount?.length || 0;
 
     if (totalProjects === 0) {
-      return new Response(null, { status: 200 });
+      const projectResponse = {
+        projects: [],
+        totalProjects,
+        totalPages: 0,
+        currentPage: 1,
+      };
+      return new Response(JSON.stringify(projectResponse), { status: 200 });
     }
 
     if (countError) {

diff --git a/src/app/api/teams/route.ts b/src/app/api/teams/route.ts
@@ -122,7 +122,13 @@ export async function GET(req: Request) {
       .select('team_id');
     const totalTeams = teamsCount?.length || 0;
     if (totalTeams === 0) {
-      return new Response(null, { status: 200 });
+      const teamsResponse = {
+        teams: [],
+        totalTeams,
+        totalPages: 0,
+        currentPage: 1,
+      };
+      return new Response(JSON.stringify(teamsResponse), { status: 200 });
     }
     if (countError) {
       throw new Error(countError.message);

diff --git a/src/components/dashboard-tabs.tsx b/src/components/dashboard-tabs.tsx
@@ -12,12 +12,12 @@ const TABSLIST = [
     link: '/dashboard',
   },
   {
-    name: 'Projects',
+    name: 'My Projects',
     value: 'projects',
     link: '/dashboard/projects',
   },
   {
-    name: 'Teams',
+    name: 'My Teams',
     value: 'teams',
     link: '/dashboard/teams',
   },

diff --git a/src/components/landing-page/features.tsx b/src/components/landing-page/features.tsx
@@ -3,14 +3,10 @@ import React from 'react';
 import { Icons } from '@/components/icons';
 
 const features = [
-  {
-    heading: 'Register yourself',
-    description: 'Register as a member to access the platform',
-    icon: <Icons.user />,
-  },
   {
     heading: 'Create or Join Teams',
-    description: 'Become a team head. Create and manage your own teams.',
+    description:
+      'Create and manage your own teams. Or join a team as a member.',
     icon: <Icons.add />,
   },
   {
@@ -20,7 +16,12 @@ const features = [
     icon: <Icons.folder />,
   },
   {
-    heading: 'View Reports',
+    heading: 'Assign Tasks',
+    description: 'Assign tasks to your team members and track their progress.',
+    icon: <Icons.check />,
+  },
+  {
+    heading: 'Upload and download files',
     description: 'View reports of your projects and tasks.',
     icon: <Icons.file />,
   },
@@ -31,7 +32,7 @@ const features = [
   },
   {
     heading: 'Get Notified',
-    description: 'Get notified of your project and task updates.',
+    description: 'Get notified of your team invites.',
     icon: <Icons.bell />,
   },
 ];

diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
@@ -0,0 +1,38 @@
+import Link from 'next/link';
+import React from 'react';
+
+import { Icons } from '@/components/icons';
+
+export default function Footer() {
+  return (
+    <footer className='border py-4 '>
+      <div className='container flex justify-between'>
+        <div className='flex justify-between gap-2'>
+          <p>&copy; {new Date().getFullYear()} All rights reserved.</p>
+          <Icons.gitHub className='size-6' />
+          <Link
+            href='https://github.com/NoorFatima01/team-management'
+            target='_blank'
+          >
+            <p className='text-md text-blue-600 hover:underline'>
+              Visit the Github repo
+            </p>
+          </Link>
+        </div>
+        <div className='mb-2 flex gap-2'>
+          <span>Made by</span>
+          <Link href='https://github.com/NoorFatima01' target='_blank'>
+            <p className='text-md text-blue-600 hover:underline'>Noor Fatima</p>
+          </Link>
+
+          <span>and</span>
+          <Link href='https://github.com/Amama-Fatima' target='_blank'>
+            <p className='text-md text-blue-600 hover:underline'>
+              Amama Fatima
+            </p>
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/login-buttons/login-dialog.tsx b/src/components/login-buttons/login-dialog.tsx
@@ -12,6 +12,7 @@ import LoginWithGoogleButton from '@/components/login-buttons/google-login-butto
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -23,6 +24,7 @@ import { Input } from '@/components/ui/input';
 
 const LoginDialog = () => {
   const [email, setEmail] = React.useState('');
+  const [isLoginLoading, setIsLoginLoading] = React.useState(false);
   const [password, setPassword] = React.useState('');
   const { setLogInStatus } = useLogInStatusStore();
 
@@ -36,10 +38,12 @@ const LoginDialog = () => {
     });
 
     if (error) {
-      toast.error('Failed to log in');
+      toast.error(error.message);
+      setIsLoginLoading(false);
     } else if (data) {
       toast.success('Logged in successfully');
       setLogInStatus(true);
+      setIsLoginLoading(false);
     }
 
     router.refresh();
@@ -97,20 +101,30 @@ const LoginDialog = () => {
               }}
             />
           </div>
-          <Button onClick={() => signInWithEmail(email, password)}>
+          <Button
+            onClick={() => {
+              setIsLoginLoading(true);
+              signInWithEmail(email, password);
+            }}
+          >
+            {isLoginLoading && (
+              <Icons.spinner className='animate-spin h-4 w-4 mr-2' />
+            )}
             Log In
           </Button>
         </div>
         <DialogFooter>
           <div className='w-full flex items-center justify-center'>
             <p className='text-sm'>Don't have an account?</p>
-            <Button
-              variant='link'
-              className='inline-flex text-white text-md focus-visible:ring-primary-500 focus:outline-none focus-visible:rounded focus-visible:ring focus-visible:ring-offset-2 hover:underline'
-              onClick={() => createAccountButtonClick()}
-            >
-              Create account
-            </Button>
+            <DialogClose asChild>
+              <Button
+                variant='link'
+                className='inline-flex text-white text-md focus-visible:ring-primary-500 focus:outline-none focus-visible:rounded focus-visible:ring focus-visible:ring-offset-2 hover:underline'
+                onClick={() => createAccountButtonClick()}
+              >
+                Create account
+              </Button>
+            </DialogClose>
           </div>
         </DialogFooter>
       </DialogContent>