Create event with API and load event details

crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx

@@ -45,7 +45,7 @@ const AvailabilityEditor = ({
 		<Wrapper>
 			<Container>
 				<TimeLabels>
-					{times.concat([`${parseInt(times[times.length-1].slice(0, 2))+1}00`]).map((time, i) =>
+					{!!times.length && times.concat([`${parseInt(times[times.length-1].slice(0, 2))+1}00`]).map((time, i) =>
 						<TimeSpace key={i} time={time}>
 							{time.slice(-2) === '00' && <TimeLabel>{dayjs().hour(time.slice(0, 2)).minute(time.slice(-2)).format('h A')}</TimeLabel>}
 						</TimeSpace>

crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx

@@ -35,7 +35,7 @@ const AvailabilityViewer = ({
 		<Wrapper>
 			<Container>
 				<TimeLabels>
-					{times.concat([`${parseInt(times[times.length-1].slice(0, 2))+1}00`]).map((time, i) =>
+					{!!times.length && times.concat([`${parseInt(times[times.length-1].slice(0, 2))+1}00`]).map((time, i) =>
 						<TimeSpace key={i} time={time}>
 							{time.slice(-2) === '00' && <TimeLabel>{dayjs().hour(time.slice(0, 2)).minute(time.slice(-2)).format('h A')}</TimeLabel>}
 						</TimeSpace>

crabfit-frontend/src/components/Button/buttonStyle.ts

@@ -37,6 +37,34 @@ export const Top = styled.button`
 	&:focus-visible {
 		filter: brightness(1.2);
 	}
+
+	${props => props.isLoading && `
+		text-shadow: none;
+		color: transparent;
+		cursor: wait;
+
+		@keyframes load {
+			from {
+				transform: rotate(0deg);
+			}
+			to {
+				transform: rotate(360deg);
+			}
+		}
+
+		&:after {
+			content: '';
+			position: absolute;
+			top: calc(50% - 12px);
+			left: calc(50% - 12px);
+			height: 18px;
+			width: 18px;
+			border: 3px solid #FFF;
+			border-left-color: transparent;
+			border-radius: 100px;
+			animation: load .5s linear infinite;
+		}
+	`}
 `;
 
 export const Bottom = styled.div`

crabfit-frontend/src/components/Donate/Donate.tsx

@@ -7,6 +7,7 @@ const Donate = () => (
 				buttonHeight="30px"
 				buttonWidth="90px"
 				type="button"
+				tabIndex="-1"
 			>Donate</Button>
 		</a>
 	</div>

crabfit-frontend/src/components/Error/Error.tsx

@@ -0,0 +1,16 @@
+import { Wrapper, CloseButton } from './errorStyle';
+
+const Error = ({
+	children,
+	onClose,
+	...props
+}) => (
+	<Wrapper {...props}>
+		{children}
+		<CloseButton type="button" onClick={onClose}>
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+		</CloseButton>
+	</Wrapper>
+);
+
+export default Error;

crabfit-frontend/src/components/Error/errorStyle.ts

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+	margin: 20px 0;
+	border-radius: 3px;
+	background-color: ${props => props.theme.error};
+	color: #FFFFFF;
+	padding: 12px 16px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: 18px;
+`;
+
+export const CloseButton = styled.button`
+	border: 0;
+	background: none;
+	height: 30px;
+	width: 30px;
+	cursor: pointer;
+	color: inherit;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-left: 16px;
+`;

crabfit-frontend/src/components/index.ts

@@ -7,6 +7,7 @@ export { default as Button } from './Button/Button';
 export { default as Legend } from './Legend/Legend';
 export { default as AvailabilityViewer } from './AvailabilityViewer/AvailabilityViewer';
 export { default as AvailabilityEditor } from './AvailabilityEditor/AvailabilityEditor';
+export { default as Error } from './Error/Error';
 
 export { default as Center } from './Center/Center';
 export { default as Donate } from './Donate/Donate';