Slight refactor

src/pages/homepage/components/Applications/AppItem.tsx

@@ -1,10 +1,12 @@
 import { Icon } from '@iconify/react';
 import { Box, Stack, Text } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 import { useState } from 'react';
 import { stackClasses, textClasses } from 'styles';
 
-function AppItem({ url, icon, name, isMobile }: any) {
+function AppItem({ url, icon, name }: any) {
 	const [textDecoration, setTextDecoration] = useState<string>('none');
+	const { isMobile } = useCommonHooks();
 
 	return (
 		<Box
@@ -15,11 +17,11 @@ function AppItem({ url, icon, name, isMobile }: any) {
 			className={stackClasses.appItemBox}
 		>
 			<Stack
-				align={isMobile && 'center'}
-				justify={isMobile && 'center'}
+				align={isMobile ? 'center' : undefined}
+				justify={isMobile ? 'center' : undefined}
 				style={{
 					height: '64px',
-					width: isMobile && '100%',
+					width: isMobile ? '100%' : undefined,
 					marginRight: isMobile ? '0' : '1em',
 					marginLeft: isMobile ? '0' : '1em',
 					paddingTop: isMobile ? '0' : '15px',

src/pages/homepage/components/Applications/Applications.tsx

@@ -1,20 +1,13 @@
 import { Stack, Text } from '@mantine/core';
-import { useQueryAPI } from 'hooks';
-import { useEffect, useState } from 'react';
+import { useCommonHooks } from 'hooks';
 import { textClasses } from 'styles';
 import AppItem from './AppItem';
 
-function Applications({ contentType, isMobile }: any) {
-	const { data, isFetching } = useQueryAPI({ endpoint: 'api/apps' });
-	const [applications, setApplications] = useState([]);
-	useEffect(() => {
-		if (data && !isFetching) {
-			setApplications(data);
-		}
-	}, [data, isFetching]);
+function Applications({ contentType }: any) {
+	const { isMobile, applicationData } = useCommonHooks();
 	return (
 		<>
-			{applications.length > 0 && contentType.length > 0 && (
+			{applicationData.length > 0 && contentType.length > 0 && (
 				<Stack id='apps' style={{ gap: 0 }}>
 					<Text className={textClasses.sectionTitle} classNames={textClasses}>
 						Applications
@@ -32,7 +25,7 @@ function Applications({ contentType, isMobile }: any) {
 							paddingBottom: 'var(--module-spacing)',
 						}}
 					>
-						{applications?.map((application: any) => {
+						{applicationData?.map((application: any) => {
 							if (
 								contentType.includes(application.filterName) ||
 								contentType.includes('All')
@@ -44,7 +37,6 @@ function Applications({ contentType, isMobile }: any) {
 										url={application.url}
 										icon={application.icon}
 										category={application.category}
-										isMobile={isMobile}
 									/>
 								);
 						})}