From 8c7e19bae8375b5c6447f245d4c235ffbcc9adf6 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Thu, 12 Sep 2024 15:56:57 +0200
Subject: [PATCH] Hide some columns in ticket list (on mobile)

---
 .../overview/[overview]/_components/TicketList.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/link/app/(main)/overview/[overview]/_components/TicketList.tsx b/apps/link/app/(main)/overview/[overview]/_components/TicketList.tsx
index cb45eab..7c140d3 100644
--- a/apps/link/app/(main)/overview/[overview]/_components/TicketList.tsx
+++ b/apps/link/app/(main)/overview/[overview]/_components/TicketList.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { FC, useState } from "react";
-import { Grid, Box } from "@mui/material";
+import { Grid, Box, useTheme, useMediaQuery } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid-pro";
 import { StyledDataGrid } from "app/(main)/_components/StyledDataGrid";
 import { Button, List, typography } from "@link-stack/ui";
@@ -16,6 +16,10 @@ interface TicketListProps {
 export const TicketList: FC<TicketListProps> = ({ title, tickets }) => {
   const [dialogOpen, setDialogOpen] = useState(false);
   const router = useRouter();
+
+  const theme = useTheme();
+  const mobile = useMediaQuery(theme.breakpoints.down("sm"));
+  
   let gridColumns: GridColDef[] = [
     {
       field: "number",
@@ -32,7 +36,9 @@ export const TicketList: FC<TicketListProps> = ({ title, tickets }) => {
       headerName: "Sender",
       valueGetter: (value: any) => value?.fullname,
       flex: 1,
-    },
+    }];
+    if (!mobile) {
+      gridColumns.push(
     {
       field: "createdAt",
       headerName: "Created At",
@@ -50,8 +56,8 @@ export const TicketList: FC<TicketListProps> = ({ title, tickets }) => {
       headerName: "Group",
       valueGetter: (value: any) => value?.name,
       flex: 1,
-    },
-  ];
+    });
+  }
 
   const onRowClick = (id: any) => {
     router.push(`/tickets/${id}`);