[36] – Team Review Changes

src/Constants/Options.ts

@@ -1,4 +1,4 @@
-import { AuthType, Grades, Option, Platform, Subjects } from '@/types';
+import { AuthType, Grades, MARKING_SCHEMES, Option, Platform, Subjects } from '@/types';
 
 export const TestTypeOptions: Option[] = [
   { value: 'assessment', label: 'Assessment' },
@@ -41,10 +41,10 @@ export const TestPlatformOptions = Object.values(Platform).map((value) => ({
   label: value.toString(),
 }));
 
-export const MarkingSchemeOptions: Option[] = [
-  { value: '4,-1', label: '4,-1' },
-  { value: '1,0', label: '1,0' },
-];
+export const MarkingSchemeOptions: Option[] = Object.values(MARKING_SCHEMES).map((value) => ({
+  value: value.toString(),
+  label: value.toString(),
+}));
 
 export const OptionalLimitOptions: Option[] = [
   { value: 'N/A', label: 'N/A' },

src/app/(home)/ModalData.ts

@@ -5,6 +5,7 @@ import {
   TestPurposeOptions,
   TestTypeOptions,
 } from '@/Constants';
+import { absoluteLink } from '@/lib/utils';
 import { DataSection, Option, Session } from '@/types';
 import { format } from 'date-fns';
 
@@ -72,23 +73,31 @@ export const displayData = (data: Session, formOptions: Option[]) => {
       { label: 'Show Answers', value: data.meta_data?.show_answers ? 'Yes' : 'No' },
       {
         label: 'CMS Link',
-        value: data.meta_data?.cms_test_id ?? 'N/A',
+        value: data.meta_data?.cms_test_id ? absoluteLink(data.meta_data?.cms_test_id) : 'N/A',
         isLink: !!data.meta_data?.cms_test_id,
       },
-      { label: 'Portal Link', value: data.portal_link ?? 'N/A', isLink: !!data.portal_link },
       {
-        label: 'Shortened Link',
-        value: data.meta_data?.shortened_link ?? 'N/A',
+        label: 'Portal Link',
+        value: data.portal_link ? absoluteLink(data.portal_link) : 'N/A',
         isLink: !!data.portal_link,
       },
+      {
+        label: 'Shortened Link',
+        value: data.meta_data?.shortened_link
+          ? absoluteLink(data.meta_data?.shortened_link)
+          : 'N/A',
+        isLink: !!data.meta_data?.shortened_link,
+      },
       {
         label: 'Admin Link',
-        value: data.meta_data?.admin_testing_link ?? 'N/A',
+        value: data.meta_data?.admin_testing_link
+          ? absoluteLink(data.meta_data?.admin_testing_link)
+          : 'N/A',
         isLink: !!data.meta_data?.admin_testing_link,
       },
       {
         label: 'Report Link',
-        value: data.meta_data?.report_link ?? 'N/A',
+        value: data.meta_data?.report_link ? absoluteLink(data.meta_data?.report_link) : 'N/A',
         isLink: !!data.meta_data?.report_link,
       },
     ],
@@ -99,16 +108,22 @@ export const displayData = (data: Session, formOptions: Option[]) => {
     data: [
       { label: 'Session Name', value: data.name },
       { label: 'Subject', value: data.meta_data?.subject ?? 'N/A' },
-      { label: 'Portal Link', value: data.portal_link ?? 'N/A', isLink: !!data.portal_link },
+      {
+        label: 'Portal Link',
+        value: data.portal_link ? absoluteLink(data.portal_link) : 'N/A',
+        isLink: !!data.portal_link,
+      },
       { label: 'Platform ID', value: data.platform_id ?? 'N/A' },
       {
         label: 'Shortened Link',
-        value: data.meta_data?.shortened_link ?? 'N/A',
+        value: data.meta_data?.shortened_link
+          ? absoluteLink(data.meta_data?.shortened_link)
+          : 'N/A',
         isLink: !!data.portal_link,
       },
       {
         label: 'Platform Link',
-        value: data.platform_link ?? 'N/A',
+        value: data.platform_link ? absoluteLink(data.platform_link) : 'N/A',
         isLink: !!data.platform_link,
       },
     ],

src/app/(home)/QuizColumns.tsx

@@ -1,20 +1,10 @@
 'use client';
 
+import { Session } from '@/types';
 import { ColumnDef } from '@tanstack/react-table';
 import { format } from 'date-fns';
-
-import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { patchSession, sendCreateSns } from '@/services/services';
-import { Session } from '@/types';
-import { Check, LinkIcon, MoreHorizontal, X } from 'lucide-react';
-import Link from 'next/link';
-import { toast } from 'sonner';
+import { Check, X } from 'lucide-react';
+import { LinkAction, TableActions } from './Table/Actions';
 
 export const columns: ColumnDef<Session>[] = [
   {
@@ -52,16 +42,10 @@ export const columns: ColumnDef<Session>[] = [
     cell: ({ row }) => row.getValue('batchId') || 'N/A',
   },
   {
-    id: 'startDate',
-    accessorKey: 'start_time',
-    header: 'Start Time',
-    cell: ({ row }) => format(new Date(row.getValue('startDate')), 'p'),
-  },
-  {
-    id: 'endDate',
-    accessorKey: 'end_time',
-    header: 'End Time',
-    cell: ({ row }) => format(new Date(row.getValue('endDate')), 'p'),
+    id: 'timing',
+    accessorFn: ({ start_time, end_time }) =>
+      `${start_time ? format(new Date(start_time), 'p') : 'N/A'} - ${end_time ? format(new Date(end_time), 'p') : 'N/A'}`,
+    header: 'Timings',
   },
   {
     id: 'createdAt',
@@ -75,65 +59,23 @@ export const columns: ColumnDef<Session>[] = [
     accessorKey: 'portal_link',
     header: 'Portal Link',
     cell: ({ row }) => (
-      <>
-        {row.getValue('portalLink') ? (
-          <Link
-            href={row.getValue('portalLink')}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex p-1"
-            onClick={(event) => event.stopPropagation()}
-          >
-            <LinkIcon className="size-4 mx-auto cursor-pointer" />
-          </Link>
-        ) : (
-          '-'
-        )}
-      </>
+      <LinkAction value={row.getValue('portalLink')} pending={!row.original.session_id} />
     ),
   },
   {
     id: 'reportLink',
     accessorKey: 'meta_data.report_link',
     header: 'Report Link',
     cell: ({ row }) => (
-      <>
-        {row.getValue('reportLink') ? (
-          <Link
-            href={row.getValue('reportLink')}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex p-1"
-            onClick={(event) => event.stopPropagation()}
-          >
-            <LinkIcon className="size-4 mx-auto cursor-pointer" />
-          </Link>
-        ) : (
-          '-'
-        )}
-      </>
+      <LinkAction value={row.getValue('reportLink')} pending={!row.original.session_id} />
     ),
   },
   {
     id: 'adminLink',
     accessorKey: 'meta_data.admin_testing_link',
     header: 'Admin Link',
     cell: ({ row }) => (
-      <>
-        {row.getValue('adminLink') ? (
-          <Link
-            href={row.getValue('adminLink')}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex p-1"
-            onClick={(event) => event.stopPropagation()}
-          >
-            <LinkIcon className="size-4 mx-auto cursor-pointer" />
-          </Link>
-        ) : (
-          '-'
-        )}
-      </>
+      <LinkAction value={row.getValue('adminLink')} pending={!row.original.session_id} />
     ),
   },
   {
@@ -151,62 +93,6 @@ export const columns: ColumnDef<Session>[] = [
     id: 'actions',
     header: 'Actions',
     enableHiding: false,
-    cell: function Cell({ row }) {
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem asChild className="cursor-pointer">
-              <Link href={`/session/edit?id=${row.original.id}`}>Edit</Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem asChild className="cursor-pointer">
-              <Link href={`/session/duplicate?id=${row.original.id}`}>Duplicate</Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem asChild className="cursor-pointer">
-              <Button
-                variant="ghost"
-                className="w-full focus-visible:ring-0 justify-start font-normal"
-                onClick={async (e) => {
-                  e.stopPropagation();
-                  await patchSession(
-                    {
-                      is_active: !row.original.is_active,
-                    },
-                    row.original.id ?? 0
-                  );
-                  toast.success(
-                    row.original.is_active ? 'Disabled the session' : 'Enabled the session',
-                    { description: 'Please refresh the page after a while.' }
-                  );
-                }}
-              >
-                {row.original.is_active ? 'Disable' : 'Enable'} Session
-              </Button>
-            </DropdownMenuItem>
-            <DropdownMenuItem asChild className="cursor-pointer">
-              <Button
-                variant="ghost"
-                className="w-full focus-visible:ring-0 justify-start font-normal"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  sendCreateSns(row.original.id);
-                  toast.success('Request send successfully', {
-                    description:
-                      'The links will be available/updated shortly. Please refresh the page after a while.',
-                  });
-                }}
-              >
-                Regenerate Links
-              </Button>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      );
-    },
+    cell: ({ row }) => <TableActions session={row.original} />,
   },
 ];

src/app/(home)/Table/Actions.tsx

@@ -0,0 +1,115 @@
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { absoluteLink } from '@/lib/utils';
+import { patchSession } from '@/services/services';
+import type { Session } from '@/types';
+import { Copy, LinkIcon, Loader, MoreHorizontal } from 'lucide-react';
+import Link from 'next/link';
+import { useMemo } from 'react';
+import { toast } from 'sonner';
+
+const TableActions = ({ session }: { session: Session }) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0">
+          <span className="sr-only">Open menu</span>
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent onClick={(e) => e.stopPropagation()}>
+        <DropdownMenuItem asChild className="cursor-pointer">
+          <Link href={`/session/edit?id=${session.id}`} prefetch={false}>
+            Edit
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild className="cursor-pointer">
+          <Link href={`/session/duplicate?id=${session.id}`} prefetch={false}>
+            Duplicate
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild className="cursor-pointer">
+          <Button
+            variant="ghost"
+            className="w-full focus-visible:ring-0 justify-start font-normal"
+            onClick={async () => {
+              await patchSession(
+                {
+                  is_active: !session.is_active,
+                },
+                session.id ?? 0
+              );
+              toast.success(session.is_active ? 'Disabled the session' : 'Enabled the session', {
+                description: 'Please refresh the page after a while.',
+              });
+            }}
+          >
+            {session.is_active ? 'Disable' : 'Enable'} Session
+          </Button>
+        </DropdownMenuItem>
+        {/* <DropdownMenuItem asChild className="cursor-pointer">
+          <Button
+            variant="ghost"
+            className="w-full focus-visible:ring-0 justify-start font-normal"
+            onClick={() => {
+              sendCreateSns(session.id);
+              toast.success('Request send successfully', {
+                description:
+                  'The links will be available/updated shortly. Please refresh the page after a while.',
+              });
+            }}
+          >
+            Regenerate Links
+          </Button>
+        </DropdownMenuItem> */}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const LinkAction = ({ value, pending }: { value: string; pending: boolean }) => {
+  const memoLink = useMemo(() => absoluteLink(value), [value]);
+
+  if (!memoLink) {
+    if (pending) {
+      return <Loader className="size-4 mx-auto motion-safe:animate-spin-slow" />;
+    }
+    return <>-</>;
+  }
+
+  return (
+    <div className="flex place-content-center gap-1" onClick={(e) => e.stopPropagation()}>
+      <Link
+        href={memoLink}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-flex p-1"
+        prefetch={false}
+      >
+        <LinkIcon className="size-4 mx-auto cursor-pointer" />
+      </Link>
+    </div>
+  );
+};
+
+const CopyBtn = ({ value }: { value: string }) => {
+  return (
+    <Button
+      variant="ghost"
+      className="p-1 h-auto"
+      onClick={(e) => {
+        navigator.clipboard.writeText(value);
+        toast.success('Copied Link to clipboard', { duration: 2000 });
+      }}
+    >
+      <Copy className="size-4" />
+    </Button>
+  );
+};
+
+export { CopyBtn, LinkAction, TableActions };