feat: randomize integration apps

apps/common/components/CategorySection.tsx

@@ -1,23 +1,39 @@
+import {type ReactElement, useState} from 'react';
+import {useMountEffect} from '@react-hookz/web';
 import {IconChevron} from '@common/icons/IconChevron';
 
 import {AppCard} from './AppCard';
 
-import type {ReactElement} from 'react';
 import type {TApp} from '@common/types/category';
 
 type TAppSectionProps = {
 	title: string;
 	onExpandClick: () => void;
 	apps: TApp[];
+	shouldRandomize?: boolean;
 };
 
-export function CategorySection(props: TAppSectionProps): ReactElement {
+export function CategorySection({title, onExpandClick, apps, shouldRandomize = false}: TAppSectionProps): ReactElement {
+	const [shuffledApps, set_shuffledApps] = useState<TApp[]>([]);
+
+	/**********************************************************************************************
+	 ** On component mount we shuffle the array of Partners to avoid any bias.
+	 **********************************************************************************************/
+	useMountEffect(() => {
+		if (apps.length < 1) {
+			return;
+		}
+		if (!shouldRandomize) {
+			return set_shuffledApps(apps);
+		}
+		set_shuffledApps(apps.toSorted(() => 0.5 - Math.random()));
+	});
 	return (
 		<div className={'flex flex-col gap-y-6 overflow-hidden'}>
 			<div className={'flex h-10 w-full items-center justify-between pr-1'}>
-				<div className={'text-lg font-bold text-white'}>{props.title}</div>
+				<div className={'text-lg font-bold text-white'}>{title}</div>
 				<button
-					onClick={props.onExpandClick}
+					onClick={onExpandClick}
 					className={
 						'flex items-center rounded-[4px] px-4 py-2 outline !outline-1 outline-gray-600/50 hover:bg-gray-600/40'
 					}>
@@ -26,7 +42,7 @@ export function CategorySection(props: TAppSectionProps): ReactElement {
 				</button>
 			</div>
 			<div className={'flex grid-rows-1 flex-col gap-4 md:grid md:grid-cols-2 lg:grid-cols-4'}>
-				{props.apps.slice(0, 4).map((app, i) => (
+				{shuffledApps.slice(0, 4).map((app, i) => (
 					<AppCard
 						key={app.name + i}
 						app={app}

pages/home/[category].tsx

@@ -1,17 +1,33 @@
-import {type ReactElement, useMemo} from 'react';
+import {type ReactElement, useMemo, useState} from 'react';
+import {useMountEffect} from '@react-hookz/web';
 import {AppCard} from '@common/components/AppCard';
 import {FilterBar} from '@common/components/FilterBar';
 import {SortingBar} from '@common/components/SortingBar';
 import {CATEGORIES_DICT} from '@common/utils/constants';
 
 import type {NextRouter} from 'next/router';
+import type {TApp} from '@common/types/category';
 
 export default function Index(props: {router: NextRouter}): ReactElement {
+	const [shuffledApps, set_shuffledApps] = useState<TApp[]>();
 	const currentCatrgory = useMemo(() => {
 		const currentTab = props.router.asPath?.startsWith('/home/') ? props.router.asPath?.split('/')[2] : '/';
 		return CATEGORIES_DICT[currentTab as keyof typeof CATEGORIES_DICT];
 	}, [props.router.asPath]);
 
+	/**********************************************************************************************
+	 ** On component mount we shuffle the array of Integration Apps to avoid any bias.
+	 **********************************************************************************************/
+	useMountEffect(() => {
+		if (currentCatrgory.apps.length < 1) {
+			return;
+		}
+		if (currentCatrgory.categoryName === 'Integrations') {
+			set_shuffledApps(currentCatrgory.apps.toSorted(() => 0.5 - Math.random()));
+		}
+		set_shuffledApps(currentCatrgory.apps);
+	});
+
 	return (
 		<div className={'mt-24 flex w-full justify-start px-4 !pl-8 pb-14 md:mt-10'}>
 			<div className={'flex w-full max-w-4xl flex-col'}>
@@ -37,7 +53,7 @@ export default function Index(props: {router: NextRouter}): ReactElement {
 				</div>
 
 				<div className={'flex grid-rows-1 flex-col gap-4 md:grid md:grid-cols-2 lg:grid-cols-4'}>
-					{currentCatrgory?.apps.map(app => <AppCard app={app} />)}
+					{shuffledApps?.map(app => <AppCard app={app} />)}
 				</div>
 			</div>
 		</div>

pages/home/index.tsx

@@ -99,6 +99,7 @@ export default function Home(): ReactElement {
 						/>
 
 						<CategorySection
+							shouldRandomize={true}
 							title={'Integrations'}
 							onExpandClick={() => router.push('/home/integrations')}
 							apps={INTEGRATIONS_APPS}