Skip to content

Commit c3feb94

Browse files
sanjaypinnasanjaypinna
committed
feat: enhance ListingComponent with loading state and improved layout for filters and search
1 parent 25a75c6 commit c3feb94

File tree

1 file changed

+101
-98
lines changed

1 file changed

+101
-98
lines changed

‎app/[locale]/(user)/components/ListingComponent.tsx‎

Lines changed: 101 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import BreadCrumbs from '@/components/BreadCrumbs';
1919
import { Icons } from '@/components/icons';
2020
import Filter from '../datasets/components/FIlter/Filter';
2121
import Styles from '../datasets/dataset.module.scss';
22+
import { Loading } from '@/components/loading';
2223

2324
// Interfaces
2425
interface Bucket {
@@ -312,103 +313,8 @@ const ListingComponent: React.FC<ListingProps> = ({
312313
{/* Optional Header Component */}
313314
{headerComponent}
314315

315-
<div className="py-8 lg:py-10">
316-
<div className="flex flex-wrap items-center justify-between gap-5 rounded-2 p-2 lg:flex-nowrap">
317-
<div className="w-full md:block">
318-
<SearchInput
319-
label="Search"
320-
name="Search"
321-
className={cn(Styles.Search)}
322-
placeholder="Start typing to search for any Dataset"
323-
onSubmit={(value) => handleSearch(value)}
324-
onClear={(value) => handleSearch(value)}
325-
/>
326-
</div>
327-
<div className="flex flex-wrap justify-between gap-3 lg:flex-nowrap lg:justify-normal lg:gap-5">
328-
<div className="hidden items-center gap-2 lg:flex">
329-
<ButtonGroup noWrap spacing="tight">
330-
<Button
331-
kind={'tertiary'}
332-
className="h-fit w-fit"
333-
onClick={() => setView('collapsed')}
334-
>
335-
<Icon
336-
source={Icons.grid}
337-
color={view === 'collapsed' ? 'highlight' : 'default'}
338-
/>
339-
</Button>
340-
<Button
341-
onClick={() => setView('expanded')}
342-
kind={'tertiary'}
343-
className="h-fit w-fit"
344-
>
345-
<Icon
346-
source={Icons.list}
347-
color={view === 'expanded' ? 'highlight' : 'default'}
348-
/>
349-
</Button>
350-
</ButtonGroup>
351-
</div>
352-
<div className="flex items-center gap-2">
353-
<Button
354-
onClick={() =>
355-
handleOrderChange(
356-
queryParams.order === ''
357-
? 'desc'
358-
: queryParams.order === 'desc'
359-
? 'asc'
360-
: 'desc'
361-
)
362-
}
363-
kind="tertiary"
364-
className="h-fit w-fit"
365-
aria-label={`Sort ${queryParams.order === 'asc' ? 'descending' : 'ascending'}`}
366-
>
367-
<Icon
368-
source={Icons.sort}
369-
className={cn(
370-
queryParams.order === 'desc' && 'scale-x-[-1]'
371-
)}
372-
/>
373-
</Button>
374-
</div>
375-
<div className="flex items-center gap-2">
376-
<Select
377-
label=""
378-
labelInline
379-
name="select"
380-
onChange={handleSortChange}
381-
options={[
382-
{ label: 'Recent', value: 'recent' },
383-
{ label: 'Alphabetical', value: 'alphabetical' },
384-
]}
385-
/>
386-
</div>
387-
388-
<Tray
389-
size="narrow"
390-
open={open}
391-
onOpenChange={setOpen}
392-
trigger={
393-
<Button
394-
kind="secondary"
395-
className="lg:hidden"
396-
onClick={() => setOpen(true)}
397-
>
398-
Filter
399-
</Button>
400-
}
401-
>
402-
<Filter
403-
setOpen={setOpen}
404-
options={filterOptions}
405-
setSelectedOptions={handleFilterChange}
406-
selectedOptions={queryParams.filters}
407-
/>
408-
</Tray>
409-
</div>
410-
</div>
411-
<div className="row mg:mt-8 mb-16 mt-5 flex gap-5 lg:mt-10">
316+
<div className="mt-5 lg:mt-10">
317+
<div className="row mb-16 flex gap-5 ">
412318
<div className="hidden min-w-64 max-w-64 lg:block">
413319
<Filter
414320
options={filterOptions}
@@ -418,6 +324,101 @@ const ListingComponent: React.FC<ListingProps> = ({
418324
</div>
419325

420326
<div className="flex w-full flex-col gap-4 px-2">
327+
<div className="flex flex-wrap items-center justify-between gap-5 rounded-2 py-2 lg:flex-nowrap">
328+
<div className="w-full md:block">
329+
<SearchInput
330+
label="Search"
331+
name="Search"
332+
className={cn(Styles.Search)}
333+
placeholder="Start typing to search for any Dataset"
334+
onSubmit={(value) => handleSearch(value)}
335+
onClear={(value) => handleSearch(value)}
336+
/>
337+
</div>
338+
<div className="flex flex-wrap justify-between gap-3 lg:flex-nowrap lg:justify-normal lg:gap-5">
339+
<div className="hidden items-center gap-2 lg:flex">
340+
<ButtonGroup noWrap spacing="tight">
341+
<Button
342+
kind={'tertiary'}
343+
className="h-fit w-fit"
344+
onClick={() => setView('collapsed')}
345+
>
346+
<Icon
347+
source={Icons.grid}
348+
color={view === 'collapsed' ? 'highlight' : 'default'}
349+
/>
350+
</Button>
351+
<Button
352+
onClick={() => setView('expanded')}
353+
kind={'tertiary'}
354+
className="h-fit w-fit"
355+
>
356+
<Icon
357+
source={Icons.list}
358+
color={view === 'expanded' ? 'highlight' : 'default'}
359+
/>
360+
</Button>
361+
</ButtonGroup>
362+
</div>
363+
<div className="flex items-center gap-2">
364+
<Button
365+
onClick={() =>
366+
handleOrderChange(
367+
queryParams.order === ''
368+
? 'desc'
369+
: queryParams.order === 'desc'
370+
? 'asc'
371+
: 'desc'
372+
)
373+
}
374+
kind="tertiary"
375+
className="h-fit w-fit"
376+
aria-label={`Sort ${queryParams.order === 'asc' ? 'descending' : 'ascending'}`}
377+
>
378+
<Icon
379+
source={Icons.sort}
380+
className={cn(
381+
queryParams.order === 'desc' && 'scale-x-[-1]'
382+
)}
383+
/>
384+
</Button>
385+
</div>
386+
<div className="flex items-center gap-2">
387+
<Select
388+
label=""
389+
labelInline
390+
name="select"
391+
onChange={handleSortChange}
392+
options={[
393+
{ label: 'Recent', value: 'recent' },
394+
{ label: 'Alphabetical', value: 'alphabetical' },
395+
]}
396+
/>
397+
</div>
398+
399+
<Tray
400+
size="narrow"
401+
open={open}
402+
onOpenChange={setOpen}
403+
trigger={
404+
<Button
405+
kind="secondary"
406+
className="lg:hidden"
407+
onClick={() => setOpen(true)}
408+
>
409+
Filter
410+
</Button>
411+
}
412+
>
413+
<Filter
414+
setOpen={setOpen}
415+
options={filterOptions}
416+
setSelectedOptions={handleFilterChange}
417+
selectedOptions={queryParams.filters}
418+
/>
419+
</Tray>
420+
</div>
421+
</div>
421422
{Object.entries(queryParams.filters).some(
422423
([key, value]) =>
423424
key !== 'sort' && Array.isArray(value) && value.length > 0
@@ -439,7 +440,7 @@ const ListingComponent: React.FC<ListingProps> = ({
439440
</div>
440441
)}
441442

442-
{facets && datasetDetails?.length > 0 && (
443+
{facets && datasetDetails?.length > 0 ? (
443444
<GraphqlPagination
444445
totalRows={count}
445446
pageSize={queryParams.pageSize}
@@ -493,6 +494,8 @@ const ListingComponent: React.FC<ListingProps> = ({
493494
);
494495
})}
495496
</GraphqlPagination>
497+
) : (
498+
<Loading/>
496499
)}
497500
</div>
498501
</div>

0 commit comments

Comments
 (0)