Some code cleanup, add jest coverage and begin using it for utility functions

resources/scripts/components/server/backups/BackupRow.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArchive, faEllipsisH, faLock } from '@fortawesome/free-solid-svg-icons';
 import { format, formatDistanceToNow } from 'date-fns';
 import Spinner from '@/components/elements/Spinner';
-import { bytesToHuman } from '@/helpers';
+import { bytesToString } from '@/lib/formatters';
 import Can from '@/components/elements/Can';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 import BackupContextMenu from '@/components/server/backups/BackupContextMenu';
@@ -64,7 +64,7 @@ export default ({ backup, className }: Props) => {
                             {backup.name}
                         </p>
                         {(backup.completedAt !== null && backup.isSuccessful) &&
-                        <span css={tw`ml-3 text-neutral-300 text-xs font-extralight hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
+                        <span css={tw`ml-3 text-neutral-300 text-xs font-extralight hidden sm:inline`}>{bytesToString(backup.bytes)}</span>
                         }
                     </div>
                     <p css={tw`mt-1 md:mt-0 text-xs text-neutral-400 font-mono truncate`}>

resources/scripts/components/server/console/ServerDetailsBlock.tsx

@@ -8,7 +8,7 @@ import {
     faMicrochip,
     faWifi,
 } from '@fortawesome/free-solid-svg-icons';
-import { bytesToHuman, formatIp, megabytesToHuman } from '@/helpers';
+import { bytesToString, ip, mbToBytes } from '@/lib/formatters';
 import { ServerContext } from '@/state/server';
 import { SocketEvent, SocketRequest } from '@/components/server/events';
 import UptimeDuration from '@/components/server/UptimeDuration';
@@ -41,7 +41,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
     const allocation = ServerContext.useStoreState(state => {
         const match = state.server.data!.allocations.find(allocation => allocation.isDefault);
 
-        return !match ? 'n/a' : `${match.alias || formatIp(match.ip)}:${match.port}`;
+        return !match ? 'n/a' : `${match.alias || ip(match.ip)}:${match.port}`;
     });
 
     useEffect(() => {
@@ -106,14 +106,14 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
                 title={'Memory'}
                 color={getBackgroundColor(stats.memory / 1024, limits.memory * 1024)}
                 description={limits.memory
-                    ? `This server is allowed to use up to ${megabytesToHuman(limits.memory)} of memory.`
+                    ? `This server is allowed to use up to ${bytesToString(mbToBytes(limits.memory))} of memory.`
                     : 'No memory limit has been configured for this server.'
                 }
             >
                 {status === 'offline' ?
                     <span className={'text-gray-400'}>Offline</span>
                     :
-                    bytesToHuman(stats.memory)
+                    bytesToString(stats.memory)
                 }
             </StatBlock>
             <StatBlock
@@ -121,11 +121,11 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
                 title={'Disk'}
                 color={getBackgroundColor(stats.disk / 1024, limits.disk * 1024)}
                 description={limits.disk
-                    ? `This server is allowed to use up to ${megabytesToHuman(limits.disk)} of disk space.`
+                    ? `This server is allowed to use up to ${bytesToString(mbToBytes(limits.disk))} of disk space.`
                     : 'No disk space limit has been configured for this server.'
                 }
             >
-                {bytesToHuman(stats.disk)}
+                {bytesToString(stats.disk)}
             </StatBlock>
             <StatBlock
                 icon={faCloudDownloadAlt}
@@ -135,7 +135,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
                 {status === 'offline' ?
                     <span className={'text-gray-400'}>Offline</span>
                     :
-                    bytesToHuman(stats.tx)
+                    bytesToString(stats.tx)
                 }
             </StatBlock>
             <StatBlock
@@ -146,7 +146,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
                 {status === 'offline' ?
                     <span className={'text-gray-400'}>Offline</span>
                     :
-                    bytesToHuman(stats.rx)
+                    bytesToString(stats.rx)
                 }
             </StatBlock>
         </div>

resources/scripts/components/server/console/StatGraphs.tsx

@@ -4,7 +4,8 @@ import { SocketEvent } from '@/components/server/events';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 import { Line } from 'react-chartjs-2';
 import { useChart, useChartTickLabel } from '@/components/server/console/chart';
-import { bytesToHuman, toRGBA } from '@/helpers';
+import { hexToRgba } from '@/lib/helpers';
+import { bytesToString } from '@/lib/formatters';
 import { CloudDownloadIcon, CloudUploadIcon } from '@heroicons/react/solid';
 import { theme } from 'twin.macro';
 import ChartBlock from '@/components/server/console/ChartBlock';
@@ -24,7 +25,7 @@ export default () => {
                 y: {
                     ticks: {
                         callback (value) {
-                            return bytesToHuman(typeof value === 'string' ? parseInt(value, 10) : value);
+                            return bytesToString(typeof value === 'string' ? parseInt(value, 10) : value);
                         },
                     },
                 },
@@ -35,7 +36,7 @@ export default () => {
                 ...opts,
                 label: !index ? 'Network In' : 'Network Out',
                 borderColor: !index ? theme('colors.cyan.400') : theme('colors.yellow.400'),
-                backgroundColor: toRGBA(!index ? theme('colors.cyan.700') : theme('colors.yellow.700'), 0.5),
+                backgroundColor: hexToRgba(!index ? theme('colors.cyan.700') : theme('colors.yellow.700'), 0.5),
             };
         },
     });

resources/scripts/components/server/console/chart.ts

@@ -12,7 +12,7 @@ import { DeepPartial } from 'ts-essentials';
 import { useState } from 'react';
 import { deepmerge, deepmergeCustom } from 'deepmerge-ts';
 import { theme } from 'twin.macro';
-import { toRGBA } from '@/helpers';
+import { hexToRgba } from '@/lib/helpers';
 
 ChartJS.register(LineElement, PointElement, Filler, LinearScale);
 
@@ -86,7 +86,7 @@ function getEmptyData (label: string, sets = 1, callback?: ChartDatasetCallback
             label,
             data: Array(20).fill(0),
             borderColor: theme('colors.cyan.400'),
-            backgroundColor: toRGBA(theme('colors.cyan.700'), 0.5),
+            backgroundColor: hexToRgba(theme('colors.cyan.700'), 0.5),
         }, index)),
     };
 }

resources/scripts/components/server/features/Features.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import features from './index';
-import { getObjectKeys } from '@/helpers';
+import { getObjectKeys } from '@/lib/objects';
 
 type ListItems = [ string, React.ComponentType ][];
 

resources/scripts/components/server/files/FileObjectRow.tsx

@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFileAlt, faFileArchive, faFileImport, faFolder } from '@fortawesome/free-solid-svg-icons';
-import { bytesToHuman, encodePathSegments } from '@/helpers';
+import { encodePathSegments } from '@/helpers';
 import { differenceInHours, format, formatDistanceToNow } from 'date-fns';
 import React, { memo } from 'react';
 import { FileObject } from '@/api/server/files/loadDirectory';
@@ -13,6 +13,7 @@ import styled from 'styled-components/macro';
 import SelectFileCheckbox from '@/components/server/files/SelectFileCheckbox';
 import { usePermissions } from '@/plugins/usePermissions';
 import { join } from 'path';
+import { bytesToString } from '@/lib/formatters';
 
 const Row = styled.div`
     ${tw`flex bg-neutral-700 rounded-sm mb-px text-sm hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600`};
@@ -61,7 +62,7 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
             </div>
             {file.isFile &&
             <div css={tw`w-1/6 text-right mr-4 hidden sm:block`}>
-                {bytesToHuman(file.size)}
+                {bytesToString(file.size)}
             </div>
             }
             <div

resources/scripts/components/server/network/AllocationRow.tsx

@@ -18,7 +18,7 @@ import CopyOnClick from '@/components/elements/CopyOnClick';
 import DeleteAllocationButton from '@/components/server/network/DeleteAllocationButton';
 import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation';
 import getServerAllocations from '@/api/swr/getServerAllocations';
-import { formatIp } from '@/helpers';
+import { ip } from '@/lib/formatters';
 import Code from '@/components/elements/Code';
 
 const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
@@ -67,7 +67,7 @@ const AllocationRow = ({ allocation }: Props) => {
                 <div className={'mr-4 flex-1 md:w-40'}>
                     {allocation.alias ?
                         <CopyOnClick text={allocation.alias}><Code dark className={'w-40 truncate'}>{allocation.alias}</Code></CopyOnClick> :
-                        <CopyOnClick text={formatIp(allocation.ip)}><Code dark>{formatIp(allocation.ip)}</Code></CopyOnClick>}
+                        <CopyOnClick text={ip(allocation.ip)}><Code dark>{ip(allocation.ip)}</Code></CopyOnClick>}
                     <Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
                 </div>
                 <div className={'w-16 md:w-24 overflow-hidden'}>

resources/scripts/components/server/settings/SettingsContainer.tsx

@@ -12,7 +12,7 @@ import Label from '@/components/elements/Label';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
 import isEqual from 'react-fast-compare';
 import CopyOnClick from '@/components/elements/CopyOnClick';
-import { formatIp } from '@/helpers';
+import { ip } from '@/lib/formatters';
 import { Button } from '@/components/elements/button/index';
 
 export default () => {
@@ -31,10 +31,10 @@ export default () => {
                         <TitledGreyBox title={'SFTP Details'} css={tw`mb-6 md:mb-10`}>
                             <div>
                                 <Label>Server Address</Label>
-                                <CopyOnClick text={`sftp://${formatIp(sftp.ip)}:${sftp.port}`}>
+                                <CopyOnClick text={`sftp://${ip(sftp.ip)}:${sftp.port}`}>
                                     <Input
                                         type={'text'}
-                                        value={`sftp://${formatIp(sftp.ip)}:${sftp.port}`}
+                                        value={`sftp://${ip(sftp.ip)}:${sftp.port}`}
                                         readOnly
                                     />
                                 </CopyOnClick>
@@ -58,7 +58,7 @@ export default () => {
                                     </div>
                                 </div>
                                 <div css={tw`ml-4`}>
-                                    <a href={`sftp://${username}.${id}@${formatIp(sftp.ip)}:${sftp.port}`}>
+                                    <a href={`sftp://${username}.${id}@${ip(sftp.ip)}:${sftp.port}`}>
                                         <Button.Text variant={Button.Variants.Secondary}>Launch SFTP</Button.Text>
                                     </a>
                                 </div>