Skip to content

Commit

Permalink
feat: refactor AppList & update AppForm styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@ztlee042
ztlee042 committed May 15, 2024
1 parent af33ead commit 9c5911d
Showing 1 changed file with 96 additions and 78 deletions.
174 changes: 96 additions & 78 deletions src/components/item/form/AppForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import { ChangeEventHandler, useState } from 'react';
import { Add, ArrowBack } from '@mui/icons-material';
import { Alert, Stack, TextField, Typography, alpha } from '@mui/material';

import { DiscriminatedItem, ItemType, buildAppExtra } from '@graasp/sdk';
import { App, DiscriminatedItem, ItemType, buildAppExtra } from '@graasp/sdk';
import { Button } from '@graasp/ui';

import AppCard from '@/components/main/AppCard';
import { CUSTOM_APP_CYPRESS_ID, CUSTOM_APP_URL_ID } from '@/config/selectors';
import { CUSTOM_APP_BUTTON_ID, CUSTOM_APP_URL_ID } from '@/config/selectors';
import defaultImage from '@/resources/defaultApp.png';
import { sortByName } from '@/utils/item';

import { useBuilderTranslation } from '../../../config/i18n';
Expand All @@ -17,78 +18,92 @@ import NameForm from './NameForm';

type AppGridProps = {
showFull: boolean;
setHasMostUsedData: (value: boolean) => void;
currentUrl: string;
handleSelection: (value: null | { name: string; url: string }) => void;
searchQuery?: string;
};

type MostUsedApp = {
url: string;
name: string;
count: number;
};

type AppCardListProps = {
apps: (App | MostUsedApp)[];
currentUrl: string;
handleSelection: (value: null | { name: string; url: string }) => void;
searchQuery?: string;
};

const AppCardList = ({
apps,
currentUrl,
handleSelection,
searchQuery,
}: AppCardListProps) => {
// filter out with search query
const dataToShow = searchQuery
? apps.filter((app) =>
app.name.toLowerCase().includes(searchQuery.toLowerCase()),
)
: apps;
dataToShow.sort(sortByName);
return (
<>
{dataToShow.map((ele) => (
<AppCard
key={ele.name}
id={'id' in ele ? ele.id : ''}
name={ele.name}
description={'description' in ele ? ele.description : ''}
image={'extra' in ele ? ele.extra?.image : defaultImage}
selected={ele.url === currentUrl}
onClick={() => {
if (ele.url === currentUrl) {
// reset fields
handleSelection(null);
} else {
handleSelection({ url: ele.url, name: ele.name });
}
}}
/>
))}
</>
);
};

