From c65c97df85d055d27cd3d7665105563c68dd833f Mon Sep 17 00:00:00 2001 From: gingervitis Date: Thu, 4 Feb 2021 09:19:16 -0800 Subject: [PATCH] prettify some files --- web/pages/components/chart.tsx | 3 +- web/pages/components/info-tip.tsx | 4 +- web/pages/components/key-value-table.tsx | 20 ++-- web/pages/components/log-table.tsx | 63 ++++++------ .../components/message-visiblity-toggle.tsx | 55 ++++++----- web/pages/components/statistic.tsx | 56 +++++------ web/styles/styles.module.scss | 95 ------------------- 7 files changed, 102 insertions(+), 194 deletions(-) delete mode 100644 web/styles/styles.module.scss diff --git a/web/pages/components/chart.tsx b/web/pages/components/chart.tsx index 0ee2ec304..e324a7c4d 100644 --- a/web/pages/components/chart.tsx +++ b/web/pages/components/chart.tsx @@ -1,7 +1,6 @@ import { LineChart } from 'react-chartkick'; import 'chart.js'; import format from 'date-fns/format'; -import styles from '../../styles/styles.module.scss'; interface TimedValue { time: Date; @@ -22,7 +21,7 @@ function createGraphDataset(dataArray) { const dateObject = new Date(item.time); const dateString = format(dateObject, 'p P'); dataValues[dateString] = item.value; - }) + }); return dataValues; } diff --git a/web/pages/components/info-tip.tsx b/web/pages/components/info-tip.tsx index 28b02e48d..f5b847bb2 100644 --- a/web/pages/components/info-tip.tsx +++ b/web/pages/components/info-tip.tsx @@ -1,5 +1,5 @@ -import { InfoCircleOutlined } from "@ant-design/icons"; -import { Tooltip } from "antd"; +import { InfoCircleOutlined } from '@ant-design/icons'; +import { Tooltip } from 'antd'; interface InfoTipProps { tip: string | null; diff --git a/web/pages/components/key-value-table.tsx b/web/pages/components/key-value-table.tsx index 28e620ead..91bb05e03 100644 --- a/web/pages/components/key-value-table.tsx +++ b/web/pages/components/key-value-table.tsx @@ -1,18 +1,18 @@ -import { Table, Typography } from "antd"; +import { Table, Typography } from 'antd'; const { Title } = Typography; export default function KeyValueTable({ title, data }: KeyValueTableProps) { const columns = [ { - title: "Name", - dataIndex: "name", - key: "name", + title: 'Name', + dataIndex: 'name', + key: 'name', }, { - title: "Value", - dataIndex: "value", - key: "value", + title: 'Value', + dataIndex: 'value', + key: 'value', }, ]; @@ -25,6 +25,6 @@ export default function KeyValueTable({ title, data }: KeyValueTableProps) { } interface KeyValueTableProps { - title: string, - data: any, -}; \ No newline at end of file + title: string; + data: any; +} diff --git a/web/pages/components/log-table.tsx b/web/pages/components/log-table.tsx index 74c819c7e..603d6af56 100644 --- a/web/pages/components/log-table.tsx +++ b/web/pages/components/log-table.tsx @@ -1,32 +1,30 @@ -import React from "react"; -import { Table, Tag, Typography } from "antd"; -import Linkify from "react-linkify"; -import { SortOrder } from "antd/lib/table/interface"; -import format from 'date-fns/format' +import React from 'react'; +import { Table, Tag, Typography } from 'antd'; +import Linkify from 'react-linkify'; +import { SortOrder } from 'antd/lib/table/interface'; +import format from 'date-fns/format'; const { Title } = Typography; function renderColumnLevel(text, entry) { let color = 'black'; - if (entry.level === "warning") { - color = "orange"; + if (entry.level === 'warning') { + color = 'orange'; } else if (entry.level === 'error') { - color = "red"; + color = 'red'; } return {text}; } function renderMessage(text) { - return ( - {text} - ) + return {text}; } interface Props { - logs: object[], - pageSize: number + logs: object[]; + pageSize: number; } export default function LogTable({ logs, pageSize }: Props) { @@ -35,42 +33,42 @@ export default function LogTable({ logs, pageSize }: Props) { } const columns = [ { - title: "Level", - dataIndex: "level", - key: "level", + title: 'Level', + dataIndex: 'level', + key: 'level', filters: [ { - text: "Info", - value: "info", + text: 'Info', + value: 'info', }, { - text: "Warning", - value: "warning", + text: 'Warning', + value: 'warning', }, { - text: "Error", - value: "Error", + text: 'Error', + value: 'Error', }, ], onFilter: (level, row) => row.level.indexOf(level) === 0, render: renderColumnLevel, }, { - title: "Timestamp", - dataIndex: "time", - key: "time", - render: (timestamp) => { + title: 'Timestamp', + dataIndex: 'time', + key: 'time', + render: timestamp => { const dateObject = new Date(timestamp); return format(dateObject, 'p P'); }, sorter: (a, b) => new Date(a.time).getTime() - new Date(b.time).getTime(), - sortDirections: ["descend", "ascend"] as SortOrder[], - defaultSortOrder: "descend" as SortOrder, + sortDirections: ['descend', 'ascend'] as SortOrder[], + defaultSortOrder: 'descend' as SortOrder, }, { - title: "Message", - dataIndex: "message", - key: "message", + title: 'Message', + dataIndex: 'message', + key: 'message', render: renderMessage, }, ]; @@ -82,10 +80,9 @@ export default function LogTable({ logs, pageSize }: Props) { size="middle" dataSource={logs} columns={columns} - rowKey={(row) => row.time} + rowKey={row => row.time} pagination={{ pageSize: pageSize || 20 }} /> ); } - diff --git a/web/pages/components/message-visiblity-toggle.tsx b/web/pages/components/message-visiblity-toggle.tsx index c202e8d1e..bd4fdf64c 100644 --- a/web/pages/components/message-visiblity-toggle.tsx +++ b/web/pages/components/message-visiblity-toggle.tsx @@ -1,20 +1,28 @@ -// Custom component for AntDesign Button that makes an api call, then displays a confirmation icon upon -import React, { useState, useEffect } from "react"; -import { Button, Tooltip } from "antd"; -import { EyeOutlined, EyeInvisibleOutlined, CheckCircleFilled, ExclamationCircleFilled } from "@ant-design/icons"; -import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from "../../utils/apis"; +// Custom component for AntDesign Button that makes an api call, then displays a confirmation icon upon +import React, { useState, useEffect } from 'react'; +import { Button, Tooltip } from 'antd'; +import { + EyeOutlined, + EyeInvisibleOutlined, + CheckCircleFilled, + ExclamationCircleFilled, +} from '@ant-design/icons'; +import { fetchData, UPDATE_CHAT_MESSGAE_VIZ } from '../../utils/apis'; import { MessageType } from '../../types/chat'; -import { OUTCOME_TIMEOUT } from "../chat"; -import { isEmptyObject } from "../../utils/format"; +import { OUTCOME_TIMEOUT } from '../chat'; +import { isEmptyObject } from '../../utils/format'; interface MessageToggleProps { isVisible: boolean; message: MessageType; - setMessage: (message: MessageType) => void, -}; + setMessage: (message: MessageType) => void; +} - -export default function MessageVisiblityToggle({ isVisible, message, setMessage }: MessageToggleProps) { +export default function MessageVisiblityToggle({ + isVisible, + message, + setMessage, +}: MessageToggleProps) { if (!message || isEmptyObject(message)) { return null; } @@ -25,16 +33,17 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage const { id: messageId } = message || {}; const resetOutcome = () => { - outcomeTimeout = setTimeout(() => { setOutcome(0)}, OUTCOME_TIMEOUT); + outcomeTimeout = setTimeout(() => { + setOutcome(0); + }, OUTCOME_TIMEOUT); }; - + useEffect(() => { return () => { clearTimeout(outcomeTimeout); }; }); - const updateChatMessage = async () => { clearTimeout(outcomeTimeout); setOutcome(0); @@ -47,7 +56,7 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage }, }); - if (result.success && result.message === "changed") { + if (result.success && result.message === 'changed') { setMessage({ ...message, visible: !isVisible }); setOutcome(1); } else { @@ -55,14 +64,16 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage setOutcome(-1); } resetOutcome(); - } - + }; let outcomeIcon = ; if (outcome) { - outcomeIcon = outcome > 0 ? - : - ; + outcomeIcon = + outcome > 0 ? ( + + ) : ( + + ); } const toolTipMessage = `Click to ${isVisible ? 'hide' : 'show'} this message`; @@ -74,10 +85,10 @@ export default function MessageVisiblityToggle({ isVisible, message, setMessage shape="circle" size="small" type="text" - icon={ isVisible ? : } + icon={isVisible ? : } onClick={updateChatMessage} /> ); -} \ No newline at end of file +} diff --git a/web/pages/components/statistic.tsx b/web/pages/components/statistic.tsx index 62383efe1..a6edd9da9 100644 --- a/web/pages/components/statistic.tsx +++ b/web/pages/components/statistic.tsx @@ -1,18 +1,18 @@ -import { Typography, Statistic, Card, Progress} from "antd"; +import { Typography, Statistic, Card, Progress } from 'antd'; const { Text } = Typography; interface StatisticItemProps { - title?: string, - value?: any, - prefix?: JSX.Element, - color?: string, - progress?: boolean, - centered?: boolean, - formatter?: any, -}; + title?: string; + value?: any; + prefix?: JSX.Element; + color?: string; + progress?: boolean; + centered?: boolean; + formatter?: any; +} const defaultProps = { - title: '', + title: '', value: 0, prefix: null, color: '', @@ -21,16 +21,19 @@ const defaultProps = { formatter: null, }; - function ProgressView({ title, value, prefix, color }: StatisticItemProps) { const endColor = value > 90 ? 'red' : color; const content = (
- {prefix} -
{title}
-
{value}%
+ {prefix} +
+ {title} +
+
+ {value}% +
- ) + ); return ( content} /> - ) + ); } ProgressView.defaultProps = defaultProps; function StatisticView({ title, value, prefix, formatter }: StatisticItemProps) { - return ( - - ); + return ; } StatisticView.defaultProps = defaultProps; @@ -62,14 +58,14 @@ export default function StatisticItem(props: StatisticItemProps) { const { progress, centered } = props; const View = progress ? ProgressView : StatisticView; - const style = centered ? {display: 'flex', alignItems: 'center', justifyContent: 'center'} : {}; + const style = centered ? { display: 'flex', alignItems: 'center', justifyContent: 'center' } : {}; return ( - -
- -
- + +
+ +
+ ); } StatisticItem.defaultProps = defaultProps; diff --git a/web/styles/styles.module.scss b/web/styles/styles.module.scss deleted file mode 100644 index 2e4b99bfb..000000000 --- a/web/styles/styles.module.scss +++ /dev/null @@ -1,95 +0,0 @@ - -.owncastTitleContainer { - padding: 1rem; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - -} -.logoContainer { - background-color: #fff; - padding: .35rem; - border-radius: 9999px; -} -.owncastTitle { - display: inline-block; - margin-left: 1rem; - color: rgba(203,213,224, 1); - font-size: 1.15rem; - font-weight: 200; - text-transform: uppercase; - line-height: normal; - letter-spacing: .05em; -} - -.contentMain { - padding: 3em; -} - -.header { - display: flex; - flex-direction: row; - justify-content: flex-end; - padding-right: 1rem; -} - -.sideNav { - position: fixed; - height: 100vh; - overflow: auto; - z-index: 10; -} - -.layoutMain { - margin-left: 240px; -} - -.statusIndicatorContainer { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - -} -.statusIcon { - font-size: 1.5rem; -} -.statusIcon svg { - fill: #999; -} -.statusLabel { - color: #fff; - text-transform: uppercase; - font-size: .75rem; - display: inline-block; - margin-right: .5rem; - color: #999; -} -.online .statusIcon svg { - fill: var(--online-color) -} -.online .statusLabel { - color: var(--online-color) -} - - -.lineChartContainer { - margin: 2em auto; -} - -.configSection { - margin-bottom: 2em; -} - -.onlineCurrentThumb { - width: 12.5rem; -} - -.globalStreamTitleContainer { - display: flex; - justify-content: center; - align-items: baseline; - width: 100%; - height: 100%; -}