Add Search Api/Components.

This commit is contained in:
Brian Cao 2023-08-10 13:26:33 -07:00
parent 45888fabe6
commit dcf8b2edaa
37 changed files with 1069 additions and 287 deletions

View file

@ -1,24 +1,37 @@
import { useState } from 'react';
import { Button, Icon, Modal, ModalTrigger, useToasts, Text, Flexbox } from 'react-basics';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
import PageHeader from 'components/layout/PageHeader';
import TeamsTable from 'components/pages/settings/teams/TeamsTable';
import Page from 'components/layout/Page';
import Icons from 'components/icons';
import TeamJoinForm from './TeamJoinForm';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
import TeamsTable from 'components/pages/settings/teams/TeamsTable';
import useApi from 'hooks/useApi';
import useMessages from 'hooks/useMessages';
import { ROLES } from 'lib/constants';
import useUser from 'hooks/useUser';
import { ROLES } from 'lib/constants';
import { useState } from 'react';
import { Button, Flexbox, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
import TeamJoinForm from './TeamJoinForm';
import useApiFilter from 'hooks/useApiFilter';
export default function TeamsList() {
const { user } = useUser();
const { formatMessage, labels, messages } = useMessages();
const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
useApiFilter();
const [update, setUpdate] = useState(0);
const { get, useQuery } = useApi();
const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));
const hasData = data && data.length !== 0;
const { data, isLoading, error } = useQuery(['teams', update, filter, page, pageSize], () => {
return get(`/teams`, {
filter,
page,
pageSize,
});
});
const hasData = data && data?.data.length !== 0;
const isFiltered = filter;
const { showToast } = useToasts();
const handleSave = () => {
@ -71,15 +84,26 @@ export default function TeamsList() {
return (
<Page loading={isLoading} error={error}>
<PageHeader title={formatMessage(labels.teams)}>
{hasData && (
{(hasData || isFiltered) && (
<Flexbox gap={10}>
{joinButton}
{createButton}
</Flexbox>
)}
</PageHeader>
{hasData && <TeamsTable data={data} onDelete={handleDelete} />}
{!hasData && (
{(hasData || isFiltered) && (
<TeamsTable
data={data}
onDelete={handleDelete}
onFilterChange={handleFilterChange}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
filterValue={filter}
/>
)}
{!hasData && !isFiltered && (
<EmptyPlaceholder message={formatMessage(messages.noTeams)}>
<Flexbox gap={10}>
{joinButton}