Implement reading-list

Author: velopert

src/App.tsx

@@ -12,6 +12,7 @@ import ErrorBoundary from './components/error/ErrorBoundary';
 import NotFoundPage from './pages/NotFoundPage';
 import { Helmet } from 'react-helmet-async';
 import HomePage from './pages/home/HomePage';
+import MainPageTemplate from './components/main/MainPageTemplate';
 
 const loadableConfig = {
   fallback: <PageTemplate />,
@@ -38,6 +39,12 @@ const SettingPage = loadable(
   loadableConfig,
 );
 const SuccessPage = loadable(() => import('./pages/SuccessPage'));
+const ReadingListPage = loadable(
+  () => import('./pages/readingList/ReadingListPage'),
+  {
+    fallback: <MainPageTemplate />,
+  },
+);
 
 interface AppProps {}
 
@@ -72,6 +79,7 @@ const App: React.FC<AppProps> = props => {
           <Route path={['/policy/:type?']} component={PolicyPage} />
           <Route path="/setting" component={SettingPage} />
           <Route path="/success" component={SuccessPage} />
+          <Route path="/lists/:type(liked|read)" component={ReadingListPage} />
           <Route component={NotFoundPage} />
         </Switch>
       </ErrorBoundary>

src/components/common/HorizontalTab.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
 import palette from '../../lib/styles/palette';
 import { useSpring, animated } from 'react-spring';
@@ -10,13 +10,17 @@ export type HorizontalTabProps = {
   children: React.ReactElement<TabItemProps>[];
   activeTab: string;
   tabWidth: number;
+  align: 'center' | 'left';
+  theme: 'teal' | 'gray';
 };
 
 function HorizontalTab({
   className,
   children,
   activeTab,
   tabWidth,
+  align,
+  theme,
 }: HorizontalTabProps) {
   const activeIndex = React.Children.toArray(children).findIndex(
     tab => tab.props.name === activeTab,
@@ -34,22 +38,25 @@ function HorizontalTab({
   });
 
   return (
-    <Block className={className}>
+    <Block className={className} align={align}>
       <div className="tab-wrapper">
         {React.Children.map(children, tab => {
           return React.cloneElement(tab, {
             active: tab.props.name === activeTab,
             width: `${tabWidth}rem`,
+            theme,
           });
         })}
-        <Indicator style={springStyle} />
+        <Indicator style={springStyle} theme={theme} />
       </div>
     </Block>
   );
 }
 
 HorizontalTab.defaultProps = {
   tabWidth: 8,
+  align: 'center',
+  theme: 'teal',
 };
 
 export type TabItemProps = {
@@ -58,42 +65,62 @@ export type TabItemProps = {
   to: string;
   active?: boolean;
   width?: string;
+  theme: 'teal' | 'gray';
 };
 
-function TabItem({ name, text, to, active, width }: TabItemProps) {
+function TabItem({ name, text, to, active, width, theme }: TabItemProps) {
   return (
-    <StyledLink to={to} className={active ? 'active' : ''} style={{ width }}>
+    <StyledLink
+      to={to}
+      className={active ? 'active' : ''}
+      style={{ width }}
+      theme={theme}
+    >
       {text}
     </StyledLink>
   );
 }
 
-const Block = styled.div`
+TabItem.defaultProps = {
+  theme: 'teal',
+};
+
+const Block = styled.div<{ align: 'center' | 'left' }>`
   display: flex;
-  justify-content: center;
+  ${props =>
+    props.align === 'center' &&
+    css`
+      justify-content: center;
+    `}
   .tab-wrapper {
     display: flex;
     position: relative;
   }
 `;
 
-const Indicator = styled(animated.div)`
+const Indicator = styled(animated.div)<{ theme: 'teal' | 'gray' }>`
   height: 2px;
   display: block;
   position: absolute;
   bottom: 0px;
   background: ${palette.teal5};
+  ${props =>
+    props.theme === 'gray' &&
+    css`
+      background: ${palette.gray8};
+    `}
 `;
 
-const StyledLink = styled(Link)`
+const StyledLink = styled(Link)<{
+  theme: 'teal' | 'gray';
+}>`
   width: 8rem;
   height: 3rem;
-  font-size: 1.3125rem;
+  font-size: 1.125rem;
   ${media.small} {
-    height: 2.5rem;
     font-size: 1rem;
   }
-  color: ${palette.gray7};
+  color: ${palette.gray6};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -102,6 +129,11 @@ const StyledLink = styled(Link)`
   &.active {
     font-weight: bold;
     color: ${palette.teal5};
+    ${props =>
+      props.theme === 'gray' &&
+      css`
+        color: ${palette.gray8};
+      `}
   }
 `;
 

src/components/common/PostCard.tsx

@@ -16,9 +16,10 @@ import usePrefetchPost from '../../lib/hooks/usePrefetchPost';
 
 export type PostCardProps = {
   post: PartialPost;
+  forHome?: boolean;
 };
 
-function PostCard({ post }: PostCardProps) {
+function PostCard({ post, forHome }: PostCardProps) {
   const url = `/@${post.user.username}/${post.url_slug}`;
 
   const prefetch = usePrefetchPost(post.user.username, post.url_slug);
@@ -35,7 +36,11 @@ function PostCard({ post }: PostCardProps) {
   };
 
   return (
-    <Block onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+    <Block
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      forHome={!!forHome}
+    >
       {post.thumbnail && (
         <StyledLink to={url}>
           <RatioImage
@@ -83,9 +88,9 @@ function PostCard({ post }: PostCardProps) {
   );
 }
 
-export function PostCardSkeleton() {
+export function PostCardSkeleton({ forHome }: { forHome?: boolean }) {
   return (
-    <SkeletonBlock>
+    <SkeletonBlock forHome={!!forHome}>
       <div className="skeleton-thumbnail-wrapper">
         <Skeleton className="skeleton-thumbnail"></Skeleton>
       </div>
@@ -136,7 +141,7 @@ const StyledLink = styled(Link)`
   text-decoration: none;
 `;
 
-const Block = styled.div`
+const Block = styled.div<{ forHome: boolean }>`
   width: 20rem;
   background: white;
   border-radius: 4px;
@@ -153,6 +158,18 @@ const Block = styled.div`
   overflow: hidden;
   display: flex;
   flex-direction: column;
+
+  ${props =>
+    !props.forHome &&
+    css`
+      ${mediaQuery(1440)} {
+        width: calc(25% - 2rem);
+      }
+      ${mediaQuery(1312)} {
+        width: calc(33% - 1.8125rem);
+      }
+    `}
+
   ${mediaQuery(944)} {
     width: calc(50% - 2rem);
   }

src/components/common/PostCardGrid.tsx

@@ -6,14 +6,20 @@ import { mediaQuery } from '../../lib/styles/media';
 
 export type PostCardGridProps = {
   posts: PartialPost[];
+  loading?: boolean;
+  forHome?: boolean;
 };
 
-function PostCardGrid({ posts }: PostCardGridProps) {
+function PostCardGrid({ posts, loading, forHome }: PostCardGridProps) {
   return (
     <Block>
       {posts.map(post => (
-        <PostCard post={post} key={post.id} />
+        <PostCard post={post} key={post.id} forHome={forHome} />
       ))}
+      {loading &&
+        Array.from({ length: 8 }).map((_, i) => (
+          <PostCardSkeleton key={i} forHome={forHome} />
+        ))}
     </Block>
   );
 }

src/components/home/HomeTab.tsx

@@ -100,7 +100,7 @@ const Block = styled.div`
     font-size: 1.125rem;
     text-decoration: none;
     color: ${palette.gray6};
-    height: 2.875rem;
+    height: 3rem;
 
     svg {
       font-size: 1.5rem;

src/components/main/FloatingHomeHeader.tsx

@@ -4,12 +4,21 @@ import MainHeader from './MainHeader';
 import HomeTab from '../home/HomeTab';
 import MainResponsive from './MainResponsive';
 import { getScrollTop } from '../../lib/utils';
+import { Route } from 'react-router-dom';
+import ReadingListTab from '../readingList/ReadingListTab';
 
 export type FloatingMainHeaderProps = {};
 
 function FloatingMainHeader(props: FloatingMainHeaderProps) {
   const [visible, setVisible] = useState(false);
-  const [marginTop, setMarginTop] = useState(-102);
+  const blockRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(0);
+  const [marginTop, setMarginTop] = useState(0);
+  useEffect(() => {
+    if (!blockRef.current) return;
+    setHeight(blockRef.current.clientHeight);
+    setMarginTop(-1 * blockRef.current.clientHeight);
+  }, []);
 
   const prevScrollTop = useRef(0);
   const direction = useRef<'UP' | 'DOWN'>('DOWN');
@@ -31,20 +40,22 @@ function FloatingMainHeader(props: FloatingMainHeaderProps) {
     if (
       direction.current === 'UP' &&
       nextDirection === 'DOWN' &&
-      scrollTop - transitionPoint.current < -102
+      scrollTop - transitionPoint.current < -1 * height
     ) {
-      transitionPoint.current = scrollTop + 102;
+      transitionPoint.current = scrollTop + height;
     }
 
     if (scrollTop < 64) {
       setVisible(false);
     }
 
-    setMarginTop(Math.min(0, -102 + transitionPoint.current - scrollTop));
+    setMarginTop(
+      Math.min(0, -1 * height + transitionPoint.current - scrollTop),
+    );
 
     direction.current = nextDirection;
     prevScrollTop.current = scrollTop;
-  }, []);
+  }, [height]);
 
   useEffect(() => {
     document.addEventListener('scroll', onScroll);
@@ -62,17 +73,33 @@ function FloatingMainHeader(props: FloatingMainHeaderProps) {
               display: 'block',
             }
           : {
-              display: 'none',
+              marginTop: -1 * height,
+              opacity: 0,
             }
       }
+      ref={blockRef}
     >
       <MainHeader />
-      <div className="tab-wrapper">
-        <MainResponsive>
-          <HomeTab />
-        </MainResponsive>
-      </div>
-      <div></div>
+      <Route
+        path={['/', '/:mode(recent|trending)']}
+        render={() => (
+          <div className="tab-wrapper">
+            <MainResponsive>
+              <HomeTab />
+            </MainResponsive>
+          </div>
+        )}
+        exact
+      />
+      <Route
+        path="/lists/:type(liked|read)"
+        render={({ match }) => (
+          <StyledMainResponsive>
+            <ReadingListTab type={match.params.type} />
+          </StyledMainResponsive>
+        )}
+        exact
+      />
     </Block>
   );
 }
@@ -90,4 +117,8 @@ const Block = styled.div`
   }
 `;
 
+const StyledMainResponsive = styled(MainResponsive)`
+  margin-top: 1.5rem;
+`;
+
 export default FloatingMainHeader;

src/components/main/MainHeader.tsx

@@ -19,7 +19,9 @@ function MainHeader(props: MainHeaderProps) {
   return (
     <Block>
       <Inner>
-        <Logo />
+        <StyledLink to="/">
+          <Logo />
+        </StyledLink>
         {user ? (
           <Right>
             <SearchButton to="/search">
@@ -62,6 +64,11 @@ const Block = styled.div`
   height: 4rem;
 `;
 
+const StyledLink = styled(Link)`
+  display: flex;
+  align-items: center;
+`;
+
 const SearchButton = styled(Link)`
   display: flex;
   align-items: center;