Merge pull request #10 from pieceowater-dev/dev

fix: payment table

src/entities/dashboard/payment-data/model/interface.ts

@@ -1,4 +1,5 @@
 export interface IColumnPayments {
+  key?: number
   date: string
   post: string
   sum: string

src/entities/dashboard/payment-data/payment-data.ts

@@ -16,7 +16,7 @@ export const usePaymentData = () => {
       const res = await axiosInstance.get('/payments')
       dispatch(setPaymentsState(res.data))
     } catch (error) {
-      openNotification('Произошла ошибка при загрузке данных о пользователях')
+      openNotification('Произошла ошибка при загрузке данных о платежах')
     }
   }
 

src/entities/dashboard/table-data/index.ts

@@ -0,0 +1,3 @@
+import { useTableData } from 'entities/dashboard/table-data/table-data'
+
+export { useTableData }

src/entities/dashboard/table-data/model/interface.ts

@@ -0,0 +1,16 @@
+export interface IRowsPaymentResponse {
+  id: number
+  date: number
+  sum: string
+  device: {
+    id: number
+    name: string
+  }
+}
+
+export interface ITablePaymentsState {
+  key: number
+  date: string
+  post: string
+  sum: number
+}

src/entities/dashboard/table-data/table-data.ts

@@ -0,0 +1,32 @@
+import {
+  IRowsPaymentResponse,
+  ITablePaymentsState,
+} from 'entities/dashboard/table-data/model/interface'
+import { useEffect, useState } from 'react'
+import { transformPrice } from 'shared/lib/functions/transform-price'
+import { unixDate } from 'shared/lib/functions/unis-date'
+import { useAppSelector } from 'shared/redux/store'
+
+export const useTableData = () => {
+  const payments = useAppSelector((state) => state.dashboard.payments)
+  const [paymentTable, setPaymentTable] = useState<ITablePaymentsState[]>([])
+  const [paymentTableSum, setPaymentTableSum] = useState(0)
+  const totalPaymentTable = payments.totals.count
+
+  useEffect(() => {
+    setPaymentTableSum(0)
+    const paymentsRows = payments.items.map((row: IRowsPaymentResponse) => {
+      setPaymentTableSum((prevState) => prevState + transformPrice(row.sum))
+      return {
+        key: row.id,
+        date: unixDate(row.date * 1000, 'DMYHM'),
+        post: row.device.name,
+        sum: transformPrice(row.sum),
+      }
+    })
+
+    setPaymentTable(paymentsRows)
+  }, [payments])
+
+  return { paymentTable, paymentTableSum, totalPaymentTable }
+}

src/pages/dashboard/dashboard.tsx

@@ -1,26 +1,27 @@
 import { Table } from 'antd'
 import { usePaymentData } from 'entities/dashboard/payment-data'
+import { useTableData } from 'entities/dashboard/table-data'
 import { FC } from 'react'
-import { useAppSelector } from 'shared/redux/store'
 
 export const Dashboard: FC = () => {
   const { fetchData, columns } = usePaymentData()
-  const payments = useAppSelector((state) => state.dashboard.payments)
-
-  console.log(payments)
+  const { paymentTable, paymentTableSum, totalPaymentTable } = useTableData()
 
   return (
     <>
       <Table
         columns={columns}
-        dataSource={[]}
+        dataSource={paymentTable}
         bordered={true}
         showHeader={true}
         tableLayout={'fixed'}
         pagination={{
-          total: 0,
+          total: totalPaymentTable,
         }}
       />
+      <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'end' }}>
+        {'Итого: ' + paymentTableSum}
+      </div>
     </>
   )
 }

src/shared/lib/functions/transform-price/index.ts

@@ -0,0 +1,3 @@
+import { transformPrice } from 'shared/lib/functions/transform-price/transform-price'
+
+export { transformPrice }

src/shared/lib/functions/transform-price/transform-price.ts

@@ -0,0 +1 @@
+export const transformPrice = (number: string) => parseFloat(number.replace(/[$,]/g, ''))

src/shared/lib/functions/unis-date/index.ts

@@ -0,0 +1,3 @@
+import { unixDate } from 'shared/lib/functions/unis-date/unix-date'
+
+export { unixDate }

src/shared/lib/functions/unis-date/unix-date.ts

@@ -0,0 +1,59 @@
+export const unixDate = (
+  value: string | number,
+  type: 'DHMS' | 'DM' | 'HM' | 'HMS' | 'DMY' | 'DMYNUM' | 'DMYHM',
+  inSeconds = false,
+  monthsArr = [
+    'янв.',
+    'фев.',
+    'мар ',
+    'апр.',
+    'май ',
+    'июнь',
+    'июль',
+    'авг.',
+    'сент.',
+    'окт.',
+    'нояб.',
+    'дек.',
+  ],
+): string => {
+  const date =
+    typeof value === 'string'
+      ? new Date(+value * (inSeconds ? 1000 : 1))
+      : new Date(value * (inSeconds ? 1000 : 1))
+  const minutes = '0' + date.getMinutes()
+  const hours = '0' + date.getHours()
+  const seconds = '0' + date.getSeconds()
+  const month = '0' + date.getMonth()
+  const dayDate = '0' + date.getDate()
+
+  let day: number | string = date.getDay()
+  let minutesZero: number | string = date.getMinutes()
+  let secondsZero: number | string = date.getSeconds()
+  let hoursZero: number | string = date.getHours()
+
+  switch (type) {
+    case 'DHMS':
+      day = day > 0 ? day + ' дн.' : ''
+      hoursZero = hoursZero > 0 ? hoursZero + ' ч.' : ''
+      minutesZero = minutesZero > 0 ? minutesZero + ' мин.' : ''
+      secondsZero = secondsZero > 0 ? secondsZero + ' сек.' : ''
+      return `${day} ${hoursZero} ${minutesZero} ${secondsZero}`
+    case 'DM':
+      return `${date.getDate()} ${monthsArr[date.getMonth()]}`
+    case 'HM':
+      return `${hours.substr(-2)}:${minutes.substr(-2)}`
+    case 'HMS':
+      return `${hours.substr(-2)}:${minutes.substr(-2)}:${seconds.substr(-2)}`
+    case 'DMY':
+      return `${date.getDate()} ${monthsArr[date.getMonth()]} ${date.getFullYear()}`
+    case 'DMYNUM':
+      return `${dayDate.substr(-2)}.${month.substr(-2)}.${date.getFullYear()}`
+    case 'DMYHM':
+      return `${date.getDate()} ${monthsArr[date.getMonth()]} ${date.getFullYear()} ${hours.substr(
+        -2,
+      )}:${minutes.substr(-2)}`
+    default:
+      return 'Missing type param in func'
+  }
+}

src/shared/redux/dashboard/dashboard-slice.ts

@@ -1,7 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit'
 
 const initialState = {
-  payments: { items: [], total: { count: 0 } },
+  payments: { items: [], totals: { count: 0 } },
 }
 
 export const DashboardSlice = createSlice({