const AppGrid = ({
showFull,
setHasMostUsedData,
currentUrl,
handleSelection,
searchQuery,
}: AppGridProps): JSX.Element | JSX.Element[] => {
const { useApps, useMostUsedApps } = hooks;
const { data, isLoading } = useApps();
const { data: dataMostUsed } = useMostUsedApps();
const { data: allApps, isLoading } = useApps();
const { data: mostUsedApps } = useMostUsedApps();
const { t: translateBuilder } = useBuilderTranslation();

// at first, try to present the user the 'most used' data
if (dataMostUsed && dataMostUsed.length !== 0 && !showFull) {
setHasMostUsedData(true);
if (mostUsedApps && mostUsedApps.length !== 0 && !showFull) {
return (
<>
{dataMostUsed.map((ele) => (
<AppCard
key={ele.name}
name={ele.name}
selected={ele.url === currentUrl}
onClick={() => {
if (ele.url === currentUrl) {
// reset fields
handleSelection(null);
} else {
handleSelection({ url: ele.url, name: ele.name });
}
}}
/>
))}
</>
<AppCardList
apps={mostUsedApps}
currentUrl={currentUrl}
handleSelection={handleSelection}
searchQuery={searchQuery}
/>
);
}

if (data) {
// filter out with search query
const dataToShow = searchQuery
? data.filter((d) =>
d.name.toLowerCase().includes(searchQuery.toLowerCase()),
)
: data;
dataToShow.sort(sortByName);

if (allApps) {
return (
<>
{dataToShow.map((ele) => (
<AppCard
id={ele.id}
key={ele.name}
name={ele.name}
description={ele.description}
image={ele.extra.image}
selected={ele.url === currentUrl}
onClick={() => {
if (ele.url === currentUrl) {
// reset fields
handleSelection(null);
} else {
handleSelection({ url: ele.url, name: ele.name });
}
}}
/>
))}
</>
<AppCardList
apps={allApps}
currentUrl={currentUrl}
handleSelection={handleSelection}
searchQuery={searchQuery}
/>
);
}

Expand All @@ -112,7 +127,6 @@ type Props = {

const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
const [showFull, setShowFull] = useState<boolean>(false);
const [hasMostUsedData, setHasMostUsedData] = useState<boolean>(false);
const { t: translateBuilder } = useBuilderTranslation();
const [isCustomApp, setIsCustomApp] = useState<boolean>(false);

Expand Down Expand Up @@ -196,10 +210,10 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
);
}
return (
<Stack spacing={2} mt={0.5}>
<Stack spacing={2} mt={1}>
<Stack
direction="column"
height="100%"
maxHeight={400}
spacing={1}
bgcolor={alpha('#ADADAD', 0.06)}
padding={2}
Expand All @@ -213,54 +227,58 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
size="small"
onChange={searchAnApp}
/>
<Stack direction="row" alignItems="center" spacing={1}>
<Stack direction="row" alignItems="center">
<Typography variant="label">
{hasMostUsedData && !showFull
{!showFull
? translateBuilder(BUILDER.APP_SECTION_MOST_USED)
: translateBuilder(BUILDER.APP_SECTION_ALL_APP)}
</Typography>
<Button
size="small"
variant="text"
onClick={() => setShowFull(!showFull)}
id={CUSTOM_APP_CYPRESS_ID}
id={CUSTOM_APP_BUTTON_ID}
>
{hasMostUsedData &&
(!showFull
? translateBuilder(BUILDER.APP_SECTION_ALL_APP_BUTTON_TEXT)
: translateBuilder(BUILDER.APP_SECTION_MOST_USED_BUTTON_TEXT))}
{!showFull
? translateBuilder(BUILDER.APP_SECTION_ALL_APP_BUTTON_TEXT)
: translateBuilder(BUILDER.APP_SECTION_MOST_USED_BUTTON_TEXT)}
</Button>
</Stack>
<Stack
flex={2}
flexDirection="row"
flexWrap="wrap"
width="100%"
gap={1}
height="300px"
overflow="scroll"
sx={{
overflowY: 'scroll',
}}
padding={1}
alignContent="flex-start"
direction={{ xs: 'column', sm: 'row' }}
>
<AppGrid
showFull={showFull}
setHasMostUsedData={setHasMostUsedData}
currentUrl={currentUrl}
handleSelection={handleAppSelection}
searchQuery={searchQuery}
/>
</Stack>
</Stack>
<Typography variant="body2">
{translateBuilder(BUILDER.CREATE_CUSTOM_APP_LABEL)}
</Typography>
<Button
startIcon={<Add fontSize="small" />}
variant="contained"
onClick={addCustomApp}
id={CUSTOM_APP_CYPRESS_ID}
>
{translateBuilder(BUILDER.CREATE_CUSTOM_APP_DESCRIPTION)}
</Button>
<Stack direction="row" alignItems="center" gap={1} flex={1}>
<Typography variant="body2">
{translateBuilder(BUILDER.CREATE_CUSTOM_APP_LABEL)}
</Typography>
<Button
startIcon={<Add fontSize="small" />}
variant="outlined"
onClick={addCustomApp}
id={CUSTOM_APP_BUTTON_ID}
size="small"
>
{translateBuilder(BUILDER.CREATE_CUSTOM_APP_DESCRIPTION)}
</Button>
</Stack>
<NameForm
setChanges={onChange}
updatedProperties={updatedProperties}
Expand Down

0 comments on commit 9c5911d

Please sign in to comment.