make sidekick opening interactive with storage

src/components/sidekick/index.test.tsx

@@ -6,10 +6,21 @@ import { IfAuthenticated } from '../authentication/if-authenticated';
 import { MessengerList } from '../messenger/list';
 
 describe('Sidekick', () => {
+  beforeAll(() => {
+    global.localStorage = {
+      setItem: jest.fn(),
+      getItem: () => null,
+      removeItem: () => {},
+      length: 0,
+      clear: () => {},
+      key: (_) => '',
+    };
+  });
+
   const subject = (props: any = {}) => {
     const allProps = {
       className: '',
-      updateLayout: () => undefined,
+      updateSidekick: jest.fn(),
       ...props,
     };
 
@@ -24,6 +35,29 @@ describe('Sidekick', () => {
     expect(ifAuthenticated.find('.todo').exists()).toBe(true);
   });
 
+  it('open the sidekick in case not data found in storage', () => {
+    const updateSidekick = jest.fn();
+    subject({ updateSidekick });
+
+    expect(updateSidekick).toHaveBeenCalledWith({ isOpen: true });
+  });
+
+  it('renders sidekick with class animation in', () => {
+    const wrapper = subject({ isOpen: true });
+
+    const sidekick = wrapper.find('.sidekick');
+
+    expect(sidekick.hasClass('sidekick--slide-in')).toBe(true);
+  });
+
+  it('it should not render out class animation', () => {
+    const wrapper = subject({ isOpen: false });
+
+    const sidekick = wrapper.find('.sidekick');
+
+    expect(sidekick.hasClass('sidekick--slide-out')).toBe(false);
+  });
+
   it('renders sidekick panel', () => {
     const wrapper = subject();
 
@@ -33,13 +67,16 @@ describe('Sidekick', () => {
   });
 
   it('renders sidekick when panel tab is clicked', () => {
-    const updateLayout = jest.fn();
-    const wrapper = subject(updateLayout);
+    const updateSidekick = jest.fn();
+    const wrapper = subject({ updateSidekick });
 
     const ifAuthenticated = wrapper.find(IfAuthenticated).find({ showChildren: true });
+
     ifAuthenticated.find('.app-sidekick-panel__target').simulate('click');
 
-    expect(ifAuthenticated.find('.sidekick__slide-out').exists()).toBe(false);
+    expect(ifAuthenticated.find('.sidekick--slide-out').exists()).toBe(false);
+
+    expect(updateSidekick).toHaveBeenCalledWith({ isOpen: true });
   });
 
   it('renders default active tab', () => {

src/components/sidekick/index.tsx

@@ -5,11 +5,12 @@ import { IfAuthenticated } from '../authentication/if-authenticated';
 import { IconButton, Icons } from '@zer0-os/zos-component-library';
 import classNames from 'classnames';
 import { AuthenticationState } from '../../store/authentication/types';
-import { AppLayout, update as updateLayout } from '../../store/layout';
+import { UpdateSidekickPayload, updateSidekick } from '../../store/layout';
 import { MessengerList } from '../messenger/list';
 import { denormalize } from '../../store/channels';
 
 import './styles.scss';
+import { SIDEKICK_OPEN_STORAGE } from '../../store/layout/constants';
 
 enum Tabs {
   NETWORK,
@@ -23,60 +24,74 @@ interface PublicProperties {
 
 export interface Properties extends PublicProperties {
   user: AuthenticationState['user'];
-  updateLayout: (layout: Partial<AppLayout>) => void;
+  updateSidekick: (action: UpdateSidekickPayload) => void;
   countAllUnreadMessages: number;
+  isOpen: boolean;
 }
 
 export interface State {
-  isOpen: boolean;
   activeTab: Tabs;
+  canStartAnimation: boolean;
 }
 
 export class Container extends React.Component<Properties, State> {
-  state = { isOpen: true, activeTab: Tabs.MESSAGES };
+  state = { canStartAnimation: false, activeTab: Tabs.MESSAGES };
 
   static mapState(state: RootState): Partial<Properties> {
     const directMessages = denormalize(state.channelsList.value, state).filter((channel) => Boolean(channel.isChannel));
+
     const countAllUnreadMessages = directMessages.reduce(
       (count, directMessage) => count + directMessage.unreadCount,
       0
     );
+
     const {
       authentication: { user },
+      layout: { value },
     } = state;
 
     return {
       user,
       countAllUnreadMessages,
+      isOpen: value.isSidekickOpen,
     };
   }
 
   static mapActions(_props: Properties): Partial<Properties> {
-    return { updateLayout };
+    return { updateSidekick };
   }
 
-  slideAnimationEnded = (): void => {
-    if (!this.state.isOpen) {
-      this.setState({ isOpen: false });
+  get isOpen() {
+    return this.props.isOpen;
+  }
+
+  componentDidMount() {
+    const sidekickOpenValue = localStorage.getItem(SIDEKICK_OPEN_STORAGE);
+    const isSidekickOpen = sidekickOpenValue === 'true';
+
+    if (sidekickOpenValue === null) {
+      this.props.updateSidekick({ isOpen: true });
+    } else if (isSidekickOpen !== this.props.isOpen) {
+      this.props.updateSidekick({ isOpen: isSidekickOpen });
     }
-  };
+  }
 
   clickTab(tab: Tabs): void {
     this.setState({
       activeTab: tab,
     });
   }
 
-  handleSidekickPanel = (): void => {
-    this.props.updateLayout({ isSidekickOpen: !this.state.isOpen });
-    this.setState({ isOpen: !this.state.isOpen });
+  toggleSidekickPanel = (): void => {
+    this.setState({ canStartAnimation: true });
+    this.props.updateSidekick({ isOpen: !this.isOpen });
   };
 
   renderSidekickPanel(): JSX.Element {
     return (
       <div
         className='app-sidekick-panel__target'
-        onClick={this.handleSidekickPanel}
+        onClick={this.toggleSidekickPanel}
       >
         <svg
           className='sidekick-panel-tab__tab'
@@ -155,8 +170,12 @@ export class Container extends React.Component<Properties, State> {
     return (
       <IfAuthenticated showChildren>
         <div
-          className={classNames('sidekick', this.props.className, { 'sidekick__slide-out': !this.state.isOpen })}
-          onAnimationEnd={this.slideAnimationEnded}
+          className={classNames(
+            'sidekick',
+            this.props.className,
+            { 'sidekick--slide-out': this.state.canStartAnimation && !this.isOpen },
+            { 'sidekick--slide-in': this.isOpen }
+          )}
         >
           {this.renderSidekickPanel()}
           <div className='sidekick-panel'>{this.renderTabs()}</div>

src/components/sidekick/styles.scss

@@ -8,7 +8,14 @@
   background-color: theme.$background-color-tertiary-hover;
   width: $width-sidekick;
   height: 100%;
-  animation: sidekick-slide-in animation.$animation-duration-double ease-in forwards;
+  margin-right: -$width-sidekick;
+
+  &--slide-in {
+    animation: sidekick-slide-in animation.$animation-duration-double ease-in forwards;
+  }
+  &--slide-out {
+    animation: sidekick-slide-out animation.$animation-duration-double ease-out forwards;
+  }
 
   &__tabs {
     position: absolute;
@@ -41,10 +48,6 @@
     }
   }
 
-  &__slide-out {
-    animation: sidekick-slide-out animation.$animation-duration-double ease-out forwards;
-  }
-
   .scroll-container__gradient {
     background: linear-gradient(to bottom, transparent, theme.$background-color-tertiary-hover 100%);
   }

src/store/layout/constants.ts

@@ -0,0 +1 @@
+export const SIDEKICK_OPEN_STORAGE = 'isSidekickOpen';

src/store/layout/index.test.ts

@@ -4,7 +4,7 @@ describe('layout reducer', () => {
   const initialExistingState: LayoutState = {
     value: {
       isContextPanelOpen: false,
-      isSidekickOpen: true,
+      isSidekickOpen: false,
       hasContextPanel: false,
     },
   };
@@ -13,7 +13,7 @@ describe('layout reducer', () => {
     expect(reducer(undefined, { type: 'unknown' })).toEqual({
       value: {
         isContextPanelOpen: false,
-        isSidekickOpen: true,
+        isSidekickOpen: false,
         hasContextPanel: false,
       },
     });

src/store/layout/index.ts

@@ -1,19 +1,16 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction, createAction } from '@reduxjs/toolkit';
+import type { AppLayout, LayoutState, UpdateSidekickPayload } from './types';
 
-export interface AppLayout {
-  hasContextPanel: boolean;
-  isContextPanelOpen: boolean;
-  isSidekickOpen: boolean;
+export enum SagaActionTypes {
+  updateSidekick = 'layout/saga/updateSidekick',
 }
 
-export interface LayoutState {
-  value: AppLayout;
-}
+export const updateSidekick = createAction<UpdateSidekickPayload>(SagaActionTypes.updateSidekick);
 
 const initialState: LayoutState = {
   value: {
     isContextPanelOpen: false,
-    isSidekickOpen: true,
+    isSidekickOpen: false,
     hasContextPanel: false,
   },
 };
@@ -33,3 +30,4 @@ const slice = createSlice({
 
 export const { update } = slice.actions;
 export const { reducer } = slice;
+export { AppLayout, LayoutState, UpdateSidekickPayload };

src/store/layout/saga.test.ts

@@ -0,0 +1,31 @@
+import { expectSaga } from 'redux-saga-test-plan';
+import { updateSidekick as updateSidekickSaga } from './saga';
+
+import { reducer } from '.';
+
+describe('layout saga', () => {
+  beforeAll(() => {
+    global.localStorage = {
+      setItem: jest.fn(),
+      getItem: (_) => '',
+      removeItem: () => {},
+      length: 0,
+      clear: () => {},
+      key: (_) => '',
+    };
+  });
+
+  it('should store sidekick', async () => {
+    const { storeState } = await expectSaga(updateSidekickSaga, { payload: { isOpen: true } })
+      .withReducer(reducer)
+      .run();
+
+    expect(storeState).toMatchObject({
+      value: {
+        isSidekickOpen: true,
+      },
+    });
+
+    expect(localStorage.setItem).toHaveBeenCalled();
+  });
+});

src/store/layout/saga.ts

@@ -0,0 +1,19 @@
+import { SIDEKICK_OPEN_STORAGE } from './constants';
+import { put, takeLatest } from 'redux-saga/effects';
+import { update, SagaActionTypes } from './';
+
+export function* updateSidekick(action) {
+  const { isOpen } = action.payload;
+
+  localStorage.setItem(SIDEKICK_OPEN_STORAGE, isOpen);
+
+  yield put(
+    update({
+      isSidekickOpen: isOpen,
+    })
+  );
+}
+
+export function* saga() {
+  yield takeLatest(SagaActionTypes.updateSidekick, updateSidekick);
+}

src/store/layout/types.ts

@@ -0,0 +1,13 @@
+export interface AppLayout {
+  hasContextPanel: boolean;
+  isContextPanelOpen: boolean;
+  isSidekickOpen: boolean;
+}
+
+export interface LayoutState {
+  value: AppLayout;
+}
+
+export interface UpdateSidekickPayload {
+  isOpen: boolean;
+}

src/store/saga.ts

@@ -9,6 +9,7 @@ import { saga as channels } from './channels/saga';
 import { saga as authentication } from './authentication/saga';
 import { saga as chat } from './chat/saga';
 import { saga as theme } from './theme/saga';
+import { saga as layout } from './layout/saga';
 
 export function* rootSaga() {
   const allSagas = {
@@ -21,6 +22,7 @@ export function* rootSaga() {
     authentication,
     chat,
     theme,
+    layout,
   };
 
   yield all(