90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
import { Stack, Text } from '@mantine/core';
|
|
import { AppItem } from 'components';
|
|
import { useCommonHooks, useQueryAPI } from 'hooks';
|
|
import { useEffect, useState } from 'react';
|
|
import { textClasses } from 'styles';
|
|
import type { Application } from 'types';
|
|
|
|
function Applications({ contentType }: { contentType: string[] }) {
|
|
const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
|
|
endpoint: 'api/enabledApplications',
|
|
});
|
|
const { appSort, appDensity, appScale, theme, textShadowStyle } = useCommonHooks();
|
|
const [applications, setApplications] = useState<Application[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (applicationData && !isApplicationDataFetching) {
|
|
setApplications(
|
|
applicationData
|
|
.sort((a: Application, b: Application) => {
|
|
switch (appSort) {
|
|
case 'A>Z':
|
|
return a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1;
|
|
case 'Z>A':
|
|
return a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? 1 : -1;
|
|
case 'Newest':
|
|
if (a.id && b.id) {
|
|
return a.id < b.id ? 1 : -1;
|
|
}
|
|
return -1;
|
|
case 'Oldest':
|
|
if (a.id && b.id) {
|
|
return a.id > b.id ? 1 : -1;
|
|
}
|
|
return -1;
|
|
case 'Custom':
|
|
return a.index > b.index ? 1 : -1;
|
|
default:
|
|
return 0;
|
|
}
|
|
})
|
|
?.filter(
|
|
(application: Application) =>
|
|
contentType.includes(application.filterName) || contentType.includes('All'),
|
|
),
|
|
);
|
|
}
|
|
}, [applicationData, isApplicationDataFetching, appSort, contentType]);
|
|
|
|
return (
|
|
<>
|
|
{applications.length > 0 && contentType.length > 0 && (
|
|
<Stack gap={0}>
|
|
<Text
|
|
className={textClasses.sectionTitle}
|
|
classNames={textClasses}
|
|
style={{
|
|
boxShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
|
|
}}
|
|
>
|
|
Applications
|
|
</Text>
|
|
<Stack
|
|
style={{
|
|
gap: '.25rem',
|
|
display: 'grid',
|
|
gridTemplateColumns: `repeat(${appDensity}, 1fr)`,
|
|
}}
|
|
>
|
|
{applications.map((application: Application) => {
|
|
return (
|
|
<AppItem
|
|
key={application.name}
|
|
name={application.name}
|
|
url={application.url}
|
|
icon={application.icon}
|
|
enabled={application.enabled}
|
|
scale={appScale}
|
|
linksActive
|
|
/>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Stack>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Applications;
|