From 280c2e1adfe5b3c5c0e3caf9e6ab4fd3a173286b Mon Sep 17 00:00:00 2001 From: minfei Date: Thu, 22 Feb 2024 01:39:24 -0500 Subject: [PATCH 1/4] Exporting selected functionality --- package.json | 3 +- pnpm-lock.yaml | 69 ++++++++++++++++++++++-- src/components/audittable/AuditTable.tsx | 36 +++++++++++-- src/components/audittable/DataTable.tsx | 30 ++++++++++- src/lib/utils.ts | 2 + 5 files changed, 130 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 21f3c7d..112899b 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,8 @@ "tailwind-merge": "^2.2.0", "tailwindcss-animate": "^1.0.7", "twilio": "^4.20.1", - "twilio-taskrouter": "^2.0.1" + "twilio-taskrouter": "^2.0.1", + "xlsx": "^0.18.5" }, "devDependencies": { "@types/node": "^20", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0fcffb7..2d63dfb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,7 +10,7 @@ dependencies: version: 3.513.0 '@material-tailwind/react': specifier: ^2.1.8 - version: 2.1.8(react-dom@18.2.0)(react@18.2.0) + version: 2.1.9(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-avatar': specifier: ^1.0.4 version: 1.0.4(@types/react-dom@18.2.17)(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0) @@ -104,6 +104,9 @@ dependencies: twilio-taskrouter: specifier: ^2.0.1 version: 2.0.1 + xlsx: + specifier: ^0.18.5 + version: 0.18.5 devDependencies: '@types/node': @@ -937,8 +940,8 @@ packages: resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==} dev: false - /@material-tailwind/react@2.1.8(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-+YI8DTS8dz8FNkjbsgz1HS6+CRszZ+gUErw5FnTuAL2ONeM9R204B6u4PKd9otjYlQQS/fKjKuQ/mwLubWljfg==} + /@material-tailwind/react@2.1.9(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-3uPlJE9yK4JF9DEQO4I1QbjR8o05+4fysLqoZ0v38TDOLE2tvDRhTBVhn6Mp9vSsq5CoJOKgemG7kbkOFAji4A==} peerDependencies: react: ^16 || ^17 || ^18 react-dom: ^16 || ^17 || ^18 @@ -2481,6 +2484,11 @@ packages: hasBin: true dev: true + /adler-32@1.3.1: + resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==} + engines: {node: '>=0.8'} + dev: false + /agent-base@6.0.2: resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==} engines: {node: '>= 6.0.0'} @@ -2737,6 +2745,14 @@ packages: /caniuse-lite@1.0.30001566: resolution: {integrity: sha512-ggIhCsTxmITBAMmK8yZjEhCO5/47jKXPu6Dha/wuCS4JePVL+3uiDEBuhu2aIoT+bqTOR8L76Ip1ARL9xYsEJA==} + /cfb@1.2.2: + resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==} + engines: {node: '>=0.8'} + dependencies: + adler-32: 1.3.1 + crc-32: 1.2.2 + dev: false + /chalk@4.1.2: resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} engines: {node: '>=10'} @@ -2789,6 +2805,11 @@ packages: engines: {node: '>=6'} dev: false + /codepage@1.15.0: + resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==} + engines: {node: '>=0.8'} + dev: false + /color-convert@2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} engines: {node: '>=7.0.0'} @@ -2819,6 +2840,12 @@ packages: engines: {node: '>= 0.6'} dev: false + /crc-32@1.2.2: + resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==} + engines: {node: '>=0.8'} + hasBin: true + dev: false + /cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -3429,6 +3456,11 @@ packages: mime-types: 2.1.35 dev: false + /frac@1.1.2: + resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==} + engines: {node: '>=0.8'} + dev: false + /fraction.js@4.3.7: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} dev: true @@ -4813,6 +4845,13 @@ packages: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} + /ssf@0.11.2: + resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==} + engines: {node: '>=0.8'} + dependencies: + frac: 1.1.2 + dev: false + /streamsearch@1.1.0: resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==} engines: {node: '>=10.0.0'} @@ -5280,6 +5319,16 @@ packages: isexe: 2.0.0 dev: true + /wmf@1.0.2: + resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==} + engines: {node: '>=0.8'} + dev: false + + /word@0.3.0: + resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==} + engines: {node: '>=0.8'} + dev: false + /wrappy@1.0.2: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} @@ -5296,6 +5345,20 @@ packages: optional: true dev: false + /xlsx@0.18.5: + resolution: {integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==} + engines: {node: '>=0.8'} + hasBin: true + dependencies: + adler-32: 1.3.1 + cfb: 1.2.2 + codepage: 1.15.0 + crc-32: 1.2.2 + ssf: 0.11.2 + wmf: 1.0.2 + word: 0.3.0 + dev: false + /xmlbuilder@13.0.2: resolution: {integrity: sha512-Eux0i2QdDYKbdbA6AM6xE4m6ZTZr4G4xF9kahI2ukSEMCzwce2eX9WlTI5J3s+NU7hpasFsr8hWIONae7LluAQ==} engines: {node: '>=6.0'} diff --git a/src/components/audittable/AuditTable.tsx b/src/components/audittable/AuditTable.tsx index a1d4689..d17339e 100644 --- a/src/components/audittable/AuditTable.tsx +++ b/src/components/audittable/AuditTable.tsx @@ -1,7 +1,9 @@ "use client"; -import React, {useEffect, useState} from 'react'; +import React, {useEffect, useState, useCallback, TdHTMLAttributes} from 'react'; import axios from 'axios'; +import * as XLSX from 'xlsx'; +import {Row} from '@tanstack/react-table' import {FetchedCalls, columns} from "./columns"; @@ -11,11 +13,17 @@ import { Switch } from '../ui/switch'; import { Label } from '../ui/label'; import { Input } from '../ui/input'; +interface SelectionChange { + selectionState: Record; + selectedRowsData: TData[]; + } + const AuditTable: React.FC = () => { const [data, setData] = useState([]); const [loading, setLoading] = useState(false); const [showCalls, setShowCalls] = useState(false); - + const [selectedRows, setSelectedRows] = useState({}) + const [selectedContent, setSelectedContent] = useState([]) useEffect(() => { @@ -35,6 +43,26 @@ const AuditTable: React.FC = () => { fetchCalls(); }, [showCalls]) + + + const handleSelectionChange = useCallback((change: Record, content: any[]) => { + setSelectedRows(change); + setSelectedContent(content); + console.log(change) + console.log(content) + }, []); + + + //exporting functionalities + const exportSelectedRowsToExcel = () => { + const workbook = XLSX.utils.book_new(); + const worksheet = XLSX.utils.json_to_sheet(selectedContent); + XLSX.utils.book_append_sheet(workbook, worksheet, 'SelectedRows'); + XLSX.writeFile(workbook, 'selected-rows.xlsx'); + }; + + + if (loading) { return
Loading...
; } @@ -62,7 +90,7 @@ const AuditTable: React.FC = () => { - @@ -70,7 +98,7 @@ const AuditTable: React.FC = () => {
- +
diff --git a/src/components/audittable/DataTable.tsx b/src/components/audittable/DataTable.tsx index d2bb705..fc0ae52 100644 --- a/src/components/audittable/DataTable.tsx +++ b/src/components/audittable/DataTable.tsx @@ -6,6 +6,8 @@ import { getCoreRowModel, getPaginationRowModel, useReactTable, + Row + } from "@tanstack/react-table" import {Button} from "@/components/ui/button" @@ -19,19 +21,30 @@ import { TableRow, } from "@/components/ui/table" -import React, {useState} from 'react' +import React, {useState, useEffect} from 'react' + +export interface SelectionChange { + selectionState: Record; + selectedRowsData: TData[]; +} interface DataTableProps { columns: ColumnDef[] data: TData[] + //onSelectionChange?: (selectedRow: Record) => void; + onSelectionChange?: (selectedRows: Record, content: TData[]) => void } export function DataTable({ columns, data, + // onContentSelectionChange, + onSelectionChange + }: DataTableProps) { const [rowSelection, setRowSelection] = useState({}) + const [selectedContent, setSelectedContent] = useState([]); const table = useReactTable({ data, @@ -43,7 +56,20 @@ export function DataTable({ rowSelection } }) - + + + useEffect(() => { + if (onSelectionChange) { + const content = table.getSelectedRowModel().rows.map(row => row.original); + onSelectionChange(rowSelection, content); + } + }, [rowSelection]); + + const getSelectedContent = () => { + const content = table.getSelectedRowModel().rows.map((row) => row.original); + return content; + }; + return (
diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 512bbb9..d744ee0 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -41,3 +41,5 @@ export function formatDate(date: Date | string | number, format: string = 'YYYY- export function copyText(text: string): void { navigator.clipboard.writeText(text); } + + From 2f354c789fddc99a10081d5b2dd392c4161fab5f Mon Sep 17 00:00:00 2001 From: Willie Chalmers III Date: Wed, 21 Feb 2024 23:03:02 -0800 Subject: [PATCH 2/4] Run code formatter --- src/components/appbar/AgentStatus.tsx | 116 ++++++------- src/components/audittable/AuditTable.tsx | 201 ++++++++++++----------- src/components/audittable/DataTable.tsx | 136 +++++++-------- src/lib/utils.ts | 7 +- 4 files changed, 238 insertions(+), 222 deletions(-) diff --git a/src/components/appbar/AgentStatus.tsx b/src/components/appbar/AgentStatus.tsx index bedb569..9078474 100644 --- a/src/components/appbar/AgentStatus.tsx +++ b/src/components/appbar/AgentStatus.tsx @@ -1,4 +1,4 @@ -"use client"; +pnpm"use client"; import React, { useState } from "react"; import { Chip } from "@material-tailwind/react"; @@ -8,71 +8,71 @@ import axios from "axios"; //Need to change based on every single diff. Taskrouter workspace const activities = { - Available: "", - Unavailable: "", - Offline: "", + Available: "", + Unavailable: "", + Offline: "", }; const AgentStatus: React.FC = () => { - const [activity, setActivity] = useState("Unavailable"); + const [activity, setActivity] = useState("Unavailable"); - const toggleAvailability = async () => { - const newActivity = - activity === "Unavailable" ? "Available" : "Unavailable"; - setActivity(newActivity); - const activitySid = activities[newActivity]; + const toggleAvailability = async () => { + const newActivity = + activity === "Unavailable" ? "Available" : "Unavailable"; + setActivity(newActivity); + const activitySid = activities[newActivity]; - //Request to API route - try { - // Send a request to your API route using axios - const response = await axios.post("/api/agent", { - activitySid, - }); - } catch (error) { - console.error("Error updating status:", error); - // If API call fail, make no change - setActivity(activity); - } - }; + //Request to API route + try { + // Send a request to your API route using axios + const response = await axios.post("/api/agent", { + activitySid, + }); + } catch (error) { + console.error("Error updating status:", error); + // If API call fail, make no change + setActivity(activity); + } + }; - return ( -
- -
-
Status
+ return ( +
+ +
+
Status
-
- {activity === "Available" ? ( - <> - - } - /> - - ) : ( - <> - - } - /> - - )} +
+ {activity === "Available" ? ( + <> + + } + /> + + ) : ( + <> + + } + /> + + )} +
+
-
-
- ); + ); }; export default AgentStatus; diff --git a/src/components/audittable/AuditTable.tsx b/src/components/audittable/AuditTable.tsx index d17339e..d8dceee 100644 --- a/src/components/audittable/AuditTable.tsx +++ b/src/components/audittable/AuditTable.tsx @@ -1,108 +1,117 @@ "use client"; -import React, {useEffect, useState, useCallback, TdHTMLAttributes} from 'react'; -import axios from 'axios'; -import * as XLSX from 'xlsx'; -import {Row} from '@tanstack/react-table' - - -import {FetchedCalls, columns} from "./columns"; -import { DataTable } from './DataTable'; -import { Button } from '../ui/button'; -import { Switch } from '../ui/switch'; -import { Label } from '../ui/label'; -import { Input } from '../ui/input'; +import React, { + useEffect, + useState, + useCallback, + TdHTMLAttributes, +} from "react"; +import axios from "axios"; +import * as XLSX from "xlsx"; +import { Row } from "@tanstack/react-table"; + +import { FetchedCalls, columns } from "./columns"; +import { DataTable } from "./DataTable"; +import { Button } from "../ui/button"; +import { Switch } from "../ui/switch"; +import { Label } from "../ui/label"; +import { Input } from "../ui/input"; interface SelectionChange { - selectionState: Record; - selectedRowsData: TData[]; - } + selectionState: Record; + selectedRowsData: TData[]; +} const AuditTable: React.FC = () => { - const [data, setData] = useState([]); - const [loading, setLoading] = useState(false); - const [showCalls, setShowCalls] = useState(false); - const [selectedRows, setSelectedRows] = useState({}) - const [selectedContent, setSelectedContent] = useState([]) - - - useEffect(() => { - const fetchCalls = async() => { - setLoading(true); - try { - const endpoint = showCalls ? '/api/audit-log/calls' : '/api/audit-log/message' - const response = await axios.get(endpoint); - setData(response.data); - setLoading(false); - } catch (error) { - console.log('error fetching calls', error); - setLoading(false); - } - } - - fetchCalls(); - }, [showCalls]) - - - - const handleSelectionChange = useCallback((change: Record, content: any[]) => { - setSelectedRows(change); - setSelectedContent(content); - console.log(change) - console.log(content) - }, []); - - - //exporting functionalities - const exportSelectedRowsToExcel = () => { - const workbook = XLSX.utils.book_new(); - const worksheet = XLSX.utils.json_to_sheet(selectedContent); - XLSX.utils.book_append_sheet(workbook, worksheet, 'SelectedRows'); - XLSX.writeFile(workbook, 'selected-rows.xlsx'); - }; - - - - if (loading) { - return
Loading...
; - } + const [data, setData] = useState([]); + const [loading, setLoading] = useState(false); + const [showCalls, setShowCalls] = useState(false); + const [selectedRows, setSelectedRows] = useState({}); + const [selectedContent, setSelectedContent] = useState([]); + + useEffect(() => { + const fetchCalls = async () => { + setLoading(true); + try { + const endpoint = showCalls + ? "/api/audit-log/calls" + : "/api/audit-log/message"; + const response = await axios.get(endpoint); + setData(response.data); + setLoading(false); + } catch (error) { + console.log("error fetching calls", error); + setLoading(false); + } + }; + + fetchCalls(); + }, [showCalls]); + + const handleSelectionChange = useCallback( + (change: Record, content: any[]) => { + setSelectedRows(change); + setSelectedContent(content); + console.log(change); + console.log(content); + }, + [], + ); + + //exporting functionalities + const exportSelectedRowsToExcel = () => { + const workbook = XLSX.utils.book_new(); + const worksheet = XLSX.utils.json_to_sheet(selectedContent); + XLSX.utils.book_append_sheet(workbook, worksheet, "SelectedRows"); + XLSX.writeFile(workbook, "selected-rows.xlsx"); + }; + + if (loading) { + return
Loading...
; + } - return ( - <> -
-
- - -
- - + return ( + <> +
+
+ +
-
+ + +
+
- - -
-
- - -
+ +
- - -
- - -
+
+ + +
+
+ +
+ +
- ); -} + ); +}; -export default AuditTable; \ No newline at end of file +export default AuditTable; diff --git a/src/components/audittable/DataTable.tsx b/src/components/audittable/DataTable.tsx index fc0ae52..58b5bca 100644 --- a/src/components/audittable/DataTable.tsx +++ b/src/components/audittable/DataTable.tsx @@ -1,4 +1,4 @@ -"use client" +"use client"; import { ColumnDef, @@ -6,11 +6,10 @@ import { getCoreRowModel, getPaginationRowModel, useReactTable, - Row - -} from "@tanstack/react-table" + Row, +} from "@tanstack/react-table"; -import {Button} from "@/components/ui/button" +import { Button } from "@/components/ui/button"; import { Table, @@ -19,9 +18,9 @@ import { TableHead, TableHeader, TableRow, -} from "@/components/ui/table" +} from "@/components/ui/table"; -import React, {useState, useEffect} from 'react' +import React, { useState, useEffect } from "react"; export interface SelectionChange { selectionState: Record; @@ -29,21 +28,22 @@ export interface SelectionChange { } interface DataTableProps { - columns: ColumnDef[] - data: TData[] + columns: ColumnDef[]; + data: TData[]; //onSelectionChange?: (selectedRow: Record) => void; - onSelectionChange?: (selectedRows: Record, content: TData[]) => void + onSelectionChange?: ( + selectedRows: Record, + content: TData[], + ) => void; } export function DataTable({ columns, data, // onContentSelectionChange, - onSelectionChange - + onSelectionChange, }: DataTableProps) { - - const [rowSelection, setRowSelection] = useState({}) + const [rowSelection, setRowSelection] = useState({}); const [selectedContent, setSelectedContent] = useState([]); const table = useReactTable({ @@ -53,14 +53,15 @@ export function DataTable({ getPaginationRowModel: getPaginationRowModel(), onRowSelectionChange: setRowSelection, state: { - rowSelection - } - }) - + rowSelection, + }, + }); useEffect(() => { if (onSelectionChange) { - const content = table.getSelectedRowModel().rows.map(row => row.original); + const content = table + .getSelectedRowModel() + .rows.map((row) => row.original); onSelectionChange(rowSelection, content); } }, [rowSelection]); @@ -70,54 +71,59 @@ export function DataTable({ return content; }; - return (
-
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ) - })} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} +
+
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext(), + )} + + ); + })} - )) - ) : ( - - - No results. - - - )} - -
-
-
+ ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + + ))} + + )) + ) : ( + + + No results. + + + )} + + +
+
- ) + ); } diff --git a/src/lib/utils.ts b/src/lib/utils.ts index d744ee0..5c52f2e 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -34,12 +34,13 @@ export function formatTime(seconds: number): string { return formattedTime; } -export function formatDate(date: Date | string | number, format: string = 'YYYY-MM-DD HH:mm') { +export function formatDate( + date: Date | string | number, + format: string = "YYYY-MM-DD HH:mm", +) { return dayjs(date).format(format); } export function copyText(text: string): void { navigator.clipboard.writeText(text); } - - From 4455b8aa9990146f13a02f51a5a4cf3c907dd873 Mon Sep 17 00:00:00 2001 From: Willie Chalmers III Date: Wed, 21 Feb 2024 23:03:36 -0800 Subject: [PATCH 3/4] Fix erroneous characters --- src/components/appbar/AgentStatus.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/appbar/AgentStatus.tsx b/src/components/appbar/AgentStatus.tsx index 9078474..9fb3afc 100644 --- a/src/components/appbar/AgentStatus.tsx +++ b/src/components/appbar/AgentStatus.tsx @@ -1,4 +1,4 @@ -pnpm"use client"; +"use client"; import React, { useState } from "react"; import { Chip } from "@material-tailwind/react"; From 8d67432861236e8fb157f60fb1e793efb64963f8 Mon Sep 17 00:00:00 2001 From: Willie Chalmers III Date: Wed, 21 Feb 2024 23:05:36 -0800 Subject: [PATCH 4/4] Clean up code --- src/components/appbar/AgentStatus.tsx | 114 +++++++++++------------ src/components/audittable/AuditTable.tsx | 2 - src/components/audittable/columns.tsx | 58 ++++++------ 3 files changed, 86 insertions(+), 88 deletions(-) diff --git a/src/components/appbar/AgentStatus.tsx b/src/components/appbar/AgentStatus.tsx index 9fb3afc..bedb569 100644 --- a/src/components/appbar/AgentStatus.tsx +++ b/src/components/appbar/AgentStatus.tsx @@ -8,71 +8,71 @@ import axios from "axios"; //Need to change based on every single diff. Taskrouter workspace const activities = { - Available: "", - Unavailable: "", - Offline: "", + Available: "", + Unavailable: "", + Offline: "", }; const AgentStatus: React.FC = () => { - const [activity, setActivity] = useState("Unavailable"); + const [activity, setActivity] = useState("Unavailable"); - const toggleAvailability = async () => { - const newActivity = - activity === "Unavailable" ? "Available" : "Unavailable"; - setActivity(newActivity); - const activitySid = activities[newActivity]; + const toggleAvailability = async () => { + const newActivity = + activity === "Unavailable" ? "Available" : "Unavailable"; + setActivity(newActivity); + const activitySid = activities[newActivity]; - //Request to API route - try { - // Send a request to your API route using axios - const response = await axios.post("/api/agent", { - activitySid, - }); - } catch (error) { - console.error("Error updating status:", error); - // If API call fail, make no change - setActivity(activity); - } - }; + //Request to API route + try { + // Send a request to your API route using axios + const response = await axios.post("/api/agent", { + activitySid, + }); + } catch (error) { + console.error("Error updating status:", error); + // If API call fail, make no change + setActivity(activity); + } + }; - return ( -
- -
-
Status
+ return ( +
+ +
+
Status
-
- {activity === "Available" ? ( - <> - - } - /> - - ) : ( - <> - - } - /> - - )} -
-
+
+ {activity === "Available" ? ( + <> + + } + /> + + ) : ( + <> + + } + /> + + )}
- ); +
+
+ ); }; export default AgentStatus; diff --git a/src/components/audittable/AuditTable.tsx b/src/components/audittable/AuditTable.tsx index d8dceee..3c07556 100644 --- a/src/components/audittable/AuditTable.tsx +++ b/src/components/audittable/AuditTable.tsx @@ -4,11 +4,9 @@ import React, { useEffect, useState, useCallback, - TdHTMLAttributes, } from "react"; import axios from "axios"; import * as XLSX from "xlsx"; -import { Row } from "@tanstack/react-table"; import { FetchedCalls, columns } from "./columns"; import { DataTable } from "./DataTable"; diff --git a/src/components/audittable/columns.tsx b/src/components/audittable/columns.tsx index 3d09607..3286697 100644 --- a/src/components/audittable/columns.tsx +++ b/src/components/audittable/columns.tsx @@ -2,7 +2,7 @@ import { ColumnDef } from "@tanstack/react-table" import { MoreHorizontal } from "lucide-react" -import {Checkbox} from "@/components/ui/checkbox" +import { Checkbox } from "@/components/ui/checkbox" import { Button } from "@/components/ui/button" import { @@ -17,36 +17,36 @@ import { // This type is used to define the shape of our data. export type FetchedCalls = { - id: string; - direction: string; - from: string | null; - to: string | null; - timestamp: string; + id: string; + direction: string; + from: string | null; + to: string | null; + timestamp: string; } export const columns: ColumnDef[] = [ - { - id: "select", - header: ({ table }) => ( - table.toggleAllPageRowsSelected(!!value)} - aria-label="Select all" - /> - ), - cell: ({ row }) => ( - row.toggleSelected(!!value)} - aria-label="Select row" - /> - ), - enableSorting: false, - enableHiding: false, - }, + { + id: "select", + header: ({ table }) => ( + table.toggleAllPageRowsSelected(!!value)} + aria-label="Select all" + /> + ), + cell: ({ row }) => ( + row.toggleSelected(!!value)} + aria-label="Select row" + /> + ), + enableSorting: false, + enableHiding: false, + }, { accessorKey: "direction", @@ -70,7 +70,7 @@ export const columns: ColumnDef[] = [ id: "actions", cell: ({ row }) => { const call = row.original - + return (