From 3f312c7e4fa84ea9455ce154319b3bc9bedee4ed Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Thu, 31 Mar 2022 16:05:59 +0200
Subject: [PATCH] feat(react): add components config options

---
 .../status-react/src/contexts/app-context.tsx | 20 +++++++++++++++++--
 .../src/modules/community/index.tsx           |  2 +-
 .../src/modules/community/messenger.tsx       |  5 ++++-
 .../status-react/src/routes/chat/index.tsx    |  4 ++--
 packages/status-react/src/types/config.tsx    |  4 ++++
 5 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/packages/status-react/src/contexts/app-context.tsx b/packages/status-react/src/contexts/app-context.tsx
index 3e6e84f5..f96e5378 100644
--- a/packages/status-react/src/contexts/app-context.tsx
+++ b/packages/status-react/src/contexts/app-context.tsx
@@ -1,10 +1,12 @@
 import React, { createContext, useContext, useMemo, useReducer } from 'react'
 
+import type { Config } from '../types/config'
 import type { Dispatch, Reducer } from 'react'
 
 type Context = {
   state: State
   dispatch: Dispatch<Action>
+  options: NonNullable<Config['options']>
 }
 
 const AppContext = createContext<Context | undefined>(undefined)
@@ -31,13 +33,27 @@ const initialState: State = {
 
 interface Props {
   children: React.ReactNode
+  config: Config
 }
 
 export const AppProvider = (props: Props) => {
-  const { children } = props
+  const { children, config } = props
 
   const [state, dispatch] = useReducer(reducer, initialState)
-  const value = useMemo(() => ({ state, dispatch }), [state])
+
+  const value = useMemo(
+    () => ({
+      state,
+      dispatch,
+      options: {
+        enableSidebar: true,
+        enableMembers: true,
+        ...config.options,
+      },
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state]
+  )
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>
 }
diff --git a/packages/status-react/src/modules/community/index.tsx b/packages/status-react/src/modules/community/index.tsx
index 3a13f2e6..c88ea800 100644
--- a/packages/status-react/src/modules/community/index.tsx
+++ b/packages/status-react/src/modules/community/index.tsx
@@ -31,7 +31,7 @@ export const Community = (props: Props) => {
 
   return (
     <Router>
-      <AppProvider>
+      <AppProvider config={props}>
         <ThemeProvider theme={theme}>
           <NarrowProvider myRef={ref}>
             <ModalProvider>
diff --git a/packages/status-react/src/modules/community/messenger.tsx b/packages/status-react/src/modules/community/messenger.tsx
index 8c16b58f..597eadd7 100644
--- a/packages/status-react/src/modules/community/messenger.tsx
+++ b/packages/status-react/src/modules/community/messenger.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import { Route, Routes } from 'react-router-dom'
 
 import { MainSidebar } from '~/src/components/main-sidebar'
+import { useAppState } from '~/src/contexts/app-context'
 import { Chat } from '~/src/routes/chat'
 import { NewChat } from '~/src/routes/new-chat'
 import { styled } from '~/src/styles/config'
@@ -42,9 +43,11 @@ import { styled } from '~/src/styles/config'
 // }
 
 export function Messenger() {
+  const { options } = useAppState()
+
   return (
     <Wrapper>
-      <MainSidebar />
+      {options.enableMembers && <MainSidebar />}
       <Routes>
         <Route path="/:id" element={<Chat />} />
         <Route path="/new" element={<NewChat />} />
diff --git a/packages/status-react/src/routes/chat/index.tsx b/packages/status-react/src/routes/chat/index.tsx
index 2b617e91..5226153f 100644
--- a/packages/status-react/src/routes/chat/index.tsx
+++ b/packages/status-react/src/routes/chat/index.tsx
@@ -44,10 +44,10 @@ const Content = () => {
 }
 
 export const Chat = () => {
-  const { state } = useAppState()
+  const { state, options } = useAppState()
 
   // TODO: Update condition based on a chat type
-  const enableMembers = true
+  const enableMembers = options.enableMembers // && (chat.type === 'group' || chat.type === 'channel')
   const showMembers = enableMembers && state.showMembers
 
   return (
diff --git a/packages/status-react/src/types/config.tsx b/packages/status-react/src/types/config.tsx
index 6ce28472..97b71e4d 100644
--- a/packages/status-react/src/types/config.tsx
+++ b/packages/status-react/src/types/config.tsx
@@ -8,4 +8,8 @@ export interface Config {
   environment?: Environment
   theme?: Theme
   router?: typeof BrowserRouter | typeof MemoryRouter | typeof HashRouter
+  options?: {
+    enableSidebar: boolean
+    enableMembers: boolean
+  }
 }