v0.3.14

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",

src/layout/Side/SideViewContent/SideViewContent.tsx

@@ -1,12 +1,11 @@
 /* External dependencies */
-import React, { useEffect } from 'react'
+import React from 'react'
 import { noop } from 'lodash-es'
 
 /* Internal dependencies */
+import useLayoutState from '../../../hooks/useLayoutState'
 import LayoutSideType from '../../../types/LayoutSideType'
 import { SideArea } from '../SideArea'
-import useLayoutDispatch from '../../../hooks/useLayoutDispatch'
-import LayoutActions from '../../redux/LayoutActions'
 import SideViewContentProps from './SideViewContent.types'
 
 export const SIDE_VIEW_CONTENT_TEST_ID = 'ch-design-system-side-view-content'
@@ -16,20 +15,11 @@ function SideViewContent({
   children,
   onChangeSideWidth = noop,
 }: SideViewContentProps) {
-  const dispatch = useLayoutDispatch()
+  const { showSideView } = useLayoutState()
 
-  useEffect(() => {
-    dispatch(LayoutActions.setShowSide({
-      showSideView: true,
-    }))
-
-    return function cleanup() {
-      dispatch(LayoutActions.setShowSide({
-        showSideView: false,
-      }))
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  if (!showSideView) {
+    return null
+  }
 
   return (
     <SideArea

src/layout/redux/LayoutReducer.ts

@@ -9,12 +9,12 @@ import { ColumnRef, ColumnState, LayoutActionTypes } from './LayoutActions'
 
 export interface LayoutState {
   /* Header related */
-  showContentHeader: boolean | undefined
-  showCoverableHeader: boolean | undefined
+  showContentHeader: boolean
+  showCoverableHeader: boolean
   /* Side related */
   sideWidth: number
-  showSideView: boolean | undefined
-  showSidePanel: boolean | undefined
+  showSideView: boolean
+  showSidePanel: boolean
   /* Navigations related */
   showNavigation: boolean
   /* Resizing related */
@@ -24,11 +24,11 @@ export interface LayoutState {
 }
 
 export const defaultState: LayoutState = {
-  showContentHeader: undefined,
-  showCoverableHeader: undefined,
+  showContentHeader: false,
+  showCoverableHeader: false,
   sideWidth: 0,
-  showSideView: undefined,
-  showSidePanel: undefined,
+  showSideView: false,
+  showSidePanel: false,
   showNavigation: true,
   orderedColumnKeys: [],
   columnRefs: {},

src/layout/stories/LayoutPlayground/LayoutPlayGround.stories.tsx

@@ -17,7 +17,6 @@ import Navigations from '../../Navigations/Navigations'
 import { SidePanelContent } from '../../Side/SidePanelContent'
 import { SideViewContent } from '../../Side/SideViewContent'
 import { NavigationContent } from '../../Navigations/NavigationContent'
-import useLayoutState from '../../../hooks/useLayoutState'
 import Content from './Content'
 import ContentHeader from './ContentHeader'
 import CoverableHeader from './CoverableHeader'
@@ -83,17 +82,14 @@ function UserChatSidePanel({ onChangeWidth }) {
 }
 
 function SideViewRoute({ onChangeWidth }) {
-  const { showSideView } = useLayoutState()
-
-  if (!showSideView) {
-    return null
-  }
+  const [state, setState] = useState(Math.random() * 100)
 
   return (
     <SideViewContent
       onChangeSideWidth={onChangeWidth}
     >
-      <Div style={{ height: 2000 }}>SideView</Div>
+      <Div style={{ height: 2000 }}>{ state }</Div>
+      <button onClick={() => setState(Math.random() * 100)} type="button">regenerate</button>
     </SideViewContent>
   )
 }