api-getter

1
'use client'
2

3
import {
4
	Table,
5
	TableBody,
6
	TableCell,
7
	TableHead,
8
	TableHeader,
9
	TableRow,
10
} from '@/components/ui/Table'
11
import {
12
	flexRender,
13
	getCoreRowModel,
14
	useReactTable,
15
} from '@tanstack/react-table'
16
import axios from 'axios'
17
import { useEffect, useState } from 'react'
18

19
const columns = [
20
	{
21
		accessorKey: 'code',
22
		header: 'Код',
23
	},
24
	{
25
		accessorKey: 'createDate',
26
		header: 'Дата Создания',
27
	},
28
	{
29
		accessorKey: 'client',
30
		header: 'Клиент',
31
	},
32
	{
33
		accessorKey: 'name',
34
		header: 'Наименование',
35
	},
36
	{
37
		accessorKey: 'stage',
38
		header: 'Стадия',
39
	},
40
	{
41
		accessorKey: 'price',
42
		header: 'Сумма',
43
	},
44
	{
45
		accessorKey: 'currency',
46
		header: 'Валюта',
47
	},
48
]
49

50
export type data = {
51
	code: string
52
	createDate: string
53
	client: string
54
	name: string
55
	stage: string
56
	price: number
57
	currency: string
58
}
59

60
export default function Home() {
61
	const [data, setData] = useState<data[]>([
62
		{
63
			code: '',
64
			createDate: '',
65
			client: '',
66
			name: '',
67
			stage: '',
68
			price: 0,
69
			currency: '',
70
		},
71
	])
72
	const [messageSent, setMessageSent] = useState<boolean>(false)
73
	const [isPending, setIsPending] = useState<boolean>(false)
74
	const table = useReactTable({
75
		data: data,
76
		columns,
77
		getCoreRowModel: getCoreRowModel(),
78
		enableColumnPinning: true,
79

80
		state: {
81
			columnPinning: {
82
				right: ['status'],
83
			},
84
		},
85
	})
86

87
	const getData = async () => {
88
		const response = await axios.get(
89
			'http://localhost:3001/api/v1/deals/all-deals'
90
		)
91
		setData(convertDate(response.data))
92
	}
93

94
	const convertDate = (deals: data[]) => {
95
		let temp = deals
96
		for (let i = 0; i < temp.length; i++) {
97
			temp[i].createDate = temp[i].createDate.split('T').join(' ')
98
		}
99
		return temp
100
	}
101

102
	const sendEmail = async () => {
103
		setIsPending(true)
104
		const response = await axios.post(
105
			'http://localhost:3001/api/v1/deals/send-email'
106
		)
107
		if (response.status == 201) {
108
			setMessageSent(true)
109
			setIsPending(false)
110
		}
111
	}
112

113
	useEffect(() => {
114
		getData()
115
	}, [])
116

117
	return (
118
		<>
119
			<main className='flex min-h-screen flex-col items-center justify-between bg-slate-500 h-full'>
120
				{data.length <= 1 ? (
121
					<img src='./owl.gif' alt='' />
122
				) : (
123
					<>
124
						<Table className='bg-slate-500'>
125
							<TableHeader className='sticky top-0 bg-white'>
126
								{table.getHeaderGroups().map(headerGroup => (
127
									<TableRow key={headerGroup.id}>
128
										{headerGroup.headers.map(header => {
129
											return (
130
												<TableHead
131
													key={header.id}
132
													className={
133
														header.column.getIsPinned()
134
															? 'sticky z-20 right-0 bg-gradient-to-r from-transparent to-[10%] to-black-default'
135
															: ''
136
													}
137
												>
138
													{header.isPlaceholder
139
														? null
140
														: flexRender(
141
																header.column.columnDef.header,
142
																header.getContext()
143
														  )}
144
												</TableHead>
145
											)
146
										})}
147
									</TableRow>
148
								))}
149
							</TableHeader>
150
							<TableBody className='max-h-[500px] overflow-hidden'>
151
								{table.getRowModel().rows?.length ? (
152
									table.getRowModel().rows.map(row => (
153
										<TableRow
154
											key={row.id}
155
											data-state={row.getIsSelected() && 'selected'}
156
										>
157
											{row.getVisibleCells().map(cell => (
158
												<TableCell
159
													key={cell.id}
160
													className={
161
														cell.column.getIsPinned()
162
															? 'sticky z-10 right-0'
163
															: ''
164
													}
165
												>
166
													<div
167
														className={`flex items-center justify-center text-white min-w-[70px] min-h-[28px] md:min-w-[80px] md:min-h-[35px] py-2 rounded-[6px]`}
168
													>
169
														{flexRender(
170
															cell.column.columnDef.cell,
171
															cell.getContext()
172
														)}
173
													</div>
174
												</TableCell>
175
											))}
176
										</TableRow>
177
									))
178
								) : (
179
									<TableRow>
180
										<TableCell
181
											colSpan={columns.length}
182
											className='h-24 text-center'
183
										>
184
											No results.
185
										</TableCell>
186
									</TableRow>
187
								)}
188
							</TableBody>
189
						</Table>
190
						<div className='m-24'>
191
							{messageSent ? (
192
								<button
193
									disabled
194
									className='rounded-[6px] p-4 bg-green-600 text-white transition-all'
195
								>
196
									Сообщение отправлено
197
								</button>
198
							) : (
199
								<button
200
									onClick={sendEmail}
201
									disabled={isPending}
202
									className='rounded-[6px] p-4 bg-[#9fa8da] text-white hover:bg-[#868db8] transition-all'
203
								>
204
									Отправить на почту
205
								</button>
206
							)}
207
						</div>
208
					</>
209
				)}
210
			</main>
211
		</>
212
	)
213
}
214