Add basic listing of server schedules

resources/scripts/components/elements/ContentBox.tsx

@@ -8,7 +8,7 @@ type Props = Readonly<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElemen
     showFlashes?: string | boolean;
 }>;
 
-export default ({ title, borderColor, showFlashes, children, ...props }: Props) => (
+const ContentBox = ({ title, borderColor, showFlashes, children, ...props }: Props) => (
     <div {...props}>
         {title && <h2 className={'text-neutral-300 mb-4 px-4'}>{title}</h2>}
         {showFlashes &&
@@ -24,3 +24,5 @@ export default ({ title, borderColor, showFlashes, children, ...props }: Props)
         </div>
     </div>
 );
+
+export default ContentBox;

resources/scripts/components/elements/Field.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Field, FieldProps } from 'formik';
+import { Field as FormikField, FieldProps } from 'formik';
 import classNames from 'classnames';
 
 interface OwnProps {
@@ -11,8 +11,8 @@ interface OwnProps {
 
 type Props = OwnProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name'>;
 
-export default ({ id, name, label, description, validate, className, ...props }: Props) => (
-    <Field name={name} validate={validate}>
+const Field = ({ id, name, label, description, validate, className, ...props }: Props) => (
+    <FormikField name={name} validate={validate}>
         {
             ({ field, form: { errors, touched } }: FieldProps) => (
                 <React.Fragment>
@@ -37,5 +37,7 @@ export default ({ id, name, label, description, validate, className, ...props }:
                 </React.Fragment>
             )
         }
-    </Field>
+    </FormikField>
 );
+
+export default Field;

resources/scripts/components/elements/Spinner.tsx

@@ -9,7 +9,7 @@ interface Props {
     className?: string;
 }
 
-export default ({ size, centered, className }: Props) => (
+const Spinner = ({ size, centered, className }: Props) => (
     centered ?
         <div className={classNames(`flex justify-center ${className}`, { 'm-20': size === 'large', 'm-6': size !== 'large' })}>
             <div
@@ -27,3 +27,5 @@ export default ({ size, centered, className }: Props) => (
             })}
         />
 );
+
+export default Spinner;

resources/scripts/components/elements/SpinnerOverlay.tsx

@@ -10,7 +10,7 @@ interface Props {
     backgroundOpacity?: number;
 }
 
-export default ({ size, fixed, visible, backgroundOpacity }: Props) => (
+const SpinnerOverlay = ({ size, fixed, visible, backgroundOpacity }: Props) => (
     <CSSTransition timeout={150} classNames={'fade'} in={visible} unmountOnExit={true}>
         <div
             className={classNames('z-50 pin-t pin-l flex items-center justify-center w-full h-full rounded', {
@@ -23,3 +23,5 @@ export default ({ size, fixed, visible, backgroundOpacity }: Props) => (
         </div>
     </CSSTransition>
 );
+
+export default SpinnerOverlay;

resources/scripts/components/elements/SuspenseSpinner.tsx

@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react';
 import Spinner from '@/components/elements/Spinner';
 
-export default ({ children }: { children?: React.ReactNode }) => (
+const SuspenseSpinner = ({ children }: { children?: React.ReactNode }) => (
     <Suspense
         fallback={
             <div className={'mx-4 w-3/4 mr-4 flex items-center justify-center'}>
@@ -12,3 +12,5 @@ export default ({ children }: { children?: React.ReactNode }) => (
         {children}
     </Suspense>
 );
+
+export default SuspenseSpinner;

resources/scripts/components/elements/TitledGreyBox.tsx

@@ -9,7 +9,7 @@ interface Props {
     children: React.ReactNode;
 }
 
-export default ({ icon, title, children, className }: Props) => (
+const TitledGreyBox = ({ icon, title, children, className }: Props) => (
     <div className={`rounded shadow-md bg-neutral-700 ${className}`}>
         <div className={'bg-neutral-900 rounded-t p-3 border-b border-black'}>
             <p className={'text-sm uppercase'}>
@@ -21,3 +21,5 @@ export default ({ icon, title, children, className }: Props) => (
         </div>
     </div>
 );
+
+export default TitledGreyBox;