125 lines
4.3 KiB
TypeScript
125 lines
4.3 KiB
TypeScript
import { ChangeEvent, useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { PATHS } from '@/shared/constants/paths';
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mutation';
|
|
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
|
|
import { NoticeItem } from '@/entities/support/model/types';
|
|
import { SupportNoticeItem } from '@/entities/support/ui/notice-item';
|
|
import { HeaderType } from '@/entities/common/model/types';
|
|
import {
|
|
useSetHeaderTitle,
|
|
useSetHeaderType,
|
|
useSetFooterMode,
|
|
useSetOnBack
|
|
} from '@/widgets/sub-layout/use-sub-layout';
|
|
|
|
export const NoticeListPage = () => {
|
|
const { navigate } = useNavigate();
|
|
const { t } = useTranslation();
|
|
|
|
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
|
|
const [searchKeyword, setSearchKeyword] = useState<string>('');
|
|
const [selectedCategory, setSelectedCategory] = useState<string>('ALL');
|
|
const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
|
|
|
|
useSetHeaderTitle(t('support.notice.title'));
|
|
useSetHeaderType(HeaderType.LeftArrow);
|
|
useSetFooterMode(false);
|
|
useSetOnBack(() => {
|
|
navigate(PATHS.home);
|
|
});
|
|
|
|
const { mutateAsync: noticeList } = useNoticeListMutation();
|
|
const callList = () => {
|
|
let listParams = {
|
|
category: selectedCategory,
|
|
searchKeyword: searchKeyword,
|
|
...{page: pageParam}
|
|
};
|
|
|
|
noticeList(listParams).then((rs) => {
|
|
console.log(rs)
|
|
setResultList(rs.content);
|
|
});
|
|
};
|
|
|
|
const onClickToAction = () => {
|
|
// Remove focus from active element
|
|
if (document.activeElement instanceof HTMLElement) {
|
|
document.activeElement.blur();
|
|
}
|
|
callList();
|
|
};
|
|
|
|
const getNoticeList = () => {
|
|
let rs = [];
|
|
for(let i=0;i<resultList.length;i++){
|
|
rs.push(
|
|
<SupportNoticeItem
|
|
key={ `key-support-notice-item-${i}` }
|
|
id={ resultList[i]?.id }
|
|
title={ resultList[i]?.title }
|
|
category={ resultList[i]?.category }
|
|
regDate={ resultList[i]?.regDate }
|
|
isNew={ resultList[i]?.isNew }
|
|
></SupportNoticeItem>
|
|
)
|
|
}
|
|
return rs;
|
|
};
|
|
|
|
useEffect(() => {
|
|
callList();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [selectedCategory]);
|
|
|
|
return (
|
|
<>
|
|
<main>
|
|
<div className="tab-content">
|
|
<div className="tab-pane sub active">
|
|
<div className="notice114">
|
|
<div className="notice-controls">
|
|
<div className="notice-search">
|
|
<span
|
|
className="ic16 search"
|
|
aria-hidden="true"
|
|
onClick={ () => onClickToAction() }
|
|
></span>
|
|
<input
|
|
type="text"
|
|
placeholder={t('support.notice.searchPlaceholder')}
|
|
value={ searchKeyword }
|
|
onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchKeyword(e.target.value) }
|
|
onKeyDown={ (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
|
|
onClickToAction();
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="notice-filter">
|
|
<select
|
|
className="flex-1"
|
|
value={selectedCategory}
|
|
onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectedCategory(e.target.value)}
|
|
>
|
|
<option value="ALL">{t('support.notice.categories.ALL')}</option>
|
|
<option value="NOTICE">{t('support.notice.categories.NOTICE')}</option>
|
|
<option value="EVENT">{t('support.notice.categories.EVENT')}</option>
|
|
<option value="SERVICE">{t('support.notice.categories.SERVICE')}</option>
|
|
<option value="IMPORTANT">{t('support.notice.categories.IMPORTANT')}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="notice-list-114">
|
|
{ getNoticeList() }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}; |