Allow users to choose trending timeframe

velopert · velopert · commit 2e65a7ea2c7c · 2021-05-16T05:42:10.000+09:00
diff --git a/src/components/home/HomeTab.tsx b/src/components/home/HomeTab.tsx
@@ -2,11 +2,19 @@ import React, { useRef } from 'react';
 import styled from 'styled-components';
 import { NavLink, useLocation } from 'react-router-dom';
 import palette from '../../lib/styles/palette';
-import { MdTrendingUp, MdAccessTime, MdMoreVert } from 'react-icons/md';
+import {
+  MdTrendingUp,
+  MdAccessTime,
+  MdMoreVert,
+  MdArrowDropDown,
+} from 'react-icons/md';
 import { useSpring, animated } from 'react-spring';
 import { mediaQuery } from '../../lib/styles/media';
 import useToggle from '../../lib/hooks/useToggle';
 import HomeMobileHeadExtra from './HomeMobileHeadExtra';
+import TimeframePicker from './TimeframePicker';
+import { useTimeframe } from './hooks/useTimeframe';
+import { timeframes } from './utils/timeframeMap';
 
 export type HomeTabProps = {};
 
@@ -15,7 +23,10 @@ function HomeTab(props: HomeTabProps) {
 
   const isRecent = location.pathname === '/recent';
   const [extra, toggle] = useToggle(false);
+  const [timeframePicker, toggleTimeframePicker] = useToggle(false);
   const moreButtonRef = useRef<HTMLDivElement | null>(null);
+  const timeframeRef = useRef<HTMLDivElement | null>(null);
+  const [timeframe] = useTimeframe();
 
   const onClose = (e: React.MouseEvent<HTMLElement>) => {
     if (!moreButtonRef.current) return;
@@ -28,6 +39,17 @@ function HomeTab(props: HomeTabProps) {
     toggle();
   };
 
+  const onCloseTimeframePicker = (e: React.MouseEvent<HTMLElement>) => {
+    if (!timeframeRef.current) return;
+    if (
+      e.target === timeframeRef.current ||
+      timeframeRef.current.contains(e.target as Node)
+    ) {
+      return;
+    }
+    toggleTimeframePicker();
+  };
+
   const springStyle = useSpring({
     left: isRecent ? '50%' : '0%',
     config: {
@@ -38,23 +60,37 @@ function HomeTab(props: HomeTabProps) {
 
   return (
     <Wrapper>
-      <Block>
-        <NavLink
-          to="/"
-          activeClassName="active"
-          isActive={(match, location) => {
-            return ['/', '/trending'].indexOf(location.pathname) !== -1;
-          }}
-        >
-          <MdTrendingUp />
-          트렌딩
-        </NavLink>
-        <NavLink to="/recent" activeClassName="active">
-          <MdAccessTime />
-          최신
-        </NavLink>
-        <Indicator style={springStyle} />
-      </Block>
+      <Left>
+        <Block>
+          <NavLink
+            to="/"
+            activeClassName="active"
+            isActive={(match, location) => {
+              return ['/', '/trending'].indexOf(location.pathname) !== -1;
+            }}
+          >
+            <MdTrendingUp />
+            트렌딩
+          </NavLink>
+          <NavLink to="/recent" activeClassName="active">
+            <MdAccessTime />
+            최신
+          </NavLink>
+          <Indicator style={springStyle} />
+        </Block>
+        {['/', '/trending'].includes(location.pathname) && (
+          <>
+            <Selector onClick={toggleTimeframePicker} ref={timeframeRef}>
+              {timeframes.find((t) => t[0] === timeframe)![1]}{' '}
+              <MdArrowDropDown />
+            </Selector>
+            <TimeframePicker
+              visible={timeframePicker}
+              onClose={onCloseTimeframePicker}
+            />
+          </>
+        )}
+      </Left>
       <MobileMore ref={moreButtonRef}>
         <MdMoreVert className="more" onClick={toggle} />
       </MobileMore>
@@ -82,6 +118,12 @@ const MobileMore = styled.div`
   justify-content: center;
 `;
 
+const Left = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+`;
+
 const Block = styled.div`
   display: flex;
   position: relative;
@@ -126,4 +168,30 @@ const Indicator = styled(animated.div)`
   background: ${palette.gray8};
 `;
 
+const Selector = styled.div`
+  background: white;
+  height: 2rem;
+  width: 5rem;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-weight: 600;
+  color: ${palette.gray7};
+  font-size: 0.875rem;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05);
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  cursor: pointer;
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      opacity: 0.75;
+    }
+  }
+`;
+
 export default HomeTab;
diff --git a/src/components/home/TimeframePicker.tsx b/src/components/home/TimeframePicker.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import styled from 'styled-components';
+import palette from '../../lib/styles/palette';
+import { useTransition, animated } from 'react-spring';
+import OutsideClickHandler from 'react-outside-click-handler';
+import { useTimeframe } from './hooks/useTimeframe';
+import { timeframes } from './utils/timeframeMap';
+
+export type TimeframePickerProps = {
+  visible: boolean;
+  onClose: (e: React.MouseEvent<HTMLElement>) => void;
+};
+
+function TimeframePicker({ visible, onClose }: TimeframePickerProps) {
+  const transition = useTransition(visible, null, {
+    from: {
+      opacity: 0,
+      transform: 'scale(0.8)',
+    },
+    enter: {
+      opacity: 1,
+      transform: 'scale(1)',
+    },
+    leave: {
+      opacity: 0,
+      transform: 'scale(0.8)',
+    },
+    config: {
+      tension: 350,
+      friction: 26,
+    },
+  });
+
+  const [timeframe, setTimeframe] = useTimeframe();
+
+  return (
+    <>
+      {transition.map(({ item, key, props }) =>
+        item ? (
+          <Aligner key={key}>
+            <OutsideClickHandler onOutsideClick={onClose} key={key}>
+              <Block style={props} onClick={onClose}>
+                <ul>
+                  {timeframes.map(([value, text]) => (
+                    <li
+                      key={value}
+                      onClick={() => setTimeframe(value)}
+                      className={value === timeframe ? 'active' : ''}
+                    >
+                      {text}
+                    </li>
+                  ))}
+                </ul>
+              </Block>
+            </OutsideClickHandler>
+          </Aligner>
+        ) : null,
+      )}
+    </>
+  );
+}
+
+const Aligner = styled.div`
+  position: absolute;
+  right: 0;
+  top: 100%;
+  z-index: 5;
+`;
+const Block = styled(animated.div)`
+  margin-top: 0.5rem;
+  width: 12rem;
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+  background: white;
+  color: ${palette.gray9};
+  transform-origin: top right;
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+  }
+  li {
+    cursor: pointer;
+    &:hover {
+      background: ${palette.gray0};
+    }
+    font-weight: 600;
+
+    font-size: 0.875rem;
+    padding: 0.75rem 1rem;
+
+    &.active {
+      color: ${palette.teal6};
+    }
+  }
+  li + li {
+    border-top: 1px solid ${palette.gray1};
+  }
+  .contact {
+    border-top: 1px solid #f1f3f5;
+    padding: 1rem;
+    h5 {
+      margin: 0;
+      font-size: 0.75rem;
+    }
+    .email {
+      color: ${palette.gray8};
+      font-size: 0.75rem;
+    }
+  }
+`;
+
+export default TimeframePicker;
diff --git a/src/components/home/hooks/useTimeframe.ts b/src/components/home/hooks/useTimeframe.ts
@@ -0,0 +1,16 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useMemo } from 'react';
+import { bindActionCreators } from 'redux';
+import home from '../../../modules/home';
+import { RootState } from '../../../modules';
+
+export function useTimeframe() {
+  const dispatch = useDispatch();
+  const actions = useMemo(
+    () => bindActionCreators(home.actions, dispatch),
+    [dispatch],
+  );
+  const timeframe = useSelector((state: RootState) => state.home.timeframe);
+
+  return [timeframe, actions.choose] as const;
+}
diff --git a/src/components/home/utils/timeframeMap.ts b/src/components/home/utils/timeframeMap.ts
@@ -0,0 +1,10 @@
+import { Timeframe } from '../../../modules/home';
+
+export const timeframeMap: Record<Timeframe, string> = {
+  day: '오늘',
+  week: '이번 주',
+  month: '이번 달',
+  year: '올해',
+};
+
+export const timeframes = Object.entries(timeframeMap) as [Timeframe, string][];
diff --git a/src/modules/home.ts b/src/modules/home.ts
@@ -0,0 +1,21 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export type Timeframe = 'day' | 'week' | 'month' | 'year';
+export interface HomeState {
+  timeframe: Timeframe;
+}
+
+const initialState: HomeState = {
+  timeframe: 'week',
+};
+const home = createSlice({
+  name: 'home',
+  initialState,
+  reducers: {
+    choose(state, action: PayloadAction<Timeframe>) {
+      state.timeframe = action.payload;
+    },
+  },
+});
+
+export default home;
diff --git a/src/modules/index.ts b/src/modules/index.ts
@@ -5,6 +5,7 @@ import header, { HeaderState } from './header';
 import post, { PostState } from './post';
 import error, { ErrorState } from './error';
 import scroll, { ScrollState } from './scroll';
+import home, { HomeState } from './home';
 
 export type RootState = {
   core: CoreState;
@@ -13,6 +14,7 @@ export type RootState = {
   post: PostState;
   error: ErrorState;
   scroll: ScrollState;
+  home: HomeState;
 };
 
 const rootReducer = combineReducers({
@@ -22,6 +24,7 @@ const rootReducer = combineReducers({
   post: post.reducer,
   error: error.reducer,
   scroll: scroll.reducer,
+  home: home.reducer,
 });
 
 export default rootReducer;
diff --git a/src/pages/home/hooks/useTrendingPosts.ts b/src/pages/home/hooks/useTrendingPosts.ts
@@ -5,13 +5,16 @@ import {
 import { useQuery } from '@apollo/react-hooks';
 import { useCallback, useState } from 'react';
 import useScrollPagination from '../../../lib/hooks/useScrollPagination';
+import { useTimeframe } from '../../../components/home/hooks/useTimeframe';
 
 export default function useTrendingPosts() {
+  const [timeframe] = useTimeframe();
   const { data, loading, fetchMore } = useQuery<GetTrendingPostsResponse>(
     GET_TRENDING_POSTS,
     {
       variables: {
         limit: 24,
+        timeframe: timeframe,
       },
       // https://github.com/apollographql/apollo-client/issues/1617
       notifyOnNetworkStatusChange: true,
@@ -42,7 +45,7 @@ export default function useTrendingPosts() {
           );
 
           const uniquePosts = fetchMoreResult.trendingPosts.filter(
-            post => !idMap[post.id],
+            (post) => !idMap[post.id],
           );
 
           return {
