outline done

WojciechCendrzak · WojciechCendrzak · commit 6ded80e70c34 · 2021-06-27T03:13:44.000+02:00
diff --git a/package.json b/package.json
@@ -15,16 +15,20 @@
     "test": "jest"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.6.0",
     "babel-plugin-styled-components": "^1.12.0",
     "beprofiler": "^0.2.3",
     "date-fns": "^2.11.1",
     "gray-matter": "^4.0.2",
     "i18n-keys": "^1.0.8",
     "i18next": "^20.3.1",
+    "lodash": "^4.17.21",
     "next": "^10.0.0",
+    "next-redux-wrapper": "^7.0.2",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-markdown": "^6.0.2",
+    "react-redux": "^7.2.4",
     "react-syntax-highlighter": "^15.4.3",
     "styled-components": "^5.3.0",
     "tailwindcss": "^2.1.2",
@@ -33,6 +37,7 @@
   "devDependencies": {
     "@babel/core": "^7.14.3",
     "@types/jest": "^26.0.23",
+    "@types/lodash": "^4.14.170",
     "@types/node": "^15.6.0",
     "@types/react": "^17.0.6",
     "@types/react-syntax-highlighter": "^13.5.0",
diff --git a/src/app/app.store.ts b/src/app/app.store.ts
@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { createWrapper } from 'next-redux-wrapper';
+import { postSlice } from '../logic/store/post.slice';
+
+export const makeStore = () =>
+  configureStore({
+    reducer: {
+      [postSlice.name]: postSlice.reducer,
+    },
+  });
+
+export type Store = ReturnType<typeof makeStore>;
+export type StoreState = ReturnType<Store['getState']>;
+
+export const wrapper = createWrapper<Store>(makeStore);
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -3,8 +3,14 @@ import { translate, translationKeys } from '../logic/translations/translation.se
 import styled from 'styled-components';
 import { Menu } from './menu/menu';
 import { Footer } from './footer/footer';
+import { ReactNode } from 'react';
+import { MIDDLE_COLUMN_SIZE, POST_MARGIN_BOTTOM } from '../const/sizes';
 
-export const Layout: React.FC = ({ children }) => {
+interface LayoutProps {
+  leftSection?: ReactNode;
+  rightSection?: ReactNode;
+}
+export const Layout: React.FC<LayoutProps> = ({ children, leftSection, rightSection }) => {
   return (
     <LayoutContainer>
       <div>
@@ -28,9 +34,11 @@ export const Layout: React.FC = ({ children }) => {
         <header>
           <Menu />
         </header>
-        <main>
+        <MainContainer>
+          <Side>{leftSection}</Side>
           <Main>{children}</Main>
-        </main>
+          <Side>{rightSection}</Side>
+        </MainContainer>
       </div>
       <footer>
         <Footer />
@@ -46,8 +54,25 @@ const LayoutContainer = styled.div`
   display: flex;
 `;
 
+const MainContainer = styled.main`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 2rem;
+
+  @media only screen and (max-width: 768px) {
+    display: inherit;
+  }
+`;
+
 const Main = styled.div`
-  max-width: 36rem;
-  padding: 0 1rem;
-  margin: 0 auto 6rem;
+  max-width: ${MIDDLE_COLUMN_SIZE};
+  padding: 0 1rem ${POST_MARGIN_BOTTOM}px 1rem;
+`;
+
+const Side = styled.div`
+  flex: 1;
+  @media only screen and (max-width: 768px) {
+    display: none;
+  }
 `;
diff --git a/src/components/outline.tsx b/src/components/outline.tsx
@@ -0,0 +1,97 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
+import {
+  LAYOUT_FOOTER_HEIGHT,
+  LAYOUT_HEADER_HEIGHT,
+  MARGIN,
+  MIDDLE_COLUMN_SIZE,
+  POST_MARGIN_BOTTOM,
+} from '../const/sizes';
+import { getIsOutline } from '../logic/store/post.selector';
+import { postSlice } from '../logic/store/post.slice';
+
+export const Outline: React.FC = () => {
+  const dispatch = useDispatch();
+  const [outLineTop, setOutLineTop] = React.useState(0);
+  const [outlineHeight, setOutlineHeight] = useState(0);
+  const ref = useRef<HTMLDivElement>(null);
+  const items = useSelector(getIsOutline);
+
+  useEffect(() => {
+    setOutlineHeight(ref.current?.clientHeight || 0);
+    dispatch(postSlice.actions.reset());
+  }, [dispatch]);
+
+  const handleScroll = useCallback(() => {
+    const { scrollY, innerHeight } = window;
+    const clientHeight = document.body.clientHeight;
+    const isReachedTop = scrollY > LAYOUT_HEADER_HEIGHT - MARGIN;
+
+    if (isReachedTop) {
+      const visibleFooterPart = Math.max(
+        scrollY + innerHeight - clientHeight + LAYOUT_FOOTER_HEIGHT + POST_MARGIN_BOTTOM,
+        0
+      );
+      const top = Math.min(innerHeight - outlineHeight - visibleFooterPart, MARGIN);
+
+      setOutLineTop(top);
+    } else {
+      setOutLineTop(0);
+    }
+  }, [outlineHeight]);
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [handleScroll]);
+
+  const handleOnItemClick = useCallback(
+    (y: number) => () => {
+      window.scrollTo(0, y);
+    },
+    []
+  );
+
+  return (
+    <OutlineSticker outLineTop={outLineTop} ref={ref}>
+      <OutlineContainer>
+        <OutlineItems>
+          {items?.map((item, index) => (
+            <OutlineItem key={index} onClick={handleOnItemClick(item.offsetTop)}>
+              {item.isReached ? <strong>{item.title}</strong> : item.title}
+            </OutlineItem>
+          ))}
+        </OutlineItems>
+      </OutlineContainer>
+    </OutlineSticker>
+  );
+};
+
+const OutlineSticker = styled.div<{ outLineTop: number }>`
+  ${({ outLineTop }) =>
+    outLineTop
+      ? `
+          position: fixed;
+          top: ${outLineTop}px;
+          width: calc((100% - ${MIDDLE_COLUMN_SIZE}) / 2);
+        `
+      : ''}
+`;
+
+const OutlineContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin: 0 ${MARGIN}px;
+`;
+
+const OutlineItems = styled.div`
+  font-size: 12px;
+  font-weight: 100;
+`;
+
+const OutlineItem = styled.div`
+  margin-bottom: 5px;
+  cursor: pointer;
+`;
diff --git a/src/components/title.tsx b/src/components/title.tsx
@@ -3,4 +3,5 @@ import styled from 'styled-components';
 export const Title = styled.h1`
   font-size: 36px;
   font-weight: 400;
+  margin-block-start: 0;
 `;
diff --git a/src/const/sizes.ts b/src/const/sizes.ts
@@ -0,0 +1,7 @@
+export const MIDDLE_COLUMN_SIZE = '36rem';
+
+export const LAYOUT_HEADER_HEIGHT = 124;
+export const LAYOUT_FOOTER_HEIGHT = 161;
+
+export const MARGIN = 32;
+export const POST_MARGIN_BOTTOM = 200;
diff --git a/src/content/rxjs-redux-observable-redux-toolkit-part-3-scenarios.md b/src/content/rxjs-redux-observable-redux-toolkit-part-3-scenarios.md
@@ -33,7 +33,7 @@ RxJs offers a large number of operators and stream creators. However, for a typi
 
 The complete source code you can see [here](https://github.com/WojciechCendrzak/react-redux-toolkit-rxjs-scenarios)
 
-## 1. fetching from API
+## 1. Fetching from API
 
 To start from, we will go with something simple.
 We will try to fetch some product from API and store it in the redux store.
@@ -236,7 +236,7 @@ Let's break down the code line with **forkJoin**:
 
 Finally, all responses array is mapped to urls array that **setPhotos** action require.
 
-## 5. Emitting more than one action from epic
+## 5. Emitting more than one action
 
 Up to now, all our epic emits one action as a result of one action incoming.
 But what if we want to emit more than one action?
diff --git a/src/logic/store/outline.model.ts b/src/logic/store/outline.model.ts
@@ -0,0 +1,5 @@
+export interface OutlineItem {
+  title: string;
+  isReached: boolean;
+  offsetTop: number;
+}
diff --git a/src/logic/store/post.logic.ts b/src/logic/store/post.logic.ts
@@ -0,0 +1,5 @@
+import { reduce } from 'lodash';
+import { OutlineItem } from './outline.model';
+
+export const getOutlineArray = (outlineByTitle: Record<string, OutlineItem>) =>
+  reduce(outlineByTitle, (acc, item) => [...acc, item], [] as OutlineItem[]);
diff --git a/src/logic/store/post.selector.ts b/src/logic/store/post.selector.ts
@@ -0,0 +1,4 @@
+import { StoreState } from '../../app/app.store';
+
+export const getIsOutlineItemReached = (title: string) => (store: StoreState) => store.post.outlineByTitle[title];
+export const getIsOutline = (store: StoreState) => store.post.outline;
diff --git a/src/logic/store/post.slice.ts b/src/logic/store/post.slice.ts
@@ -0,0 +1,25 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { OutlineItem } from './outline.model';
+import { getOutlineArray } from './post.logic';
+
+export interface PostState {
+  outlineByTitle: Record<string, OutlineItem>;
+  outline?: OutlineItem[];
+}
+
+export const initialAppState: PostState = {
+  outlineByTitle: {},
+};
+
+export const postSlice = createSlice({
+  name: 'post',
+  initialState: initialAppState,
+  reducers: {
+    reset: () => initialAppState,
+    setOutlineItemReached: (state, action: PayloadAction<{ outlineItem: OutlineItem }>) => {
+      const { outlineItem } = action.payload;
+      state.outlineByTitle[outlineItem.title] = outlineItem;
+      state.outline = getOutlineArray(state.outlineByTitle);
+    },
+  },
+});
diff --git a/src/pages-internal/post/post.components.tsx b/src/pages-internal/post/post.components.tsx
@@ -1,7 +1,42 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { Components } from 'react-markdown/src/ast-to-react';
 import styled from 'styled-components';
+import { useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { postSlice } from '../../logic/store/post.slice';
+import { OutlineItem } from '../../logic/store/outline.model';
+import { MARGIN } from '../../const/sizes';
+
+export const H2: React.FC = ({ children }) => {
+  const dispatch = useDispatch();
+  const ref = useRef<HTMLDivElement>(null);
+  const [isReached, setIsReached] = useState(false);
+
+  const handleScroll = useCallback(() => {
+    const { scrollY } = window;
+    const isReached = scrollY + MARGIN > (ref.current?.offsetTop || 0);
+    setIsReached(isReached);
+  }, []);
+
+  const title = ((children || ['']) as string[])[0];
+
+  useEffect(() => {
+    const outlineItem: OutlineItem = {
+      title,
+      isReached,
+      offsetTop: ref.current?.offsetTop || 0,
+    };
+    dispatch(postSlice.actions.setOutlineItemReached({ outlineItem }));
+  }, [dispatch, title, isReached]);
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [handleScroll]);
+
+  return <h2 ref={ref}>{children}</h2>;
+};
 
 export const markDownComponents: Components = {
   code({ inline, className, children, ...props }) {
@@ -14,6 +49,7 @@ export const markDownComponents: Components = {
       <code className={className} {...props} />
     );
   },
+  h2: H2,
 };
 
 const Code = styled(SyntaxHighlighter)`
diff --git a/src/pages-internal/post/post.page.tsx b/src/pages-internal/post/post.page.tsx
@@ -11,14 +11,15 @@ import { LinkTo } from '../../components/link';
 import { translate, translationKeys } from '../../logic/translations/translation.service';
 import { Title } from '../../components/title';
 import { Content } from '../../components/content';
+import { Outline } from '../../components/outline';
 
 export interface PostPageProps {
   post: Post;
 }
 
 export const PostPage: React.FC<PostPageProps> = ({ post }) => {
   return (
-    <Layout>
+    <Layout leftSection={<Outline />}>
       <Head>
         <title>{post.title}</title>
       </Head>
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type { AppProps } from 'next/app';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
+import { wrapper } from '../app/app.store';
 
 const App: React.FC<AppProps> = ({ Component, pageProps }) => (
   <>
@@ -11,7 +12,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => (
   </>
 );
 
-export default App;
+export default wrapper.withRedux(App);
 
 const GlobalStyle = createGlobalStyle`
   html,
diff --git a/yarn.lock b/yarn.lock
