HomeTabLink 2개, TimeFrameDropdownButton 1개로 구성
설치
npm i -D react-icon
를 통해 react-icon package 설치
Import
import { MdTrendingUp, MdAccessTime, MdArrowDropDown, MdMoreVert } from 'react-icons/md';
아이콘 찾기
https://react-icons.github.io/react-icons/icons?name=md 에서 아이콘 이름 검색 가능
useLocacion
Hook 을 통해 location 객체를 참조하여 현재 pathName 이 recent (RecentPostPage) 인지 판단onSelect
callback function 을 실행onOutSideClick
callback function 을 실행 trendingPosts: async (parent: any, { offset = 0, limit = 20, timeframe = 'month' }) => {
const timeframes: [string, number][] = [
['day', 1],
['week', 7],
['month', 30],
['year', 365],
];
const selectedTimeframe = timeframes.find(([text]) => text === timeframe);
if (!selectedTimeframe) {
throw new ApolloError('Invalid timeframe', 'BAD_REQUEST');
}
if (limit > 100) {
throw new ApolloError('Limit is too high', 'BAD_REQUEST');
}
let ids: string[] = [];
const cacheKey = `trending-${selectedTimeframe[0]}-${offset}-${limit}`;
const cachedIds = lruCache.get(cacheKey);
if (cachedIds) {
ids = cachedIds;
} else {
const rows = (await getManager().query(
`
select posts.id, posts.title, SUM(score) as score from post_scores
inner join posts on post_scores.fk_post_id = posts.id
where post_scores.created_at > now() - interval '${selectedTimeframe[1]} days'
and posts.released_at > now() - interval '${selectedTimeframe[1] * 1.5} days'
group by posts.id
order by score desc, posts.id desc
offset $1
limit $2
`,
[offset, limit]
)) as { id: string; score: number }[];
ids = rows.map(row => row.id);
lruCache.set(cacheKey, ids);
}