Merge pull request #11 from guicoelhodev/develop

Fix chat style errors and increase user experience in mobile devices

src/components/FC/Chat/CurrentChat/style.ts

@@ -11,7 +11,11 @@ export const Container = styled(motion.div)`
   align-content: space-between;
 
   @media (max-width: 500px) {
-    grid-template-rows: 2rem calc(50vh - 5rem) 3rem;
+    grid-template-rows: 2rem calc(40rem) 3rem;
+
+    footer {
+      padding-bottom: 0;
+    }
   }
 `;
 
@@ -75,7 +79,7 @@ export const SendContainer = styled.footer`
   gap: 0.4rem;
 
   input {
-    border-color: ${(props) => props.theme.terciaryColor};
+    border: 1px solid ${(props) => props.theme.terciaryColor};
     flex: 1;
     width: 100%;
     background-color: ${(props) => props.theme.primaryBg};

src/components/FC/Chat/SearchFriends/style.ts

@@ -46,14 +46,21 @@ export const List = styled.ul`
   align-items: flex-start;
   justify-content: center;
 
-  grid-template-columns: repeat(auto-fit, 3rem);
+  grid-template-columns: repeat(3, 3rem);
+  justify-content: space-evenly;
   grid-template-rows: repeat(auto-fit, 3rem);
   gap: 1rem;
 
   overflow-y: auto;
   padding-top: 1rem;
 
   @media (max-width: 500px) {
-    height: calc(50vh);
+    height: 42rem;
+    grid-template-columns: repeat(3, 4rem);
+    grid-template-rows: repeat(auto-fit, 4rem);
+
+    button {
+      width: 4rem;
+    }
   }
 `;

src/components/FC/Chat/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { AiOutlineSearch } from 'react-icons/ai';
 import { BsChevronUp } from 'react-icons/bs';
 import { BiUserVoice } from 'react-icons/bi';
@@ -8,27 +8,32 @@ import { CurrentChat } from './CurrentChat';
 import { SearchFriends } from './SearchFriends';
 import { listFriendsActiveMock } from './tmpMocks';
 
+import { UserActionsContext } from '@context/userActions';
+import { handleChatState } from 'src/reducers/globalComponentsReducer/actions';
+
 import * as S from './style';
 
 export const Chat: React.FC = () => {
-  const [open, setOpen] = useState(false);
+  const { globalComponentsState, dispatchGlobalComponents } =
+    useContext(UserActionsContext);
   const [searchFriends, setSearchFriends] = useState(false);
 
   return (
     <S.Container
       variants={chatTransition}
-      animate={open ? 'open' : 'closed'}
+      animate={globalComponentsState?.chat ? 'open' : 'closed'}
       transition={{ duration: 0.2, ease: 'easeIn' }}
+      open={globalComponentsState.chat}
     >
-      <S.Header open={open}>
+      <S.Header open={globalComponentsState.chat}>
         <p>Chat</p>
 
-        <button onClick={() => setOpen((prev) => !prev)}>
+        <button onClick={() => dispatchGlobalComponents(handleChatState())}>
           <BsChevronUp />
         </button>
       </S.Header>
 
-      {open ? (
+      {globalComponentsState.chat ? (
         <S.Content>
           {searchFriends ? <SearchFriends /> : <CurrentChat />}
 

src/components/FC/Chat/style.ts

@@ -4,12 +4,12 @@ import styled from 'styled-components';
 interface IChatState {
   open: boolean;
 }
-export const Container = styled(motion.section)`
+
+export const Container = styled(motion.section)<IChatState>`
   z-index: 2;
   position: fixed;
   bottom: 0;
   right: 6rem;
-
   overflow: hidden;
 
   background-color: ${(props) => props.theme.secondaryBg};
@@ -21,17 +21,19 @@ export const Container = styled(motion.section)`
   flex-direction: column;
 
   border: 1px solid ${(props) => props.theme.primaryColor};
