fix: engraving context on tickets error

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "npx tsc --noEmit"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
@@ -65,4 +66,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/component/customTable/SearchFiltersClearBtn.tsx

@@ -5,7 +5,9 @@ interface SearchFiltersClearBtnProps {
   isLoading?: boolean
 }
 
-export const SearchFiltersClearBtn = <SearchFilterType,>(
+export const SearchFiltersClearBtn = <
+  SearchFilterType extends Record<string, unknown>,
+>(
   props: SearchFiltersClearBtnProps,
 ) => {
   const { isLoading } = props

src/component/customTable/SearchPopoverContent.tsx

@@ -9,13 +9,17 @@ import {
 import { useTableContext } from "context/table"
 import { ChangeEvent, MutableRefObject, useEffect, useState } from "react"
 
-interface SearchPopoverContentProps<SearchFilterType> {
+interface SearchPopoverContentProps<
+  SearchFilterType extends Record<string, any>,
+> {
   initialRef: MutableRefObject<HTMLInputElement | null>
   param: keyof SearchFilterType
   onClose: () => void
 }
 
-export const SearchPopoverContent = <SearchFilterType,>(
+export const SearchPopoverContent = <
+  SearchFilterType extends Record<string, any>,
+>(
   props: SearchPopoverContentProps<SearchFilterType>,
 ) => {
   const { initialRef, param, onClose } = props
@@ -35,7 +39,7 @@ export const SearchPopoverContent = <SearchFilterType,>(
   }
 
   const handleSearchFilterChange = () => {
-    setSortField(param as string)
+    setSortField(param)
 
     setSearchFilter(
       (prevSearchFilter) =>

src/component/orderProcessing/EngravingChatAndButtons.tsx

@@ -8,21 +8,24 @@ import { FC } from "react"
 interface EngravingChatAndButtonsProps {
   isOrderHasTicket?: boolean
   isViewOnlyMode?: boolean
+  isForTickets?: boolean
 }
 
 export const EngravingChatAndButtons: FC<EngravingChatAndButtonsProps> = (
   props,
 ) => {
-  const { isOrderHasTicket, isViewOnlyMode } = props
+  const { isOrderHasTicket, isViewOnlyMode, isForTickets } = props
 
   const { canReadTicketMessages } = useUserPermissions()
 
   return (
     <Flex h="full" flex={1} direction="column" gap={2}>
-      <Buttons
-        isOrderHasTicket={isOrderHasTicket}
-        isViewOnlyMode={isViewOnlyMode}
-      />
+      {!isForTickets && (
+        <Buttons
+          isOrderHasTicket={isOrderHasTicket}
+          isViewOnlyMode={isViewOnlyMode}
+        />
+      )}
 
       {isOrderHasTicket && canReadTicketMessages && <Chat />}
     </Flex>

src/component/orderProcessing/EngravingPanel.tsx

@@ -9,10 +9,12 @@ interface EngravingPanelProps {
   processingOrder: WithId<ProcessingOrder>
   isOrderHasTicket?: boolean
   isViewOnlyMode?: boolean
+  isForTickets?: boolean
 }
 
 export const EngravingPanel: FC<EngravingPanelProps> = (props) => {
-  const { processingOrder, isOrderHasTicket, isViewOnlyMode } = props
+  const { processingOrder, isOrderHasTicket, isViewOnlyMode, isForTickets } =
+    props
 
   return (
     <Flex h="full" w="full" direction="row" overflow="hidden" gap={5}>
@@ -21,6 +23,7 @@ export const EngravingPanel: FC<EngravingPanelProps> = (props) => {
       <EngravingChatAndButtons
         isOrderHasTicket={isOrderHasTicket}
         isViewOnlyMode={isViewOnlyMode}
+        isForTickets={isForTickets}
       />
     </Flex>
   )

src/context/table.tsx

@@ -8,14 +8,14 @@ import {
 } from "react"
 import { SortDirection } from "type/sortDirection"
 
-interface TableContextProps<SearchFilterType> {
+interface TableContextProps<SearchFilterType extends Record<string, any>> {
   sortDirection?: SortDirection
   isAscSort?: boolean
   isDescSort?: boolean
   isNoSort?: boolean
   setSortDirection: Dispatch<SetStateAction<SortDirection | undefined>>
-  sortField?: string
-  setSortField: Dispatch<SetStateAction<string | undefined>>
+  sortField?: keyof SearchFilterType
+  setSortField: Dispatch<SetStateAction<keyof SearchFilterType | undefined>>
 
   searchFilter?: SearchFilterType
   setSearchFilter: Dispatch<SetStateAction<SearchFilterType | undefined>>
@@ -27,59 +27,63 @@ export const TableContext = createContext<TableContextProps<any> | undefined>(
 )
 
 //* <SearchFilterType,> - is a providable type
-export const TableContextProvider = <SearchFilterType,>(
+export const TableContextProvider = <
+  SearchFilterType extends Record<string, any>,
+>(
   props: PropsWithChildren<{}>,
 ) => {
   const { children } = props
 
   const [sortDirection, setSortDirection] = useState<
     SortDirection | undefined
   >()
-  const [sortField, setSortField] = useState<string | undefined>()
+  const [sortField, setSortField] = useState<
+    keyof SearchFilterType | undefined
+  >()
 
   const [searchFilter, setSearchFilter] = useState<SearchFilterType>()
 
   const isAscSort = sortDirection === "asc"
   const isDescSort = sortDirection === "desc"
   const isNoSort = sortDirection === undefined
 
-  const getSearchFilterValue = (param: any) => {
+  const getSearchFilterValue = <K extends keyof SearchFilterType>(param: K) => {
     if (
       searchFilter &&
       Object.prototype.hasOwnProperty.call(searchFilter, param)
     ) {
-      const value = searchFilter[param as keyof SearchFilterType]
-      if (value) {
+      const value = searchFilter[param]
+      if (value !== undefined && value !== null) {
         return String(value)
       }
     }
 
     return ""
   }
 
-  return (
-    <TableContext.Provider
-      value={{
-        sortDirection,
-        isAscSort,
-        isDescSort,
-        isNoSort,
-        setSortDirection,
-        sortField,
-        setSortField,
+  const contextValue = {
+    sortDirection,
+    isAscSort,
+    isDescSort,
+    isNoSort,
+    setSortDirection,
+    sortField,
+    setSortField,
 
-        searchFilter,
-        setSearchFilter,
-        getSearchFilterValue,
-      }}
-    >
+    searchFilter,
+    setSearchFilter,
+    getSearchFilterValue,
+  } as TableContextProps<SearchFilterType>
+
+  return (
+    <TableContext.Provider value={contextValue as TableContextProps<any>}>
       {children}
     </TableContext.Provider>
   )
 }
 
 export const useTableContext = <
-  SearchFilterType,
+  SearchFilterType extends Record<string, unknown> = Record<string, unknown>,
 >(): TableContextProps<SearchFilterType> => {
   const context = useContext(TableContext)
 

src/page/Tickets.tsx

@@ -24,7 +24,12 @@ export const Tickets = (props: PageProps) => {
 
   const { data: ticketsResponse, isLoading } = useQuery<
     ApiResponse<WithId<FullTicket>[]>
-  >("ticketsList", () => getAllTickets({}))
+  >("ticketsList", () =>
+    getAllTickets({
+      sortField: "id",
+      sortDirection: "desc",
+    }),
+  )
   const ticketsList = ticketsResponse?.result
 
   return (
@@ -54,6 +59,7 @@ export const Tickets = (props: PageProps) => {
                 processingOrder={openedTicketProcessingOrder!}
                 isOrderHasTicket={isOpenedTicketExists}
                 isViewOnlyMode
+                isForTickets
               />
             )}
         </Flex>

src/type/api/apiRequest.ts

@@ -1,4 +1,5 @@
 import { SortDirection } from "type/sortDirection"
+import { WithId } from "type/withId"
 
 export type LimitOffset = {
   limit?: number
@@ -7,7 +8,7 @@ export type LimitOffset = {
 
 export type ApiRequest<SearchFilterType> = LimitOffset & {
   shopId?: number
-  sortField?: string
+  sortField?: keyof WithId<SearchFilterType>
   sortDirection?: SortDirection
   searchFilter?: SearchFilterType
 }