added functionality to show and hide email onTable

components/users/UserTable.tsx

@@ -23,19 +23,54 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { format } from "date-fns";
-import { LucideMessageCircle } from "lucide-react";
+import { Eye, EyeOff, LucideMessageCircle } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import { DataTablePagination } from "../DataTablePagination";
 import { Input } from "../ui/input";
+import Link from "next/link";
+import { Button } from "../ui/button";
 
 const columns: ColumnDef<Request>[] = [
   {
     accessorKey: "user_id",
     header: "User Id",
     cell: ({ row }) => {
       const value = row.getValue("user_id") as string;
-      return <div>{truncateEmail(value)}</div>;
+      const [showEmail, setShowEmail] = useState(false);
+      const toggleEmail = (event: any) => {
+        event.stopPropagation();
+        setShowEmail(!showEmail);
+      };
+      return (
+        <div>
+          <Button variant={"ghost"} onClick={toggleEmail}>
+            {showEmail ? (
+              <>
+                <div className="flex items-center w-fit">
+                  <Link
+                    href={`/users/${row.original.user_id}`}
+                    className="hover:text-indigo-600"
+                  >
+                    {value}
+                  </Link>{" "}
+                  <Button variant={"ghost"} onClick={toggleEmail}>
+                    <EyeOff className="w-4 h-4 ml-3 hover:text-indigo-500" />
+                  </Button>
+                </div>
+              </>
+            ) : (
+              <div className="flex items-center w-fit">
+                {truncateEmail(value)}{" "}
+                <Button variant={"ghost"} onClick={toggleEmail}>
+                  <Eye className="w-4 h-4 ml-3 hover:text-indigo-500" />
+                </Button>
+              </div>
+            )}
+          </Button>
+          {showEmail && <div>{row.getValue("email")}</div>}
+        </div>
+      );
     },
   },
   {
@@ -198,7 +233,7 @@ export function UserTable({ from, to }: UserTableProps) {
             className="h-8 px-2 lg:px-3"
           >
             Reset
-            <X className="ml-2 h-4 w-4" />
+            <X className="w-4 h-4 ml-2" />
           </Button>
         )} */}
         {/* <div className="flex flex-row space-x-2">
@@ -227,13 +262,13 @@ export function UserTable({ from, to }: UserTableProps) {
           >
             <Button variant="outline" size="sm">
               Export
-              <Download className="ml-2 h-4 w-4" />
+              <Download className="w-4 h-4 ml-2" />
             </Button>
           </CSVLink>
         </div> */}
       </div>
 
-      <div className="rounded-md border">
+      <div className="border rounded-md">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -269,7 +304,7 @@ export function UserTable({ from, to }: UserTableProps) {
                   className="cursor-pointer hover:bg-gray-100"
                 >
                   {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id} className="whitespace-nowrap py-2">
+                    <TableCell key={cell.id} className="py-2 whitespace-nowrap">
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext()

lib/utils.ts

@@ -6,6 +6,22 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
+// export const truncateEmail = (email: string | null) => {
+//   if (!email) return "";
+
+//   if (!email.includes("@")) {
+//     return email; // return the original string if it doesn't look like an email
+//   }
+
+//   const [local, domain] = email.split("@");
+
+//   let truncatedLocal =
+//     local.length <= 2
+//       ? local
+//       : local[0] + "*".repeat(local.length - 2) + local[local.length - 1];
+
+//   return `${truncatedLocal}@${domain}`;
+// };
 export const truncateEmail = (email: string | null) => {
   if (!email) return "";
 
@@ -15,12 +31,15 @@ export const truncateEmail = (email: string | null) => {
 
   const [local, domain] = email.split("@");
 
-  let truncatedLocal =
-    local.length <= 2
-      ? local
-      : local[0] + "*".repeat(local.length - 2) + local[local.length - 1];
+  const firstChar = local.slice(0, 1);
+  const lastChar = local.slice(-1);
 
-  return `${truncatedLocal}@${domain}`;
+  const truncatedLocal = firstChar + "*".repeat(local.length - 2) + lastChar;
+  const [domainName, domainExtension] = domain.split(".");
+  const domainFirstChar = domainName.slice(0, 1);
+  const truncatedDomainName =
+    domainFirstChar + "*".repeat(domainName.length - 1);
+  return `${truncatedLocal}@${truncatedDomainName}.${domainExtension}`;
 };
 
 export const truncate = (str: string, length: number) => {