Skip to content

Commit

Permalink
add ArticleList component
Browse files Browse the repository at this point in the history
  • Loading branch information
yuki-takei committed Oct 11, 2023
1 parent f99ed3a commit 1bde751
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 2 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
import React, { useCallback, useState } from 'react';

import type {
IPageHasId,
} from '@growi/core';
import { useTranslation } from 'next-i18next';

import { toastSuccess } from '~/client/util/toastr';
import { ForceHideMenuItems } from '~/components/Common/Dropdown/PageItemControl';
import PaginationWrapper from '~/components/PaginationWrapper';
import { IPagingResult } from '~/interfaces/paging-result';
import { OnDeletedFunction } from '~/interfaces/ui';
import { useIsSharedUser } from '~/stores/context';
import {
mutatePageTree,
useSWRxPageList,
} from '~/stores/page-listing';


type SubstanceProps = {
pagingResult: IPagingResult<IPageHasId> | undefined,
activePage: number,
setActivePage: (activePage: number) => void,
onPagesDeleted?: OnDeletedFunction,
}


const ArticleListSubstance = (props: SubstanceProps): JSX.Element => {

const { t } = useTranslation();

const {
pagingResult, activePage, setActivePage, onPagesDeleted,
} = props;

const pageDeletedHandler: OnDeletedFunction = useCallback((...args) => {
const path = args[0];
const isCompletely = args[2];
if (path == null || isCompletely == null) {
toastSuccess(t('deleted_page'));
}
else {
toastSuccess(t('deleted_pages_completely', { path }));
}

mutatePageTree();
if (onPagesDeleted != null) {
onPagesDeleted(...args);
}
}, [onPagesDeleted, t]);

if (pagingResult == null) {
return (
<div className="wiki">
<div className="text-muted text-center">
<i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
</div>
</div>
);
}

const showPager = pagingResult.totalCount > pagingResult.limit;

return (
<>
<table className="table table-bordered">
<thead>
<tr>
<th>foo</th>
</tr>
</thead>
<tbody className="overflow-auto">
<tr>
<td className="text-center">bar
</td>
</tr>
</tbody>
</table>

{ showPager && (
<div className="my-4">
<PaginationWrapper
activePage={activePage}
changePage={selectedPageNumber => setActivePage(selectedPageNumber)}
totalItemsCount={pagingResult.totalCount}
pagingLimit={pagingResult.limit}
align="center"
/>
</div>
) }
</>
);
};

export type DescendantsPageListProps = {
path: string,
limit?: number,
forceHideMenuItems?: ForceHideMenuItems,
}

export const ArticleList = (props: DescendantsPageListProps): JSX.Element => {
const { path, limit, forceHideMenuItems } = props;

const [activePage, setActivePage] = useState(1);

const { data: isSharedUser } = useIsSharedUser();

const { data: pagingResult, error, mutate } = useSWRxPageList(isSharedUser ? null : path, activePage, limit);

if (error != null) {
return (
<div className="my-5">
<div className="text-danger">{error.message}</div>
</div>
);
}

return (
<ArticleListSubstance
pagingResult={pagingResult}
activePage={activePage}
setActivePage={setActivePage}
onPagesDeleted={() => mutate()}
/>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './ArticleList';
4 changes: 2 additions & 2 deletions apps/app/src/pages/_cms/[id].page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import Head from 'next/head';

import { DescendantsPageList } from '~/components/DescendantsPageList';
import { GrowiSubNavigation } from '~/components/Navbar/GrowiSubNavigation';
import { ArticleList } from '~/features/cms/client/components/ArticleList';
import type { CrowiRequest } from '~/interfaces/crowi-request';
import type { RendererConfig } from '~/interfaces/services/renderer';
import { useDrawerMode } from '~/stores/ui';
Expand Down Expand Up @@ -67,7 +67,7 @@ const Page: NextPageWithLayout<CommonProps> = (props: Props) => {
</header>

<div className="grw-container-convertible container-lg mb-5 pb-5" data-testid="tags-page">
<DescendantsPageList path={props.currentPathname} />
<ArticleList path={props.currentPathname} />
</div>
</div>
</>
Expand Down

0 comments on commit 1bde751

Please sign in to comment.