diff options
| author | 2022-02-12 11:33:52 +0100 | |
|---|---|---|
| committer | 2022-02-12 11:33:52 +0100 | |
| commit | 871a85d9343cf49646d13dc455c062efadcb959a (patch) | |
| tree | 7d36b14b237719901d71d58c88f74b87b875ee61 /src/components/RequestSummary/RequestSummary.tsx | |
| parent | 7c48533571e9f9d3731a59433a56cc8d6e008123 (diff) | |
| download | client-1.3.0.tar.gz client-1.3.0.tar.bz2 client-1.3.0.zip | |
Beatified codev1.3.0
Diffstat (limited to 'src/components/RequestSummary/RequestSummary.tsx')
| -rw-r--r-- | src/components/RequestSummary/RequestSummary.tsx | 41 |
1 files changed, 23 insertions, 18 deletions
diff --git a/src/components/RequestSummary/RequestSummary.tsx b/src/components/RequestSummary/RequestSummary.tsx index b3e7ddc..db2f69c 100644 --- a/src/components/RequestSummary/RequestSummary.tsx +++ b/src/components/RequestSummary/RequestSummary.tsx | |||
| @@ -1,49 +1,54 @@ | |||
| 1 | import {RequestResponse} from "~hooks/useRequests"; | 1 | import { RequestResponse } from "~hooks/useRequests"; |
| 2 | import * as React from "react"; | 2 | import * as React from "react"; |
| 3 | import classNames from "classnames"; | 3 | import classNames from "classnames"; |
| 4 | 4 | ||
| 5 | import {Badge, Card, Col, Row} from "react-bootstrap"; | 5 | import { Badge, Card, Col, Row } from "react-bootstrap"; |
| 6 | 6 | ||
| 7 | interface RequestSummaryProps { | 7 | interface RequestSummaryProps { |
| 8 | selected?: boolean | 8 | selected?: boolean; |
| 9 | requestResponse: RequestResponse | 9 | requestResponse: RequestResponse; |
| 10 | } | 10 | } |
| 11 | 11 | ||
| 12 | function isBetween(value: number, min: number, max: number) { | 12 | function isBetween(value: number, min: number, max: number) { |
| 13 | return value >= min && value <= max | 13 | return value >= min && value <= max; |
| 14 | } | 14 | } |
| 15 | 15 | ||
| 16 | function calcBadgeVariant(statusCode: number | undefined): string { | 16 | function calcBadgeVariant(statusCode: number | undefined): string { |
| 17 | if (statusCode === undefined) { | 17 | if (statusCode === undefined) { |
| 18 | return 'secondary'; | 18 | return "secondary"; |
| 19 | } else if (isBetween(statusCode, 100, 199)) { | 19 | } else if (isBetween(statusCode, 100, 199)) { |
| 20 | return 'info'; | 20 | return "info"; |
| 21 | } else if (isBetween(statusCode, 200, 299)) { | 21 | } else if (isBetween(statusCode, 200, 299)) { |
| 22 | return 'success'; | 22 | return "success"; |
| 23 | } else if (isBetween(statusCode, 300, 399)) { | 23 | } else if (isBetween(statusCode, 300, 399)) { |
| 24 | return 'primary'; | 24 | return "primary"; |
| 25 | } else if (isBetween(statusCode, 400, 499)) { | 25 | } else if (isBetween(statusCode, 400, 499)) { |
| 26 | return 'danger'; | 26 | return "danger"; |
| 27 | } else if (isBetween(statusCode, 500, 599)) { | 27 | } else if (isBetween(statusCode, 500, 599)) { |
| 28 | return 'warning'; | 28 | return "warning"; |
| 29 | } | 29 | } |
| 30 | } | 30 | } |
| 31 | 31 | ||
| 32 | export default function RequestSummary({ requestResponse: { request, response }, selected = false }: RequestSummaryProps) { | 32 | export default function RequestSummary({ |
| 33 | requestResponse: { request, response }, | ||
| 34 | selected = false, | ||
| 35 | }: RequestSummaryProps) { | ||
| 33 | return ( | 36 | return ( |
| 34 | <Row> | 37 | <Row> |
| 35 | <Col className='flex-grow-0 d-flex align-items-center'>{request.method}</Col> | 38 | <Col className="flex-grow-0 d-flex align-items-center"> |
| 36 | <Col className='flex-grow-1'>{ request.path }</Col> | 39 | {request.method} |
| 37 | <Col className='flex-grow-0 d-flex align-items-center'> | 40 | </Col> |
| 41 | <Col className="flex-grow-1">{request.path}</Col> | ||
| 42 | <Col className="flex-grow-0 d-flex align-items-center"> | ||
| 38 | <Badge | 43 | <Badge |
| 39 | className={classNames({ | 44 | className={classNames({ |
| 40 | 'border': selected, | 45 | border: selected, |
| 41 | })} | 46 | })} |
| 42 | bg={calcBadgeVariant(response?.status)} | 47 | bg={calcBadgeVariant(response?.status)} |
| 43 | > | 48 | > |
| 44 | { response?.status ?? 'Loading...'} | 49 | {response?.status ?? "Loading..."} |
| 45 | </Badge> | 50 | </Badge> |
| 46 | </Col> | 51 | </Col> |
| 47 | </Row> | 52 | </Row> |
| 48 | ) | 53 | ); |
| 49 | } | 54 | } |