-  border-bottom-color: inherit;
+  border-bottom-color: ${(props) => props.theme.secondaryBg};
 
   @media (max-width: 810px) {
-    bottom: 5rem;
+    display: ${(props) => (props.open ? 'block' : 'none !important')};
+    bottom: 4rem;
     right: 0;
   }
 
   @media (max-width: 500px) {
+    border: 0;
     max-width: none;
-    max-height: 60vh;
-    border-color: inherit;
+    max-height: 50rem;
+    border-color: ${(props) => props.theme.primaryBg};
     border-radius: 0;
   }
 `;

src/components/UI/Layout/index.tsx

@@ -18,13 +18,17 @@ import {
   AiOutlineUsergroupAdd,
 } from 'react-icons/ai';
 import { useRouter } from 'next/router';
+import { UserActionsContext } from '@context/userActions';
+import { handleChatState } from 'src/reducers/globalComponentsReducer/actions';
 
 interface ILayout {
   children: ReactNode;
 }
 
 export const Layout: React.FC<ILayout> = ({ children }) => {
   const { theme, themeToggler } = useContext(ThemeContext);
+  const { globalComponentsState, dispatchGlobalComponents } =
+    useContext(UserActionsContext);
 
   const router = useRouter();
 
@@ -57,10 +61,15 @@ export const Layout: React.FC<ILayout> = ({ children }) => {
     {
       title: 'Chat',
       icon: <BsFillChatDotsFill />,
-      onClick: () => alert('clicked '),
+      onClick: () => dispatchGlobalComponents(handleChatState()),
     },
   ];
 
+  const getActiveClassName = (title: string) => {
+    if (title === 'Chat') return globalComponentsState.chat ? 'active' : '';
+    return title === activeTab ? 'active' : '';
+  };
+
   return (
     <S.Container>
       <S.Header>
@@ -80,7 +89,7 @@ export const Layout: React.FC<ILayout> = ({ children }) => {
               item.onClick();
             }}
             title={item.title}
-            className={item.title === activeTab ? 'active' : ''}
+            className={getActiveClassName(item.title)}
           >
             {item.icon}
 

src/components/UI/Layout/style.ts

@@ -23,6 +23,7 @@ export const PageContainer = styled.div`
   }
 `;
 export const NavigatePages = styled.nav`
+  z-index: 3;
   background-color: ${(props) => props.theme.primaryBg};
   padding-top: 2rem;
   position: fixed;
