Skip to content

Commit

Permalink
Add basic ownership overview search
Browse files Browse the repository at this point in the history
  • Loading branch information
@simon-debruijn
simon-debruijn committed Nov 21, 2024
1 parent 580450f commit 1bc4b19
Showing 1 changed file with 150 additions and 94 deletions.
244 changes: 150 additions & 94 deletions src/pages/manage/ownerships/index.page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import capitalize from 'lodash/capitalize';
import { useRouter } from 'next/router';
import { useMemo, useState } from 'react';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { UseQueryResult } from 'react-query';

import {
Expand All @@ -8,13 +10,17 @@ import {
OwnershipState,
useGetOwnershipRequestsQuery,
} from '@/hooks/api/ownerships';
import { List } from '@/ui/List';
import { useShallowRouter } from '@/hooks/useShallowRouter';
import { OwnershipsTable } from '@/pages/organizers/[organizerId]/ownerships/OwnershipsTable';
import { Button, ButtonVariants } from '@/ui/Button';
import { Icons } from '@/ui/Icon';
import { Inline } from '@/ui/Inline';
import { Input } from '@/ui/Input';
import { Page } from '@/ui/Page';
import { Pagination } from '@/ui/Pagination';
import { Panel } from '@/ui/Panel';
import { Select } from '@/ui/Select';
import { Spinner } from '@/ui/Spinner';
import { Text } from '@/ui/Text';
import { getValueFromTheme } from '@/ui/theme';
import type { FetchError } from '@/utils/fetchFromApi';

Expand All @@ -23,28 +29,72 @@ const getGlobalValue = getValueFromTheme('global');

const itemsPerPage = 14;

const Actions = ({ request }: { request: OwnershipRequest }) => {
const { t } = useTranslation();

if (request.state === OwnershipState.REQUESTED) {
return (
<Inline spacing={3}>
<Button
variant={ButtonVariants.SUCCESS}
iconName={Icons.CHECK_CIRCLE}
spacing={3}
onClick={() => {
// setIsQuestionModalVisible(true);
// setSelectedRequest(request);
// setActionType(ActionType.APPROVE);
}}
>
{t('organizers.ownerships.table.actions.approve')}
</Button>
<Button
variant={ButtonVariants.DANGER}
iconName={Icons.TIMES_CIRCLE}
spacing={3}
onClick={() => {
// setIsQuestionModalVisible(true);
// setSelectedRequest(request);
// setActionType(ActionType.REJECT);
}}
>
{t('organizers.ownerships.table.actions.reject')}
</Button>
</Inline>
);
}

if (request.state === OwnershipState.DELETED) {
return null;
}

return (
<Button
variant={ButtonVariants.ICON}
iconName={Icons.TRASH}
onClick={() => {}}
/>
);
};

const OwnershipsOverviewPage = () => {
const router = useRouter();
const shallowRouter = useShallowRouter();

const [filteredState, setFilteredState] = useState<OwnershipState>(
OwnershipState.REJECTED,
);
const state =
(router.query.state as OwnershipState | undefined) ??
OwnershipState.REQUESTED;
const itemId = router.query.itemId as OwnershipState | undefined;

const page = parseInt((router.query.page as string) ?? '1');

const getOwnershipRequestsQuery = useGetOwnershipRequestsQuery(
{
state: filteredState,
paginationOptions: {
start: (page - 1) * itemsPerPage,
limit: itemsPerPage,
},
},
{
onSuccess: (data) => console.log('data', data),
onError: (err) => console.log('err', err),
const getOwnershipRequestsQuery = useGetOwnershipRequestsQuery({
itemId,
state,
paginationOptions: {
start: (page - 1) * itemsPerPage,
limit: itemsPerPage,
},
) as UseQueryResult<GetOwnershipRequestsResponse, FetchError>;
}) as UseQueryResult<GetOwnershipRequestsResponse, FetchError>;

const requests = useMemo(
() => getOwnershipRequestsQuery.data?.member ?? [],
Expand All @@ -54,88 +104,94 @@ const OwnershipsOverviewPage = () => {
const totalItems = getOwnershipRequestsQuery.data?.totalItems ?? 0;
const hasMoreThanOnePage = Math.ceil(totalItems / itemsPerPage) > 1;

const content = useMemo(() => {
if (getOwnershipRequestsQuery.isLoading) {
return <Spinner />;
const handleChangeState = async (newState: string) => {
const params: Record<string, string> = {};

if (newState !== state) {
params['page'] = '1';
}

return (
<Panel
css={`
border: none !important;
box-shadow: unset !important;
`}
>
<Select
selected={filteredState}
onChange={(event) =>
setFilteredState(event.target.value as OwnershipState)
}
>
{Object.values(OwnershipState).map((state) => (
<option key={state} value={state}>
{state}
</option>
))}
</Select>
<List>
{requests.map((request, index) => (
<List.Item
key={request.id}
backgroundColor={getValue('listItem.backgroundColor')}
css={`
margin-top: 1rem;
margin-bottom: 1rem;
border-radius: 0.5rem;
box-shadow: ${getGlobalValue('boxShadow.medium')};
`}
>
<Text>
{request.ownerEmail ?? request.ownerId} {request.state}
</Text>
</List.Item>
))}
</List>
{hasMoreThanOnePage && (
<Panel.Footer
css={`
border: none !important;
background-color: white !important;
`}
>
<Pagination
currentPage={page}
totalItems={totalItems}
perPage={itemsPerPage}
onChangePage={async (page) => {
await router.push(
{
pathname: router.pathname,
query: { ...router.query, page },
},
undefined,
{
shallow: true,
},
);
}}
/>
</Panel.Footer>
)}
</Panel>
);
}, [
getOwnershipRequestsQuery.isLoading,
hasMoreThanOnePage,
requests,
router,
totalItems,
]);
params['state'] = newState;

await shallowRouter.pushSearchParams(params);
};

const handleChangeItemId = async (newItemId: string | undefined) => {
const params: Record<string, string> = {};

if (newItemId !== itemId) {
params['page'] = '1';
}

params['itemId'] = newItemId;

await shallowRouter.pushSearchParams(params);
};

const handleChangePage = async (page: number) => {
await shallowRouter.pushSearchParams({ page: `${page}` });
};

return (
<Page>
<Page.Title>Ownerships</Page.Title>
<Page.Content>{content}</Page.Content>
<Page.Content>
<Panel
css={`
border: none !important;
box-shadow: unset !important;
`}
spacing={4}
>
<Select
value={state}
onChange={async (event) => {
await handleChangeState(event.target.value);
}}
>
{Object.values(OwnershipState).map((state) => (
<option key={state} value={state}>
{capitalize(state)}
</option>
))}
</Select>

<Input
placeholder="itemId"
defaultValue={itemId ?? ''}
onBlur={(e) => handleChangeItemId(e.target.value || undefined)}
onKeyDown={async (e) => {
if (e.key !== 'Enter') return;
await handleChangeItemId(e.target.value || undefined);
}}
/>

{getOwnershipRequestsQuery.isLoading ? (
<Spinner />
) : (
<OwnershipsTable
requests={requests}
renderActions={(request) => <Actions request={request} />}
/>
)}

{hasMoreThanOnePage && (
<Panel.Footer
css={`
border: none !important;
background-color: white !important;
`}
>
<Pagination
currentPage={page}
totalItems={totalItems}
perPage={itemsPerPage}
onChangePage={handleChangePage}
/>
</Panel.Footer>
)}
</Panel>
</Page.Content>
</Page>
);
};
Expand Down

0 comments on commit 1bc4b19

Please sign in to comment.