From b9b1fb3ecc20d7fc8c65a6b771b0c9b93103fd9a Mon Sep 17 00:00:00 2001 From: Tsu-ba-me Date: Thu, 24 Feb 2022 16:29:47 -0500 Subject: [PATCH] refactor(striker-ui): rename PeriodicFetch to camel case --- striker-ui/components/Anvils/index.tsx | 4 ++-- striker-ui/components/CPU.tsx | 4 ++-- striker-ui/components/FileSystem/FileSystems.tsx | 4 ++-- striker-ui/components/Hosts/index.tsx | 4 ++-- striker-ui/components/Memory.tsx | 4 ++-- striker-ui/components/Network/Network.tsx | 4 ++-- striker-ui/components/Servers.tsx | 4 ++-- striker-ui/components/SharedStorage/SharedStorage.tsx | 4 ++-- striker-ui/components/Storage.tsx | 4 ++-- striker-ui/lib/fetchers/periodicFetch.ts | 10 ++++++++-- striker-ui/pages/index.tsx | 4 ++-- 11 files changed, 28 insertions(+), 22 deletions(-) diff --git a/striker-ui/components/Anvils/index.tsx b/striker-ui/components/Anvils/index.tsx index 9d0f255c..7962927b 100644 --- a/striker-ui/components/Anvils/index.tsx +++ b/striker-ui/components/Anvils/index.tsx @@ -1,5 +1,5 @@ import { Panel } from '../Panels'; -import PeriodicFetch from '../../lib/fetchers/periodicFetch'; +import periodicFetch from '../../lib/fetchers/periodicFetch'; import SelectedAnvil from './SelectedAnvil'; import AnvilList from './AnvilList'; @@ -9,7 +9,7 @@ const Anvils = ({ list }: { list: AnvilList | undefined }): JSX.Element => { const anvils: AnvilListItem[] = []; list?.anvils.forEach((anvil: AnvilListItem) => { - const { data } = PeriodicFetch( + const { data } = periodicFetch( `${process.env.NEXT_PUBLIC_API_URL}/get_status?anvil_uuid=${anvil.anvil_uuid}`, ); anvils.push({ diff --git a/striker-ui/components/CPU.tsx b/striker-ui/components/CPU.tsx index ab8f1532..56693e0f 100644 --- a/striker-ui/components/CPU.tsx +++ b/striker-ui/components/CPU.tsx @@ -2,14 +2,14 @@ import { useContext } from 'react'; import { Box } from '@mui/material'; import { Panel } from './Panels'; import { HeaderText, BodyText } from './Text'; -import PeriodicFetch from '../lib/fetchers/periodicFetch'; +import periodicFetch from '../lib/fetchers/periodicFetch'; import { AnvilContext } from './AnvilContext'; import Spinner from './Spinner'; const CPU = (): JSX.Element => { const { uuid } = useContext(AnvilContext); - const { data, isLoading } = PeriodicFetch( + const { data, isLoading } = periodicFetch( `${process.env.NEXT_PUBLIC_API_URL}/get_cpu?anvil_uuid=${uuid}`, ); diff --git a/striker-ui/components/FileSystem/FileSystems.tsx b/striker-ui/components/FileSystem/FileSystems.tsx index ce16a550..fec375cd 100644 --- a/striker-ui/components/FileSystem/FileSystems.tsx +++ b/striker-ui/components/FileSystem/FileSystems.tsx @@ -5,7 +5,7 @@ import { styled } from '@mui/material/styles'; import { BodyText, HeaderText } from '../Text'; import { Panel, InnerPanel, InnerPanelHeader } from '../Panels'; import SharedStorageHost from './FileSystemsHost'; -import PeriodicFetch from '../../lib/fetchers/periodicFetch'; +import periodicFetch from '../../lib/fetchers/periodicFetch'; import { AnvilContext } from '../AnvilContext'; import Spinner from '../Spinner'; import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME'; @@ -35,7 +35,7 @@ const StyledDiv = styled('div')(({ theme }) => ({ const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { const { uuid } = useContext(AnvilContext); - const { data, isLoading } = PeriodicFetch( + const { data, isLoading } = periodicFetch( `${process.env.NEXT_PUBLIC_API_URL}/get_shared_storage?anvil_uuid=${uuid}`, ); return ( diff --git a/striker-ui/components/Hosts/index.tsx b/striker-ui/components/Hosts/index.tsx index 9f05a793..b989a85a 100644 --- a/striker-ui/components/Hosts/index.tsx +++ b/striker-ui/components/Hosts/index.tsx @@ -2,7 +2,7 @@ import { useContext } from 'react'; import { Panel } from '../Panels'; import { HeaderText } from '../Text'; import AnvilHost from './AnvilHost'; -import PeriodicFetch from '../../lib/fetchers/periodicFetch'; +import periodicFetch from '../../lib/fetchers/periodicFetch'; import { AnvilContext } from '../AnvilContext'; import Spinner from '../Spinner'; import hostsSanitizer from '../../lib/sanitizers/hostsSanitizer'; @@ -10,7 +10,7 @@ import hostsSanitizer from '../../lib/sanitizers/hostsSanitizer'; const Hosts = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { const { uuid } = useContext(AnvilContext); - const { data, isLoading } = PeriodicFetch( + const { data, isLoading } = periodicFetch( `${process.env.NEXT_PUBLIC_API_URL}/get_status?anvil_uuid=${uuid}`, ); diff --git a/striker-ui/components/Memory.tsx b/striker-ui/components/Memory.tsx index fae21fd0..6c3d85cb 100644 --- a/striker-ui/components/Memory.tsx +++ b/striker-ui/components/Memory.tsx @@ -4,13 +4,13 @@ import * as prettyBytes from 'pretty-bytes'; import { Panel } from './Panels'; import { AllocationBar } from './Bars'; import { HeaderText, BodyText } from './Text'; -import PeriodicFetch from '../lib/fetchers/periodicFetch'; +import periodicFetch from '../lib/fetchers/periodicFetch'; import { AnvilContext } from './AnvilContext'; import Spinner from './Spinner'; const Memory = (): JSX.Element => { const { uuid } = useContext(AnvilContext); - const { data, isLoading } = PeriodicFetch( + const { data, isLoading } = periodicFetch( `${process.env.NEXT_PUBLIC_API_URL}/get_memory?anvil_uuid=${uuid}`, ); diff --git a/striker-ui/components/Network/Network.tsx b/striker-ui/components/Network/Network.tsx index 7730b1bf..96bba2c7 100644 --- a/striker-ui/components/Network/Network.tsx +++ b/striker-ui/components/Network/Network.tsx @@ -3,7 +3,7 @@ import { Box, Divider } from '@mui/material'; import { styled } from '@mui/material/styles'; import { Panel } from '../Panels'; import { HeaderText, BodyText } from '../Text'; -import PeriodicFetch from '../../lib/fetchers/periodicFetch'; +import periodicFetch from '../../lib/fetchers/periodicFetch'; import { DIVIDER, LARGE_MOBILE_BREAKPOINT, @@ -69,7 +69,7 @@ const selectDecorator = (state: string): Colours => { const Network = (): JSX.Element => { const { uuid } = useContext(AnvilContext); - const { data, isLoading } = PeriodicFetch( + const { data, isLoading } = periodicFetch( `${process.env.NEXT_PUBLIC_API_URL}/get_networks?anvil_uuid=${uuid}`, ); diff --git a/striker-ui/components/Servers.tsx b/striker-ui/components/Servers.tsx index aa7e451f..df90aa93 100644 --- a/striker-ui/components/Servers.tsx +++ b/striker-ui/components/Servers.tsx @@ -38,7 +38,7 @@ import Spinner from './Spinner'; import { BodyText, HeaderText } from './Text'; import hostsSanitizer from '../lib/sanitizers/hostsSanitizer'; -import PeriodicFetch from '../lib/fetchers/periodicFetch'; +import periodicFetch from '../lib/fetchers/periodicFetch'; import putFetch from '../lib/fetchers/putFetch'; const PREFIX = 'Servers'; @@ -177,7 +177,7 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { const buttonLabels = useRef([]); - const { data, isLoading } = PeriodicFetch( + const { data, isLoading } = periodicFetch( `${process.env.NEXT_PUBLIC_API_URL}/get_servers?anvil_uuid=${uuid}`, ); diff --git a/striker-ui/components/SharedStorage/SharedStorage.tsx b/striker-ui/components/SharedStorage/SharedStorage.tsx index 4022bd3a..049227a6 100644 --- a/striker-ui/components/SharedStorage/SharedStorage.tsx +++ b/striker-ui/components/SharedStorage/SharedStorage.tsx @@ -5,7 +5,7 @@ import { styled } from '@mui/material/styles'; import { BodyText, HeaderText } from '../Text'; import { Panel, InnerPanel, InnerPanelHeader } from '../Panels'; import SharedStorageHost from './SharedStorageHost'; -import PeriodicFetch from '../../lib/fetchers/periodicFetch'; +import periodicFetch from '../../lib/fetchers/periodicFetch'; import { AnvilContext } from '../AnvilContext'; import Spinner from '../Spinner'; import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME'; @@ -36,7 +36,7 @@ const StyledDiv = styled('div')(({ theme }) => ({ const SharedStorage = (): JSX.Element => { const { uuid } = useContext(AnvilContext); - const { data, isLoading } = PeriodicFetch( + const { data, isLoading } = periodicFetch( `${process.env.NEXT_PUBLIC_API_URL}/get_shared_storage?anvil_uuid=${uuid}`, ); return ( diff --git a/striker-ui/components/Storage.tsx b/striker-ui/components/Storage.tsx index 85fee3e3..7accb812 100644 --- a/striker-ui/components/Storage.tsx +++ b/striker-ui/components/Storage.tsx @@ -3,10 +3,10 @@ import * as prettyBytes from 'pretty-bytes'; import { Panel } from './Panels'; import { AllocationBar } from './Bars'; import { HeaderText, BodyText } from './Text'; -import PeriodicFetch from '../lib/fetchers/periodicFetch'; +import periodicFetch from '../lib/fetchers/periodicFetch'; const Storage = ({ uuid }: { uuid: string }): JSX.Element => { - const { data, isLoading } = PeriodicFetch( + const { data, isLoading } = periodicFetch( `${process.env.NEXT_PUBLIC_API_URL}/get_memory?anvil_uuid=${uuid}`, ); diff --git a/striker-ui/lib/fetchers/periodicFetch.ts b/striker-ui/lib/fetchers/periodicFetch.ts index d65a96a5..a013e3b5 100644 --- a/striker-ui/lib/fetchers/periodicFetch.ts +++ b/striker-ui/lib/fetchers/periodicFetch.ts @@ -1,13 +1,19 @@ import useSWR from 'swr'; + import fetcher from './fetchJSON'; -const PeriodicFetch = ( +const periodicFetch = ( url: string, refreshInterval = 5000, ): GetResponses => { + // The purpose of react-hooks/rules-of-hooks is to ensure that react hooks + // are called in order (i.e., not potentially skipped due to conditionals). + // We can safely disable this rule as this function is simply a wrapper. + // eslint-disable-next-line react-hooks/rules-of-hooks const { data, error } = useSWR(url, fetcher, { refreshInterval, }); + return { data, isLoading: !error && !data, @@ -15,4 +21,4 @@ const PeriodicFetch = ( }; }; -export default PeriodicFetch; +export default periodicFetch; diff --git a/striker-ui/pages/index.tsx b/striker-ui/pages/index.tsx index b1a01cc4..914e67c7 100644 --- a/striker-ui/pages/index.tsx +++ b/striker-ui/pages/index.tsx @@ -8,7 +8,7 @@ import CPU from '../components/CPU'; import SharedStorage from '../components/SharedStorage'; import Memory from '../components/Memory'; import Network from '../components/Network'; -import PeriodicFetch from '../lib/fetchers/periodicFetch'; +import periodicFetch from '../lib/fetchers/periodicFetch'; import Servers from '../components/Servers'; import Header from '../components/Header'; import AnvilProvider from '../components/AnvilContext'; @@ -57,7 +57,7 @@ const StyledDiv = styled('div')(({ theme }) => ({ const Dashboard = (): JSX.Element => { const width = useWindowDimensions(); - const { data } = PeriodicFetch( + const { data } = periodicFetch( `${process.env.NEXT_PUBLIC_API_URL}/get_anvils`, );