refactor(striker-ui): rename PeriodicFetch to camel case

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<AnvilStatus>(
+    const { data } = periodicFetch<AnvilStatus>(
       `${process.env.NEXT_PUBLIC_API_URL}/get_status?anvil_uuid=${anvil.anvil_uuid}`,
     );
     anvils.push({

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<AnvilCPU>(
+  const { data, isLoading } = periodicFetch<AnvilCPU>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_cpu?anvil_uuid=${uuid}`,
   );
 

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<AnvilSharedStorage>(
+  const { data, isLoading } = periodicFetch<AnvilSharedStorage>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_shared_storage?anvil_uuid=${uuid}`,
   );
   return (

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<AnvilStatus>(
+  const { data, isLoading } = periodicFetch<AnvilStatus>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_status?anvil_uuid=${uuid}`,
   );
 

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<AnvilMemory>(
+  const { data, isLoading } = periodicFetch<AnvilMemory>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_memory?anvil_uuid=${uuid}`,
   );
 

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<AnvilNetwork>(
+  const { data, isLoading } = periodicFetch<AnvilNetwork>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_networks?anvil_uuid=${uuid}`,
   );
 

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<ButtonLabels[]>([]);
 
-  const { data, isLoading } = PeriodicFetch<AnvilServers>(
+  const { data, isLoading } = periodicFetch<AnvilServers>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_servers?anvil_uuid=${uuid}`,
   );
 

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<AnvilSharedStorage>(
+  const { data, isLoading } = periodicFetch<AnvilSharedStorage>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_shared_storage?anvil_uuid=${uuid}`,
   );
   return (

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<AnvilMemory>(
+  const { data, isLoading } = periodicFetch<AnvilMemory>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_memory?anvil_uuid=${uuid}`,
   );
 

striker-ui/lib/fetchers/periodicFetch.ts

@@ -1,13 +1,19 @@
 import useSWR from 'swr';
+
 import fetcher from './fetchJSON';
 
-const PeriodicFetch = <T>(
+const periodicFetch = <T>(
   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<T>(url, fetcher, {
     refreshInterval,
   });
+
   return {
     data,
     isLoading: !error && !data,
@@ -15,4 +21,4 @@ const PeriodicFetch = <T>(
   };
 };
 
-export default PeriodicFetch;
+export default periodicFetch;

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<AnvilList>(
+  const { data } = periodicFetch<AnvilList>(
     `${process.env.NEXT_PUBLIC_API_URL}/get_anvils`,
   );