Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking β€œSign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upcoming: [M3-7874] - Linode Create Refactor - Marketplace App Sections #10520

Prev Previous commit
Next Next commit
clean up and use stort insted of toStorted
  • Loading branch information
bnussman committed May 29, 2024
commit 818c89f823385c081a37d7a14f7d0ed746d4f8df
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import Grid from '@mui/material/Unstable_Grid2';
import React from 'react';
import { useController, useFormContext } from 'react-hook-form';

@@ -14,7 +15,8 @@ import { useMarketplaceAppsQuery } from 'src/queries/stackscripts';

import { getDefaultUDFData } from '../StackScripts/UserDefinedFields/utilities';
import { AppSection } from './AppSection';
import { categoryOptions } from './utilities';
import { AppSelectionCard } from './AppSelectionCard';
import { categoryOptions, getAppSections } from './utilities';

import type { LinodeCreateFormValues } from '../../utilities';
import type { StackScript } from '@linode/api-v4';
@@ -33,6 +35,8 @@ export const AppSelect = (props: Props) => {
name: 'stackscript_id',
});

const filter = null;

const { data: stackscripts, error, isLoading } = useMarketplaceAppsQuery(
true
);
@@ -64,67 +68,37 @@ export const AppSelect = (props: Props) => {
return <ErrorState errorText={error?.[0].reason} />;
}

// We will render this when we are filtering
// return (
// <Grid container spacing={2}>
// {stackscripts?.map((stackscript) => {
// if (!oneClickApps[stackscript.id]) {
// return null;
// }
// return (
// <AppSelectionCard
// onSelect={() => {
// setValue(
// 'stackscript_data',
// getDefaultUDFData(stackscript.user_defined_fields)
// );
// field.onChange(stackscript.id);
// }}
// checked={field.value === stackscript.id}
// iconUrl={`/assets/${oneClickApps[stackscript.id].logo_url}`}
// key={stackscript.id}
// label={stackscript.label}
// onOpenDetailsDrawer={() => onOpenDetailsDrawer(stackscript.id)}
// />
// );
// })}
// </Grid>
// );

const newApps = stackscripts.filter(
(stackscript) => oneClickApps[stackscript.id]?.isNew
);

const popularApps = stackscripts.slice(0, 10);
if (filter) {
return (
<Grid container spacing={2}>
{stackscripts?.map((stackscript) => (
<AppSelectionCard
checked={field.value === stackscript.id}
iconUrl={`/assets/${oneClickApps[stackscript.id].logo_url}`}
key={stackscript.id}
label={stackscript.label}
onOpenDetailsDrawer={() => onOpenDetailsDrawer(stackscript.id)}
onSelect={() => onSelect(stackscript)}
/>
))}
</Grid>
);
}

// @ts-expect-error Can we use toSorted? 😣
const allApps = stackscripts.toSorted((a, b) =>
a.label.toLowerCase().localeCompare(b.label.toLowerCase())
);
const sections = getAppSections(stackscripts);

return (
<Stack spacing={2}>
<AppSection
onOpenDetailsDrawer={onOpenDetailsDrawer}
onSelect={onSelect}
selectedStackscriptId={field.value}
stackscripts={newApps}
title="New apps"
/>
<AppSection
onOpenDetailsDrawer={onOpenDetailsDrawer}
onSelect={onSelect}
selectedStackscriptId={field.value}
stackscripts={popularApps}
title="Popular apps"
/>
<AppSection
onOpenDetailsDrawer={onOpenDetailsDrawer}
onSelect={onSelect}
selectedStackscriptId={field.value}
stackscripts={allApps}
title="All apps"
/>
{sections.map(({ stackscripts, title }) => (
<AppSection
key={title}
onOpenDetailsDrawer={onOpenDetailsDrawer}
onSelect={onSelect}
selectedStackscriptId={field.value}
stackscripts={stackscripts}
title={title}
/>
))}
</Stack>
);
};
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { oneClickApps } from 'src/features/OneClickApps/oneClickApps';
import { oneClickApps } from 'src/features/OneClickApps/oneClickAppsv2';

import type { StackScript } from '@linode/api-v4';

/**
* Get all categories from our marketplace apps list so
* we can generate a dynamic list of category options.
*/
const categories = oneClickApps.reduce((acc, app) => {
const categories = Object.values(oneClickApps).reduce((acc, app) => {
return [...acc, ...app.categories];
}, []);

@@ -16,3 +18,34 @@ export const uniqueCategories = Array.from(new Set(categories));
export const categoryOptions = uniqueCategories.map((category) => ({
label: category,
}));

/**
* Returns an array of Marketplace app sections given an array
* of Marketplace app StackScripts
*/
export const getAppSections = (stackscripts: StackScript[]) => {
const newApps = stackscripts.filter(
(stackscript) => oneClickApps[stackscript.id]?.isNew
);

const popularApps = stackscripts.slice(0, 10);

const allApps = [...stackscripts].sort((a, b) =>
a.label.toLowerCase().localeCompare(b.label.toLowerCase())
);

return [
{
stackscripts: newApps,
title: 'All apps',
},
{
stackscripts: popularApps,
title: 'Popular apps',
},
{
stackscripts: allApps,
title: 'All apps',
},
];
};
Loading