Add resizing provider (#31)

packages/react-chat-example/src/index.tsx

@@ -1,10 +1,10 @@
-import { ReactChat } from "@dappconnect/react-chat";
+import { community, lightTheme, ReactChat } from "@dappconnect/react-chat";
 import React from "react";
 import ReactDOM from "react-dom";
 
 ReactDOM.render(
   <div style={{ height: "100%" }}>
-    <ReactChat />
+    <ReactChat theme={lightTheme} community={community} />
   </div>,
   document.getElementById("root")
 );

packages/react-chat/src/components/Chat.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 
+import { useNarrow } from "../contexts/narrowProvider";
 import { ChannelData, channels } from "../helpers/channelsMock";
 import { CommunityData } from "../helpers/communityMock";
 import { useMessenger } from "../hooks/useMessenger";
@@ -18,7 +19,9 @@ interface ChatProps {
 export function Chat({ theme, community }: ChatProps) {
   const [activeChannel, setActiveChannel] = useState<ChannelData>(channels[0]);
   const [showMembers, setShowMembers] = useState(true);
-  const [showChannels, setShowChannels] = useState(false);
+  const [showChannels, setShowChannels] = useState(true);
+  const narrow = useNarrow();
+  // const className = useMemo(() => (narrow ? 'narrow' : ''), [narrow]);
 
   const {
     messenger,
@@ -33,7 +36,7 @@ export function Chat({ theme, community }: ChatProps) {
 
   return (
     <ChatWrapper>
-      {showChannels && (
+      {showChannels && !narrow && (
         <Channels
           notifications={notifications}
           clearNotifications={clearNotifications}
@@ -57,7 +60,7 @@ export function Chat({ theme, community }: ChatProps) {
       ) : (
         <Loading>Connecting to waku</Loading>
       )}
-      {showMembers && (
+      {showMembers && !narrow && (
         <Members
           theme={theme}
           channel={activeChannel}

packages/react-chat/src/components/ReactChat.tsx

@@ -1,16 +1,25 @@
-import React from "react";
+import React, { useRef } from "react";
 
-import { community } from "../helpers/communityMock";
+import { NarrowProvider } from "../contexts/narrowProvider";
+import { CommunityData } from "../helpers/communityMock";
 import { GlobalStyle } from "../styles/GlobalStyle";
-import { lightTheme } from "../styles/themes";
+import { Theme } from "../styles/themes";
 
 import { Chat } from "./Chat";
 
-export function ReactChat() {
+interface ReactChatProps {
+  theme: Theme;
+  community: CommunityData;
+}
+
+export function ReactChat({ theme, community }: ReactChatProps) {
+  const ref = useRef<HTMLHeadingElement>(null);
   return (
-    <div>
+    <NarrowProvider myRef={ref}>
+      <div ref={ref}>
         <GlobalStyle />
-      <Chat theme={lightTheme} community={community} />
+        <Chat theme={theme} community={community} />
       </div>
+    </NarrowProvider>
   );
 }

packages/react-chat/src/contexts/narrowProvider.tsx

@@ -0,0 +1,19 @@
+import React, { createContext, useContext } from "react";
+
+import { useRefWidthBreak } from "../hooks/useRefWidthBreak";
+
+const NarrowContext = createContext<boolean>(false);
+
+export function useNarrow() {
+  return useContext(NarrowContext);
+}
+
+interface NarrowProviderProps {
+  children: React.ReactNode;
+  myRef: React.RefObject<HTMLHeadingElement>;
+}
+
+export function NarrowProvider({ children, myRef }: NarrowProviderProps) {
+  const narrow = useRefWidthBreak(myRef, 735);
+  return <NarrowContext.Provider value={narrow} children={children} />;
+}

packages/react-chat/src/hooks/useRefWidthBreak.ts

@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from "react";
+
+export function useRefWidthBreak(
+  myRef: React.RefObject<HTMLHeadingElement>,
+  sizeThreshold: number
+) {
+  const [widthBreak, setWidthBreak] = useState(false);
+
+  useEffect(() => {
+    const checkDimensions = () => {
+      const width = myRef?.current?.offsetWidth ?? 0;
+      if (width && width < sizeThreshold && width > 0) {
+        if (widthBreak === false) {
+          setWidthBreak(true);
+        }
+      } else {
+        if (widthBreak === true) {
+          setWidthBreak(false);
+        }
+      }
+    };
+    checkDimensions();
+    window.addEventListener("resize", checkDimensions);
+    return () => {
+      window.removeEventListener("resize", checkDimensions);
+    };
+  }, [myRef, widthBreak, myRef?.current?.offsetWidth]);
+
+  return widthBreak;
+}

packages/react-chat/src/index.ts

@@ -1,3 +1,5 @@
 import { ReactChat } from "./components/ReactChat";
+import { community } from "./helpers/communityMock";
+import { darkTheme, lightTheme } from "./styles/themes";
 
-export { ReactChat };
+export { ReactChat, lightTheme, darkTheme, community };