ADD API error and UPDATE maintenance message

components/Molecules/ApiError.vue

@@ -0,0 +1,25 @@
+<template>
+	<div>
+		<v-img :src="illustration" contain max-height="150" />
+		<h3 class="api-error-msg">
+			Looks like the server is taking to long to respond, please try again
+			later.
+		</h3>
+	</div>
+</template>
+<script>
+export default {
+	name: 'ApiError',
+	data() {
+		return {
+			illustration: require('~/static/images/illustrations/error.png'),
+		};
+	},
+};
+</script>
+<style scoped>
+.api-error-msg {
+	padding-top: 40px;
+	text-align: center;
+}
+</style>

components/Molecules/MaintenanceNotice.vue

@@ -3,7 +3,7 @@
 		<div class="maintenance-notice__box">
 			<v-icon right color="primary">mdi-alert</v-icon>
 			Please be aware that we will be performing routine server maintenance from
-			<b>August 5th to 7th</b>. <br />During this period, you may experience
+			<b>October 21st to 23rd</b>. <br />During this period, you may experience
 			temporary disruptions. We apologize for any inconvenience and appreciate
 			your understanding.
 		</div>
@@ -13,10 +13,10 @@
 export default {
 	name: 'MaintenanceNotice',
 	computed: {
-		isMissageVisible() {
+		isMessageVisible() {
 			const dateRange = {
-				start: new Date('2024-07-31'),
-				end: new Date('2024-08-07'),
+				start: new Date('2024-10-17'),
+				end: new Date('2024-10-24'),
 			};
 
 			if (new Date() >= dateRange.start && new Date() <= dateRange.end) {
@@ -37,5 +37,6 @@ export default {
 	border: 1px solid #c6d8e9;
 	border-radius: 5px;
 	padding: 20px;
+	text-align: center;
 }
 </style>

pages/benchmarking/_community/_id/index.vue

@@ -5,6 +5,7 @@
 			class="mb-5"
 			type="heading, list-item-three-line"
 		/>
+		<div v-else-if="$store.state.challenge.error"></div>
 		<div v-else class="mx-3">
 			<h1 class="text-h4">
 				{{ challenge.challenge_label }} ({{ challenge._id }})
@@ -31,6 +32,9 @@
 			v-if="$store.state.challenge.loading.datasets"
 			type="card-heading, image"
 		/>
+		<div v-else-if="$store.state.challenge.error" class="block-error">
+			<ApiError />
+		</div>
 		<div v-else>
 			<h2 class="text-h6 mt-8 mx-3">
 				Choose the metrics you want to visualize in the diagram:
@@ -103,12 +107,14 @@
 import { mapGetters } from 'vuex';
 import LoaderChartWidgets from '~/components/Widgets/LoaderChartWidgets';
 import ChartDescriptionCard from '~/components/Cards/ChartDescriptionCard';
+import ApiError from '~/components/Molecules/ApiError';
 
 export default {
 	name: 'CommunityChallengePlotsPage',
 	components: {
 		LoaderChartWidgets,
 		ChartDescriptionCard,
+		ApiError,
 	},
 	data() {
 		return {
@@ -187,4 +193,12 @@ export default {
 .container {
 	max-width: 1300px !important;
 }
+
+.block-error {
+	height: calc(100% - 390px);
+	min-height: 500px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
 </style>

pages/benchmarking/_community/index.vue

@@ -3,13 +3,20 @@
 		<v-container v-if="$store.state.community.loading.community">
 			<v-skeleton-loader class="mb-5" type="heading, list-item-three-line" />
 		</v-container>
+		<div v-else-if="$store.state.community.error" class="block-error">
+			<ApiError />
+		</div>
 		<v-container v-else>
 			<community-info
 				:community="community"
 				:community-references="communityReferences"
 			/>
 		</v-container>
-		<v-tabs :vertical="vertical" class="mt-10">
+		<v-tabs
+			v-if="!$store.state.community.error"
+			:vertical="vertical"
+			class="mt-10"
+		>
 			<v-tab class="justify-start">
 				<v-icon left> mdi-view-dashboard </v-icon>
 				Results
@@ -138,6 +145,7 @@ import CommunityDatasetsTable from '~/components/Communities/CommunityDatasetsTa
 import CommunityEventSelector from '~/components/Communities/CommunityEventSelector';
 import CommunityInfo from '~/components/Communities/CommunityInfo';
 import MarkedWrapper from '~/components/Molecules/MarkedWrapper.vue';
+import ApiError from '~/components/Molecules/ApiError';
 
 export default {
 	name: 'CommunityPage',
@@ -148,6 +156,7 @@ export default {
 		CommunityEventSelector,
 		CommunityInfo,
 		MarkedWrapper,
+		ApiError,
 	},
 	data() {
 		return {

pages/benchmarking/index.vue

@@ -26,7 +26,11 @@
 					the fields of the bioinformatics methods they need to use.
 				</p>
 			</info-slider>
-			<v-row v-if="$store.state.communities.loading">
+			<v-row
+				v-if="
+					$store.state.communities.loading && !$store.state.communities.error
+				"
+			>
 				<v-col
 					v-for="(c, i) in [1, 2, 3, 4, 5, 6, 7, 8]"
 					:key="i"
@@ -42,6 +46,9 @@
 					></v-skeleton-loader>
 				</v-col>
 			</v-row>
+			<div v-else-if="$store.state.communities.error" class="block-error">
+				<ApiError />
+			</div>
 			<v-row v-else>
 				<v-col
 					v-for="(community, index) in communities"
@@ -73,12 +80,14 @@
 import { mapGetters } from 'vuex';
 import CommunityCard from '~/components/Cards/CommunityCard';
 import InfoSlider from '~/components/Molecules/InfoSlider';
+import ApiError from '~/components/Molecules/ApiError';
 
 export default {
 	name: 'CommunitiesIndexPage',
 	components: {
 		CommunityCard,
 		InfoSlider,
+		ApiError,
 	},
 	data() {
 		return {

plugins/graphql.js

@@ -9,6 +9,7 @@ export default function (
 				Accept: 'text/plain, */*',
 			},
 		},
+    timeout: 5000
 	});
 
 	// Set baseURL to something different