@@ -47,7 +48,9 @@ export const NavigatePages = styled.nav`
   }
 
   @media (max-width: 810px) {
-    top: calc(var(--doc-height) - 4rem);
+    background-color: ${(props) => props.theme.secondaryBg};
+    bottom: 0;
+    position: sticky;
     width: 100%;
     height: 4rem;
     padding: 0;

src/context/index.tsx

@@ -1,13 +1,37 @@
-import { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ThemeContextProvider } from './theme';
+import { UserActionsProvider } from './userActions';
+interface MultiProviderProps {
+  children: ReactNode;
+}
+
+const providers = [ThemeContextProvider, UserActionsProvider];
 
-interface IGlobalContext {
+export const MultiProvider: React.FC<MultiProviderProps> = ({ children }) => (
+  <>
+    {providers.reduceRight((acc, Comp) => {
+      return <Comp>{acc}</Comp>;
+    }, children)}
+  </>
+);
+
+/*
+ If you want to add provider by props:
+
+ interface MultiProviderProps {
+  providers: Array<React.JSXElementConstructor<React.PropsWithChildren<unknown>>
+  >;
   children: ReactNode;
 }
-export const GlobalProvider: FC<IGlobalContext> = ({ children }) => {
-  return (
-    <>
-      <ThemeContextProvider>{children}</ThemeContextProvider>
-    </>
-  );
-};
+
+export const MultiProvider: React.FC<MultiProviderProps> = ({
+  providers = [],
+  children,
+}) => (
+  <>
+    {providers.reduceRight((acc, Comp) => {
+      return <Comp>{acc}</Comp>;
+    }, children)}
+  </>
+);
+ */

src/context/userActions/index.tsx

@@ -0,0 +1,37 @@
+import { createContext, FC, ReactNode, useReducer } from 'react';
+import { globalComponentsReducer } from 'src/reducers/globalComponentsReducer/reducer';
+
+export type IGlobalComponents = {
+  chat: boolean;
+  createPost: boolean;
+  addFriend: boolean;
+};
+type IUserActionsContext = {
+  globalComponentsState: any;
+  dispatchGlobalComponents: any;
+};
+
+interface IUserActionsProvider {
+  children: ReactNode;
+}
+
+export const UserActionsContext = createContext<IUserActionsContext>(null!);
+
+export const UserActionsProvider: FC<IUserActionsProvider> = ({ children }) => {
+  const [globalComponentsState, dispatchGlobalComponents] = useReducer<any>(
+    globalComponentsReducer,
+    {
+      addFriend: false,
+      chat: false,
+      createPost: false,
+    }
+  );
+
+  return (
+    <UserActionsContext.Provider
+      value={{ globalComponentsState, dispatchGlobalComponents }}
+    >
+      {children}
+    </UserActionsContext.Provider>
+  );
+};

src/pages/_app.tsx

@@ -1,5 +1,5 @@
 import type { AppProps } from 'next/app';
-import { GlobalProvider } from '../context';
+import { MultiProvider } from '../context';
 import { SessionProvider } from 'next-auth/react';
 import { GlobalStyles } from '@style/globalStyle';
 import { AuthComponent } from 'src/global/auth/AuthComponent';
@@ -18,7 +18,7 @@ export default function App({
   getHeightPhone();
   return (
     <QueryClientProvider client={queryClient}>
-      <GlobalProvider>
+      <MultiProvider>
         <SessionProvider session={session}>
           <GlobalStyles />
 
@@ -30,7 +30,7 @@ export default function App({
             <Component {...pageProps} />
           )}
         </SessionProvider>
-      </GlobalProvider>
+      </MultiProvider>
     </QueryClientProvider>
   );
 }

src/reducers/globalComponentsReducer/actions.ts

@@ -0,0 +1,17 @@
+export enum ActionsGlobalComponents {
+  HANDLE_CHAT_STATE = 'HANDLE_CHAT_STATE',
+  HANDLE_CREATE_POST = 'HANDLE_CREATE_POST',
+  HANDLE_ADD_FRIEND = 'HANDLE_ADD_FRIEND',
+}
+
+export const handleChatState = () => {
+  return { type: ActionsGlobalComponents.HANDLE_CHAT_STATE };
+};
+
+export const handleCreatPostState = () => {
+  return { type: ActionsGlobalComponents.HANDLE_CREATE_POST };
+};
+
+export const handleAddFriend = () => {
+  return { type: ActionsGlobalComponents.HANDLE_ADD_FRIEND };
+};

src/reducers/globalComponentsReducer/reducer.ts

@@ -0,0 +1,21 @@
+import { IGlobalComponents } from '@context/userActions';
+import { ActionsGlobalComponents } from './actions';
+
+export const globalComponentsReducer = (
+  state: IGlobalComponents,
+  action: { type: string }
+) => {
+  switch (action.type) {
+    case ActionsGlobalComponents.HANDLE_CHAT_STATE: {
+      return { ...state, chat: !state.chat };
+    }
+    case ActionsGlobalComponents.HANDLE_CREATE_POST: {
+      return { ...state, createPost: !state.createPost };
+    }
+    case ActionsGlobalComponents.HANDLE_ADD_FRIEND: {
+      return { ...state, addFriend: !state.addFriend };
+    }
+    default:
+      state;
+  }
+};